{"_id":"@material/notched-outline","_rev":"1679-c13a8e19bc2239949ed84c6d1459f57d","name":"@material/notched-outline","description":"The Material Components for the web notched-outline component","dist-tags":{"next":"4.0.0-alpha.0","nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"versions":{"0.33.0":{"name":"@material/notched-outline","version":"0.33.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"Apache-2.0","_id":"@material/notched-outline@0.33.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97a240b3ffe96c7f03b483a73127b249b0eb8b2e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-0.33.0.tgz","fileCount":12,"integrity":"sha512-SkDbOT4w5NKs/+V1VtxPDbOyjGgIqLtRLFKQO77Et6whjAYzSFSSMmqBpgX2kXQz3KRA0N408NKSH1J5jmufvg==","signatures":[{"sig":"MEQCIC/q3uTo0JFgp/QxC2TCPnupQvHG7x6boa/YdwBgvomAAiAGL8Zm+gvgGdhk0zt/stKvkOcjW95dVXlylTVKJ1BKBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58993},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"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 notched-outline component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.29.0","@material/theme":"^0.33.0","@material/animation":"^0.25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_0.33.0_1521477606850_0.7490885822858675","host":"s3://npm-registry-packages"}},"0.34.0":{"name":"@material/notched-outline","version":"0.34.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"Apache-2.0","_id":"@material/notched-outline@0.34.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62eee7328764f0b4a8802c009d59b6b48876c18a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-0.34.0.tgz","fileCount":12,"integrity":"sha512-MNqwFHfORIovmuM/y5UcbwZEESYrsvoysulRBUAAKtgHZlZXag95PyqI6VxVjXOJ9VAlDDNNM5ZMHvJH9Y8LoQ==","signatures":[{"sig":"MEQCIF00iAjJ8/ENPBqlkzguvUSr90BQo3ShXOVmYuudKZF7AiA9TXbCPRjxe+VOfQYzoZbJ0sZ3aXPHtmH3/ms3WldGsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58542},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"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 notched-outline component","directories":{},"_nodeVersion":"8.11.0","dependencies":{"@material/base":"^0.34.0","@material/theme":"^0.34.0","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_0.34.0_1522705920024_0.4188018818750079","host":"s3://npm-registry-packages"}},"0.35.0":{"name":"@material/notched-outline","version":"0.35.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"Apache-2.0","_id":"@material/notched-outline@0.35.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df821f007ea84bf6d67859a2b7bcf5c44a248911","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-0.35.0.tgz","fileCount":13,"integrity":"sha512-VXng7P2E0FPbhmoe0afSnKmHocrwOxVHSaEnt46lZL0nT4O19JISprgCWrFHblbhq92SrppHdS73PHzxgfI9HQ==","signatures":[{"sig":"MEYCIQCxxVlD7B/Ga0ChN67fG+7lS9Aq8aJGhUezJjDGzrzTjwIhAJCjw5bTiUg9alVGhus29xycS5CpvJKM/8TdI/AjIC6Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":59875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDgCRA9TVsSAnZWagAAOv4P/30rOpyWMbIT9uTSQUt+\ncdDiR/bWFwHX/w7InMgoxctAzZsR8OU7pZExNjPJ3lpYJdDtdBYCYPrFZhgL\n1H0HqQ6XGl7B+0LsRfQMqKYUozjk2/50IPPEgv7Bbme792MikOjwcN7pwowi\n0/Oq5Z6yFgW8jIXUwTywUB3gSKG6FDMFckawydO/FImF/WfZGzwYfW7nAvtm\nkk3uFaHBPMEqH/Lb1cUQx+WsQqy3bYvJ4S3AqP7dR/dN0lTNwbwjF239xnGe\nW8TXPAkDxV0d/oxaSwxy67/pJaWfp+ui+xLXkWzBRkADrpXIjssLWKNHqjyV\nrrklZJw9YM+gsqG7RXT4hNIqzB/GRLvWCR5FcwYA2g90Is1hQyTRyOWNLZPl\nrCBgLkh45rWBW1t+DnOxr/JJ9iw2fmbInGrMjfK4N+7BMD2eodvaKfyFaMZg\nfYTRVxVmhR+NxsxU3Ltn3Cx9XG6wlKo96E1iH1SJA2+78xMOIy8bQxdzs/8G\nXwnm7x4+g7kw0iw3tLiUNVZ30csGBNPvtwFDOPCAA7cRaUyfnb8lzpY5oNzs\n+9IYx1/ZHX+hmGafdxKTV1/E6OJyVtPJd2+G3mo8hxy+GMc+QamdB8Worwii\nL8UIp6Vf/3aAtHSDS9Vm5Xb7YmHYT6J3NnVJFCGglfiDekye5aXsdLDYF7Q5\nzlg4\r\n=3UrV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"\n\n# Notched Outline\n\nThe outline is a border around all sides of either a text field or select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Usage\n\n### HTML Structure\n\n```html\n
\n \n \n \n
\n
\n```\n\n> For usage within a text field see [here](../mdc-textfield/README.md#outlined/).\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the SVG of the notched outline path.\n`mdc-notched-outline--notched` | Class to open notch outline.\n`mdc-notched-outline__path` | Mandatory. The path of the SVG of the notched outline.\n`mdc-notched-outline__idle` | Mandatory. The full outline when the notch is hidden.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outlined.\n`mdc-notched-outline-idle-color($color)` | Customizes the border color of the idle outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-corner-radius($radius)` | Sets the corner radius of the notched outline element to the given number.\n`mdc-notched-outline-idle-corner-radius($radius)` | Sets the corner radius of the notched outline element in idle state.\n\n> NOTE:\n> Because notched-outline has sibling elements, you need to call the \"idle\" Sass mixins with parent selectors.\n> Consider the following example HTML:\n>\n> ```html\n>
\n>
\n> \n> \n> \n>
\n>
\n>
\n> ```\n> In order to customize any \"non-idle\" part of notched-outline, use the .foo-line-ripple CSS selector:\n> ```scss\n> .foo-line-ripple {\n> @include mdc-notched-outline-color($fooColor);\n> }\n> ```\n> But in order to customize any \"idle\" part of the notched-outline, you must use the .foo-line-ripple-parent CSS selector:\n> ```scss\n> .foo-line-ripple-parent {\n> @include mdc-notched-outline-idle-color($fooColor);\n> }\n> ```\n\n### `MDCNotchedOutline`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number, isRtl: boolean) => void` | Updates outline to open notch in outline path.\n`closeNotch() => void` | Updates the outline to close notch in outline path.\n\n### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`getWidth() => number` | Returns the width of the outline element.\n`getHeight() => number` | Returns the height of the outline element.\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setOutlinePathAttr(value: string) => void` | Sets the \"d\" attribute of the outline element's SVG path.\n`getIdleOutlineStyleValue(propertyName: string) => string` | Returns the idle outline element's computed style value of a given css `propertyName`.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number, isRtl: boolean) => void` | Adds the outline notched selector and updates the notched outline path based off notchWidth and isRtl.\n`closeNotch() => void` | Removes the outline notched selector.\n`updateSvgPath(notchWidth: number, isRtl: boolean) => void` | Updates the SVG path of the focus outline element calculated based off of the notchWidth. The notch will appear left justified, unless isRtl is true.\n","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"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 notched-outline component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_0.35.0_1524523231128_0.3581562814022956","host":"s3://npm-registry-packages"}},"0.37.1":{"name":"@material/notched-outline","version":"0.37.1","keywords":["material components","material design","notchedoutline","notched outline"],"license":"Apache-2.0","_id":"@material/notched-outline@0.37.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06a2a5b99410f7f3b4ab4e7a3f1c299754d72c6c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-0.37.1.tgz","fileCount":13,"integrity":"sha512-IDaVgYWzzyYwOqjrhX8cdKFjBRnQvukwJNaBqlGv/Ikc+q7Q5UQLNGKQijYlCTR7lrzifIT3z6KpTFmYivbfDg==","signatures":[{"sig":"MEYCIQD08G0bdxRuZzhtBKUQdshlX/aEd1PPjr9PYu/i7ojHTAIhAOfm6ku+EOPV6M5lmj1sO4CH8+uxSEYXFdf119jZShL6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTQvDCRA9TVsSAnZWagAAPisQAIb3hJQ64tKAdDQ8LQbD\no7lzZJV8Xw5546GAeO1UTIeaCaMeJbQ0xDoKJo2+53Sef4Y8+ELngzUQwOYE\nVd5P47za2yU1WDcttJtZI0yAPgKrHJIXMprHoKTrRtAwFlLh144+ijYFZOYK\neXA4nsosZzZFvtGX2e52IuizJ+X9/kj+ajSZdmvqFi7dLUVRxUqTezBxVMqF\nShAENUQK1Cn1zvxrr0YviaR/7atKHhtoHgikkS8P7EEg7hbH6Hojzfup2k+m\nEJ3xaYM7cTNz1CU8Pv5pQZ2TXWv7PRCRA9yZlciKpgvm0ZlCZuVsIFBLR/2M\nvfGeYjLi5QhocwYsY2XJiUekrlH1bYnt5b5mU6Ya8OuMWI9L8azZlEwhChpH\nceOWSNudaLr2DhIwbmwUusA4pSKApFT8YTPl6ZmFzaIxi800XAFPolAbEK2k\ndVmONdY+7gqjOk1eRQgQSIMOlZTTCd0ujDJ76c0C31d8Si6A50pvYVJ+4G2P\n2Z1eZaCV45AfnLOL/Hjd3ArKUAll91QBswSamjpXxmJmzzMbS4faRQyDd3YA\nIxpmcLJ2HzxX/goOiLuKGg3Rh+UM9vHg960aboGP+NGptCck9blryGAwbw5Z\ntzqviwyU+F2cCMuUk3PhfttzqzFNtnF9t0NjYhOaQfoJRWsVyyB19yJrUIMN\nuiB2\r\n=Et5/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web notched-outline component","directories":{},"_nodeVersion":"10.3.0","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_0.37.1_1531775939174_0.663250272338876","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@material/notched-outline","version":"0.38.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"Apache-2.0","_id":"@material/notched-outline@0.38.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75ae05a79cdd6a3761d8ddf3afd763c1450c22c8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-0.38.0.tgz","fileCount":13,"integrity":"sha512-XDTVXyQ2TR/9Qa66F1UYBSbf5f0IVFJFjiF8TXyIkoqrP6l7Wauj+UvJpinwCPk/6KoZtj29sh6ToGQiHdVIJA==","signatures":[{"sig":"MEUCIHc58D3Qhh50WdsGKCxZKSJ2j/l3Dp3gnIJkuCaAes6YAiEAh1hoszeCSNENk8WQmLnPWjJ9U+cyjp2MYUJ7bSeBACY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0WPCRA9TVsSAnZWagAATkAP/2mcm/UvRII1zPm1SqJL\ntdDN2yLvksMA+gz9hz4+kM/cslrCGu5IFCnabCfQfCJvqlxi2zugirdui9/b\nUOMC1Vt/td1UeXcCO4ilqG5xl1nmwiYS798Mc2R8ADQhedAbKwOi/ldKCFmT\nwOSZqFEnrWxUJndxdiAi1p0eITQlGbjfF0EyPSU8SND5KthaMRlsx81d7D6P\nZcabzoXytloPI4tqIExfZlsCL+kXYHodY2nsBsRLJ3JMpj1BDytKkWtxl01U\n7UiAe/oEkE5tIL7KwvzcXtE8wCcXJfVQnWXpU5Q8FT96uTD86xE6FHe60KB9\nMMTpYJidYV6W8WySRCQ7mah/6SmOO7Cl8DLvpFMSoctRpFyNzkDVnH+EjEKt\nBf6Hukuwvq5aJRjpcvE/tth0KossOgfTt3c1QIr2A4AlvhujT3K7RGE0Xwjm\nZ/Bl9vBYgJLgjTY9z9VW7xvnjWHYiAvqjfFkcBS3v0CIIwL6IUBpZJn+GJAW\nzgN2YNcBDQDKnOH3j2SW+WOFv2h3KlSsBuo7eFKfm2LZq4/pGyZMUfxjSV8Z\nlOjsVC3/JofHBLBD2qrl57bWbLloYfEjFDqO3xsEw8ruc1onVPjHBRtQH9wA\ntBlv3zSGzyseLATC4+3lYikMDFZ4HDiBl8CIOQg/Pb1tY0/16jvr3RvlJ+CO\nPmXP\r\n=tpwB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web notched-outline component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_0.38.0_1532970383508_0.27905436529150784","host":"s3://npm-registry-packages"}},"0.39.0-0":{"name":"@material/notched-outline","version":"0.39.0-0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"Apache-2.0","_id":"@material/notched-outline@0.39.0-0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01ce456ef790332355728b3af7bc6d05e0f9a057","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-0.39.0-0.tgz","fileCount":13,"integrity":"sha512-n2GVIKnIlGUwibSefL5FnejZ84w0zQ37hy76QkFGD9yqpC5KD75tL3h8CDVn865HzHeVsKfBF7M7Ie/WuPYWGA==","signatures":[{"sig":"MEUCIQCvBAOclFCVAxXbG15kOHWcI/T+WSLH0MWhfO6PCycG5wIgbpZ6eIuAfksuqeDyDqlFfMBUxN+qJ7SsMyqaeytUfzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZUfCRA9TVsSAnZWagAA4M8QAIZT8uI55aJ3FCLcYzNR\nJ7D7vzrygINHTzraLLuNGfdRpcLyt/Kx4G0XIfoMq16mSJk2aeL9qxMCERm9\njDJW+86ZHu7ilOJ+b0y+LY+ND1wLnM0aLjkyMaQZ3VQ3bGrFWsur+Mm4sDaK\nIM3SDFxMM2O28/HUEAK4lTjCY0j21N+nVop3XFflupWmiAQl8Rnu3V45rftJ\ng4leL3R/8GPibnsU3rqKtF/Vhs5eoOO+sWkuCaZrE60mhDgqvIej2hDkWeIV\n5EXONTONqVxxUB8kbVOeQnMlhQpjGXoCt9dXsItwXj3VHmYhdEYORvnbIiTA\nJewp5lWBHJo1vyRyMtM30bAHa3SPESZBkNzdAQAs3TKa5mLCYFqiir2SI4lX\nIa/mZS9gI4HseCsvMq7wtJvRO9HNljNu9u8FAKyxZt7LFkjco4C/zwU5iYCX\nKyQh72aTcJVlXAWaO7RSX1cVVUmBWML57MadlaFpo+rALPl1bfpuklxqwz0t\nGvkIUiLA/oGduA3xhU/scadfDfbzEdOaPNhP5I+14hqHGQZL4ii2iyMI01QP\n//NhCPaH44jP6/yav8G5Cy8AvkXNeASVkhx9CR9JOVgfOiEexWudGNL8Ibol\nF7qTq444SYYzLfwNmZbG98mrtNFwRr3spT5pPfLOMgFWS6FMMqbBi5uURMG9\nd6JG\r\n=/HTE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n \n \n \n
\n
\n```\n\n> For usage within a text field see [here](../mdc-textfield/README.md#outlined).\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the SVG of the notched outline path.\n`mdc-notched-outline--notched` | Class to open notch outline.\n`mdc-notched-outline__path` | Mandatory. The path of the SVG of the notched outline.\n`mdc-notched-outline__idle` | Mandatory. The full outline when the notch is hidden.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outlined.\n`mdc-notched-outline-idle-color($color)` | Customizes the border color of the idle outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-corner-radius($radius)` | Sets the corner radius of the notched outline element to the given number.\n`mdc-notched-outline-idle-corner-radius($radius)` | Sets the corner radius of the notched outline element in idle state.\n\n#### Calling Mixins with Parent Selectors\n\nBecause notched-outline has sibling elements, you need to call the \"idle\" Sass mixins with parent selectors.\nConsider the following example HTML:\n\n```html\n
\n
\n \n \n \n
\n
\n
\n```\nIn order to customize any \"non-idle\" part of notched-outline, use the .foo__child CSS selector:\n```scss\n.foo__child {\n @include mdc-notched-outline-color($fooColor);\n}\n```\nBut in order to customize any \"idle\" part of the notched-outline, you must use the .foo__parent CSS selector:\n```scss\n.foo__parent {\n @include mdc-notched-outline-idle-color($fooColor);\n}\n```\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number, isRtl: boolean) => void` | Updates notched outline to open notch in outline path.\n`closeNotch() => void` | Updates the notched outline to close notch in outline path.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`getWidth() => number` | Returns the width of the notched outline element.\n`getHeight() => number` | Returns the height of the notched outline element.\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setOutlinePathAttr(value: string) => void` | Sets the \"d\" attribute of the notched outline element's SVG path.\n`getIdleOutlineStyleValue(propertyName: string) => string` | Returns the idle outline element's computed style value of a given css `propertyName`.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number, isRtl: boolean) => void` | Adds the `mdc-notched-outline--notched` selector and updates the notched outline path based off notchWidth and isRtl.\n`closeNotch() => void` | Removes the outline notched selector.\n`updateSvgPath(notchWidth: number, isRtl: boolean) => void` | Updates the SVG path of the focus outline element calculated based off of the notchWidth. The notch will appear left justified, unless isRtl is true.\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"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 notched-outline component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_0.39.0-0_1534432543158_0.9753586768820302","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/notched-outline","version":"0.39.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@0.39.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"487cceba21e09285e6477bee2c55d3ac0b611a00","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-0.39.0.tgz","fileCount":13,"integrity":"sha512-GarWl50vBNPEGJfEdG57xDDwiNPiNzASwBmQEiij+NoUxYomtV1BWenFrWmytHXZU1OYwFyTlkxhayNXQt8CyA==","signatures":[{"sig":"MEUCIExZHGllTfIskWG+QCkYuumxzMkVFouwqFhkJsBjf/LMAiEAmCO7WmXY13tOv/UG0Vmlfh6PDpdEwD0bFPrH6quqib0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDeBCRA9TVsSAnZWagAA5pkP/3bxwQVeFwWKBdGhpZCw\n50yWUbnnBXMmpj6TSuXYx3jCebyns/jJewaglInmJtoxYc3ZiMMLI9606cZK\nZboJtYbrMWXh5h41rIaWlFBLr1p7DPMtfVrt+1J9mjlazIeTaBFB9Ayv5EoM\nkAOrvlQEvsSe8ixnuwGaaYe7ID5RGfdpmE3FI/25D8vFpnfaVR0ikJFOYk6J\n+Lc35JKvCQZoW1FGzj7gbkxzIu0DYL2eLVgd2b/iHfLVcN/bawPFRGyEkhQv\nYrM0qnFFYAs0IKpL3DlePQUndWo4tgDHBC0kVlcY6Vqn5vlIVwBNOzm1TtQO\nZlvth+brQUAwxYXRUKjymlkrFeffXSSQmP8rENYkEF1wbA6qgyB1KvkYCdiX\nSsr3SKJULu6QsrPcFPUJlJ+tJpR8zAEnImkOGkVbfi/pnVYMuWkU7qoD8oLq\nRObIw4SjrAmfUEu+fAlo+5WbOCXW/1NCRCm7KeY/qbQ/Ns1B9lF7RwahlhHV\njgisT6eiLhcg91OK2ul3rmxLRW4uiKkfpiOtSQK6G5hiy4cCbKvTE+EoOHqc\nlCJ1vISXWbnJqv/ofu47yewJmJLjgpXdwmHoslSVG4wVsUhT6PcR1Cq1ZLOZ\nwJ46fDnY7hV8YJocbEBCxkZjY1ewUx2WbX6I6AZ9wTNEO66VsM6hvPn4OJsM\nEogM\r\n=6wy8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web notched-outline component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.0","@material/base":"^0.39.0","@material/theme":"^0.39.0","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_0.39.0_1535391617293_0.6316874741910261","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/notched-outline","version":"0.39.1","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@0.39.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd6d5adc2a0c5f63bb1ab4e1db7d43f37e488fa9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-0.39.1.tgz","fileCount":13,"integrity":"sha512-EONvwh31IMeTChz6eqg/rMndfWaRTd/tqjR0dXSaimu4NBDBnPnUq6A4vVhBuAFFIjHU48Jw6HplnfqqDRMN1g==","signatures":[{"sig":"MEUCIQDmlynC7Ys3dUdUlH8XP4S2rW0QwLI4jWBVdOKAIC4H0QIgfEWYaBmY1g7KAicMnpcXMtWjGfCMswtu/DslVDFOrYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibTNCRA9TVsSAnZWagAAYRgP/RzMUxemQo8obWQfOT96\nCV2y5PQOdrwKJzyJUDj6vu+lrkbKmUkze9ACFbMjqUuYilyzqfcYirB7Tqw2\nFDgDN+C3naMVJBoO+QbttImuV1Tfqs6kYTlio1FTj15Wa/gtc9kVFyWEzUqo\nNYIWJGVByP+5NHf6vAnD++tPfhOokEI1kRKIEFyvhBP7Pj9O23R0Yf13SaJg\nIsWlm1/24TnmrnrWmuO/ALwgLPbmdw0U4t764CiKOk9xlnPMm/4dru84BrmR\nGx6MfzOYPjvBpSuJcoeopTzXsB8gWgV1WCpmX6VAkmJGTgD5drZAsVuz5M9/\n4Re1+Lmz0AjMaMXSzIfXD3CYqAdHkej0YAAkW/XOShImWLnpcENJH/kogqr8\nn8c9MFnwyWspDpOIsT9BuHrq19CkFBhqNKigaW5V7JiKH11W2myndm0tPNAd\nFh2GXzAVRqUGC6rqRt+2ofQmE9Y2hkyGTsVsftZ/s3LQzW2bhGFONwC5uUAe\n8kPbNkBUAIQH0YS6fUCSdlUwZry2RKWLzPGIsI9W+AnRNCQheIq7CcKnr/PU\nM9VARGt/WL7L3M0liwDxJv8YqB0Z5iaNIYlU/XohOlfqocO8uhA1HX3KigPi\ng8jRg9Dht0bh747koFGLoJsvbmPKFH6Fz0W31LJ+GI/2V3qkcbkhriPDZGxj\ngQlJ\r\n=KwIj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web notched-outline component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_0.39.1_1535751372902_0.56315866496699","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/notched-outline","version":"0.40.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@0.40.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8c1b8569d1df503c7a383e03e5486fc4ab9e6b4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-0.40.0.tgz","fileCount":13,"integrity":"sha512-a+18JRtvDWjr353fo5ovoAQTIxkUsCBEzGDY2GR5/TIQOXMajEfGbfrP3UnO4QZpdKX2dwDq5t8ESCNJSje/aA==","signatures":[{"sig":"MEYCIQDsJI2mev1aGHDySBdo4C18lCXQNrEqxLG4HMGPuSpnHgIhALx3mPvcRR5TKWNeHinL+rt641YmUZ3gzAZj6K6MKOzN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqUJxCRA9TVsSAnZWagAAIdkP/3+7TP5fZjEBkgPq6kvE\n39/De2IrUY51xKGx4Jnfy7zuAZ8bKPmvFs/JMnKznP7JuGZ5q1CAaaoexw2b\nU2twxP8uXZP8nQOVduDyX2bLVWQ7TpmFDPXd3X4mC6OG5FJt/aRY2ppVj4gt\nWqjx4B08Cwa1o0QNLZRdcwZuREM5eREd6dFt1GqfI8iNPQoqz5iQn86I4SFr\nksvKENLJ3strCrLMYD+/BebA5eTzJ460P8jjdFm3y5RZZQk5JacWSm91wV2e\nGWuou0uceO4z0RBTyvFcKOp7U3Ymtx+BbcHbDubPG9i9BLcpfc8uwasLwYff\nFuH5YcbBoGFhoU2/Q9utq2z5h+XubEpkY4Gj2cYjK83PuUva/WdxyOyJHDqI\n8fUfuQIR4DUhVpSPh44YO63qsGyvpYKHwcw8vCBqsmgOMdDkYg1pJflDgmfy\ndM+K00pOUA+RrIHCPcuoM4iqRzvWSQZnnA5b8GWu5TmIMMLITpHYWLNVTXdP\nyakkxeR7vVHeqFguWH2p8zQ8YETNTyOzksZ5ighN3pAJfnFYGRKHd7re3U9C\nkf8Hrbxy/h1nayeI9UmFyzZ/FSY4Lm+8ThhQGXByQhw0Luu0WvOLVkfqbdK0\nNw58TGGgc1x9BpPiBNV/gqd/jxjxFbpnCVKzWViqjfkbj/idTj7gD+SySbRE\nW+8Y\r\n=bspz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web notched-outline component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/shape":"^0.40.0","@material/theme":"^0.40.0","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_0.40.0_1537819248763_0.9867347527283743","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/notched-outline","version":"0.40.1","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@0.40.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"544ee4f06adcd9294885c08a488d2657e7d65f0b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-0.40.1.tgz","fileCount":13,"integrity":"sha512-b3V6/G7TW1P21Frw3JxB6Hc6k7MbrmPSynGuVUPLmuX+eSUm6GhxOy0rK4UzlBZumDnyyJDw+2HvJd1BYoOgeg==","signatures":[{"sig":"MEQCIHQ3Hx35vZjY7RtTcfn5YsVYx8ff2xd0iV8Cw67NfT+cAiB4Z2P5qdK5KQjE3mVXkR4DBJZopD8DKsxrk1dudsdzfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8P7CRA9TVsSAnZWagAAc4IP/2RnZrks8bGU/i69IBB0\ntA8V3c4+HPN6YWe8cH3ClLxvbsALZ66oWy07FuirE1XyCtdbJntaVdMAVjYK\ndxOsATsYFeVFFEv0Cyazjb6oFbREd0snXZ1l2BZgnvO6rIuCZ1hA27QGvjlU\n8mUHAEC2/5N5iR1R/+Qz40xzwcqrE3pUiJHig+fjUWGo1BF6lLP33x1qobqb\nv5+XPCT8mPaNN9oGXkGP8COy+KIjxbH6EPzCkQCuudsmzbvkAgaqAl+aj4Fn\nP/9eIATvSGwzz4fvdhnEZXj42428sV18cqSdyJc+pbpj5fOf6x+NX/QB66RV\n7D0bnIhb1DOjGfGC03LO4+ai/+XP3bePSnHSHmAKP0L4/Q8DGpwJRPcNFK6+\nf/6BhOskEcAYANVefNPJoKqENB0riJmNmM/V7FIwSrXIPb7m9wbyreUx8kTN\nU1ac+OBAzRf2VkcG3u8ZyIqzdJuarFAWikDqFNkgzUGJ1C3VQ3q8V354T6zv\nJygQsrkXO0BHI3Fr9UgFAE+OD+lv9zbkOREsfZkr/UhDJH7CH9NQ3Z7ZC0Pw\ntMNF6gq3n5kRg7Yl4rFDM46XUonm3lQSUQX3+eRxn7DLuE4ieGYsj9vwpAwI\nKwlFAcH943kKj4MhjSYOiht9HbbVvmYZyufWAlgJpQqxPeZH9rG0QJ3XJJJC\n4d79\r\n=ircT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web notched-outline component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/base":"^0.40.1","@material/shape":"^0.40.1","@material/theme":"^0.40.1","@material/animation":"^0.40.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_0.40.1_1539032056939_0.25303912669288775","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/notched-outline","version":"0.41.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@0.41.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b84bc710032fd9809fb21a9233fe3e71a142733","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-0.41.0.tgz","fileCount":14,"integrity":"sha512-nQBkOXvkd5G9FeJ9UuecZh88WRgTsnGVvfj7UFJZEkvkzZwLBGUiJS6fF9FYraih3ZFgmphdbJxXEd9af3cqyQ==","signatures":[{"sig":"MEUCIElg+Qh/AjsdIQKF+FlN6sbAV1gE0beYAAj7tgaRY3QoAiEA7lDMZA1B4Tq7xVotPqcqZyj0h4hr0p6HNwdl0/+Qp+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":71957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12vfCRA9TVsSAnZWagAA/F8P/ipRHTHTz4G/zgEXJmQe\njXxDsI5FfQA2yrSYGEqzDCAlOuhWIJAZy8NCA897aBPPeFR7nVCORjPTlYS/\n4+VsxXbuUF1Fma1bfNcDM0vvf+q3wG+N4thVjusqwTPDBgSO611/q/arC6mb\nulCVCjFVpmJ1pAG87HUj6CbJFNgc8vazbrPC+gVT2QWKzPrZdQIG2/WfR0O1\nwyW+jYrhNH9AGbdHHm+sSQagsgMDksgpbJuE+bhjZ9zqBXXtk6DNzSeUO2X5\n+R8rTDBT1gkuPjQGI9nUmFxgNVLWK/CzC10rtcBEAkj9jGovvks60tshsECF\nGa84agc0CZo7NoJZmQpu1q3qiMfmCQOOvstLHzZbkzkt3GiFVHAgabFNzLRX\nYRA4dcq1CJN6I0F9J/3adoi3TS8I8HRgS6eF7ZsD+jcmFM45P5/EK6EQ9qDZ\n2lbqlbSA0AtcqpBl2A2ka3fiNWCQvJcOqzKT2hgZT5FPL2ejyYtHlsqw5v39\nf6krVLzQtsicsK6VLfFq8A2jjhgaSGjbI3Z2tSy1VugB+CxFr8l3JBWRH2/8\nIbxFDCUBcO6Lcov93jtUrTvwjR/LHMuJWQjSQDS9vo/ebMuwc6lmXivpI3t9\n2LBdUrkK4Uc3AAV1w2xpjrOQfEidYmHxKZIROJqbiK9rWGMmDSLtRz3BIjL7\nMEPB\r\n=1AR9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"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 notched-outline component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/base":"^0.41.0","@material/shape":"^0.41.0","@material/theme":"^0.41.0","@material/animation":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_0.41.0_1540844510597_0.3382762706733031","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/notched-outline","version":"0.42.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@0.42.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"326a76966afd84ea16f531cfab1b8f6a27c16e98","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-0.42.0.tgz","fileCount":13,"integrity":"sha512-O3+ffqIwik90dchzJncXSPnZL1hrq4ovkTapTz7erqjx+qweDWLT9a7d6dJ0E77Xr5VoWMvPsFeJkrviW9wltw==","signatures":[{"sig":"MEYCIQCDXYhE9WAAeWn+hbH46V7GVWjjca18oSwrdDODiJP95QIhANba78eY/nN1J9qrraYexwkcJYSk2yBoAg7pCYXec9iy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":90972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwXTCRA9TVsSAnZWagAASooP/0m7FxTWTGlb9bQANkBz\nQZU9JPpVQMk8xg4N6QSNCr0IwyPFYLvrZUiqlxQpxgO39KRifyU2qTH4odLc\nHoxVDbQryC+jVuXp45GF0n75J+hKJvdEi8LSg4lFn6E8d329W6yj+G/FrVPu\n+4eavDKWJT4jw4G/2Cixn8wn4XFilp0/+yu4ydkWREDmnZ2QN8U05wMetZz1\nC7+c4xrNQ5Iv/H9yALJI/eXZ+llyz9EkC+xH8yqXqv8uehfWN8CHAWO+SkYU\n1/mu7fI6kqKaJJYl7gaS+PC/nwrumOVYnC+DQd6aoovxddpkIxWE0zsRsErt\n0t3xRElKGEB2hUEiYMpMRQt0MxGjSJm3OXzFqySw6kf10iJ8+4nU34ZMfLLV\nQFvuiqR62FBGLUivtU2+s59QXdjsvRArPM8tTArglk30uMmm0XAQOXdI3vlH\nMyp9fZ9ZAELn3403KGHpNSbjyiF4WifKPN80tjbUJ8UijXTMHt9PrMgurLjK\nCn2dN5WSf7em6Yh4xuUMX5HgvYJOaeFwL0NnB3ONz9cJcjCgBFj8OxEeguh5\nALGVlEnDJCPeFbOW/VHkxlhfvQdB4tyB/G1B7W38rqFGf2WXP6j9R89RxA9S\nuZlarrsozsu8QrfVPsesBO25hs/L64rkxEBxNqfhZQ7biVAAJSSwgw79DdLZ\nho3a\r\n=X76I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web notched-outline component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/shape":"^0.42.0","@material/theme":"^0.41.0","@material/animation":"^0.41.0","@material/floating-label":"^0.42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_0.42.0_1543964114955_0.5474771829164813","host":"s3://npm-registry-packages"}},"0.42.1":{"name":"@material/notched-outline","version":"0.42.1","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@0.42.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"799e90e17a3ab5004f544f057a2a769634de58db","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-0.42.1.tgz","fileCount":13,"integrity":"sha512-4JQEIUi5Dt+wbBaITNks4vgJ1PbuHkACLMxlXGsR4gj0Pcp84IZHeMVCUdj46oJf/h4zsT9jaLiLeObGXRiSoQ==","signatures":[{"sig":"MEUCIHEbdquiqAEG6oxkQXTMioRR3npWqh/rFS9U1rdjphzuAiEA6sRjE9bdmlxMGvOt4Nl1UPI5pzrumQ9J1z/aMU6wHgI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":90928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGCJWCRA9TVsSAnZWagAA8mEP/05YQ3+HVxaCLRSrSH+W\nOZMCntnrEMvX5hlUhIKqoC1M4p/A0iL2qpQBx88yuCDSFBJ8fs8JLCtVwvA5\nRRtTCFOpo0U14QWpsPurcNsMHZZFEr+pdLp8m5gERJpPsejOvLTetJ3l4inu\nH4laPSIs/nSM7F3ouP7GW+sYDGsmEmD/2GJjQ3LAsXJ7zZXEodwxdv7EfnM6\nRkeKemWIT2dBX/QlwKJj2t09W+MtMJmujeCAkGE5Tkk9w6PyH6Txrzvhz1xk\nd/ooya2LngZIN/ipnm7E0B4JAyABSX++tuJEahgTmVn7S7VYmheuA9BerPlF\nlbHLQq3rRDtMLE00oEatv3eI+bG2OC//OXjUbB6wDIl68YVxtbNUG89y8zAF\nEyyqV8yFai2Y5exPkz/n1aLkbUiETOv5oMFNvVk+r8qsWpKYfDoYG9eA8YrA\nDeXejJbU4gvxUI0LQJx0z/0wCR2+KF6jIQEAMHk3RnLov8N6eWOoy7LWLDh2\nvBR2cERPNxisnBshoqaT7MHKrzi9GP8TI/PIsSzBrKwZRPvBlSPBksMc4t9x\nNSCumGDfooDQ1i3nCv0kNp1kGztPaYcXIRtIcpjCIh7l8exR7GWu77ASE1J9\n8cW7+HyLlDacGm3oI3SRreOYOf91uMTXmpMVzBvA2r+BL36Bvd4yE3YiaiXX\nsJUc\r\n=HXsN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web notched-outline component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/shape":"^0.42.0","@material/theme":"^0.41.0","@material/animation":"^0.41.0","@material/floating-label":"^0.42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_0.42.1_1545085526208_0.7468517690909278","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/notched-outline","version":"0.43.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@0.43.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"375bd8ee847fa85ba5a479a2548455ce4a935dca","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-0.43.0.tgz","fileCount":17,"integrity":"sha512-C+/vUK9P1oHf/8eoIaKEWSHchRTFqHAExfyqkMrBW6T2zg3mIoGR2pWwX69bUuGkeqv7X7zo6RTtL5bLEStWJA==","signatures":[{"sig":"MEYCIQC4ZBfSMiDZAureXg+iD/HGPaa5g0lySevDNV1tfNC9yQIhAKzbnDpK86B0xg+4Di1jy1ESrofXQz2iF434C1Rb9DXZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM61CCRA9TVsSAnZWagAAzIwP/RvjOmc1lVLk7pj9C6jE\nTKQ6d8EF8X7nxMD9OrlcdUvvj5+RAdR9lZQh17EsMBnV1WtO3bFP7zApKFZm\n+f9iyqrchY3rGI9+jEZrCiN3UIBr2piBIGIrZkEyyfzK3IYKTiX8opwfGqQm\nImIC874Ut54eZGFxs2SB2UwfuB5qeDtPz64wXhxyjTfGuQXXJTrfKPYCbait\n0z3kc9mydTgh7ewXKVPEqzgC3/+2JhgYmDXSs2sO0gSnEllafnbbCYQKE+BK\nkRnOHI9ylUmzFuL7IICuvFu82F9ftJB7v2GNV2MdfG0/+K5QLX2A/ptUaW/G\nm/cxpXvJ6xHMZ3xWxFDLh5zWsZJ5K4mlutZdUnCz7LgX65pMEUHWJuLpw1cm\n7cBzUZT8hvPU5zepVdedQB3BCP9/407xCz/o0Z5+eMm+vHbSHyITlC8Wz/cD\nWJtlx+2LWgGpl9UcgY//SxY9lhq9V9aL9OWIm7Jspp7wvMPL7zHhb8Km/DST\nZVTfpg9xikQalK5OKwSDdG+Hyea5g9xh5acx/LrJeQVP+5RCN8zDihoddpPU\ntrCKR60y+5jB+/Q7e5VAfvzPvbCRuwjww6h6Lq8iALFA+X/PNInfobdlKsdg\naFI71OQXh2rZMixTzcHt1RMV9P7ZR/a17HwPn03ZbGM1mucWTikquJduDsj1\nt9vS\r\n=8rDi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web notched-outline component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/shape":"^0.43.0","@material/theme":"^0.43.0","@material/animation":"^0.41.0","@material/floating-label":"^0.43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_0.43.0_1546890561875_0.079656868646937","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/notched-outline","version":"0.44.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@0.44.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5a2e1d649921575a7cd2e88ee4581e4a1809573","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-0.44.0.tgz","fileCount":17,"integrity":"sha512-c3nqOqUQAmW3h4zBbZVbMRdf4nNTYm0tVwXIAwmcCs5nvAthEHnzHwwFddNP7/9Wju6LZ0uqWn6xlyKly0uipw==","signatures":[{"sig":"MEUCIQDxKiJmc4mXraAX/K1W3NZXpEydFdoUN+nBHeHLD7lsCQIgbKre3xL75fUOVYBqZNlq2Igt9mNxj6undqa/UGhAP1g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWINCCRA9TVsSAnZWagAAlCUQAIL82MRCKIFbdao+anF9\nON2x+FGyw/4IWn8utSm04CeTvnoDqvb2TRL3R50amFmCqHlE4KX9vm1P7yCd\nstj1rwS4FEePH62Z92xgImR7qbULMc0eeZVdgwsYojM0cqbr/SWN5pzx30g+\nytsA99Daha1njWjKZAgorAmGnEAnFp/zXPZwmQSuJEsSZLEoqa1wyit5Svq2\nKWkceAWQt3Spx3MsujTsnQLgD83KaxarV6xrEmidtLN1r4Xid33wWBXgzr7q\njGIOJt+mhvDI8IoFsVl9ZTToGb45V3cjrEjRqd7l4JVbAQYLUccQnJOLBQJA\nUlpZKZdTDQzu5t0bG+BDjoFa2xDJVxllPXwaYPuzLY9sIMGWuRHA2ks9R+fM\naq9mLohwlLf8Hj/SabbZVvzfH8NQEunian5GABzUSR3xqRSX7x8yj4mWmLyb\nh5MEj9mmJqBTbkhhfGiIvFwr2evJpNwaaa6nr7jcEIt5PrL6N3+h9DOJorG2\nFH6lVUpW4YyS14uK9WOaWnXPD4ft6maXvV54eejSzXTRlkdak7CAA94cM+ds\n3fG22M0dSkkQUXZMh3zo6P5EuXVqdoRgkoP82VW3Xiqqxyvm17proU+6tWWC\nTJrKI3k0OsgXczuesQJ3maMx7NHVXsk43c/L8utbSVkkEuEWISnM+DxIUxi8\nOOSt\r\n=rYKY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web notched-outline component","directories":{},"_nodeVersion":"10.12.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/shape":"^0.43.0","@material/theme":"^0.43.0","@material/animation":"^0.41.0","@material/floating-label":"^0.44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_0.44.0_1549304641642_0.3864429106403682","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/notched-outline","version":"0.44.1","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@0.44.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dba4812286ba4c20f0361e6040bf9b9cad307434","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-0.44.1.tgz","fileCount":17,"integrity":"sha512-x1ZJtrrqZgXT8gYE7aRF+6hTWpX7XaKZzsuwD+e0HBsogYNNsYmkBdLjl4YwhhFuHhX8vWzgkay41GtbgQx84Q==","signatures":[{"sig":"MEQCICGUlN0WI4eYjWDCpp2LbskSg2W0Jh+nH4Yy6I4hmBusAiACjhMaIamIh8aj+wNcGQfYRT+hglVzv40B/qN1ksPC7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIs2CRA9TVsSAnZWagAAZKgP+wcQx+HvzDrM1CE3PxbY\nVWDkkM0Hk3gt5ltp7Wr8FsiHtPXJwoud7mm3UyJdxREtbd8LhewETfRAr4h8\nMg+Vmi35pB5nz+3X0K63SJQr3zplsri376mouCIg1nnVR9iJu9E8U5/1DBK6\nHQjDHqpM1YWaty7fmFtqBiia2xSUIR5ma24imYoZcqm7rdF1ziGThUUuMdcv\nBXUJJ2J4lSixfhQD6yTjl9tNYHFDOMBV3On4y05slA9z+rO9HTO2M3RRYaQS\n9E5Q1wyetSvqVFnoLY1hv4HPdDW7l7tQH52Ar/Ra73uh30uAtOio1oN3ITZM\ndpTpkyLoJ80lF8I9kkUrpkBUewSWf2Mr99558qijAVBNDnCmdVrq6wXpnsGN\nzC+3T8Z8PsCzPQ3dq1Hu8sa+PtRrI+hlXDXA+vsNUHFUlJHM+FCCL2rZyVeN\nyMsIy2NnXuw3ZeQYnarMjyMkBPFe0Lh33gjPZbN51jkja63pi2i6fgOjmGyG\nQfYsapqIOajZwrdAnUdOd3PsgSPkGLQ2JosCVPsCwb3t0Kb74c/rWfh1H2iS\niJu4jXDRrsy2Z/3Hf4gjZekLdRRZUfX8AXa7Sa3bhPBvytWhLLLVxLNPg7OO\neBeo+qEOeqmcjxe///gWqRXhgkdDn7FiTM34rpcN2pXgVHXWLjxL9h66guPx\nBIzs\r\n=VqqR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"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 notched-outline component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/shape":"^0.44.1","@material/theme":"^0.43.0","@material/animation":"^0.41.0","@material/floating-label":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_0.44.1_1550617397982_0.5888135631993621","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/notched-outline","version":"1.0.0-0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@1.0.0-0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"676555ec014257c614cc719dfeb1df2213fe6f82","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-1.0.0-0.tgz","fileCount":29,"integrity":"sha512-Of89W2t91/JKS9cXpQcMsG7/Fnyw3hMmNBiaFLX0FYN44Z1ozZKRPTkzPE/AA6yQxq9UQ6vdHkQ0KnxPYJrz+A==","signatures":[{"sig":"MEUCIGQt18KEsaxOP6bwoxLNdpr+OHwlO8w0r8JSD6KldrivAiEAwMNSuykQgxJ+wyqcMh71GoqJx5tSxVeWC0oSYV0AUwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyR6CRA9TVsSAnZWagAAv+gP/3MTS3tiCLqszzC557bK\nieLR7Li6fKAbhnoU/nkXwasf8eYxwKlpMzM8cvXD33XZo9Zt9Y4xP/w57ywE\nRcRzn3tKD5Psa+9YSi3uwIYh7nwKPcgXoSFyJ2HRBo3QzaZOy9tDey6m11mx\nGd6+G2sJmKY1sJAthmrTbd35buRRFBd0z84caDvEBwjXplZbCaoKLx5N7R0u\n+izEFsY1yCZZ4CVTdVL+0vk5Ary8vFb3ZRBJCaVOv92wi9DBI9Z63D2XBfo/\ntHJy1NQLdWU/wXBMeX9KrF4815e8dXtduSpMb7RtnSCXSx0ObYjcz6D3ytSR\nyFEnqM6USs+dTH/aJSqSg9CrsRKFnsHcEOHRiB8pFhAtnqjQQbDEIaW3qlYv\n5Vjjzo3iv4MGiisRbJOHMq5bmueAl71kBxkXwbTf/mi/DT355rMRacU8qjJ1\nLmHhEeFe1nD2Ij0OYHjCXeaFFTyf/weAzjbNlBBEPIB/JzUP6hcDst1NR0sl\npOjCbd/wTjA5m+Mx+NFyX/uP8w9/yCKQDw4IZwvgLSQlVDQzmtRncscYUHNT\nCiAt5YPB96tKlTFomg6+fFfGICiBrDRfoBrsdcDu6QePxB9BFVkjCjNYINH9\n3C9+6wcT6cSKvuWxeOGcc0uPH1O2bQfg7Xqfa+dYZ/hpEAJd7PUM+H42+uaM\nZvMb\r\n=24fx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"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 notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.14.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0-0","@material/shape":"^1.0.0-0","@material/theme":"^1.0.0-0","@material/animation":"^1.0.0-0","@material/floating-label":"^1.0.0-0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_1.0.0-0_1551311986219_0.8876324150489445","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/notched-outline","version":"1.0.0-1","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@1.0.0-1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2663b1c5181c572025b24b929fe099ad0b1f78d1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-1.0.0-1.tgz","fileCount":29,"integrity":"sha512-tSzhdnl/zoyhSXtKBhhEBaHdCBkvVdr3zZQaU7RkgXy0z7Yxg6OFf7VuFPDbm/BZ96N/ZHHbkVgXvt5jYDp+Ag==","signatures":[{"sig":"MEUCIHa+QuXVM2fWhGtgsIC2uB/OQaeWT4WXsPK+iRRS8oXRAiEA7IzdtnfTASaWsLczHYWwerj1vv+/CjtHuHZ7gucJLUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXQCRA9TVsSAnZWagAA474QAJ2U3lf6HIzfWT+CoYdb\nHn+ly8wEZ70qsGlQfdia/RetCIb+qIxQJV1WB79UGsq20mf2DjLmJFwBSF+s\nNvzBkb7yh31dkmu4woB/e5+LbepV0peiH1TKc7B6PngGBrxy0oSCTDiI4pqo\nH1wyLxZ7aE2ulXk7tS/9zCvXXac5oyYFLzSg3Yrrq9mJa03SkX0unPpYneGo\nJNbVAP+nV+KGzM7n6kRxEDGT7/5Ffr2Os59qtHDStFk+8TIqvnjOy4vNnv7C\nRUK1EadKfTE80vKDJh/4yVXTIFFZD8Wv39gMCyIgSaVyuysrf/4P51+Gppby\nD0Saeks+O1fAp8cc+Fx+Irn8vPRdSI5hv2/LD8Bm/DdSh3w9y6sFkYlnF8mf\naNOfwILfkl4QcjhJwEDpnB/0EDjnl0mNRfSAKbHSV7+YFJhy4HeaBZpaIBmI\nojScnWFB7bJ44j43gIgz1isn90u/o7W1MWfLrvJSUD+miAqlbWRdHYGzKzae\nTOXmUEtJW5aiAN0SfSM2dRz66B6h5zQ5MOJ/x5KZTRCS6E9LKdLWSatSkIs+\npXXNPmSawSBTe6RP/mH4y+0nY9OPqHlPFXhDcPJllCsmVeyFWSI01D5Yncv3\nl0U70bpeZsrAKjVWgkSKC/QTeGN6Ryb/nGY1lihB0y3/DUUVIM4SkzCaSk4y\nVy7t\r\n=v5qF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"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 notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0-1","@material/shape":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/animation":"^1.0.0-1","@material/floating-label":"^1.0.0-1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_1.0.0-1_1551742415689_0.2243084739640806","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/notched-outline","version":"1.0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@1.0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50fb6fc7f6bff130da366239a40649bbccd7a4e4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-1.0.0.tgz","fileCount":29,"integrity":"sha512-P33NGEJMoWaXfjCleEoZnW9ZUA5c4V+jatMcsx/LidYUyXpl5f70V28ZOjwten4z+yBTezdIOx1cyjYrIn8CJw==","signatures":[{"sig":"MEUCIQCfZjT6iEpVf/qh0fIL0HApqZ5Fg9Mv/wM0TxLcPgakowIgCvlTr1QX5y7Eb8QxUvP+Tz2nAM/WhVMIO2ePsu1bud8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDbNCRA9TVsSAnZWagAAnLAP+gKnrZF81WgMXiMm284E\npUG9HAh1vRfyEPzi9OjROp3f+Y47iHvKAuzepffuMA0tHz7x//nTZ8AWWDfH\nnqZ27OyDwWt9dR09Oh75a7gPV6nQ0N5aQrFquTHsuXuyObyyGCUWb4M5kbpE\n1jfEotCVDkLvhnzTHWJ8K/tHcGDP/eR2TKN4TEIHJlSjYbhvHrjOnqYGYK1S\nNLVboe2ZOHWAHLl4r1eq0WUj/NfjK14fd2kXT6JiWOVKNSFCGDrKYJ3oJ0NL\nvCHOMHBmLpjBToEMC74apZjVSnpcL2ByIVvFluWu7msNyvXkvjJC/dGo7Pfa\nwqauKMda3Q5XYGGgPEJOrgmfJgQCxkv7umdV3vt1pVuX0yDVv7Kd1xc/7XqT\nZrLgszSzTqtMAqyOIWS2yOvUCV7HTn+apRNxqh+SGGvSIKt5NAuoLZdHhNXp\niEe17a238nIfkjC3vCdknn1U9GOlWCVhhtJQ8ootgR8DL5emsHs39KfD3NVg\nKYe+dIu04HEZugN0IaJaI5fgb3p9R0idPPtUXDIUfXo+ezN3uYn3Rnx54otw\nVn4s6sVe5ELAAUi+l942emnz0sTVXiMi99AykvjavqreSiwxK0YQH+vTRafG\nJq8bfJxgmxk4n+eYqWloc4dL4vPr5T44aDdak3nsPVEdYXq6VAK/KGZDTeoq\nlszE\r\n=ZxjO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"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 notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^1.0.0","@material/theme":"^1.0.0","@material/animation":"^1.0.0","@material/floating-label":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_1.0.0_1551906508485_0.5156504825065464","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/notched-outline","version":"1.1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@1.1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de1326b762e7e0002a90e15a06e34561334d9234","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-1.1.0.tgz","fileCount":29,"integrity":"sha512-J/MCe3an5lTxzYZPzHxblbVZu51OKeum4BU9PeV9WJW+IBGBAnQmT2uf53rqAzhEchIpv39MYmJLPMJghVxWAg==","signatures":[{"sig":"MEUCIHk5Qm46s0QnxnRejlyjH/5RILRBcLHFW1EGvAxNVVf1AiEA7uI0a7IBqRtucza3Ghv0i1v9w3gjyvdCprWM55vh73k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":232850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmnzQCRA9TVsSAnZWagAA/xEQAJSMDhmyRf4twc2zF1oj\naTHZhASf0ZKvXHZB1GTk2bsGidIUTensrHVwNkyS1Q7dPJ/RAjD7z+5AQKjh\ndqUk1V1fu7hT1VgshZECOn4z9NpRiT1Kk5AbwLx9Mn/phoXT/oJ0TloaEnmM\nhzVzqWjxXiomA1iy/S0f2yLyFVgo9hH7d82QJ9TZGBPLrjluuk5CxVOP2RQu\nU025LJ4VNik8kxSotS8Hyl6Xz9YrtoHfd2AtEyV/c6ZaSeC+PwOgAu+i9qJ1\nXoV271peX/00fwVj4zxg2iGdcz/7WtBQHiBuxeUKCnPKPhoM1Z5XQlxL0Yzn\n0A/bIdTPgCm21DJwA1WeiuFLxqGzQkibBXSc5n7URlgq2FH6JUC/WCIn/wg4\naVBGK2xLZsZALoslYJYhvPLhgfnjBgsyPdLZIqWMstHwynJOp09drjEPbvRO\nphQlfR+HBfU/09NSO3d41rhqZxzn8O2OhZ5C73h4a0iyvHTnUNpmg1nutDD7\n9s9slDfDnlqRprHOtDoVu4jHG7bCZvcj9gTDm75fYY0CW4jD13nlya0C41l2\ny0CpS24Br7h6aPiPCjedWHJN9Qqv4DVDHbBPkLhAxLWSSKamomwTefMx6MII\nTmw1i5nr9blOYBd2+r9U4USy/ZPMj8ReFEkkQKBQqec5c82+6S8TGGGWQ4Fl\nzNzU\r\n=J65i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^1.0.0","@material/theme":"^1.1.0","@material/animation":"^1.0.0","@material/floating-label":"^1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_1.1.0_1553628368289_0.5018775716059181","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@material/notched-outline","version":"1.1.1","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@1.1.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a79c8aa3c5662b676bb46741658f434afa38f0da","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-1.1.1.tgz","fileCount":29,"integrity":"sha512-HekxMWgIEGlmmdiCATfEJPjAWz2jlyXnfGUiBOkAzI25/OyOgcCd3rLzcMT5DUqItbKoNk1M/9kOmzTSNSt/CA==","signatures":[{"sig":"MEUCIQDoZUTxmALLmmNrxvIag8ji3p5u0nPhrBS1gnaBs/yw8AIgckItDqJJUxC9G18F6nKwRui6HVsgsUjVyTWqNm6Gz8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq6uNCRA9TVsSAnZWagAA5qoQAI4ti1Bb/EWol45p8L6/\nDV5ULh2KVS0hQpK69P9HpypCELkKE2F7+KxXnsZvhqjXiOxyhFggVjBMCqjG\nxGYxq88+G72ZkRB0+LoBnYgB6SxyhiIp9UTfqxrorDqJ4xBQVViIGxZxeV5z\nfPtTeMT4zAP/w14xXoqgpDJf9LoPs3WzNt1Lh6LDcbW3Roq7lemq/VCjzl28\nyrA7q1oAIpu/fOi01mRXEwGaMahSi3b9aqJ9osGlGXnWDGdbewMY5SBmx1Sn\ncGbmKVybCRIejH+EG4sQ6zZ7Fp+7bdC/zakAGlxdXaEsSFv3rCIZvAq1socZ\noDvMpFMiujafYgh+CqALovKVXaJwCoeo9lyJ13OHXxpcMjjssrnMiO6ZTWNy\n7LzdnQ9jh2O27gzSMFWhVLfle7nDunWzfYztDvMl25X4Vk9J4z4UIHhWpcLm\n7N1owPYwQZ6TjIifaLn5bspFuEvnIyiBZd+OrDoGjDn8/wzVZ7v4ALitb4hq\nIYGC/KNzNSbX3Q6Yomge7gb8l/1Lk7JQufkyMzaRgwIcYNIqSaB2Ak7Xib/R\nuN10+n8b4rS6FwK3esn6JHMrzn1/4jBknRlk5XG4SCCjLSb3xHjoYrv7PgFA\nAXewncNqF8YA/xpDw4x+eyL2JAMrvqpLPJgvYO7Vua7ZHXKDZmvgEYWy0Z3j\nrBPC\r\n=I6ks\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/animation":"^1.0.0","@material/floating-label":"^1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_1.1.1_1554754444266_0.53766456708664","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/notched-outline","version":"2.3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@2.3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"707c7329a01fe80b269a1c4689769b812d825eb1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-2.3.0.tgz","fileCount":29,"integrity":"sha512-EDhpCGcMi1gW12qzXsdKHr6aYxa80s94tn9/G1r7eJu/BOVTYt20qjqoYQJE6i8XxcD1t5xcNdQ7StgGpk2MGA==","signatures":[{"sig":"MEUCIG+ow5Iee5KvzzovXF+3lLWUoB6oPTVzH+G9w4WTqgCvAiEAtswRrAP75YxiDiLA5T9+B024EhcRvDZaJgdpjBiI88A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":258406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7ab+CRA9TVsSAnZWagAAaZ8QAKD4irDibzneZYzsXrYs\nlWDob+woQeWRrxALDTmlwJGySsAS0VisHA48YYWt4fxMaOipmBC2C5eZRAdn\n7Se3BuEbOnv1Ij1VRhLT/2y2DBCn3FCxRa1lp+kzUFo+tLoVdYANFG0UbvLy\nqzSyT8Qs7kbCsZ+M851sNHNDRMk5iezkFZ75vJbLEZpstOFZ46qMYOxpEhpV\nRuNO4p3Tl3qXfxxByEeGkAS73usT6uwunabCy010Xafo4WgWDulz2NF7fCI3\nrXmIiWwn8EYS0dPmumVhFlPIXlWLtYpItzE9GrECnc1EpAV+7eTt4IeOBdbQ\nyQmR5ovG/tF7R+7nNm2kO2v2yLhbyCYljeoo6goSsOpgAt4eY0uZQMcougt6\nI1nD/MoT43gBOBwqmJyhTvZpjz+2MB53rsT8cRCCqrcwfIhJy/qv3NSsQgKD\nd4ZmuYtFRshwTu01ZVT2Vc5hAxvh1ieqrCRyLaz0/cj9HfRleo2JmOCnQhH0\n4Uhbhn/FzOHvwCTRNcQ0ZqYDB80uSMeyMFwwKIDkMR87aNUSg/rFTl3/07ti\nRzY4R3etUV7UUQ7s3sxmZSkYFzUEy+iqqr+c8XBqxUsFDdzRHlOUKY06Je8m\n68KUMzKjEcFNV6L/2AL9vuXVRXFEMUgcC4u/m0ZSkFbd1SGUf5TSWnVOyEU3\nrtDI\r\n=+Atq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"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 notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/animation":"^1.0.0","@material/floating-label":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_2.3.0_1559078653948_0.598215899863147","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/notched-outline","version":"3.0.0-alpha.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@3.0.0-alpha.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3ad130d038e599b37c56383bbd2653d4e985f6a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-3.0.0-alpha.0.tgz","fileCount":30,"integrity":"sha512-478ds7yYLKXCThFc6orYqVp9Y9WYRE5n52mPpZInIhTGA9VKAKeBsGhLf7nZL63OOLTMhLJtUAhvdGQ1iMlTkg==","signatures":[{"sig":"MEUCIB+XhtADeKB3RtyYNF/o9NKrcrQU3Q/eTOcX/JIOs9e0AiEAt/4AWqhOxghOuMGKbrIncGHEmH75+n6BU+KipFVO4/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":259573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpdCRA9TVsSAnZWagAA7vcP/iaEmuEWwJgoY/mfoQEB\njqvdw+56kQSnl4UB3t1tj7fytuYVKWbVE6sW7aUEx3UaYJXb6F4+hRzxmx4b\nGV+TOWBh/BwwGmksg4u8V2lPdnlzPgQQbIQKRwpDZOhNArS44QHEVGPiw0fp\nCRE0ntehnuhGQeRJNlT5ZcuIfFcpJQd1m+wj2y57nLSvxWg5WPHNv4wM/MiW\nxq0a+NcoL8Ms5fcVwattlnExK8RCcdsEU4V4qPwDl4AMs/bC2Elwb8AbZ/Dj\nFKe7P1EeqlKW0jxJmQmWRNpg73ltGND8DopeHQW/zqUOxEZx0VjRDlNusvMX\nK6qQr6zZ0jzRr/9IbCrr0lhIRJpAnupF5z3WyDxFaV9HF5sjUU4igWsHx79r\nDFBcEest8zJrkEpHXM+PQNDQ+noTLJ3W6CiJTh8vbXaAQi8UKaGKKFWNuX5n\nWKSjMzwdIs4RsX3rx/UFP4+TQIzePBNc6qGBlIeKAPHC57iFRgkwQy5L4qJ8\nuIIsdhjuT9vwSdGmVaDxZK6hFnyOv9LwyFgfrdfRJhqxBs6awV8vaMJ8FJ0l\nTNYdNGS6KgzU3fNPYh4lnbTTe7exfyLFV6JcKYCF3QdZA+1Jbi436413Cg3P\nSV1w4jAJKg3sSWLySfERbXXXdVodAETT1GIWjQHxy/xRYRytAYJnbZjM35+0\ndRU7\r\n=dSr/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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 notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^3.0.0-alpha.0","@material/theme":"^3.0.0-alpha.0","@material/animation":"^1.0.0","@material/floating-label":"^3.0.0-alpha.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_3.0.0-alpha.0_1560312412370_0.06532205574856942","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/notched-outline","version":"3.0.0-alpha.1","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@3.0.0-alpha.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"103657ce8b7f78d41738872f7585f1b8c0d33ae4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-3.0.0-alpha.1.tgz","fileCount":30,"integrity":"sha512-TLYSI4RsSM+3gE3aQJQ5dwmdT99v/TGHewt48EUrM1j85cZbFRp8Np8+RY8jApDw7ffgrN6mCzdsM/aiMAbnVA==","signatures":[{"sig":"MEUCIHXzU7beSFbDOT8Pc97+m81Dq314KsCLRD7Yxn/GMFDwAiEAvMMUhEOgasoDN4Uel1YcViL1LaH82HE2WAzm1npWqvs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":259573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUxECRA9TVsSAnZWagAAnm8P/3vnUXq/euvGgT/AaGZ6\n3wEYAjM65Kw2b5Ce2GnKWkl5o57MEtw0WKK7IojjfCk5XKid1GnfGxEnTq2e\nwukrVy8+ErwNi1nAN27O16OVZGHHftLos18X+8uu8qRdminXmYQVLZpQEd71\npffa7QZZqZ+VizOIfjSeQYjInqB9cFR47kJ1CrI/OeSIfQ2ACmRZSJkKq4zN\nsvq0tnB3iVyk621SJUolKpPNoacLc5bOM5PIV8O6FALL3SSIz+R9vBGkp1sY\n94W0ao+rg+zErcKh5bEl31gwKwiqy4rs9iHm5LdVtJJH2+oKwyrTrpE08r7y\ne6JuxviogBxtH2Am8hk6JiybP0OD0Je4/JzKaJqQ9z6THg3++sUnlVsKaYXR\ngq3kaZ3Sd3v5FG/JTDuI0ObKBeuyjBifxrbl3qP+DlCh7Mm8g8bfkLUWS0Fz\nx8UTOMJ7Hkfx4mBB323ZndyU0CS+4yyNsEhUzW2biCYHLChTKjabcV7AwTFl\nG3kItQ/zbxHALOojd1oJtcqaHLNuIoI5ajdrfKn1WMNatt9Ol2RH+mYuu4Ar\ng5rT7m5TT3lHhlHEI+1QIj20GSSA1LuYhlKixixlm7IsQNrHRSOY276T6ZxL\nB/auuaTcsdEMd5+WNET6V3ZKjHtNu/10YVCVBtUfe96p8sbulDfKkwrUBMZB\no+kG\r\n=AcX8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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 notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^3.0.0-alpha.1","@material/theme":"^3.0.0-alpha.1","@material/animation":"^1.0.0","@material/floating-label":"^3.0.0-alpha.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_3.0.0-alpha.1_1560366147681_0.13440874318845908","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/notched-outline","version":"3.0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@3.0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18e56bfa7166946371ac4e3d705699a8c786e8ed","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-3.0.0.tgz","fileCount":31,"integrity":"sha512-iFbiDUaQjBG3okjAdgRvCEvvqImq4J2WhapTDBtTeiETr/Cx54yJw6L8jlUg3+hjzItfkxErzhMF08hLLTEHtw==","signatures":[{"sig":"MEUCIQCXVDxWpUIQR/Ecee5KaJWUMgv1kn8T/X8e9iLLgwTAWwIgLi5LylTUi/ozz6RGZdrmbdHLkvOJh1I6sZZbJodQ4CY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":260694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/5CRA9TVsSAnZWagAA7G8P/0nCBfmTTZu5mTp6vwAr\nhUGmNIHQe6EKhfbJ3c8yVkpuAVXiMmDtDyXUjou1SNxRKBuXf8LbOKWR0lmf\n/M3ndauz9oxp+db/bkUZjQQDKFEMshAtI1E+LjeOrrvywW7c79dYgjYaiOB6\n1sLiBKx3W1xjuQ3jkIo0YIxL0Vran8FjUW03RXGbrBRC/aenByxv9a41RpfK\nJLSM+pLcm88nRA/m6iJAlIWxlr//sRCY0FtszBhXS6UIByO+uA/U/IWdx4ad\ny297vWd04HPUdXNf7/kJXtsZ/KPc1YXIE33gp8/sUDlSa26Kg+t1JRpV0R1N\nmDlGmk6yGBSHBHVni8YPwj425rjcbFUkA1jX7czS05XzVOtV2Gs9e6HuQGbH\n1uJsyxgUYMLqzm30ocCpSJm9JKlcHXwK4EQgQct6cNisj54OqheM+XWNfqXq\nNlSnJPXfDWc2SRvEBzBHX01wnICGSL69MYQ8hfhbdCYFz4nRs0SCTrn+Kx2H\nA2H603V+ohC0DHT1f/kaDLXrRtgQ6CpjFS1YrctfK8o0u1aTgSVg0BIUWYxb\nxYPHzoHi74xkKLnD5v7iNnQwOPmsnBsqNnWRYum6Xaeq3eV6huDNXacKMgSt\nuO3WNTmXmsBlf9CTcekHmi1yKAyH3JGT9TxmtnpUgdMwvWRhZX0E+kZ2qyx9\nknjz\r\n=Di40\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v10.13.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/shape":"^3.0.0","@material/theme":"^3.0.0","@material/animation":"^3.0.0","@material/floating-label":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_3.0.0_1561501689035_0.9390988410473262","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/notched-outline","version":"3.1.0-alpha.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@3.1.0-alpha.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0479954ecf3e9865745ac770b87868156ad603b6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-3.1.0-alpha.0.tgz","fileCount":30,"integrity":"sha512-lm/iQS9g5jdglWtzwoJvvTxL+OPCEJ25r1MwXvqdGsn21SlziEFfJP5wtiWkB5Cn17kJZEuvcBVuxydmKEi5ww==","signatures":[{"sig":"MEYCIQCLZrA0VnigOVA5mPVHsxFyPU8XnYPhAMtl66Shv8ZHrwIhAPxGxMKQMB4oDplLG8iYnNMFJcK8hA/1LNF6Cm+slH3K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdEmCRA9TVsSAnZWagAAaSgQAI0Ix39MQF0QBQXwqJDn\ni+M4E9qcf3vi7SzoMfA0eE2XIcOC6P5/XB+pJc1TiiIHT15cyut1Us1tk2WW\nv+DBbdVHGkc9utZB2w0AwnyenNbxfuE3N2R5bOxdJxAMx8T7A4oq5x3+uMWD\n4ItovM3/oZxFZbfdvlCPxvk3T3WzRtfed5kI4M//MPufBwyexjJLwlO1ZkrF\n1AdZBX+QNOQqkYIQnblvS+Q2AkX8zs0taJ/ZFfwiy+les0IUYh5RbCp15FQg\ni7y1xPjNw7seqX01a4JumrK8nPKmTS65ohNNlairjIfnL+Kcu0kVJySLHVgp\nVSzRAL1/BqaOdisoA8LBixKAhVXcgNhJ52f854481TtYkiYKVyRARySckpff\nznWFY/WJlZ6cjWze15lB0MeNWCnd9uNAKE0r3fyu0QTnA6vd7EuUtPjvsiGY\nWXrx9uZxjsB7IMld7C79wHpT8d32kVLldYbBwadvCTZwPsrEbDZT4/3t12ng\ndwnOhcJE/Q9lPeLLBt3i4d4A6g1mz6M2Nu6EBfkwyqphe82urqxV7YTZ54BX\nIsRI6lryVoVlcQZE4BqnW/C+S9+qULSTA2DAzXQmz+I076MaJRbe0+V5JHsB\ncwW2QCqbPnGt3XD8fV8dENCPLs+hsBgYe59Wgn5imwN75nGQSFoBvkONZPJ6\nm0Yj\r\n=4mk7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"42b485550d87a4c3328a07847b4070d15f09af8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/shape":"^3.0.0","@material/theme":"^3.1.0-alpha.0","@material/animation":"^3.0.0","@material/floating-label":"^3.1.0-alpha.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_3.1.0-alpha.0_1563283749435_0.20849723407664822","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/notched-outline","version":"3.1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@3.1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"389cb92240472620e9ee6551fb267efbd65ae376","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-3.1.0.tgz","fileCount":30,"integrity":"sha512-2kuWzBrRj+acUEllsh6w2XK3JRizT3oSx15vsEmYY8dVW8GuFSPjorNL69RpM/4cFhdBoeA9sk62YHI34qiGMw==","signatures":[{"sig":"MEQCIFoxZwp8PVd67oLRlpfKTlSK9MRGkCLixXaLVcxPxqjTAiAhcH8YXKKOCuXZJ6+IBzMsLeTYbRPa6zAt7AJFd3yqPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjKOCRA9TVsSAnZWagAAiugP/iNltYNzJJT9MfJZ58Mn\n0OxHBmUv3c6RvB70UkcW1CUppQ4/Fb6ylC7liki8BvlTiz5X3Os4dXFMJSEX\nz6krWgcjFIVGfUamXWUIWifEvTZXUr/ofEaFurUd24eSU/eyVePq4R2mczBn\nyB2bhpc1tIkK8i5G2xpc/n7k3yDbffiMPkZ1kd/7le4B4BQb7aqucMxkK2kM\nukDdzz8uM2zmI37iSqQ0iQ/TYOyG0bwEHoe2ndw1G7Nwt0Z5zgUG3+FygFSm\nNaG/Y2Dmyn0ek62k4AxSMlCaYdlc1HpQ5GRJ/Lhbd/uDXnbWHd6QMB1pe4G0\nBEA94iG/ShNv+sN2RsBzSpCivjI/KGRN2ukZjbCCfkzsOZF10oOS0hjDqP8T\nsyOje5ehfDM401lcVRexNoAp6GNJ0Q2oj2GItaq6Wy14qnfesFbX7Cjbe4EP\nXp+QZxhzY6afYJlFmcOSLAYGKnVDXwfNkvxRRuz9T7OUj/5MhnaLn6WqcTUS\nZr/lJgUkvgbtpfXprubAZrl9fUY3Ik0Aq/ajtmE8w+yTjm1qR+VxDuDxRDN4\njzKkYjr1RDSerUpbJju3RMCF/s7FLD6iZ5QhrSNLhVc0IxSxD4R2iqoOBZyD\nAhV6EsNW5IlH9W18T6G9274pXHtAfPyD4q3E5ve82M8jObYjJSqgej1n4ySO\ngZcU\r\n=o/oA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^3.1.0","@material/base":"^3.1.0","@material/shape":"^3.1.0","@material/theme":"^3.1.0","@material/animation":"^3.1.0","@material/floating-label":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_3.1.0_1563832973810_0.3802248192119615","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/notched-outline","version":"4.0.0-alpha.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-alpha.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbdb8963f674803033e015042cc9c304e93e0fad","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-alpha.0.tgz","fileCount":30,"integrity":"sha512-4haW7irqANVTSaQ3uPPT+Naspnx9ZVH9TvCF7Y5+iwRIu49V+V6Rzl/xR8KbLuOVG5dbhzbBI4Qgoi/wvrptbg==","signatures":[{"sig":"MEQCIAXGl1UiM9sRjuZqyAtuNsAsUbL561wpFdJyJ0x0joTGAiBdU51JmR8Ql674l9zO83qVd+CRvb8mTWGByhM+u4A5JA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4gCRA9TVsSAnZWagAAMT4P/i8MeK+M2uL/bWHG6gRY\nbW1WHyFJIWhKuwdJWBOXSSw9e7YLN8KqPX4glHzXQ37IpF3Gg5WKwVpSequg\npmfXEI6wqz8OFjDxJCmnib+KBhHGouNjb/TtjcNu4GbppwXe+GjAY4KeEsUd\nQjKga9MI+GlF0L1bAsbAHBBNe38RIBIgC05EOpvs696fyCmKNFBNFec7Yz+B\nKjiaIgvC49G3k+i1VoaGbqfADy9vOXhDZ4vOonsFvAYl23bqV9qQ/69SYkOr\navivPLhK5uIFv/cvQ95DrRl9ZGLDUcp6ZqwofxUEyextD+529bBDwFQgZ3PQ\nw0T9FfKh4iEUpHXb4OG5VkPSPSUa9KB2kEhSs6QsrfVZVUUdDiBgdnRYdynD\nAgQQCx8UKKsISY3Woq+H2TGY53Wbz8bZJ1gDCu4ARjzaWMPp14ECccBgJkCO\nHZshs21YS3ucuIfJ9bL8z75fnusWCTlez5ap1yJqbAvHjv2FVjuBXt+p4qZa\ngqMcbRxXycwPzqqRPCsJ3tC8kHNWlmJxEWyqVFGslok7EHWxAzB0hF2PXNmh\n9J2zxFVgt59yb8cppKa1huuQEgbk6lkt7JHFSytsGkZZupypwyOeQ90ES4IK\nV/XjgVMQ4GYdM5C6dggHdON2Lqu6dHexiAlncYVKN0SsClh1BuTOSJPVnCJD\nHuFN\r\n=qnhu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"184b37f65b79a260f2835bd44e422dab2402d937","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-alpha.0","@material/base":"^4.0.0-alpha.0","@material/shape":"^4.0.0-alpha.0","@material/theme":"^4.0.0-alpha.0","@material/animation":"^4.0.0-alpha.0","@material/floating-label":"^4.0.0-alpha.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-alpha.0_1565212191412_0.7198265421000589","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/notched-outline","version":"4.0.0-canary.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e11a4b23a64744c7fd2be79d024a9027b6a1be56","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.0.tgz","fileCount":30,"integrity":"sha512-naFUqbly+IpBsYoy0S4CxlgNbxYo3aPvtVP763EYQW2GS++F9mHKfkHPDMNCPlJmkyaZggIpa0B3SMy1MzMO+A==","signatures":[{"sig":"MEYCIQC/h8i1RfsYWRhVDgFJJlU5+e+vJNUjESpm8QfddN9dDQIhANMTBRXmGrkeJPbckZctVyCJaMhzui1WYr5d4WhHeVbT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEvCRA9TVsSAnZWagAArIkP/ix1an3Zej3O+vYN/f0r\n0UGAc+u8uENEGDTx8bofJB5cRKyh4Db0jqeze4m7wpjOcIUxYoOMyZNFMXVO\nhqaFY3VoMGmD1WY+WXUE9ijVa/7BLCkh8kWV8lERRoTUBFy/fkc6C/xq8rrh\n6/OJ8u7bwuBSb0MsQOVNd1kui38jR8xYbmoTMdmFjIgwkB+j1n6fjG2W1PDT\nh6vHKG1fsQKh3E95lLApqxF//1QESfV/JGfAJbNoapcDrqG1Qu876S02nbCz\n01GPb8IRaO5WPFrLG13pKb0JsPPF3zc7Qb+jVjOlhVX7EzSyNWdp21NzpdAS\nVXpPLybjRzSJeHO+74+M3T1qr3OtREEUI9YQflU4WerIuxOEfd3ET2M2bqP+\ng/cr/m2FzO9q6xOZgIFYI8wQIXSPe/dYJxPf1HpPjFvJnQkXj5U4y6fwkKRo\nGyhWNA9G4yYljRewnObETlu8qXGs4pFUU69Jkr+uAI1m80ymN+XtuxduDzIS\nro5D3eParrZ/ZuHx1zs1ZkxhwnEbRibhAzehehqkCbSTRREi6v0ZIgOWzxk6\nKRzvGUgnpRrw6HgmPdzefL7eRqPg6mA9t5Zmw6JHBut7CS9I0TmXTZEHpL+n\nY1885ieTmkkUw1BNOTpIYQuffzVDbIoN20sBot0kEhuFn6epoE+lOCBMN5pK\ngO3m\r\n=X2mk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.0","@material/base":"^4.0.0-canary.0","@material/shape":"^4.0.0-canary.0","@material/theme":"^4.0.0-canary.0","@material/floating-label":"^4.0.0-canary.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.0_1567658286867_0.8042496726914348","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/notched-outline","version":"4.0.0-canary.1","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3b1a6930317d6c3917f50a64b881b179032d930","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.1.tgz","fileCount":30,"integrity":"sha512-WZlPVpjl3ZEuzvARFIFvT3sNB3PrVR77/9tOXNRFyHki07gL41ZOrLSJwaoUU9Tz/dPZmWFlff207fZz4SNqNA==","signatures":[{"sig":"MEYCIQCFRS3RtrUJnK7C07lnLxKKSon3yXCsp8B02bA0RiFZgwIhAInwN+797MjSlosJ9KKdLzEkI/fNjpmUL6mPCKLWWK7x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":166911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQuCRA9TVsSAnZWagAAJNgQAIkfGF5eOb78YUombGb8\n2NoG754NTgA0xrCuDgnhZ0MviIT0S1EnCP87YUV5dAFLIZFXUoYQX1UL8SUC\nZf4GCjGhP829DfmpA3nF092vx4w11M22zWnDQ6E30/wn++kQxoWsokevOBUR\n+DJlMAjHdl/j748ztqThqhGOXc9gyVhIPrju61VCvAi9aR0D1DkvgPxAtRn/\nET+vVNszFbJvL/qOal3/4BiTHwujHm/bIKxbsG7wYPDxLgZLNIUw5BZFvjcv\n2qudehSjeukvrPsREjSvg8+Or4c5Agty1Wr0VnILlbnhcwHC6YmPg9iQutBP\n8Q97JkzE1xNixu8jIfCAGEpxcXp3CRraL/qXf6RQMuqaRHtHVmu9Z1heRSDa\no5rG4YWdY4qxA6ZbYO2asJJgiW66yyfJN2vbgoAZXNvgGgM6Cy/Am2+6QInl\nbvdHe4X9Zla0tL9OH9lu0Ygj8YrSjtgFve04dkBuZ8z/kD1tSpl31HKvt6tZ\nZunBODJTwzbH5cV5aAuZZdYAlrENqR2mDIuW9ZOgrsry7vZzx8CB5q6QQ/sd\nvAppHdOE2GFVvhp7CHNYxrogiWQRKEbQComnVAIX8n5UuBvmf+a7A8TBVYsL\nbM97AOvIeGQ+8rYowut/C3ZwHNyfXA4UwDGGEsxM9t+ADgeBdbbP0/vrPb40\nb0d7\r\n=TM49\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.1","@material/base":"^4.0.0-canary.1","@material/shape":"^4.0.0-canary.1","@material/theme":"^4.0.0-canary.1","@material/floating-label":"^4.0.0-canary.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.1_1568060461821_0.41262160068178466","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@material/notched-outline","version":"3.2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@3.2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b7e79e6282e747a18e97b0d0c79f06eab924aa0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-3.2.0.tgz","fileCount":30,"integrity":"sha512-IFuxVoQqlOy/WSSawI2Fglh/U1hS0QtVUiGsc8GUoVUd1pifn7RXidHP3vQrMDEo8M/RwA9p6uveQKjPwW41RA==","signatures":[{"sig":"MEUCIEXOoHJDsDzaQFUK9HRCbkn4kyTpIXMcEccBVf9OXRQ7AiEA1E5PXW3mqVHzCtn07D3yJiQImECNKQ58s+dnK0RjG74=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder5zCRA9TVsSAnZWagAA3zYP/2HofMS+XE59xOo4HkNv\ntCIu+eXYkdeM/84uW6aaZqRTBl9rTDHqIwCUVSUF7QXDcCFdwoUv9nf3RqOi\n0K95beb/8zrL3ZpaYO9O0OkbYXt4uoicjJ2NLm8VtbG8Mq4yzZ21jmnAKesO\n9gOlzwGIETLblQidpzi21eAyQGRYhS+Try7TirAfI1FRmdpmcbFvfnhmXatR\n3z4J6ZKnvhGKa6vV2S6t0f0MpQoDiQRupjkuNrJ9uaeuZbU9HILRgE06pvbs\nTSPTO21mmybgqTjyUmT352MgKL6mQ2nukB4y91C+K6kV05J+Jbf97hIk8rQ4\nk38zoxC60ztto5W3gTD8pv6F93rezi9lAQ8jqX2Api/EmgeH5ab/zvVjX1Kx\nkEHICXorvXbD3FM9TQKazJnqsYyvJcOJSnOQ9sYEABmqi7Ylyix9gsTR2rKz\nwRLsJnLWCTMbmPURpRon670x2j1Bu6P9fbVPls5izYK6CgVAcAfsQVoZhPVv\nx77ZMp/NnPF8UEyvAbCmWRYL12lg5bmgiSSsu8XccvFUKIdGq0EihKvdRYHL\nRnHk7MNr6Cv82CixdXmF6PymOoXtZBl+v7m6ZucS+QdWbf7a3j0B0JA5y2KK\nzWhRytFCwZZVp2wYoyFLQnwpyKj02X/bWJ8UyIZUR8kBpiDo6BG9OUKQWz6M\n6Q0C\r\n=XJag\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","gitHead":"abf67305fa705591abea3972006a18ab5fac7f63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^3.2.0","@material/base":"^3.1.0","@material/shape":"^3.1.0","@material/theme":"^3.1.0","@material/animation":"^3.1.0","@material/floating-label":"^3.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_3.2.0_1568325234652_0.48032920278778013","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/notched-outline","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.79d881baf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89c243edb19ee6aa47514e89b319611b2e2d8a35","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.79d881baf.0.tgz","fileCount":30,"integrity":"sha512-Ta5A7Lqidew/eAXjzBekRFqMnmECeD8VBSII5sn8+YEJ+l9MMbXuq5A+UucUiJlhUa0Q8qBcDX+CIL8uZ/3X5g==","signatures":[{"sig":"MEUCIQD7q0XRoXH3kJfER4t9sSh6Qe12yiPVp1qmXV0No384pAIgKGuGPbwlpefOr2V+TQv3JUocR+cigffKHQex5qMggUs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev08CRA9TVsSAnZWagAA/5AP/jeY4OamR0zLZyLdQbQg\nUlRyaS+hEd8iPufWVE4IocXLiQPR/HhASO01UsVtyoCuzK0eyrWZYmcGolLO\nuGFqtRSaoBd0l3v481DGm3pxmlsEV7obziXQSifbhxae1GjXWjZ3OGGxyAhB\nZNGz/m3R9Zn42Xb4ZYwyc/++OyX2xMiHbB4yIKe3B4/dU1n9pZtpwuFXjAph\nEIkYj00EpiqGCoDhXoDR+Yp5mIRLBUPCyCogJvG9JVSj47CrFsYiq6WtWYeL\nLkZ0HPxABCh7yhwwDrkonF3h2tyz9uyDXBPbBXk2WJpUF7mA+IClLQ4wMwDm\nW7DslEpkDpBirXlLuk5IVL2T3/I3QC107f2w0NrG15UjKCL4zV9gSZYjG3y8\nSHUdKhpemfkeFAZbdZXtWnxqY3C7olEKqDf5CTRYMraOPphSKwCGN0Vwd8S3\n+UU4lhMziZyUet8m99l67ECaDLsN2NCWylu6Ax+qqtfBsSXq6HB8oy6H7WRf\njOpRqyH8hrDNgIG4OesnD4E2ZhW2AVR2YHCG0AEeaRt5TBWUK4rAVJAcCPT7\n6jxQe2EXSkjN1YsbhBJKduHGxyO1fgXZ2yZortg8Ho4ehI+hej8mMWQV4OVX\njI5sHeoR+n3KCz/VmRMG7vcEFPk7KGSa5beV+dW3Ueaw4zAXD7UxvAI4dGxv\nb/BL\r\n=dEh4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.79d881baf.0","@material/base":"^4.0.0-canary.79d881baf.0","@material/shape":"^4.0.0-canary.79d881baf.0","@material/theme":"^4.0.0-canary.79d881baf.0","@material/floating-label":"^4.0.0-canary.79d881baf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.79d881baf.0_1568341308296_0.6722611468369639","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/notched-outline","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.e851d4f40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b142b7c6de922254074db26bfbdf6f8c6278defc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.e851d4f40.0.tgz","fileCount":30,"integrity":"sha512-5vdXyxMWlJQFqSULlozzQt/MUq7lfVyckhtvTx7SGwFumjlFtZGOrWJOa1+KQiZo48DJQx6wu69MRq8IWghEQg==","signatures":[{"sig":"MEQCIHhcLsgmp5/SmZ52M16lWguZeIvHdX9VAD3piVjBiUpxAiBx/JyiEbGuohFNYTW9qO4vo/IZ9b9N6KpAq73DWjDqTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexYKCRA9TVsSAnZWagAA9AYP/A4hI/kP4WEd4/xIqAMx\nr+ezieyVDwEH5UKpB0ET7dcrT1VksaZDsv7vB+e1a0z1oQenpe0IZ0gLUQqq\nYZMkkVQ28iDRlyiFpM1h/NyUr4qsdqmTRgnRznfRQp+d/dIbtictdJwUzSnt\nAqA0Ut2iOJeNHrk57H65UneYj5wJBIsW7d/0rd/BqIdoU4EVPhbukle6G4Ao\nXtBuu/BkZbZKvV/AMxxJBFzgpk0luztu5KZYzHOPfSGe6YNM7k3E3YPrRvU2\nxO3a6VAKd035vwaHoN+qZg5MpPh+uszdwqeVc1ain3u7BYQaGirILN5zPCmQ\nZ+ulmiksE89SmJuVFa5QDPH8GWns+ctCFeL+mLReE6REfvjV/fKjG3UEYeq0\nIrCG7xdf+wS5+R/Zn3odgHC0ZiUHfVp78tLJSS4Hg7eAg8tluvL/tny9UPch\nd29dJSXeIWBfZmA9lQJmT5Z1d0eycGEYkRbEVfFnDS4kZKCt9i5z2OZQXddg\nXqG41qJ2ektoHNeu3gkQHNKyfTve6WJ3uw/NAsgNcMaXNG+b3iA5K5nJJhnL\nj3CPPA1CfQep0V5awjbR7iT+yq5W3mBzkY2oud5wY+dpRg/rGyRGd4hmOjrq\nfanCLTaD4v/xmbJ3hrOTUeRS2Flf6qIHWAfPpPXio3j6osSi/1YB1vtizOEW\nV0vD\r\n=KIIA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.e851d4f40.0","@material/base":"^4.0.0-canary.e851d4f40.0","@material/shape":"^4.0.0-canary.e851d4f40.0","@material/theme":"^4.0.0-canary.e851d4f40.0","@material/floating-label":"^4.0.0-canary.e851d4f40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.e851d4f40.0_1568347657522_0.4279154621249117","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/notched-outline","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.905884690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"294f8060365621a829f0ac30d8cc5ada8e35addd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.905884690.0.tgz","fileCount":30,"integrity":"sha512-J+XrFhD5Pf8o/T2zWQbsouZQzn68LCr+4CU5QhxcioqHmIihkhxiZW6oCF8pNN8E19oFt6wvhFPIAE/nBadhtw==","signatures":[{"sig":"MEUCIQC/DYNvXEKkE97zkxm/sZoJVWW/DKKc96XLKzuXT7BDeAIgE3fDSuuX5qsnOjna28616j9wWmzt1CFeF7UXt7agthY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB9LCRA9TVsSAnZWagAA6/QP+wd0d0MA1zfi9EI0Ki+Q\nFFjuIMrCHWukuGSdCc8+ROPbKJt9TezmBALUiB0sJYypiNzrrgsooGfhwMSf\nS6/K/LVqtliH0rvkAwt2AZTWFi63W4AS7ly0MP8AOr/kk7K2nCcAG7Ljm7V2\nKY3GadBLNOXOoc96agRzRRQd6XRGj6myjMO1OyYiXezKyAYrH929GpbBqz21\nxC9+2gYqT0ZdivHgrZc7n3ekwtufejLWSBI16GSi9+WQIuaNiPIcUCyKhgOJ\n8khdMuDnJIfjwpkRyWeTklb6EkmYi3KFP7DgmLL9U4gxYat/hpq1eyRyvYwD\nKitgfvmK1Q2ZG0eMyK//iJIEefvnIxeG9VQ0z69eokugYupY2BYF8z+sBnK/\ny3ZwXHtosKqwWgWs/5lLhqEDysDR4iD3K0xSuhK9CjT6DhtwjB9oFJK3fQKy\n1vpZSMSa+vfBtC29Uuwmqjn+uLkD8lqzFNge/DXR5m9R/RS7+EfLQq+m5Qij\nusyulSptnqu+kXNMj7bNq/ZbOPqZK2GCXSRJ2wY4U6tdEEH1cKhBTYvuHyYH\nmjK5WzicQX6NR5v18oSOSzzi489Opd5MKqmBLq4t5tCfNkU/Zzal770j/wPD\nTXmUnxxIHnGfCTMiydxvv6Jr9STIzM4LeSa+D1KMO+7m5h+rXSOFq1ZBiO06\nEyDR\r\n=P1j1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.905884690.0","@material/base":"^4.0.0-canary.905884690.0","@material/shape":"^4.0.0-canary.905884690.0","@material/theme":"^4.0.0-canary.905884690.0","@material/floating-label":"^4.0.0-canary.905884690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.905884690.0_1568677706801_0.006475808716409848","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/notched-outline","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.199534d61.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d4f737701d443e05b8cbf8d084784fede3079c4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.199534d61.0.tgz","fileCount":30,"integrity":"sha512-DiTQm90hqapuTBTae4jxYLyC1dDK4+ZzkdHK/lDxNbfXOwffOSlSJ6ufrUDtcuxJ1AJlSk/vf78ZqxV1Oc58MA==","signatures":[{"sig":"MEYCIQDyamKqTSX+G3wjIj8MXBZOmXZc1URD0ILsObi6LsA/5gIhAJByNWrhkcX5PqgjrEUG2w32zhdK8/1PqJ17W7GlYpwf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlu0CRA9TVsSAnZWagAARXsP/17oSngFmiDIhFTvaeJ+\nEJvVFrpyvVWXTX4o5VBng5l7tSXmc02LoQDMyWm86USqY4u2KrNZoy74x7vR\njYrg9G4fJok1IwaVfMXLet12zhBEqXPWWifMbgyiQaL+XvTVpcYCq+rghatA\nqbd9YbNin0vFs2pm3b7rMcaZP4EJhK/cWci1OQB7tfQkLVEg73kngs4usb6Q\nJmi7tesQ2IVzTVfYESV/pk0yzLu5aRTGvbGYhU5v4wDvJsdLxcexty6RNLYe\nwG7pTSWbZbHV11itFlCX0rfNNXFFryTclcCJNldDGCiBZXUZtFtAVWTn96vD\nbPOKTBJLAOGq7LUUogV76odXNO+4ezfX5mfxBFQrghncVeanx57ySenevwjq\n2DrNaZvBjKZcliRq+rDzTRJ7lAPs7DYkC7Io710EW+7bgSWrnamerjU6GSi8\nOZY5ga95YAuN0n/pS7FkPD8go79Id7TieEaPVHNLntPks3YtK+B+vOyQ2+YQ\ntq1Zz4ZYsjTBZn3gh0tdvvN3CCOOgYfbbgkCr8fbGU8ByNAVKuY7ZNe/Uop0\n1QCE4q5Q95hHboogcLqZxAxB0FInnkFv+SJiV5qQyG6SRVIvAOwRrDDvdCu9\nxJ0VyXZlDlX+sYXF6q1vefFgwpnSR7a7EU/qap/XwfZoiBeaRUD0dX6ejrJm\nQo5w\r\n=knzX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.199534d61.0","@material/base":"^4.0.0-canary.199534d61.0","@material/shape":"^4.0.0-canary.199534d61.0","@material/theme":"^4.0.0-canary.199534d61.0","@material/floating-label":"^4.0.0-canary.199534d61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.199534d61.0_1569610675732_0.5369896079289795","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/notched-outline","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.22d7ad2fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be4259b0729f3bc504e8a44354a0fc5f53617c89","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":30,"integrity":"sha512-f8XnyXbe+Xewgcx2hXvii4Od85Cc7F23QJzeuQsT2jt+3ztLXrBCAWzMvKjpIXQDXpBl0dFZx7o1jf8sT7m8wQ==","signatures":[{"sig":"MEUCIQCpHCjpTTklqVygdKrdQQXJhhO+taoPzvddkDt3Ia2BNAIganWkleO1gB5V8hCg2bO4IQ8ZcQ5yBv4lBGJC5oaXGBQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphaaCRA9TVsSAnZWagAAoCEP/25E4yfU6YjXGZnP2KFC\n6cB9M8nX2sSkG73yb80ew413TJTccwtFT8zmgBKewSM/g5GhXEgqXRtyvNrm\ngJXaAmuuC88mvqqOLmjiUGULfAFBOdQ+7HuRB5PQhru6U7a4m+ndLeVBfPxa\n8Dq2HGaiLTlIvEutZJuUg9nAxBwPwx0OSN1h1P32TnVjKhuMvR7bERoTt/B+\n7qmOwwf4gv6KbPjyEIzvmOwElozX/uFV6bYuWu2/EwxzoiMhbAFWkiRINwDg\nz8F432qnGsyU2EsBk7/zbwQ7zVw3xC50Bn4UR7qlen7ylgcaLdgBfADPjITo\nwk3YmRqtkCdJ8YrahegGFNa15jfKJOkBB3Vhjs6mpWRgJcRrJLauTZwS8+V/\ny44vpkSs/oLUwB1tDYC+uRby5gUxotgTLYotXTmPE04DVao8GHZBE5u+iC5e\nhSObQUY1i488fQu5X3ednSTOftg2Be8TNQqMqOZ4LZLf+F8UFTEZO4lLX4EN\n576oI/2wJP507i8NRZuhfF8qlaY4eEGHRNcjte+HXDqRv43rAzbXHisqe4BZ\np8F/DODeRfigtnR5TpqJygcT7vbYYfcJJ/qcafjg4MM1HNuxun+z2+5udhYF\nwxtasRWCDqfjZ2BqUATGlVzd645tmJZJT/uNvPAnIWCTcv1K8+mLoUF86dks\nGUD3\r\n=H7og\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.22d7ad2fb.0","@material/base":"^4.0.0-canary.22d7ad2fb.0","@material/shape":"^4.0.0-canary.22d7ad2fb.0","@material/theme":"^4.0.0-canary.22d7ad2fb.0","@material/floating-label":"^4.0.0-canary.22d7ad2fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.22d7ad2fb.0_1571165850217_0.9907660567515613","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/notched-outline","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.735147131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b11799a0d9f8c79c0221f2ba2a22319a60b9b59","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.735147131.0.tgz","fileCount":30,"integrity":"sha512-EV5SNYrkA9XOfgXvu+8Ms4QzfXaq6g5sIxk9A1ZwSdLLiB3bVegOGN2KC1QxjNHWFo37CNLDwvPHe+xrND9wLg==","signatures":[{"sig":"MEUCIHs+X3cW5z5dKQ85/twvsRaa1yDuXy7z9MVHAD8BaXMdAiEA61AkJRr2f7/DH10DHnObPAfekSWTyNPgOVVwdWWjcTM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":178161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnEqCRA9TVsSAnZWagAAnPgP/RPV8/ns1EOyqomBgfQn\nqv5qIWrGAUDgeYaS/VqdfCqEZIOCsqXzlC5jnULIIR1W7rDKZ76L98qsFYak\nJR+I7myrHQI7msUSPTR5k60/LHMRVxMaMR7yI39lK+O6InxD7f/+/cKkkIvE\ng/IKL53dmXn2Tq55YQcn7IfynxotvQHg0xMbFmmzhImbxr4joZbih+y4quB5\noM0wjPfb0FISwexJwyPtFr2gb82q171Drf/dABMnrxznG5PLxWaI1THwsZ8f\nvFY0ibW1GA/ZFgDl0ij4J1L71Dggwjxk48HEZloKPshpwSHbiNu3/ZJHLmd3\n9nUmao4QW0J2FRolVd44gmAV59qeKfGI+YCywDWjpCEhWGbG0lO5tFEMdECe\nSjNSCWNbwPKH5YCp8rSNjU1qYodfuZI2mmFHRoFyn0qTwN/YbQRxbJBIj0xw\nrdpxsxqHnAwHlgGjS/61jWRxz47g1kZgjAxEgHcSkNN1rfFNMlmKDue9Q9f0\nIk20Vkw476Ot4QQ1ZYs6fE826Bjez9a1MnL3/iX84OpSaPUO3DkHM4U1J1cZ\nGBFWdwA1Y9mJKxQ7lcer5FiYLUbR8o6+KoVwLUjtMi4dGQvYU2vMlguzqVO6\nNp8s3yQ8uFzC3QXp2rF1JUTDCqe2cgKwRWuCLFoh+z4LVt/m8/gfEKduVWVc\n3aw/\r\n=Wjjk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.735147131.0","@material/base":"4.0.0-canary.735147131.0","@material/shape":"4.0.0-canary.735147131.0","@material/theme":"4.0.0-canary.735147131.0","@material/floating-label":"4.0.0-canary.735147131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.735147131.0_1571189033710_0.29798544014784834","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/notched-outline","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.062ade5c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7282ecfcdb7bc9380afb42d580fb90b6035c042","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.062ade5c0.0.tgz","fileCount":30,"integrity":"sha512-TEl0hs3ANPRQSbiqn7U27qs27dV22JItaS/pnkU9+N0LjpCCp+q3baDVxbVCQPSRJqcDbE9NJEsf5PYK4+ZBvg==","signatures":[{"sig":"MEQCIH67kb7jybkEp4HEX1ywy+HryuqovsfWkMOjwl63h9dFAiAiqKgrUjaqoAnL0PW9N2PL0Fs1rnoovSaOVyeMSijtnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":178963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp71zCRA9TVsSAnZWagAAtDAP/R5y+Dr3drk7d2HjmupF\nBw57tks7UqrBsnQBFf1Q9zgQwMouIWwhPStKVLVlh+i198XdfoI8jtXS1wZo\nYflad7Xx7WRvEPEwXyXDZSBaJ6tsZTHoshFHgo2o5r+ZSx8yXLMYUGiQ5gYc\nvev5gG4cythbMdF2ZzCsC7zzMc8J9xaGSZ01HrSUvl65KVH9y3DUoBDQ4CmI\n+7FQH8bsgcuX8EwwAwBBSdCIhsF5hRptn+LB7ADGqG9TdtRXeMQ3bQ68/25Y\nsQJOUpmCf3jTj0ga0uFreDwNVUj/FWFRuawfiInxbw2R2i4Z6UhL4qHQkgW6\nRfNPibZYe75kOlf+dr8gprDoPqsoxL6rLdWhOFN9GLBDLqcWp1lXemGIFbRs\nzCit1m2SFzsLQpWJsyaPDumqnataZngnoYJfziMfuXRBg0L3W7H0FheAxtEU\nZrrZFgcsTUvp9XmoqUcjyC77lSkQY8oPVf+NlLqqvfQnxUo3UPXV8c+Byt5x\nQFl6UW3EdzE+d3EX+HQMWkJyQ5ZyZLQEpan+BcGty0eNCk6xq4rwA2NGG4T7\n8bW7ZxC5usKfkkxx+mYt3dEOEmo9TXjXHZecKwn5dHYw60PZE7XfdKfs7+Os\nOXdN5eWdU2nhHTwGgj6I/Sgntaz5gOuy67marxL3sLmV8unMve5JvhUlSQCu\n/aWR\r\n=vhK7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.062ade5c0.0","@material/base":"4.0.0-canary.062ade5c0.0","@material/shape":"4.0.0-canary.062ade5c0.0","@material/theme":"4.0.0-canary.062ade5c0.0","@material/floating-label":"4.0.0-canary.062ade5c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.062ade5c0.0_1571274098622_0.8874765233628967","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/notched-outline","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.774ad4f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"442ffdb6f50cabe5949232f022779bc7383b9754","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.774ad4f8.0.tgz","fileCount":30,"integrity":"sha512-9B7/cmTKlKNupn3W1KOm+z5t9xcBUvQIGMjOqGUvEK6jlyPoBAWzMY+bUquLze3FLNRhNiEvvzmF6dAdcsoxbg==","signatures":[{"sig":"MEYCIQDbkA1vD5oN15SmssTPlf4bCM3uoWASBqUpOjSB5nN1YwIhAMVd+X/6Mx2jpnsMr4fOTtzEzYWKkozSEU7B7Ba6YbwQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+hyCRA9TVsSAnZWagAAyS4P/1LkJhBvElLU11G7jKMW\naxjlOuJnu0r6dE1lmnY16OFXoUipDRK0zsg9gfZlgrhl2+p6llCqEZAH3M6i\nN56ozLN5dU2RBR9DwtG9XgzWqjJOuPMpfSnot67NdgymfyWCY4UUrTEaWDov\nt5WSnLk91SbY7/m12CEfxJQ1OJlLRjuH5amWsuUzfKCrh8fBeCwPBLSfh5L+\nQXPJim59WD16heoGteZhkLGmN1HF8XCsVCSY3eCi2WVvNB8VHlQdfXSOtyqP\nfbmDtxhlydawcf3vm0mRREzpUSDpC0iRMg+BZaDXZB0ZPF+X5bvGT5ibaS3o\na/vPxsyxF83B6GF8Zx1eFZ8Qw+04JgQv2cXLnS1fuosNWEUTVXDQRuWUuQUA\ngJCIvgtK1MoO5Qv782A2cMw47mMyeXSbBIaiAk5hZ1JxZCfb+uWpsdUN3ZzO\ns6YVZC1fhFrZ7hULSyMjOiW0QRaHbF0YSw+cE4ZtiRTXnjC3QfhcSrxvFvqD\n9NnSoVxCBg2Zho1My/rQdaCQs8xhlU6EqlRiEFs2D9t3fc5IPAbOtCWltt0G\nG0l8X8LQLz3w42KuSrK4zs4gk7pn17qyZf7hfKx9o5oPg3t910vZxnX4MZAB\ntyvhH1DcjcAsZqWQGHsBj46uYsA1pCWjt2nYh5NYegPinES0cQ8tDXhTKc3r\neUZ+\r\n=QXZe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.774ad4f8.0","@material/base":"4.0.0-canary.774ad4f8.0","@material/shape":"4.0.0-canary.774ad4f8.0","@material/theme":"4.0.0-canary.774ad4f8.0","@material/floating-label":"4.0.0-canary.774ad4f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.774ad4f8.0_1571285105558_0.007029055633429149","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/notched-outline","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.5916d18c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1eb0944b13c46f14203637d309fa08375f144f8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.5916d18c.0.tgz","fileCount":30,"integrity":"sha512-z9Zxn4+rRKd8G8YBuHRbkuRcxHSMqRFgvnt0FdTOA5cNy32zSaSmKjwSk4rIrBHAZQ/Q7BhMjko/KFDjEijKdA==","signatures":[{"sig":"MEUCIQDT75SMOvR1/7geGaHEAH4O4Pepa2rh1APEH0mmsn2+MwIgOpRQ/GVIkjzwi3u0bXdeP30pEd4ozVCBLWDw9q2dxNc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhvoCRA9TVsSAnZWagAAc3MP/2HuvrERSlpYHlVb7bnu\nx+yIWvizhpTTo457gJdrgREmYIXp96I8n4VKg89cFHZca0YOGEoj3k3L+CAY\nyt7FwKX54Hf5uTjNXCIRBWK4i1jd7G7fQQX21s3Qn5n9pY9v35sGYixUSWM/\nI0XR59X7TE5jYoiGAargGTiLFYPosHcMtXiFzD+Q3OKKidrmqggKs+rukuao\ngcLMPsr4nhwDtJqZ010z8keAUQ80HS2iGzJizbekdr9woVFqfrNbcrC5E4Pl\nz3DzLmI1Q7pW2ggPvVXXsDR6BbizL+GHlVwy3eEy+5iFHxVMG6COiVl823gq\n06oA8/OGEJJ01DvSR2ebhMAH+8zqsPV1Yzsey3flzDpd3MSKe8y0H7IxqkLH\nrnwIeDpY6Dh0a1jnu9KOcfHhJSEskpIlPocFT/wctYnTO3iQHmQ0dMI+DzlH\nzjIpaVEtz6CQSURCcU2kGIsqPnE7hRdUcnYfYwG8oNPHBHGuotW1h15juDqm\n9CGyDTio4JFNUBtTNEacCgCeDjoQrrjUH/iIHw1Kju4jEEqUrAFj8Kp+nuef\nRrqte0zSlipkcg60ouUQu9QGpZ3F2TMHIGGsYtRjb3LeTr2B2ycMEeLCqLWV\nbWyVQ6EQ5vb2sn9GEgDKupcPfsf5F3WbnW9qcqN0OMycI/FyoXeLJ+1fI7a6\njSLN\r\n=j+Hd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.5916d18c.0","@material/base":"4.0.0-canary.5916d18c.0","@material/shape":"4.0.0-canary.5916d18c.0","@material/theme":"4.0.0-canary.5916d18c.0","@material/floating-label":"4.0.0-canary.5916d18c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.5916d18c.0_1571429351546_0.8346732627130986","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/notched-outline","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.d4141c95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18d38e04b84e4377330c2bce541d051c90c43d88","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.d4141c95.0.tgz","fileCount":30,"integrity":"sha512-b3G5hSmjPQe4AOxyAhUDi28wsObWElozkQv9ACpQZ3X4PGG/f8NxcXEeS/oSL3LXz4Ou8a+6CO78LgsrurbWHA==","signatures":[{"sig":"MEQCIDqXqC+GKwolBLqvC4/xNUidLMWiB9vOqugtJfqrdgV+AiB6e3TaByRXj9vl/J/jysKePwW7+eAZlIubsEtDTUXUPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQCjCRA9TVsSAnZWagAAfVoQAIMit6d7TEacfXQUBbVF\ncuGhOj5SCIpDjYS/Zqkab0hn9SBXu08hB2dydbAZpLieCDirQS3lJE/mgMpj\nY0yOWD1laEXxVgLN559tz/dSrRBpfQ1Hh36dN6Vj+UuEdRo4xc0qZMJFRN4a\nMo5iVpIabF7IfYUhik7KenZg7KPqAoVgZqqCf3taR7O42qXKJHeGC4qGz3CT\nVwSdMI7UDYURkYN2rGRworsCCDptnVJRSAB9MzK+bIaUknBIKSB5LMWAWlVC\nEjfaR7yPAjN38N4tRVBMEpO41tdKYP0Zcgz6Td5P68VQxETE9F/rSGOFkqHy\nGjEgyL2qOuRFXL2XO2+cdbAYjb83OdjJLIkLBZlayHR7Yl+IHBx9rPa4aYAo\n/Nk3SBsqXuEpmbrcpVcld7XkmOwjfj1drIQgQRirsHP9Q3+cSWdEgUNenJXV\ncrelfT7oNB8cz7ri+6gJThQE/6ZQC7fc8C8l+QDtFA6u1uF6lBZ60KrwEMdG\n+jujLJM4fdHKPMvYpDntK0tzsSuUJEW0uwKHeqDjghWjKt3ZclzW3WUOzuJ5\nbm0vavR2ttuCZsxolN5gvuIAhg4UovIWMeWkMJn9JIAhTpHGDy+bthMMMref\nh+iy10iHk3nyGO1pYvDD8WGtUxLFkxzLBvyN6Q7Sgg4Sn8zXsdiZLOgYv/jb\nVZ3a\r\n=KAv2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.d4141c95.0","@material/base":"4.0.0-canary.d4141c95.0","@material/shape":"4.0.0-canary.d4141c95.0","@material/theme":"4.0.0-canary.d4141c95.0","@material/floating-label":"4.0.0-canary.d4141c95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.d4141c95.0_1571881122961_0.6175665850624807","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/notched-outline","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.2b878b3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c67ef3c3e89b23a2948d2ddccc1630ba6d9d4f9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.2b878b3e.0.tgz","fileCount":30,"integrity":"sha512-MUBO1+aAdOakyWg8KdjEtBOZKXldguyb7T00S4psbmtZq/l6iA6S23R31nn5a6SB7PrbZyIUCBUubY1N+2c3yg==","signatures":[{"sig":"MEUCIBv4QsfuvP13AActvByfJDL5A63f/UBwUlaDztPkGv/sAiEA//Z6a9UuO7JZLyX/n3bLAhdcyeHzlisUefKznv11JnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslnECRA9TVsSAnZWagAA63UP/2oyDFycLq/fMMe9d0um\nlScmzOMBvU563LGqBfYlmkfGIph+Hvc3vYiEbN0fcwYkZ72qDQAbhRR6sOfx\nITdX1lrYsRFn8TundXZTXAVBu6JpUfQ2eWZs3in5EcP8O/XRYzW1R+4jm6Rl\n+UFSzzOcXlsLYs+laIumKuxzHvgzpApHHvCuJ+xF6brkQVME6px+MlBAXABJ\nIAqcj7ZStzcYFVKFFBOaRcwFoV/URwi/QmePl0SScc6AnBuCfuuKtgDIrwIk\n49ASqZLH5KRyOvyyPWVlAuTFqxjt4YAOYgMvnpWYAVk2su3IUiHKqNi1LKCk\npTBMTMGzxKs5WQBzyPKgzVSRZy66HUu/S0kKelE/xKWLt2xpiijzb1kOa06W\nSo0C0MFcV28G53qf1y2PgRVPLfa/W8oQg95Hh37++qVNseQfebix0u8oGo//\nqZpqAetft3/if8Zq61w4n71YtnyKxoV5zUxjsPgciGERqk36YJ+Y0jzBzSMt\n8dD+UoynfPj4l1fGvtxCuIB7Le3Pdfqf2UhBid+nZfMGM7j9JaKfhuz2KB2v\nTXxZbWvWbWgvFdXOv1AkA2dpGa2rEWR3aFSzz5T41vHfvbDtZDvL9KljJjvZ\niRib6sMBEd04wGr1dUunEFLRewC28g1f8DfjfLGA11O8UqoIvdy0qTRMpNRq\n0Aej\r\n=yXor\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.2b878b3e.0","@material/base":"4.0.0-canary.2b878b3e.0","@material/shape":"4.0.0-canary.2b878b3e.0","@material/theme":"4.0.0-canary.2b878b3e.0","@material/floating-label":"4.0.0-canary.2b878b3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.2b878b3e.0_1571969476489_0.7467814683814817","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/notched-outline","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.b06c0efe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f4f1bcf6d0fb8d4ca6b14f230491e5607c17504","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.b06c0efe.0.tgz","fileCount":30,"integrity":"sha512-4SwqDawBW8YBCCT1tQBdkqB11CPiVu5+oSLqxIvDY01YoU7ry8V9CkMH9PxiXXU476tritKHF3Dj0+2CYyZNrA==","signatures":[{"sig":"MEUCIQCo74PuPMMHk2Ojx0TNxzA7Pq1UJ+Iq3zOzK9duNPq7pwIgetvwCyDB+CxFdA9dXWekxx6N2JU/mriFnq1UH6EZLt0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LpCRA9TVsSAnZWagAAbBEQAJ01kEX3lrnZOWD7q995\n7nf/XfZGJT30/1OM50U2JDgVht14j+D/r5cz4eMJxL29XL50YIFe5TZcBNZ7\nMmY2RzDmY9lXAOrgifM0oZ1791b7Ou73K+3UOtcMcQHcsds/WPaJbyYDVueq\nkxpKDEbg+Mm/W1xRaUNqF3Un0ko7Jcwsb1oZD7A+XPIeQrE2L3c0Zn/vwKgR\ny5QEwL6z/DO5XInJqY0cmOCPyUPzKh+tIrCagd2Ws7cZb6yWk0cx3xMLaEIH\nKDL5a214JaEX+Kv7RbuS8UdBrf2Jok5FwaUIHfw6ypwQRhh25MlGipVglX0t\n2/3uG5k2WrtY+sdMSW9/D7DCoxqqSylGp0VfVCfGjlV9zjTUA4ShcWW5Jmjh\ndvx8YAXhaCXYmtmeU4G1UDF/soEg/sKE8CQc9Mt9DBZbBnpq5hdQmZoHyNjP\nYajG4X1JzrpyUSOmnjGpGf+a9mdHuRrKqh79TdcYyDK6ea3aTcE0q6zwGJr8\nNt3gwbA4dbpm7AWjTxr4n6jN+VztGuWuupPV0fo1i2POMlr4D/e5d1tYJ47k\nF2t4p/UbOITN7GpqeN5xBQ7NUZ21cd3nW60Gvl4msE0CM+TDho2yBoWJ4+oc\nW1N7TgnULX9sPImrvu8wzJroYNDPaH0i46kYIwYrAfSkgu71D/YamSSyKCNo\nYtYa\r\n=R9Fw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.b06c0efe.0","@material/base":"4.0.0-canary.b06c0efe.0","@material/shape":"4.0.0-canary.b06c0efe.0","@material/theme":"4.0.0-canary.b06c0efe.0","@material/floating-label":"4.0.0-canary.b06c0efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.b06c0efe.0_1572053737076_0.08507240050126641","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/notched-outline","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.01628efa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"758eac6a3ab8cc3863105d9ad141aa17c55f9aac","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.01628efa.0.tgz","fileCount":30,"integrity":"sha512-b0AtjnaiPJWrcw0BtfbNkfSdtRWU2RqAHiqVrIrBQvopPvc3/vdo/ub/9xW83DPf+ZHoExZc3srINSSLqP/h7A==","signatures":[{"sig":"MEUCIQDIYe2W8517gkLFUp8FinvT3F9smscTm8QGIvKXeKlAOAIgZ8KPofRl219Q8ZfZz4bkYb93/zM5vogExNTj6MaGI4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4HWCRA9TVsSAnZWagAAU2AP/ju3wNFPTBoLvbcj3bsi\nFCHYeJsnvU/W6oUp6/GfhGnJwdzy/ilLOFbF1EB1F/nMVaXqz+8MZf+gG4pW\nJglfvMXRduK6wuwoseGAZIM2DiY+bgUW024CvL9QywzXO3wrJ/Lu4ZnDDFwB\ndo29upi8PfWFxesJaZtuDL31dwarawHgOdJ7RVnshpOER4fVp7feo/wCYVPf\nJjUO+JJA/FvzLhSHoSKTwoiHK+yV89mts+QJcjRP1CtfW2a5wZz6rMrm8abE\npsfBtJ5txd7T09fuyi58Fd3+Qiq73wzzyUEsr2H6XtPj6j4hPQkFzoUvYpXg\nQCw8lJuIkfnBfP9bQFSqPhGHUdmJCNHhCbgWW+IQPjIk7aEkW5pw/2pdnFCk\n8e9IBWXfkp8WXihH5skmMLo1IDVQDlTs6C3nxCZs4CyzjzV7SZ+1KMgZr/yM\nD1iZittSJNztFnJ0DZ+qGG1+FxmdqXV6i0YIYk4kxtMWV6rYv4WbNLAI2ZSk\nfPHtO1D//qEkn/eI5uETTTE9OnRJEzEoljiaKrXUXZP3EqmAVErffSBkpWTf\ntvQ1ZjN56mPqtbLE2RjBysmZZXB1ElKFUDgcvvinbnaEChLd+o0f7S0sWCXb\nBxUtgmvFr0hUw39Zmzduj+yAE0dGZGhbCQD0eFEK40XUhhLah3Nh+Cyj4e+p\ntrDr\r\n=h6Kv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.01628efa.0","@material/base":"4.0.0-canary.01628efa.0","@material/shape":"4.0.0-canary.01628efa.0","@material/theme":"4.0.0-canary.01628efa.0","@material/floating-label":"4.0.0-canary.01628efa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.01628efa.0_1572307414305_0.9777511851999163","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/notched-outline","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.b5c6d66b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9242f2664490ae92b8ead0a5a9b19f87c97052e9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.b5c6d66b.0.tgz","fileCount":30,"integrity":"sha512-5CYs0qwhwc9HwTKMKZAcLjsa4Fg+aUQUspKySAe2NvVV5XHuisslxxgAmhL0ExHeBgBj8ZPl0l4VotlhHMEHGA==","signatures":[{"sig":"MEYCIQD7XBGni+JaONlfJ0yTidWyOKWRubd/+K3ZLvbDp/JwfgIhANKLkarO4057XN4/VBdln/xCqIivk+2OW3VuzIaqPu6k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH2FCRA9TVsSAnZWagAATQ8P/1La8KwhhMNh2vOqXBoo\nM/ElZfJL0gcfQ5N2t/+DMiQSUy1MpKOqNAJxSEGqKh0wHzLwfhL882kqsoSK\n53ndDeTRve5+ZAyHdEas2DVrGWSV+cydIkz5ZQHHwiyar8ukehXJULzSmFVr\nB57VbmBtXRuXte6jwfLpYOoJbZu0IGu0n42NWO+bxKNiDwVO5iU2NWulaKA0\nh+kACcWNhc7ICTNL1PXQzGeGvJ0nVQpWvWpK3Emq90ti7J8dw0H8l71ISLd+\nTKFwiHw3Ztt3XrINfMToTojhrxB2nX8847eIjfG9kHpCI9YOuuL+JkX+Ey7x\nMES6tWO3+xySTLgPoyTRjaj9y6Yd7TPnbCC2Si5jQMzRZSZXc9EA77d9jeAp\nSUHDrKBLXHIuA7+47Ua18SU98QpJfwDu74KiAwZjWSr8S75sCtKqjCGZoSKP\nV/LPeM4DNukF7DvEEqGRpvGKzk0VI5RA+m/dUE5zSqwXlozoNrfevtwu60vh\nks1aKiOv3UbWQVZyzoLEj2nodkjj2EqeQCNjy/wGVjE26Tk71MR+XPChFQWG\nGyEYnrHoVvZJDPs7GYVjrqaU3/9FtBllj3Z7Em0AT/dn0ydKfNrSqjwcstoe\nT6NJOnMeOEaxQhu19PydmedO4FFWdQDgUxcsc87cxHJHJfCtHw16IWjxxKGa\ngS+E\r\n=cawR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.b5c6d66b.0","@material/base":"4.0.0-canary.b5c6d66b.0","@material/shape":"4.0.0-canary.b5c6d66b.0","@material/theme":"4.0.0-canary.b5c6d66b.0","@material/floating-label":"4.0.0-canary.b5c6d66b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.b5c6d66b.0_1572371844813_0.21406492271003352","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/notched-outline","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.cdf858ea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6eb45f8b581924028b6fa7658e8b7bd4e37e1e7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.cdf858ea.0.tgz","fileCount":30,"integrity":"sha512-jyRjCy+VegaXy+wJAZVVIH3GlKAH7V/UO+Mbmpy3izE/g6z4VsKKzz9H0/qavmNOpoDeu77/e8Oe7OCuZJfLwA==","signatures":[{"sig":"MEQCIALU3lLzHXqbdbvcRmm4EiiaI6+Sn2A0cxgn3QJV84JbAiA/52rHMyDCq2lfS/GadUHY8cBPSw616aDl5Ng5d82dOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJ8CRA9TVsSAnZWagAAnAcP/20XUOuRy5bgErm080GR\ncDOxz1S1Cf77IGA7BRpeu/83YLhBuR2rALI4sdLgk2gU4Gp5kCYPaoknkabK\nI2lKmZLxu/tCrPf62RrzcboGdL/AZfOi+Om833+Rc23b3Ajkrx+BN/+LBedn\nkL9BoyHBXIfues9vTsKR5QUUJsizIXwG0vSVXDUaTMB50LMf2nGUmSgROSjr\n1cbeTZ5n2IpGIdPZst6e+ve/0iwZsM0epyNiwaxJM4VPz8EJKJZluX08GqAf\nuC8sqYgQhaFKrOqG/vkLMmfW9a4xpX1sgSxG6dfUq8XtLD3TtxBAU9AS1pEe\nszV1iENC8064/8VFn0Tv/SZYVXyo+8XIzSv21v9jJIuUUIpx0wNHe92SPp2l\ndXYb13rmcXvoSbd0w1jKdwL4RWpUQDKXKlrHjC2uBqpKKD7SScDhi9p+I058\nvaqcu72bz57gMaSh2z1+yrrWATNh40N46GfhkEe5lydWkISgYHX9Vvqx79aM\naLaMDlZAryQEsK7Xmm+AA2uAUgGDvfv5ivEQCAjy2RWcKxyNWa5uXUaXvMXm\n5s6xhseLd/9+899Q5jsd8NRubmGNkiWpzF0vxdMgO2CPYSNtLsgFjVdc7DVY\nb6w28lnuZ6s0iTR2Q/9Nl+X02XpmbR3RA1pE03tnT4SdYe5K7DHLaxaSqgWv\noAYg\r\n=AkI/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.cdf858ea.0","@material/base":"4.0.0-canary.cdf858ea.0","@material/shape":"4.0.0-canary.cdf858ea.0","@material/theme":"4.0.0-canary.cdf858ea.0","@material/floating-label":"4.0.0-canary.cdf858ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.cdf858ea.0_1572631163703_0.35038408479448147","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/notched-outline","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.719b57e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc17b69eaa3868c51970e4a746930f866a54a7cb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.719b57e1.0.tgz","fileCount":30,"integrity":"sha512-f6brSViA1VM2SOrEFAFeQWo/NhgNuiw8Mtg2S0I9CnMKRpN4qp0S3WvMuUVgcxjR82KLNao4AuzoXRRtQcdCGg==","signatures":[{"sig":"MEUCIQCKZfMeYcqIfxOeUvJxTms8mZCCDbmvNQxviq219H/YsgIgKKjjhlbQIiw7My+jxSywVUDKgqrx1yNkp1bSpfhQRQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI8+CRA9TVsSAnZWagAAtpIP/RoDWg3QE5/+lca+Njrj\nQXsG6U45f3TyYL8PkVVc+JPdGr2OShRctzsQO1musAqLglgSHLHobGMxKfMj\n4RtV6zAa9XW1LbbrF72pv1YAIXE5ZsHRdJFcy6Oau5BpD5oq2c9YzSCB8Loi\nsQ2LJjHDCKFBd1awsB4a5lgAX0ZI1/V16aY0pijSqm01wrBvZ3LpOIFChLpD\n+hBDMZ/xFb4lcLTNESKo8tPZkUz8AvBXMfg/ARxo0hoBNYY23xHWiSCtKrXz\nQWiRuTStn1B2kjOjRYhRKcJYCZxu7qfA0evZdj3LdCisk4Dqxyad9EJFsDB+\ncOppUCyj9P9rtYxlLuKEy838/rUcyf3skGE4ji/tInNtLT9y2USBTDFVdqqy\nKcy6IwFDWgQ2GThtdZgQuVATC7aN7qR4GwVQkgw6juiwSNdWIf522/7bmzx2\nCKrapTREK7E0yPZyAYzb6uV2wMBhCdX6MzNuTjJ7i69FFctKgHh4RdOsQ6kX\n+WbjdKjfoS8tEFWekesd7c1Yopppvh953yEawOrxCTuSlhoeTq5hrFT7UMRn\nF0DM+U/vgmDZCyw3aT+f8Xcj3xaPK+LVzXwrufUo5JoB1sMXp5lvKGjwD4b8\nY1AU9pMpwec1nR3y8l69MeSsWh8uCYg9MbomeQIjQZfu+4As3VnGEDeoCnVF\nUTiP\r\n=HM32\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.719b57e1.0","@material/base":"4.0.0-canary.719b57e1.0","@material/shape":"4.0.0-canary.719b57e1.0","@material/theme":"4.0.0-canary.719b57e1.0","@material/floating-label":"4.0.0-canary.719b57e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.719b57e1.0_1572638525993_0.8159855970030971","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/notched-outline","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.97cbbdc2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb1f82c689fdbc368c87869fda5bce899f010fe8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.97cbbdc2.0.tgz","fileCount":30,"integrity":"sha512-PTSG7264A/zHFNGBs2qXnnxaFoiV5S0MYjDjGUjqfYYMppuCmsRk7tbwS71ts/7kikGGMsSU6xcCCi2UcwiqmQ==","signatures":[{"sig":"MEQCIGEa2gxWSSZTA/3VqCJOON+Sg+9DzP/aDbvzx1EwM3A0AiAZL+ei/SYT2F7VwykIo/LJcSQ6fFi03Jla+gmEPZWv8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJW2CRA9TVsSAnZWagAAI0sP/3XoD2ZNiUCznZhutCNU\nGjMH8X5+86C9XtE+M/H4FvyGyku3fji7mRsR+hPcrTOamyxkZ4Veo49XqChD\nVPavvMJVND54zgZU+okrxKVsXTPOUiPzPFAnkhzkvVCcIbsrkf4OF420VrC4\nzLAM3fsSRh94TM3XMndbRuYsv/71dzVjvpgaELsNeh6rDangsZAVS+bEis5O\ng0ua0uN2x2UIVLXzAAolvNJ/ykFeD/Uv0thqC79ucGhpz84gOp6FJof1QMac\n8U4jX7Pf4uCZFEQPIVW87XGDghoRLqEHxTdEG/VdX3U4N6IK92H9cMu+PsUl\nRpwMEQHW1LeDYBFOJ66jxa6r4BNqPjOFOQEE+wLUE2vKJSAmAPYLifr3HHkO\ncFNg7aXnlVhwBfnk4D5ZQsQWfBtUngk/Vilv5zlYjYMoDpxgmNuKaNgo7fND\neoak35QpFewJTf7QCmDS+GKTXRy/Rwfo3/YS5UrwR9fpz6wdsc08+q410Epa\nn4zO8YJ8LRxb1Jja9EXn6TlafcaADZwxJQui+tACw+goKZ1iGQ5n2rTzPzMQ\ne9P8zUDAs20TVkuQwP3gg90EraayzC6fjZEh9uptTbEoe5z24bS2N3o2G6zv\nFtHJyox+U5OKLeFywytoI9k1TM13x1oeu5QIENRhSs1d7WHp34mYCh4yxGWW\noOJo\r\n=r+3a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.97cbbdc2.0","@material/base":"4.0.0-canary.97cbbdc2.0","@material/shape":"4.0.0-canary.97cbbdc2.0","@material/theme":"4.0.0-canary.97cbbdc2.0","@material/floating-label":"4.0.0-canary.97cbbdc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.97cbbdc2.0_1572640181824_0.9556031821048534","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/notched-outline","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.8e36b3b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea7d074fbfa8035a43154b1caf2cf0265c382494","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.8e36b3b7.0.tgz","fileCount":30,"integrity":"sha512-spYGrcVrKkMpVkZtYSnM9wDBhTigKT3QX/1lUeYxFK5xwlA7VKiQVPGgnPU7f5DNL+h6/TNX7DV5RAB+QdezCw==","signatures":[{"sig":"MEUCIBS6fd8/FH9rELJ9fHfQQIVSyE+JWgw/4v5Gkw2+ccQaAiEA+TkP+GtmTAPFNdEGENKS8TatUT1oTy3T5QlPoeVMJB0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ1KCRA9TVsSAnZWagAAWLwP/36+T006TRkN/noFsi0N\n2fwgMyFAtAixvWsRLIKmL+5sVUP7IzD0dfg87O/CM6TGpz7LS9oIRUoBvuNY\n5Kwh1ZyEjy5ljm4m2lgoDDgroLrlJv3CkDo9t3AyVdeqmGmTPKgaBft39zle\nMLuUFFIwiGr/j5NsB73OJcxxcalRlNvMy2fHYwSo5QYUPZpVFC3jrdy+/EEk\n7X/zS+oswhhKr/ZOCQyFxC+nLa+xSrBSgf358Ef3Tw39cdNYpP7rQQ5/Xaiu\nl88gqwCXz7Xben3jS0HbyzyJWeBIvrafalmiKYiaEVtHFwzOPa0uzSSep0w1\nKYaoQuC228Zdv5YdlGqwyTier2ZGg2QF5zvCDHEEkOZg2kYb3kGutiehR7+6\nGj/TKwAfFuGK6fbvEtzquHS7cowGQ+pBANAkzkBWmrm4M0hJ82Tjc63j4IjW\nUAZ9pGfYEhUNLzinF4ZnoLsD7When3sIHilY2AiPZY35UYNAbY34G4gRnfVp\nnCILbVTfbEwH2D0MselZth0deIw5zoyDt/18k5g3U4i0uiZdwFmlI9v2JCqC\nnUYEjyv/BNt4U82e+9AkoRxlx1KKJMP8AyGU4RpEEtRgb3yQqK4YdDP9HPKl\nIa5WFW2x1w/0srwrwmdx+Zot6PSDYXuKNqz/FeHQpl3hh/Y0ISjHiD+Puvh4\n8QGF\r\n=kPR0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.8e36b3b7.0","@material/base":"4.0.0-canary.8e36b3b7.0","@material/shape":"4.0.0-canary.8e36b3b7.0","@material/theme":"4.0.0-canary.8e36b3b7.0","@material/floating-label":"4.0.0-canary.8e36b3b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.8e36b3b7.0_1572642122013_0.8409097967845545","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/notched-outline","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0-canary.62d3a09b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c190b1cc30273b130ec67c7757e4a15a5bd8d66e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0-canary.62d3a09b.0.tgz","fileCount":30,"integrity":"sha512-kV1qC/QxTonFrm0COz+XnjTP7TVXiowdLvJYBma6QBJxiUnIfeQ8pJqf9BDNvW0sjDG+Nxg63zzBNqbXtMBXEQ==","signatures":[{"sig":"MEQCIEOEUOUS6sm4ELwJVSZpsDLZCse7v80MShYhMCrs3qaKAiAPDiU8vosckwIwQlJZKmXM94HKk/Q+cb4yUyfmkAO/Rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ92CRA9TVsSAnZWagAAALEQAI3MQQiTrrFqIcNY/JGM\nlncdaGXpeg/GfwAsxl4XJin9aEtl3J3WW/5xHabKMkC6zmFA0WmV82+itWfp\naoAYISKq8LMc+P1cbgm7EOZQzYGXc1SZD3ANV85nD2TFjL2xR+Bja/OImawC\n/exn3v41KnBkcLONLb4pKs92BMeWMQk23k2ObQgKRvgsnwNUrFs0fS0Nugzw\naEDJNZtWK/oveTt+nOQYgelK5s+VnhfxY+1qa9gTYu7N87frD6ZjKKDa9kEE\nQX3ubum7/75+bffm7yNTM5UxHjqT+y/JYMv2Tupfje6yC713otGBw1mGaylU\nZsnhKC0Hi/+b1ErW/Poc6wnVnDDN+aUrSjyPvqZASvyyQ41VCVhqF4DrqMkC\n/EwvrSk6m8q1fbnOUkNBDjI8006ZBdervDAEcQbi1ryUqUAI17++Da5ywD7Q\nLguejCnuTVZ6rRvu2aDyaP5yp2Inl5Hz3N78jLn6pVvgNZxWe0g4KGd6UOLk\nwx4ebubUHffWNIQGHs2BOUPtBIe33Mb+lijlKfUeocbtO7ld9aeWomnNx+Fl\n8Goi7JW/3+HLAPBxYMqZuj8trndD/SJtQeoM6s2ZjE+d82vRFJzyku0RSzzn\nhzzsUV2XblcjzQdEVWVBljzkPOAtNljVpn01Xfx9HYoq2Vk+KxXuoaKbLk9O\n98In\r\n=ml7G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.62d3a09b.0","@material/base":"4.0.0-canary.62d3a09b.0","@material/shape":"4.0.0-canary.62d3a09b.0","@material/theme":"4.0.0-canary.62d3a09b.0","@material/floating-label":"4.0.0-canary.62d3a09b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0-canary.62d3a09b.0_1572642678396_0.8406515403721471","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/notched-outline","version":"4.0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@4.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63c8d1f856de032b3c9a9f2654419de86f4b2b4a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0.tgz","fileCount":30,"integrity":"sha512-9WNG7dZS83nu72kmoknA3XyvZQIxx8QBjEB2Q2KGyRp4Q8zrzWxfcvTYgiOsYgvz013JnTqaqe4g0wjl6v789g==","signatures":[{"sig":"MEUCIQDYF2u3ko+B0tuBNfVDwyTESdfigE7mHmShhw1no3Pp+QIgCnDaUmN3jRoUDGgJoycJNU5DS6y4sp0B34QSytFILHg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcbvCRA9TVsSAnZWagAAmxAP/2z3vzyGTpAyGWsqAmi0\n8kX5F9pCTTJBKaeTLWgZK/SYmRlujBPen4jWLaFjV/YtdNrzIesYaEZ9pKLH\nnvbEHOx2Lb82nve7C4ToLDvMhKyVeHGzIHTjZ4kFtmpU5wALmy1TdU9YShRl\nOLn7p4QFXZ1FCafPJI3l/SnjO0gU8DIJgb1nH8zS362dY0hAGKMKZkiR8rNl\n85a7LaPjbPMczfUtocFFU5c1htavqrenWZF+f8AonbatH9PBB2eIMHZibo3T\nLHD4AaYcOk7pC1hVjU+3nurLF1bI+qUEKnArkpmMmNiUtQP/MnnmecxfkGPJ\nfvYjY4LHK6aPYdPWgaKfE8pFz9wZJZgLgmAxVjVHIv863eqd6bkzaymre+DZ\n8piL/EyRLWPYtZATYc5td8GcfY929t1M77k/rf/BCMr7IwYqF9qCn8c4/7rY\nv97C4mFPW71EqqdS4NapD1FvT2nBi1XPZ8cdyYKzho2haSVstb7jgHvEa1/y\nuglUg1JwGL439Kdh8SvUhZxtSAJdymUBvbWrpbIzJ37Org4KPJwg4StqZjRs\nei9/Fy8iJ3pG8UA6jILKc4iEwm8x62Cj0uurkneIwVYpyep279q0A0pWAi6I\ne3L9XSGVy0tCs4VQB2NcaU6U3RmAOh7wkvKOujS6rhkoyx1tjc40EzSvmErJ\nQqcZ\r\n=PqB8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0","@material/base":"^4.0.0","@material/shape":"^4.0.0","@material/theme":"^4.0.0","@material/floating-label":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_4.0.0_1572718319283_0.9160803044448003","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/notched-outline","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.b5eb51e94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0362df2e944627b512cbf883bb4c644b53ebd35","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.b5eb51e94.0.tgz","fileCount":30,"integrity":"sha512-7CrjwVvqpySc9dFDuHbfBcmJ9VVr0NYlTYVJY+gkQfKvUpdIDVE2wg88UIidEIt29F+cUIhDplZCMy+MBdJ/cA==","signatures":[{"sig":"MEUCIQCvy1qWlPccnNaU3O33dBuIaBQewUAottK3f/2+aNJ9wwIgebepadNv19Cop3fyYhyDvoeavAbhSu/9QnN+iQqF/CU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGOlCRA9TVsSAnZWagAAF4sP/jQLXtHUVA9eMoqPYCq6\nG43h1c4MU/C6cc7WRaOPGbSl627T/5POQECnXIvVOLsxWbdVRmENgc5HB2Pq\n7OsCjBMt6xYk/Xk/zxYQ2zDoz5aXZzWA6oNeX+vUWQhLjWz0Nj64zWq4M29s\nTwzpZ2KCIM2uoneDsQcOCz3G4jjzMK+PdXq37re3Zo92fixU9yfm6vtHbON3\n6dXval4pvdg8ZpibLiJIvAYAMTEscT0VZiJhMtG4eeizlSWG8kLZ1URW2hFW\n8GBNmpxMdauAwWq1f7KeIL82C4iXLd5JrBECk6juaakHZOhjHRwns7mRgxH0\n2QB4nYUFO+RPYy19Z3b5z7L2gJWhwOm7V+anXiwI6kUb+FukP1zQpGxWNdXk\n5OtpsK7b97DreTk+riWqjJGT2A7QJ+KuEsZ5B5LpxuaprELPREXp3D79a2IG\nroEVhT/X0mPR2wAu/FzZjXgCpHUPv6elzrRIY6J1Q+PeNkonkkjFBB3y1SPL\n+0eMJ6orh5wDPEyx0VA1AyRRO0LLcMr2THBcJV7uINmsQv72Pzt1TORRjheT\ntEvDbkY9CIJXc/Xw72k022ODXdqQULOqbl3ZHQSpyA5UNW2yMmRkhM7vlHcv\nXZ7Rij2hvThyYL7zDD1uZTNwE3FwPoGGDzVY+OSd3n5h8QFlw2WQ1OjUoD+v\nK9+U\r\n=vC65\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b5eb51e94.0","@material/base":"5.0.0-canary.b5eb51e94.0","@material/shape":"5.0.0-canary.b5eb51e94.0","@material/theme":"5.0.0-canary.b5eb51e94.0","@material/floating-label":"5.0.0-canary.b5eb51e94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.b5eb51e94.0_1573151653149_0.21769659570084476","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/notched-outline","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.58500806e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1054d23ead8555c26d2eabcdc85bfea8047bf9f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.58500806e.0.tgz","fileCount":30,"integrity":"sha512-3Prb4NwBozbmDQSLERsa95p1cPs+049WRJa38bMcM/GEd94fzgv4RoFYFYl/l8qjYeIS7S+r2sgHk7+KfSAZ7Q==","signatures":[{"sig":"MEYCIQDgAIO/kNpJLyhEquP8ROu5es29PHIcfo8SNyaYztImKgIhAJn6mG9I9mZyPCQA0FbBXcRJiNZa1Ctexv7RQbSpstUv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYtxCRA9TVsSAnZWagAANHUP/3i8I9Zjzwh3vkwWNfJZ\n3Sx9wv/z6cMudKYE4+1mKdJMpoL9xN64cSOFkX4dtimZtTTyQ4rMyRusDdat\nVwSGf4W9jLqdUN6fKV+ZdwpWkYEC9M4JP9sOidDrXO9sDD0i+i8q4P16Z0FD\njJq+5F6wWm5/atWlox0uFtn8E3VMfNXMdDp0Za0beCHyvbtaTUB1FOFqjGWM\nNG6S4wwO3eFKNIQ9BgeVpUGR8+5oWsQ836UldzkDEYj+Gom9ObUwQqoFYe3T\neaU+RD8qDsJTZAoDGhJLulRoG1Nv1RYrgJ0SB+DBQR0X/PUE673dkxPkAk0M\nWCx3jN7oXNEHcGbN3dxH1DjTywx7UsxgDSKvZ34h2LYHK1FCV1MhzJcr3JrZ\noMynMG7Sp9cAiT3l3nJ3pZdM+hfsK/p/dCdtceH6RTyI/3SY6hw7HYHA66pD\n4t63OmLWWDRYQR62wil2Sl+ZlV7qlqwP2SADeRWeJfMKIf1bky/G5C45Iyof\n9og4fizXDDWH6VMf4d1YtFgEAeOknxa2JcasCUK/9ZrAas8CE1M7P8icb7eB\neUKnQ4YNgxmLASodoB0Lomam8YEFg6nPK8t0S/my6HW0Zla08X9HHk4TwTjo\nz51NA3+5IrkEmsuh0qSmfBJhNLgS+QDCSMfbRpf7KBU15G9/wV0OrxxqBfE4\n8b7a\r\n=KxGl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.58500806e.0","@material/base":"5.0.0-canary.58500806e.0","@material/shape":"5.0.0-canary.58500806e.0","@material/theme":"5.0.0-canary.58500806e.0","@material/floating-label":"5.0.0-canary.58500806e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.58500806e.0_1573227376970_0.18351667309299957","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/notched-outline","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.66299b646.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12b4592f2d210e5f101b680d942ba2a0dd64326a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.66299b646.0.tgz","fileCount":30,"integrity":"sha512-O1mjYtB2EJSJidwZ4XEcMNGU2TSCLJTSW2sfDeo5xKHaQulc3mli9RFPuIKJpbMwZErNVchnqha9VXB8qENH9w==","signatures":[{"sig":"MEUCIAuKqXFe0+D5k68NrrT2fXyk4koThqxWEoT6uNnA5gguAiEAknO5o+Mhxx1NPEJ3juo8MyFQplbK88AGi+eOsfY15jg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdFECRA9TVsSAnZWagAAvnkP/1WkOJ6Xa5qPs0rRyKh+\nofuz4DiiZiin+vZIU4QxOvwv3YycswsiKl8StTN1HUBUobZD6kauBwim5tw2\nrWLXzSsUDp6phNWAHWyWQKpOpZ24whQU4GCN63H6YutOFU0F3vYwocCj6ZO0\neujIPanjz+ufWbADr1kwNfen902biWNM6z0ZcgBj1Z2Udd1tzxm3z7T4Yp2f\nQvqYUaNKHdwX9Aeb/ayJSMkgQIrWK5rzI3tTg+dBSGZf+LyfF696Cb4MPfMp\npndeQtoGFwch8YUCjVhZV1pNx3BxRdh7DDqAZlWDjylhrsvwV79ORNVh1pkK\nsFhGMB73u7F4lS/onfxsp0TzKCGowpuHd2ieFS9MTwdmCQ/GU40xGmWbMdqO\nRcfdoEWdOHDIaroE284XVqcgo8VAzquqBm/ZMR/peNaySiUlA5CKNky2RshG\noTBw7+puT57pdkW3bDidd3Mr1g46uDm6tdLxAURotRoAONlzxBv8UcbATTZc\nMrxAzmreFgGbxwKPy7jh6EUPlQFk6v3jTTKhC14EYijusBj9ffu/wJtlXbDg\np2zpdUgT3CsyBYXcD0UgJgvT2hE/2sWxuXeiwswuyPIvS7BVhVkmsESDY1Is\nNhku6P7yh8kdPcQ9TaTh3YfA58hQj/7O1MgF4u1eYD2FknE0z6NEtGYjs4vN\nQ6m7\r\n=f5O5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.66299b646.0","@material/base":"5.0.0-canary.66299b646.0","@material/shape":"5.0.0-canary.66299b646.0","@material/theme":"5.0.0-canary.66299b646.0","@material/floating-label":"5.0.0-canary.66299b646.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.66299b646.0_1573245252422_0.5123495230089619","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/notched-outline","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.821871e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2673d4bf5af19bd1b658402ec38ca09729baa37","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.821871e04.0.tgz","fileCount":30,"integrity":"sha512-kFxvnwYtM07+a4tQi1gp+RV0G9yPyzxX9c+RJf9lQiLD5ywUcuLE6skwrckN8PpgE4alEf/kWI/1K5YSZKOv4g==","signatures":[{"sig":"MEQCIFchgGWhYDjJokqEtcUk3MU5l+o/7fSG++IyJRtr50FuAiABxa2oP6rnmrxsxowqLnTQXj3FRo0/42kZU8K0EK6IMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd4NCRA9TVsSAnZWagAA4KgP/1vNzjLM3t1Qo6gtxD2+\n/DIjbFZWJBXmZy3pwgCZ8nLuf/g2/EeVDLnAIYw1VSwggPXWqPBHh+0gpBf0\ncusrpnEUqIoDJn/K5PIS1dvaeH5jk+/r9H0TZpQTpLjQyqRJSQ14Owc95uTs\nqy6KPIp782qOdQ9fI7k1Rdv7NumxVrqOwkmTSP+Ml20jDWipWnk/NhRtowri\nrttIQSyD3SCYIYpUg/foTtS3Y8AkNQ66X8n/aV2+8pvbNMuXHiy95cHdyuRx\nXh9SI2MX6x8nAR2K9rqXYFPgA0t0CfgBZsG+ZEzleEgopYPT+AKl23peaBGy\nQTb9x1BoWHHnlCa+UQzuAPdUAg+EAeInwFJ8kwCZ4BRFRmK5cnctFQdh7uFw\nKoAeeR/VPacSOMgsFqcFyOKTMXmxb8elLkIrwDMbNJTvH44vvPTglrvBAoG+\nOCMg28p3W2GNDJIZg78jXZ91SL1EZt4E0cAmvDYV787pnW2nqKBx7ouF5bTH\n/cTduE40Yeg2ZJrv0IkqBRiHi3WVJZVDls3t8vOxJ3rayi7yjpXrthYLfC0j\nf5zBGZxjnTF2GQ1z7Q7toTykg0v3bHijUgRGkm8GZaCPyUMnqVcMH8QgzWXy\nv0EVMY/1Vz1bQBXIhy33WgG5qHNrldRP8+lyq/GnVZto/DOXaH0xwfmtIzty\nMQPH\r\n=xAD+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.821871e04.0","@material/base":"5.0.0-canary.821871e04.0","@material/shape":"5.0.0-canary.821871e04.0","@material/theme":"5.0.0-canary.821871e04.0","@material/floating-label":"5.0.0-canary.821871e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.821871e04.0_1573248525035_0.05976125286730305","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/notched-outline","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.491fddc31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"215b14551f3dc4fb7873b7e75ad0dc2b210dcb13","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.491fddc31.0.tgz","fileCount":30,"integrity":"sha512-kv5fHLiEq/KV0lhi/zocQGH7UaV6L2is8vNYily5XAhRM8sFggeloolyB0Hvkl2iipVfV2YMmEz3hTs5qJ2GaA==","signatures":[{"sig":"MEQCIF2R10f3imzuJkSzPTEmhiz2bKFW/BJM2E5lwMdhslZDAiAMBi1Rap7fxQGUF7n3jVn9chlTb8VmBs1w/u985HgBDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxecxCRA9TVsSAnZWagAA8u0QAJtx9HEo4pVcxkTe9xFS\nDXA6NPspdD/ciDn+gxmT4iBJAASOGAsIUTD+b4ZI3z/bFgNj1yEUDP2cSIWe\n1YISDhePR13HUoDd2DoYlivktdGisbJeH3ZLCsvOzxgi2UdaxpiXqwjRfJLG\noh2M+mHZn9Jw0eCtAOKL/Wyufc7fQ2MkUYG4enN6vMAxBZ/VIkdIIGm7nP7r\n42mWms8S9gyOj6U010fhNzIid2JEmoSltzRKQUYF3K1a8RXer9eJbFfGdqXv\n9LzCEvW7hLdm8MrWuBKPgb6Q+vzvwAlt9gcN1byDtzC6ib5CePrnWeBSwq3a\nJrHP3n8WNMM349b0yxQI+Xep8ysfYimPak5C4QQsE8XzA/7UQDJfqsOaWGGG\n/QuAVto2bx4SaRb1tNC+4Wv/G+0JLhcjlPrN3EUxQX1RTwq3oLm/k6BojvuR\nsTe03QV57mXeDJEqPwNZT76bMtha4Ktr5KAYM+Rb75O/0hKld2zM1iZvLV5P\nwN+H5St49DxogyH+t4ZfFszXOsMuTUpMPs4mPcSY+ZDpPUIemFEu/vV0hUJR\nxTkqem5PAz10u+oDp47utgGOQV5gUj3fSpbSWmoqbi8kHFqBahggrtITTGv7\nkSsXZZqdZgtntxYwT+ziDTQyfUvr0Zge5ccAxuleTuIWx+y4wVoxvXgVPfuV\nwUS6\r\n=favM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.491fddc31.0","@material/base":"5.0.0-canary.491fddc31.0","@material/shape":"5.0.0-canary.491fddc31.0","@material/theme":"5.0.0-canary.491fddc31.0","@material/floating-label":"5.0.0-canary.491fddc31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.491fddc31.0_1573250864744_0.29317236868634144","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/notched-outline","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.b0cecf145.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98149cd95b9e4ea54bd850e6a8feda7a9a2b89e5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.b0cecf145.0.tgz","fileCount":30,"integrity":"sha512-9mPIjgmZq8hIW1uzN6qpIG+i4Bswniyl+4YEgbUPXkRhKs9cG6EX3NDAdNuSUevtAt8zsfpKyFm5JCxWyV2pGQ==","signatures":[{"sig":"MEQCIFxQXOIuXEUdiulrGsZS+t4+FZ6HsbWNe+YDVCKpjBo6AiAGaUv7uY8fA6PvaQh3AV6Fuu5eo9UuA3cmzDRnALx/1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwiqCRA9TVsSAnZWagAAmQgP/jtd5N5wEUM2FfR70oOY\nA3VcxWukuJtroCcFlezEzbsbY39FrI6Jdofaiiwa8D0iMtRNz1Dq1O1dA45t\nIVYqklZ9QH+cf1zCg+EBnBeCWJRnQD4sT+/4oS7dyxrnVty+HY1pIy2UGpQy\n37GiumP52IHzreHHCN6ST9pQ8/ggIVmES5A1YSYVt+Y2NMkfHCGWYAJoAPVT\nNfW95QllMDmthfvD9UfEPlL3jU8mvfapn8ufeixZ5Pehk7vQqcTqF4yE9mkd\ntMRq4oLIzcu4d4OLe066V+PfomWN37NxQ6+YqtvejktY9M9R8V2tOkoULkmt\nW53QtznawCbei/2VIJ3NWhNj6Z/QN/1KOSM8eY3xTAp/ThLyZmq9LDQRniYI\nj10wwd7eB27CFhzoPHZZ0txXS4cprfAgIIcuAmQZJWfwG+VrT6vwJXMD/r9X\nhVtjYmTT8By9e+fxfvpWTAL/vPynSKo7nEStFQg+wrQQ0Dl3S3P6ikQSIPlw\nNxMaQ4wpmMXtlFuPx5el66clXj5FOdOa/KWh+R4RVJN9YuEbOIzmRr5/CB0H\nORs7dNJy8fhg2ma9vEqia0PrkN9yQ4521wApUIgfk0+durL4mnkydyQJUV+N\nZUClW4A54XA589IWy4DVE7XIEQGor//I95lufjcQzekxHxHovnBEluzLJ8M7\nK5+L\r\n=tfjF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b0cecf145.0","@material/base":"5.0.0-canary.b0cecf145.0","@material/shape":"5.0.0-canary.b0cecf145.0","@material/theme":"5.0.0-canary.b0cecf145.0","@material/floating-label":"5.0.0-canary.b0cecf145.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.b0cecf145.0_1573324970438_0.26239938471071866","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/notched-outline","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.afe0dd1bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"797f7cc800003777c1617ec966b09fd636329566","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":30,"integrity":"sha512-8o5S8NRHCiGfGuPhC4uz6z/1a2Yq7kjO2lEdisb81p8s+U4GSvmIOxriMby6KujtK62wRhMqNJeJx0dWrj/MJQ==","signatures":[{"sig":"MEUCIQCVxVKHdqkFWg3AtKTsWbE1Ju+1ndewaTimLXJwtuREjwIgAeEe2YiDM/RRJVF6tXjnZTGQWYQ3Ht4YYwEzR1vCIkg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYBoCRA9TVsSAnZWagAATzAP/iHaqb396+ml/ucz7Xa6\nkoRZigUclfp1n+ISONBMqXQdrUTtcm3lNblw1vV6R5j0eW36rb3woIdiU9fj\nKG+rRVEXXWB7GlfLKHnDHXsIvsgpfqXN5mNmcvUuTmRFlxztNmsQrzgwMZB/\nzz5fxeZl82RFcuUCAEhtlJiABKjm1Kx4TC9vxfeCIHTcRLAEFgppdE3bJQUk\nip88WGrtqp36LQsu3WlWqo77UIt2f/87i0Q6N3yAxUKDT0uPBP6uTd3wS17E\npNCI+ZjNfaSpZO1+uwlsaMoXSwRLrNZCIr0a8ImjgENHNU57o+bGwVAJQrBe\nGIsQFsTTa2S2bgl98DON9bH7Ej/INELFy4oHVZ+Elm3I8TWGDd+k7bLaWLii\nehL5XtjDYqBE/ktmvXnilVSBrByd0lFUwSLf3v0vS+HZsDRioJCKVeY7yVHC\nkKI1uvXdvLHiiIa5EsPsxmp9G48YH8nRyg7BkOK6WbZyIjrKn3WzM70RVpzF\nqY5EVgBRDswD4JipKIIk0tYxv9wbCf0JqhRcJTqucur0EaGBzAaMSM6S6tpc\nUW7fUM82wQBefe3G0wbUzs1cx1EjKuzN26HKex+CdmNwe2hwX3OEvVuyagrf\n9P5Ph8A0zEQuUYZnFpchtWe5SYmVStL+1MhCuLEMsL80d9MJ8v9ceZRolwVN\nrKr2\r\n=RA0Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.afe0dd1bc.0","@material/base":"5.0.0-canary.afe0dd1bc.0","@material/shape":"5.0.0-canary.afe0dd1bc.0","@material/theme":"5.0.0-canary.afe0dd1bc.0","@material/floating-label":"5.0.0-canary.afe0dd1bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.afe0dd1bc.0_1573486696291_0.558468396959868","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/notched-outline","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.b4cfdc40b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ef5d72e4ac7c6875dd5e74b22dc62a741b2dab7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":30,"integrity":"sha512-abnVkmKXZGlF1Ss2QghA/WlCpuDnR9ptxQP3PiYargMzc+Te4jXo3plucZFyw0wa9CyalA2i3rgylcY0DAKSbQ==","signatures":[{"sig":"MEUCIHwdt3le9Qu3Fz3KPWl5V8NhGY2Pn9LaoeehQAAvPUYLAiEAuRSO7KYL5VajFhxHrRKYkbjzFsUF5tMh5mP6BORb04I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXnVCRA9TVsSAnZWagAAgakP/18p/J6hyDtv2vUJ+FBR\njg/BUN3hxyTiERo3WFpWLL60VK5e+hFHfUtdMmXd4fjhOVbBYVTYg7na/Knb\nnpD1ukrGTYkaIpjCJdOdVwwtrpm4L/PYxnEh0j3GZMSzDFVHalnyD29O+aSE\nsz+BmRIi4tPJKJ7GaortX0ZOBYtCsbQOI0T8dy8eWL1tj5tlN/B8u9SeU/6P\nlVNAJQPv6TvT5tWh9Pz6Dr5TSUSWT3F6oYcio82GhYu7liQrOgOkkyT1tbXs\nfVa8Hvxu8jNnZueF4KY9E2RPyhroyrckMOZVfO263NNw1cB9qXtgna4FJPva\nTBkQtujx0nQrZN6rgXH/nMuvkQTqgvl+HncPlFqhRV09H4hGKgWmD/xvkbLh\nNcB4AwiRr1qVZ3thOfdhFePWvNv72h9zAru6I36/Rwuwz3t38jCkTp9YCUUm\nL/RuBR9jto8Z+s7d6t46CjNdYW5K0o1fbOiCLYdCZqYiXx9kvCXvNnI3K8Xk\ncXcRoCNTKQEHS4203LrMxX9uCLPqlHlfkOlDxqnQgm5sRYlsKhqCCxRWnPNF\nQN3tNneMlrrbkCtHJOeMMhLrjdiJJVLrVC2hH1/zk7ErPg5hX1OlbRISXNZz\nX6jJxdSHZKxPW2b4jkJ7hTLlbiCzCA4Pkexl0FvSxJkKiYobwA4gYmNjBI7u\nv+VK\r\n=sSEd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b4cfdc40b.0","@material/base":"5.0.0-canary.b4cfdc40b.0","@material/shape":"5.0.0-canary.b4cfdc40b.0","@material/theme":"5.0.0-canary.b4cfdc40b.0","@material/floating-label":"5.0.0-canary.b4cfdc40b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.b4cfdc40b.0_1573747157406_0.16326948324907842","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/notched-outline","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.525989b5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"329459349ef304bf8b7ff3512e6a7108963c5659","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.525989b5d.0.tgz","fileCount":30,"integrity":"sha512-u7Vz+gJwbYakcpnLgIn0CGPzRV6Sp9JpP5FEm56ILH2AqYNI6sf80xzHejLaVH8RzJfdamXg0XcA5iXq16XBeg==","signatures":[{"sig":"MEUCIA0KLGG2E+SHr5T8GwcuNJzoBdyuXeseEeB7Luqw09srAiEA6e148Z9bgvjuLH2rb6i9luqgZuXI0ez4FlrPakEVnrI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzePMCRA9TVsSAnZWagAASG8P/2uZqzTJ3NfDpTqVNeDl\nxkCc52zUIB817A6rJLd3PSH8wKdXKmlGL23RME+BRoqxKE/ksX26MU8I2E4j\nDcUX+fWreNWyGoQtw2JZrQ/DaCbLeQPUQw/VOi+Qh666cNZjHO6f/VZSyQTg\nAnc8e5KNq4TczQwvzfsqLHk+GEQ5Qo+ZWyuL1QQVYe3lebZNuVKKLZdvyCVw\nRNc3K3wq0lNnF1sD2Bp8DJED8CuM+eekrYovIHWK93q8oqfzrL5WTbVV/4lq\nzF+fVjYdwHzntIGsbpCf1cnJxVvP2IDRhF5lFq24/8xpBwPOgCK8n1Mj4P4O\nil8eJY/C4xiL9XvgZOzEPWPrq1sJcJYPdVPJawzXTPvVmIspDIDMpxuvJiJ+\nlCP5C+xG6jOaNcGzTVZ6CrOdQNnR1DU+m3Y6v+X/3D6LcWfP325qfzS99T0R\nslQMbNQOliTGBs3RzsbXIaNtT9/m+x83iRqfvt+sONZHHNwphk5IZ1JgOgw2\nLxVFLpDx7xvETcu89HZsw0xuiPM19ZHuTQYSiawPNT8BnkIY09dv/amWOzkW\nz2A6QJ1zLdQG9vovpEKctUUypanapdpVhR7BmPba7IiO9Msd6/xCgZKemcAu\nysnbbn18QWiyGOhOgyk2kmDiPO1CuMoYaPIo6ShjVEvIL69WYagUKPdIJlJP\nRjls\r\n=/zit\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.525989b5d.0","@material/base":"5.0.0-canary.525989b5d.0","@material/shape":"5.0.0-canary.525989b5d.0","@material/theme":"5.0.0-canary.525989b5d.0","@material/floating-label":"5.0.0-canary.525989b5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.525989b5d.0_1573774283799_0.28597492774003075","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/notched-outline","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.7084b403a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e71eb8d466367ac9824d122ca7ce5b4f7f8292aa","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.7084b403a.0.tgz","fileCount":30,"integrity":"sha512-ycgP3gZDOVxeAVnPV2fZq56dF4g4wdI8Uy6fIB5afP8o3dZqNbxqfdRTvnyrbm8bC9Xo8J0Br8CG6JovhxxozQ==","signatures":[{"sig":"MEQCIGcF81omj8JQw10cz+Mmm13dZQRJh5ORCSiqdP9BuHGNAiA7kHbMmmU8uItX4WlFwLeVzeKxDOI3IK6SxGocs8K1tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfokCRA9TVsSAnZWagAAsrkQAIDX7rD/iBIKuiyHfPxm\nyCHLUL72V9t+ym3m7dh6T0QW1j8XgFSbF6R0QSj3wRpYEWyefUZvU6B72Ag2\nMkfVopZXDeuXoIzHDzqAyJUQMr7Mj0BmZE9oJy33hxYWZzpq2LmnRzU830Ll\ntYLYE0S6EXhGqBzgK7ivrOKkUt0DI45Zin8aJ8py7IgAr4KOLrLTlR5lhTz6\ngmt+4/TIDdSVYHS7Xt6jDBVihD8xG3jRam+tqJs5W+TgnXfYKFg/eDD3N2No\nMxOsmSmw03FhOjEQVjMpOXGnyE9kem/BbOmid+M1b6JUUwGh3H3ipJ4WrLlu\n1GmsZorybZkJ6/Jzbt/NUwI6O+Rv3+9NieDKbalowA/laaWYaVDl+YYhaYpJ\nkcWA0LUnRJkM7ISFVWWuzpvYX5wtc2AjquIfCW2UUCHcPa9l9i00x6XNg19B\nHmEFn9JgtnZOOeBxdawbAFRIbZHEwlWpH2kXhez4eJfQusm7J5hBoXUeSHB6\nk8SisHIafWsbbd5V3k6WOTMz5vYTa4CMigfUp8qclfzmbWttSWhgY0giyjrO\nKRQ9/6BF9O4pOq1XxQj+yuWCYZmdC0sN8mpdvJqOnUybowLncJZFw2dPOoep\ndufe7O226jn5AOxMQYDcIc4zhl+Ma4ImcEkNV5uVw+nJ8MzHX2fN7hBl8Ct7\nAdnj\r\n=psNt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7084b403a.0","@material/base":"5.0.0-canary.7084b403a.0","@material/shape":"5.0.0-canary.7084b403a.0","@material/theme":"5.0.0-canary.7084b403a.0","@material/floating-label":"5.0.0-canary.7084b403a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.7084b403a.0_1573780004054_0.4576576963774692","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/notched-outline","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.3cbee6dac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb865593659541859b9a81081008581c3b21e3bd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.3cbee6dac.0.tgz","fileCount":30,"integrity":"sha512-tH2JtwTcgNIYIvFIDmUuOsF9Uy/a4R5Jo1LYngJ6W5IsKJjdvbisPr1M+fnfXRacaGkap+EJcKBLvcNLg4/yvg==","signatures":[{"sig":"MEYCIQC+wXcbaKqfo9XrcJ7EuJlsjhXwIM7FGCVkydRXBMjgAwIhAK3Ws2r/Jqqe5YvIIieVFBsOAr1lCUSfeemsQx+DvRgy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyexCRA9TVsSAnZWagAAGwAP/inAl2F2qnRWy0VtUcjR\nkzxERd8Rb5ZeFrzIAryrbkf3pfd9GauQdRzO4+WmzZb+DLPX5lLoINYW/7/4\nyr7wd+CK51Am5CUc3T0okAvNfwK3i6xX6z0txECwAtSp+ENj5dHjbFR//+YP\noGzfTXkDOA3jsSwQUYN4jS6yV80InAf7AL44ya/fxxHY/7YBn7K7ePHlW2/a\nP9kopXoZW+++TopBHzJbabCxVUW1LDtS1dWCkhnhez6P1NlfdRbBG2Lzu+kO\n0iNbmRkmcX68TfFzCuLk1NCfJ0PCPauJikX+YGU7QjRPPJefOxM+WEIBRsf/\ngQoFLVXoPMXEbhzXmqiAGuPJjcHF3zhm3O7fRRua4nx84s5Twhl09l6OS6eX\nSV/45SXetmDaby4gOayZq3ky2Zw3s8/CFw+OklGkPVu0yuIDMdgKvBy1pQ6/\nQjT39wk7lgkWBnCfbpOcFXcTjKFGoQQFarXQ4lzSmpowm/znO83LVEXXbYqb\n6wuQGCpIVjCcrkeVje0JNtKfb4fOZp1rPs2fsduM/vfOzBIsHuy5cNnR3sco\nMpxvAHAkXWG987UIo+B5vG/T5UZm4xtMR11Rizmy6WwYaQFz6CvYkRpxpwdM\nIyX3roxc3aW7l03VZifWv4du5Ysk3fJcFE06WpCFMeDKRw8RF7YcIAqZTVm4\n3gtb\r\n=uu9e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3cbee6dac.0","@material/base":"5.0.0-canary.3cbee6dac.0","@material/shape":"5.0.0-canary.3cbee6dac.0","@material/theme":"5.0.0-canary.3cbee6dac.0","@material/floating-label":"5.0.0-canary.3cbee6dac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.3cbee6dac.0_1573857201197_0.7932510072149106","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/notched-outline","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.591a6ad44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0cef3808b077b5e7dd5886d5cfb32a2f4f0217c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.591a6ad44.0.tgz","fileCount":30,"integrity":"sha512-1V8x/Gy8E5QrF/N9PKM/dww1t8ZNqMeVHFZ4ex6NVM/nYxoGUgwLE9R0mH7v9xt4HL7dPLe/IL7vB5AQjG1JfQ==","signatures":[{"sig":"MEUCIAHX9aPTJauriDJ5uma7xsKopzxPdPnumEzFoWHzZWhqAiEAqGAa3UuMBBFGIReRatWPJvZMAH7ULdd/e0in8FbqzRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3yCRA9TVsSAnZWagAAG3UP/jehF6orLo/UNt+Euldh\n3CU1yJyNUOzF0N4b1GZe56AJJpozqSY/38G5RTTj6DqILY8CD+9NtDoyXaZx\nwYArAJe1ormX/hzgt7EW2XH3jnaNJSPZ6DU7fk2QAHgXQ4Xm+1GTyzFgSCcW\nW6Yrhzo3jdodxiz+oHMUNgySL6rdHSAEmUYLceYmLf54FIrRcARJjXUYubRo\nV6c4CE4QXkw/jgvjPViRLy6UYV8sYaruW0OcXgwnmshXs9p6LQZzoHvZ0CuN\nsDgoXIx4FkxWXbxr9nJwyrDcn+xVgIodpHPQAaY8B00/9xPI6EQpxv4DJbEr\naOAsyQQDf2yDfoiviKgHzAXoNZ+EvfG28HgkklMfo0NBGF1up1A21rrcLZZR\nlmR1EMcc1E1T2V8zSoWTlq/h8ArDdBlMVPNQbhMA9YmtwLkj/nXkloy1Z/kx\nkiSlXARtphZnEVT7mc2bK84QILMg2KiR3JO0EPUmR32gXSh0j+y9mq3j7uN9\nilJro4GPiM7vtYelCJ1kswEROpnJyTF8I05S7vTUdJB+Z76M6VSX9fR3ChJ5\nH7m4vOgCju0W2OA3HI4bzmp7tYRbUbxWqm5c300wVcDEOIuVtVvszXrtnOjT\nxEeE1OSpPLJsYGxbqD3Ny7pwq7m5v7iJ8VhPa6Gz7rN9oZISPzJaKvdPx/2P\nwjqC\r\n=UwJG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.591a6ad44.0","@material/base":"5.0.0-canary.591a6ad44.0","@material/shape":"5.0.0-canary.591a6ad44.0","@material/theme":"5.0.0-canary.591a6ad44.0","@material/floating-label":"5.0.0-canary.591a6ad44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.591a6ad44.0_1574120945681_0.42617175895687076","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/notched-outline","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.5729943ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7b036050b8911ade94263832032dbe871040b08","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.5729943ba.0.tgz","fileCount":30,"integrity":"sha512-GpP2goUARlTea5KzUiPXsJEFc8mISjDa0aeveY2EZDDHSjtamcPNrpFHltAtyv0ldZ2E2ESyetAOeHKMqx9G8w==","signatures":[{"sig":"MEUCIQCd1DSeJLGbnzCLffheyCWqkqtOzM2w2P67O9OqMtjYgwIgT8mRMLws1pv6wMVLJpvWydTmKNlZ6Y3jirbr8kHfk90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1Mz8CRA9TVsSAnZWagAA3yMP/1Mi0hq0yCAXqniplLC+\nE2ntcR0uaxEuOwtucfJoMNn37hdHJjU6dVLcB+40OrZ5k4C4SspYH6gvFU/j\nTFlrsrea9y8qF6gV1bzG5EgwPNbQUmK1E+bC3WzkjMYUuZ2XrX1JONlXcOB/\nl6+YBaBcCSfGzLxPib9Kit6E74h9BQDKUpyimYrGTfqYNBrITcZZ/MumY08M\nI3wyemIMTulWjY4jV0JemhGYPwR/+yc8o0T2ZzGhOsr5Zk6T4Kh9KDfG39El\n8RfjkBWZkEwsJlcjAIXWz2QdA9HueCSpUUXo1eRHidyIhDjVAYar0HHQhQyn\n/iM7wqbSgepnnWwLl1DPpiYX1H8CNnxS+5NGvtkWqTDB53Q11HruTgKXXpc5\nfzg1kOwHIfCJiEyq9WKHhAe5HWijANoDPu+TkiF1k8gXVuJy9bwZYc5eyx62\ndyD+kbf1U5eWE1o2YhIbzOP/Muam2gaMdhgnCrET/C1H1IYGypPj3MTDQ8SW\nPIZ3xIWwl/dm97Z0odbZlGJyJSSMJqcxH1SIZGMtauxwqHZKWXFgYuXSO/+6\nTz9PurSjXvYBw2A16lNIaEIbFTX4DJSAXyrdHuc6NpbitDFGTHSv75tqgbu1\nVRu3NtBVTOM/iEAtNwPQUPAGMGTuIHLX/Pn0tlpOUqlF4RomB0EwNAMzlPrf\n0yIl\r\n=2ifs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5729943ba.0","@material/base":"5.0.0-canary.5729943ba.0","@material/shape":"5.0.0-canary.5729943ba.0","@material/theme":"5.0.0-canary.5729943ba.0","@material/floating-label":"5.0.0-canary.5729943ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.5729943ba.0_1574227196054_0.6618204798216383","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/notched-outline","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.e89750dc7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5dec4c36e7bf79b1dbd1b59348d646bbacf5c06","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.e89750dc7.0.tgz","fileCount":30,"integrity":"sha512-q+MQfh3A2368snS1Hlk8PMGC1YWtDaf7wdrINgVy+0xhVVlDRlCdKelFtMLTXSSD29h7w9+u+JO1auRYbqdFOQ==","signatures":[{"sig":"MEYCIQDGONWudDgFiLjVDIebZoSyCQwwZdbIlDPYpAsuxhfVNwIhAN9NvpzexvuQsFdxIXCScLlHhVAUv4f0RbDpoTGvpkCC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsOCRA9TVsSAnZWagAAHCkP/AvlVSUytV2LQfR/OeHK\nVyzEM8bEj2A7MJYLHGHbZlcTJdLY++nRHLek/KlAHPLWLw5fb5Y1loZDi1lV\nptD4+bxkF83OP4zbrw0qmQxuy3hupFE85ERuzDN6tAWqAcLNM6ODYEfyt81X\nxSGRHbikkmv+Wd0OlJfMM9pATDTbHYAOI+oQ78pAIypyElqVAA1ZW/Xb/wfD\nYVdY1tCnglWUVg57U/2XvjUrAtUAI6neVb8yc59O1a7fvLYzEhsNBpnemUya\n5fUK/I1njxLjK25TzmiWrJysd8SkhEtj4IfFA59AYDRc712x6745yJHeXLX6\nS9PSNPDr59SakMKVEGW0AeTJ5gAvcthGUwG//5HyDn0N0PKVyMwOZqXoeliE\n9rX4YnJ5KUYhqgthSXLvFY27SKwP13f3vfsmYZ247i3vwseO8YQpwt9DY2Jy\nrGAOcaMCMJVE5ej/SrTs6Yy2vLehBBQnbM/sn/QyW3JbdIfAVs79oD5PFTRp\nrfV/yrpkJg+aAXhJgUPYAwvLy27/1XVXRkAd6FEiTQiAlrNoKVW8M4LWPgFA\nTEV9YFMZRYNH1czK5fRONJkwqtvZumGX0l7hJePaAa3VuXVcyF0r5szfMmKj\nzkyBOOMYTQi+25ClwlSkFp04/AmDg+NbTEAjOBHls/RLe0O0ZyMMTEQB/nHk\n4Twm\r\n=jI8z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e89750dc7.0","@material/base":"5.0.0-canary.e89750dc7.0","@material/shape":"5.0.0-canary.e89750dc7.0","@material/theme":"5.0.0-canary.e89750dc7.0","@material/floating-label":"5.0.0-canary.e89750dc7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.e89750dc7.0_1574820622310_0.5817611071536306","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/notched-outline","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.3e560b33a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc7e5614b4e132be31a10b72e336be3682548c30","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.3e560b33a.0.tgz","fileCount":30,"integrity":"sha512-t4/6503zhQIZntFtR4DzaJqVcswPfOrXmcQVQW+rTNNgsbgpJiCAnbiQrKrCdQkKrWxgvQt0UZCws20FCRttJQ==","signatures":[{"sig":"MEQCIGv7gCYjifXMSrXJLlAtmZc51D1jgEOr8o5fhqLbDZ5JAiAfrF94vocH6X6erw8ZIhnOokWt/0v76Yx2dnxnvCFsEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3ds9CRA9TVsSAnZWagAALScP/R/F4nqMMCvHHf7xnbDa\neFZZSl2vCMDDr+3V+2WtuguBcy1ALQZLKSmL7I9LREuapmP47by8jzAgEe1D\n3xAzDqEmfXoZtwMXmVq/ByZuTNUc/YI0ttuduFlMxIe/xHFkMQqwqY/MnMbl\nFD/VSawH8O7rDKNGUdPZ/7MhXFNsmaV6TmDfCukZK81ADD9XLBsfsh1Fburn\npwyWtynMBKIys28EUwvXVnkToMsHwm99wRWcG7sM1fb8ssBpxbUYzN9nrwx4\np52aiYdvvZRKJqS4eWMBP1VuzH2jX1OV7rvF7gRSGEgotKx5LJrojDWaLCKC\nUAuPEyG3IB0LitzAAFjbnJxxqBwYPAafrXKheiJto68xo/lmbW+OFLS6tzIz\ngw+1VoNI9SLyi49+OGR/Eu52dkX5ZfEbhfHWm7NIdtWv+Ngpfzf+JenY0RaK\nsUMretk51mKCYqG/+r7+vLzpinztiJZF6aA1ICsc1Bh5rViz+wQkEUr218AS\nEA59KcqLH/QuK7I+KokdGLoSZrvXloYWwH5Jy9q6wnx7hWRdX6QiPrbu9+YU\nYwgMACku7KQPipdI5Q0uci5ANlNwKaMZL2E0rHpGxgYjN5RhESOZvNUiMOaT\nEjK/d5QIJMB6n4zZXxNlAOduddySwg0pRlZ3VSHHs8zJfGS73fdgOKiRD36r\nCMDn\r\n=UJW4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3e560b33a.0","@material/base":"5.0.0-canary.3e560b33a.0","@material/shape":"5.0.0-canary.3e560b33a.0","@material/theme":"5.0.0-canary.3e560b33a.0","@material/floating-label":"5.0.0-canary.3e560b33a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.3e560b33a.0_1574820669194_0.19637234125624858","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/notched-outline","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.7fd17ce5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6d8ff9a6bf3ab34eb0fad1e4f6cec0802858211","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":30,"integrity":"sha512-ClC7N70crgAqvYPN/hqiFEHRepW3OilTbGZabW4b9ix0QzqVsgpWBcrO42dvas9IIak9kvJScZRlDVYZPSchuQ==","signatures":[{"sig":"MEUCIQCQ46yyCiQ74sqgnXnHZ5PPFrPqTT0EbCLh6rDhWt+N5QIgApP1uRjx1eQZLXdFBFUGNJe2sjlTDuR4ScWE8ZOLbLQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtXCRA9TVsSAnZWagAA/mgP/iuSjlHFAvEljGCxPOGt\nQjDJxDDF8rbjkg0VHqw7HIA+e2hFtsdtCJmvmXn7CjOXhb0WsHI8X1MNRNUB\ndt6suqIWuefn38/lOrNs4CPvdEWbY7wTuNacqGK9G5uIWBoibH9N6F5FDXBa\n6njP6qnndxzby/psGAiSfvrqekXD/HFIqx6lHbUqzG9ueZhenrHNCa1RDk80\nfNR/bydVk+EUd+cpFq6wrEpbe62t/LDk+NteX19fk9AklYqwIZbsxtOnRAH0\n1Ei6ZOYI2NEmBKTZDTuO0Rt5WN/ar87uDI2o3VmZ6Bft0FkvOHmEO8UWKzIw\nCfb1x5JV8n4NYOjonJ/eKki/5qPKliir0wGFcd6p89QYk3+4Y23KtSWGz14R\nV9mOYR1ZPoWnfdzVxAE6DlZl8u39/JmKc2rqGr0npJt6WuQ8Qer9BkW8n/Sv\nv6PaWGB49lQ5D9SHz3wx0oGcsctMWDX7WM7wGG33Tqj7Bl0eEcthy7cRapbn\n5ek04ppOOgb2kAo/lR9a6+68GoQPqi5xAZbZBLN2KbRCQxKQMOQMlkw63tkJ\njSEzGMt4UFXZlgUui13tWq0U7UGBGrne1+XTSRiIVJyfSEecWPsMauavQD4Z\nEXIQ3RdZx5QrzAyqsSkSOV2XtqPTmqZIrD+zRNSXX83eWedt3Ymq4iMh5qCx\niZ/0\r\n=mguA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7fd17ce5e.0","@material/base":"5.0.0-canary.7fd17ce5e.0","@material/shape":"5.0.0-canary.7fd17ce5e.0","@material/theme":"5.0.0-canary.7fd17ce5e.0","@material/floating-label":"5.0.0-canary.7fd17ce5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.7fd17ce5e.0_1574820694715_0.5351934680099975","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/notched-outline","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.ec729683b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99c62b7d16f7f39a9788c92788fed670c214f32c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.ec729683b.0.tgz","fileCount":30,"integrity":"sha512-3TLSVmXbKdL5klHpknmjUgf52nsnLnW06GeDPc3oGZgyEcP2hIR38ORxs9AnFR42P55zU553viDSlJyu64Ja6A==","signatures":[{"sig":"MEUCIQD907YTxNz7iG1CE9yvncm+e3dbpR/Nvvh5vVKepOuh1wIgFwvSLwqbCp2SVb1L/nPYg5qK0X4oaJQuPP2X90i27XI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pyFCRA9TVsSAnZWagAATj8P/A23nP66ky3T3pXoEKin\nSwfLampOhe1LmJea+BD0tCncWH3bHBLq/nQJV3Gm9ZGh4bKjYi6xQpq7sxXr\nScFNn/CCs6nm5DKOLR3iX95q/Lcsv0SjTDKSjaHSvc+abgmjo00kVXvfqqOb\n9ytY3CVkLsf8VEBegxRyXxhnr+K0xmh8sPLxMk2ZgS0uvrP+Vx5kxTlpUBUO\nLJ+x5rCMXGu+dmGi8rSKOxpjJ8jPOGk3yH0o7B7+xk6Gtw8xX+dXCD5anRcd\nk1GB5A+XJlLVmRpNR03KyoQ50lr2GYMx8IMdPgHKzm/PtX7ed0podUIUweUl\nNBnC4FodFmj6LIhTFHXFIvKJgeIQfDQMBQKNe+IzEh4zb4M6oNIDFYjf6hGP\nmXLyecpRBMz/lV2zWaEN5yDwnKWcyLBRakMxndvw498iIjV42jwnKVTbGOsa\ncnrrruIHhwFxTuwiuRBCWETUXCxAJs7R2At7nm9yq3KLVI+Y8YeBGjwjOlzq\nZUrVrRS3WBEyNDi1K6ZwGv6g9/jn/MZZT31TYoPrZzLnbG3XnS6CekQqyi3o\ngYwT4RjX5o7unAKXVwS3zs7TnIuh0tWVn/kp06YOuvUQwJm+mWHdOVgR+LHo\nPJm41T474CKLIr/xxU+DgHvxkYpRNevl8h8zGyBdR/Pvq0BVUrGs01vED1XP\no7yv\r\n=8zkH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ec729683b.0","@material/base":"5.0.0-canary.ec729683b.0","@material/shape":"5.0.0-canary.ec729683b.0","@material/theme":"5.0.0-canary.ec729683b.0","@material/floating-label":"5.0.0-canary.ec729683b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.ec729683b.0_1574870148899_0.513777342073503","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/notched-outline","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.b8bc4a26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ae0a5df01d241d17a3da350cde0c38e7e8e6cf4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":30,"integrity":"sha512-4BUlPRAmH6/6l1ptxXxGq1nJo9iNsIbej4Ivd/d/ckhs9V33HbRpHeq0mf8l/hUrJlonZxTS1UP6IUAkBPzE2Q==","signatures":[{"sig":"MEQCIDuVnDt61N5MLWRkEPsP3lwou0JeBBKqu3uoc7mg6OS7AiA9ST+94TsvSc9MDWkX31Hr8JcLFXQQlvzXefuFkae5ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3su+CRA9TVsSAnZWagAASbMP/ia6xoEM/9RQIFN6a/z2\nyAfvXQzrghJ2RfL1/uE8XipvxDQFPzNGWiPOek0aShXPuS3gfmFP7XV2QcoW\nY9B6HhxcjiDKg0Or4gk8fAMB7rL6u5yqSBq0sytL+PRM3tb/wsfaNPNmv0G5\nId/XxZphgpNS8HeF4uS037pkTLbJ8lWjpvW1MJTyJo+B6xg6P0iQLA1cVKzR\n9S0G/EG3bdBZ2DfmvHRbAZBt+LBg9SSTHqWfTUhFbeYWMhXETbIOBjtTjj6f\nCBcwTqWannl0dDCfXPw/aY7YJpsCFOTe0CKlg9PqNo5AHQtVTbXxUGSDcP6P\n8gJ9Nv5M9kpZfHB2zFhOLqaNWRbcDNMWuuWC/36VBf04BvvMD54HbPbc43fd\n3TQLbOGuZtYYGuNNsUeUOaVJLy66N6BDeJMDfTJZoxMut0Ww2sBHjxu8Kk8b\nVEsFB8U6tj4N/Pg111D/7jfC/4JjYcxeNmKPdbX5dEvR/8hz/njYmPmfLaNt\nS4qmAKDA4M0qAZamLG1yv8q5mfNgYVonJTHklAp9G+1y5i1Vba3JkvdntJRD\nDt5bTxVXfj5WFDmjSop6taEImF92NH+FkjSFX08alnfLczopLzaOHlapPdET\nlu94v5II1sx9tEyGDQ9bq7UzVyuStQi4onFjbF9ABFB/BPNC6uzxvJpYgJZH\nk30O\r\n=20dA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b8bc4a26e.0","@material/base":"5.0.0-canary.b8bc4a26e.0","@material/shape":"5.0.0-canary.b8bc4a26e.0","@material/theme":"5.0.0-canary.b8bc4a26e.0","@material/floating-label":"5.0.0-canary.b8bc4a26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.b8bc4a26e.0_1574882237947_0.5900177016200525","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/notched-outline","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.f978109c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c459657fed599bb19c89fa6a3be7460b0c34a1a7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.f978109c3.0.tgz","fileCount":30,"integrity":"sha512-CPUg5FL6z8Q9G4vX6ykyi24VMcnDY+PXSrnevevJUI6I6gGGc0MBZtZI9ZYERX9X42MK9q8p6isHdC47xQGSmg==","signatures":[{"sig":"MEQCIArT8RPXiQnoJNbWoCgTmupRdIfYrSIJp08Jz4/fP1+nAiAa1WO/vtE/WiHdVvRtqO2OyEBnm0mvbyFcdBsQvs9udQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UTzCRA9TVsSAnZWagAAfooP/1HWO4Gyq8lYJHpN/p00\nobUzprXRrdV7NdYUrvyBHo0ctixFJ9O4NJAxTJyssEj6wVLU1u9Uf3IDbaHc\nTHzXmB8tRIQSDCYChfg2lzkxm+13ms7WWFSGkGQvU8F5bW52RH9hYbjN3iCK\nY2N41DkduMe0RCgAUoWGoMcNkxBgwA29QCPErNjClnDDvF+bGR3XjjinkO/7\nawgNnXecti93wT091hq/yfArOX7xJ9vQBhUFiMs1mRfkoAv5bcP7gBW9J6B/\n1ZFTYT+aGYdg+vRKyLa8HLXgSDSR+qanerfXuB6T+0BeuQ/5Se7PTWzMPBU0\niA/iqUX6mtQlR4s4H0ltKOoE5mLElQ/wUiEnOS//j7y+Lyh9s3rWdxforG9z\nLJb+6l8yNoYqCNa0u3w39FYvgGBvwpsasjGPIB5pzDMivRBuMsUOrwZQIZT7\nrLfvSnaQoQNywE04HUSm8J/Tj4qG3BRurmTtu+bi2nfEJWVBmNZSbWtKjGSG\ntMsGYxmpw5Mej+D7PSoh58S2vtmX/4NkNTKW9sdKnaOVfF0AB6DVXoWxET/V\nfFvpsOm72ZFcrd62bt5c53zaulwTe3uCHwdAAfdHKfg8uoDY6UAnJrEi7Ohr\nB2aD3L6GeJDdXM5SuJjGZ5D00O7X5IcFBG2kDp8FCRnAWeckyk9LGhS9KPZG\nxPTM\r\n=H4Q8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f978109c3.0","@material/base":"5.0.0-canary.f978109c3.0","@material/shape":"5.0.0-canary.f978109c3.0","@material/theme":"5.0.0-canary.f978109c3.0","@material/floating-label":"5.0.0-canary.f978109c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.f978109c3.0_1575306482986_0.6534040484551078","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/notched-outline","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.ad9dfe706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a8f14b7bdb374971ee0e63a05dfe65eb45faee8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.ad9dfe706.0.tgz","fileCount":30,"integrity":"sha512-LHE14sYOBsS18t9fGuFfnvWZ5um2aKDvSDva+06737TB5aWbigDCulPx6o6QnJRd+WMQLaNDstbxmEgbtUXL4g==","signatures":[{"sig":"MEQCIC3Hp0e10tcgwoSUnss+QGLV4I6sBvndCRYiRH2LPur/AiBrnzaXISbMz9Y77BOLTDUzVJTFIgp0/5l+bXAZxewA0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1SCRA9TVsSAnZWagAA5KEQAISTqPbjawt3OOCAuTr0\nnFN/WpfQMc6uPBBibjekGPvR4mBg/q6zJ1kLoP8TEXA9xGvsrh3OBxBEavwi\nsxcTwoqVJVj/dKeKM4z2EZtoo1o4ZmXOjMOGRI5FEplZWo/QaUr1+BxwZszv\njRkxZYe+wf25rz9mW34EOx11r4eAm889Udd4s38UnK0iwsNDNiAk8RjVHu3T\nZuOogCNpxxlmEFR1iPD114WxpZv52/OZk/J3X1+GehaBDr9cebUsq11g3sNG\nVIYhOD89cnPwbgEtlIY7RouC0G+1i+kQJHMn6lUOMR68pbOPEPFURzbqpn1n\n2QNoRcTpXeYhMBGCqzYSchlGvF5B6q13wvsKqKXAowchubU/fujjgXAJZc+N\nXUtiAw0cyF/K8GCd3nNq4UrxpbYDOP5rgtXpiwIqrt6GPlPzh89yjDaRYbfK\nqA6f0wWg0BZoJKrMesRRmCab33r5gqY8I8nddvp84YmxxxRWeENYO7rgJ+An\nvixJIbW3U5zNc7QB4F4pOkwU4bMhxo12vokydsO2suIt4a6w6U1k/UeLQDP7\nNpf7yIASgcXVa6+wKUj6ztu9OJZgfHfeQ4rZ3lsKodtF/Vi2gaf/Lldfy6cr\nnHVUk+o0fEzyymhPIK5YGCTlLCzNlzbBaa0sDaMhfBOuabk8VpL8M/OjutOe\nUGIj\r\n=dOfX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ad9dfe706.0","@material/base":"5.0.0-canary.ad9dfe706.0","@material/shape":"5.0.0-canary.ad9dfe706.0","@material/theme":"5.0.0-canary.ad9dfe706.0","@material/floating-label":"5.0.0-canary.ad9dfe706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.ad9dfe706.0_1575415122334_0.9194367471984266","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/notched-outline","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.5e45d77f3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"326b0ed23ee6c11262a6fefb44cc63842b7ddd5f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.5e45d77f3.0.tgz","fileCount":30,"integrity":"sha512-TX2hWuGYyyJDQ9hSB8TtDmaiVGE+UXVrAJN1UZgUhdLhZj9VbrCDfmY27jQFTAy4DMPLOsiIiA9jf4InCQ/8WQ==","signatures":[{"sig":"MEUCIA7xC1VOJu3WoxWvBKUExhF71aHtCfDDUgre+bUeST7SAiEA9VUt3DdpLX5AN7TmLTvU5zoN8CXTKqPwzzdVFm8Mthg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u29CRA9TVsSAnZWagAAczYP/3JTzFPtlzbc9tjS7N1R\n1MutOG7WYl1q5SF4HL70MjTt02Ag1eZPp+jOte8nz0fvifP15RTxDbxX2dIy\nhYMUOOCMABLfv2qzbRs306iSs8nVPnMuCIk02zYvzfWLgAh3tZ7vmHDRPCsk\n2XA49TWThcqb6XkLPZN2fiMIsqrtAIaBxkeRM382ELv7BgKRnmAQtteM+n9D\nAOQUBOwqc2kGkL1E91AOMhqW9e/EiIZxFjk09/EHhRBldw4SPtuHbOXEXv3+\nisD3PMm4HroNYrZm8vJwlFqx03QwVSlmmhCsvj0pCB4pzpC+UOcifOeJjowi\nNDckZewSXyMW4FwiWcbm5ZshZMpjajgFJR8EM6ouIpsCTulECJBqtpmxVAsx\nNYhI/6cDiBiFwL9NElfHDUIMaXXu1Ch89Vc56BGC12WBIZ1i87nXeMAh9qBz\n4SB0i+AlXUyoSSOKtuqDqaiVPcVv/xdgepA6xBjF9Feh32z5rr61tXbDrq1N\n/mwGy7SHMeNfCmVEPTMG6LlQo40+19yGDxgOZ26yN39H9t87QwZeNklJohRW\nu5ob71KZnz0iDnp20yvdgGGt4wbRC9Gt6aOtPRi8MEOtvvoHsmofExQ77W39\nhKrH3RFocxSvIghlIC+yVkD95WSCl+dKfzrZLc8RDD1tsWDqZZVvJBthYlCF\nZ+4A\r\n=Wxpj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5e45d77f3.0","@material/base":"5.0.0-canary.5e45d77f3.0","@material/shape":"5.0.0-canary.5e45d77f3.0","@material/theme":"5.0.0-canary.5e45d77f3.0","@material/floating-label":"5.0.0-canary.5e45d77f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.5e45d77f3.0_1575415229409_0.7937989483882502","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/notched-outline","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.d10e8cdf3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"741c7f1b00f0ab2db4e7d7782f01567778871234","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":30,"integrity":"sha512-MT1wX70+rUMABaPonRgjVU5VmS453Rfs7xaF9slFWjExyiu9vokU38OPubnmN1jkeQcap5UuC+8wXe7r/J6JDw==","signatures":[{"sig":"MEYCIQCbjA+MA6T+CoSD+TgWWBcUUXIuM01y9tAMzSUgRYgc7QIhAOdn/a297MEY9XnOr8uJrDtpgCWTel/hg576/bZw3Y+l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3cCRA9TVsSAnZWagAAW7QP+wSSYuTvmbWW3Sujaqs5\nf5yStZc9MzRwOUdF2Oy6pgx8mZEoL0rsWGQoGcMYvvMBb4egigvXXAEtP5x+\nsZJVYaRPH+xA/XZHdVl13bCUSFjnDSErRMzCRD/h8hk35G4R5W6rdcotggf7\nDLUjX/USSoHvXW70Y7WTR4KNPyDLJIYeCPN45OLpKvsY/RU6E1tW0UAgODaY\nbq6I3p6O0P+c6HXsO5ux10hspJiSHKZ2A5/3IXfgEC5WwHOYqFZmrIf+PAdL\nitIUaJkICKDRuoigTY7qhieCzv3C9c2TNDeI84v2DfFP10+7qHPb3IvGI1uk\nbTM7C20bUd4e/C3psFOin9NKtH9u99MvZvH0Gopgng1/Oxo1q/TsZtkA4f9c\n85Z3NJ+iXFS2eHOrPBUgz983M+9r1CkV+DBPzVJkLshz77XPZOHYqMzRk1I6\nEQp651pXgkrJzD46UMYxQW1JumgSoWCGPRRirrOjSwcgY020iLbYpQwbTpLY\nhqZZIHe1zIOoDLASe6U4pz0HXRTqfI/MDGhabxrkvFvN1IyS4dOAeM5j7pIK\n+/cO64UzNpsTRM9RGkCQGx927bthEP1VTLAVnWq/GsYWHshBI+POyWcJIsRx\nnuox9N26dLdpv0J6NgRajlP9LIPY3w+4aJk1ixVjANIDijHw6hZANxo8WZ/u\nliwG\r\n=b8nr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d10e8cdf3.0","@material/base":"5.0.0-canary.d10e8cdf3.0","@material/shape":"5.0.0-canary.d10e8cdf3.0","@material/theme":"5.0.0-canary.d10e8cdf3.0","@material/floating-label":"5.0.0-canary.d10e8cdf3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.d10e8cdf3.0_1575415259713_0.2932349491838979","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/notched-outline","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.a5dbd8a2a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cf27983d41907cebd7a933b3506568b585570da","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":30,"integrity":"sha512-UDzUcRq9uCriwynOJBkaNp0/LmgtlZ3e25z/NZIubFqBnNjPRU1iqPZ2hwLBATsrYBLG+ZEVReleWIwKjpMDyQ==","signatures":[{"sig":"MEUCIQCsNGOquX1gXzH5gORXgfCrTB0NofBbSKFFv6WC42cHiAIgC0oDwejcqbePF7sDSb+Iadpkd2XGq1bJIO2/1njFZ6E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vX6CRA9TVsSAnZWagAAjbUP/2PIA6Xwqfx6yjMiDZRj\nFK3ckrB59TcjcV/Ng/Daija8TCSiAvt5sDt1S5+tpO5m92+U1xxWQZgOjlsU\ndamZr/T8ZeluQIA3zgua9jm1r2EDbGw9zboX8nn0jxNf6c4CYo+E7JHGp0CL\nWOem4TJphimNfMGMhKEfYFF4BBUdul1MCpb+UtL/Q2ga/GEj3EcJQVLl2Lm3\nseAGO+8Z++kWu1PbrRNpdyYnAdl3j8lS9Qto8+37YPazVo0zVUNwesOWfTV6\nx1t0upOQkuJHcW92Q+bLl5/KJfuxoNBMpBz9hnD+CBy7w90PjDE0zq8VsNRi\n+7gAaQJpzVlZecrHnIPCK7qBqU7JNW81VhnFc1543pq+SOh//bQOp1DOiz9F\nIE916x4HkJIFgjZzl7L4NaKlE8HBNmGKDP7sNUJjI/7+wgx4akUtemum/T5X\nL7/ATDINdFHuS/+Qa7CQw/ORP8Ep0YcSAwrmwRZzWaSOJkmTh6mASzfxDbDH\nhmrhSHtf7n/VRNvhKBtkBUP63LZUyT3nAayac/16fvkUinzmX6vKshwZ8DS+\ndRyIsRJSG51RbnZbFBmsuBuXZ0KsI/LUCk/z1a3NJH9XYWKkKi/vaiugZRUm\nG8cM4IHHCJhs/WnQNnxLtHl5aDEVF0WK+NfRGa7qnIDzOVcrDE3K2Bu2K7mi\nWRwR\r\n=yxa1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a5dbd8a2a.0","@material/base":"5.0.0-canary.a5dbd8a2a.0","@material/shape":"5.0.0-canary.a5dbd8a2a.0","@material/theme":"5.0.0-canary.a5dbd8a2a.0","@material/floating-label":"5.0.0-canary.a5dbd8a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.a5dbd8a2a.0_1575417338179_0.07731964083429488","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/notched-outline","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.ba879b68b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"463e96db5443bd8bdf5d9c6bfdac912df7d14525","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.ba879b68b.0.tgz","fileCount":30,"integrity":"sha512-9NgwOatXyhRB9O9kwKGT4ZP1lC3+FsLAdBv3YR//Ky3I2tkTzpACtMf99soO2gAhwUb5qMfIOIepaALwfmws2A==","signatures":[{"sig":"MEYCIQD25I19qn544Z2nBI0XIEJA9mBU6uUS3NsWd4B8166huwIhAOlU2DVD/IhA9RkqFxckXPwf1soYAqQV6JRItx1PuDma","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BW0CRA9TVsSAnZWagAAlrkP+QCqjOjNVcuQe5WYZsRk\nxgnww8n3Bp/Waja4DVb7LjhtBGHZK591xU/cpx74MHHyi2JGUfy/AcNyFBAc\n3Mc3RxLx+MmhhHvW6wbC2ztK2kxoPd8FMoey/uKe9NwQRjX9LxTmXGmExNeD\npBwSkn3eK3Um1l3BHrSdv7YLwO4gi/uwSjdcVDzB+Csny4DkHQM0P4Y3FTWc\niCe7DwkEnc0JgU2f9+OqZCcfdKy8mfwLT7qHytAlnnGPRtyu+Mb9Mnt7WCy8\nWlvS3vi2QHEKH/JI8TAbToxN+t4HO0pifML1oHzfkR7wuPAjyQNUXBhGQOaW\nyM8OjRFSJ68oBUdcXMqMN904qYGvw0Nw5YzbqJ/FApDPUNsH0onwTDCI84bW\nrdzWV8mLosfjLicSCVY5U3EB99w0nvulrtTuTR0aB6dL8pfsY4IOG/P6rPzN\nHduajVaKi85eLKOWAS6wY0m50wE5K6B9TL7mWp2K7RMVF7ZGDO6H0ok7ab23\n20i1WC9b8Psa4Ghei60LF8YpsklPwucsg6G5iGVaOaSK4VX/Gm0fXpM4QaV3\nzJjfCgHtvpezYKk2a4kMbpK66+QzCBN2ITWlp4GlsiNChFScdElbSICaBYx2\n8lKCiqBf+CLe4xfSoE7oedry1LX5t3TVU2JQLhHRJA+ag6pAP160rPClYZYu\nTcA5\r\n=QS60\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ba879b68b.0","@material/base":"5.0.0-canary.ba879b68b.0","@material/shape":"5.0.0-canary.ba879b68b.0","@material/theme":"5.0.0-canary.ba879b68b.0","@material/floating-label":"5.0.0-canary.ba879b68b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.ba879b68b.0_1575490995939_0.3134961828548757","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/notched-outline","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.aa0eba489.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc533999eb8d81abd92861711597d9adc6a60690","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.aa0eba489.0.tgz","fileCount":30,"integrity":"sha512-vleOsP40FCdSLYOakRMy0GmN3BivlV7I0tZuBmHf6KCuooRyYj84C99Satx5xxTF9RiuiqPhXT6LJaSqY3M1Tw==","signatures":[{"sig":"MEUCICYDnUvDFQw6zdkyggxNjVN0NnYSYpNsDSkTpYTtKpgyAiEA9l5RNL0V5JJZ4STi6E1cMc7XwrzGQUbArv61HMkoouk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bYLCRA9TVsSAnZWagAAvbsQAIsVYUti2ZoXwjyrhYfk\nxiUWTtwP5UoXaEtPo2kfb1A/l9H270CkC6/6dji7xvBNQJ9OWewKjfyiQtzA\no1KBOwl+K/8zJYNMXABJqlSeBg0u25oV6+YK1xrtQ6BfNVZZ3VymaXToy2k9\nHjDkTQPEdrqqCte6SBd15QFxGhedvFLw9FlwscExeVOj5NmhgJ44moI4itoE\nrw9wooiVMEllTTCNdTq2yto+8xxR/5EY2/OcOTqZAaU88CkGSEajkf+HqogY\nmIIRYYZ11akvlLKhAV84u5t3k0px3JdNYhN0x+qxvM03AfB5Gy8/dTD7k+CA\nTBy2i4GdMk076efbwKrzplAMLE+1bwKvNwtJc9+cQi1eKnGdulykPsGPytNw\nsPsnToOdk6s0CaNPZrgAjLrspWiaqgg67UTMgqBIA37ckVEtWeMLLh7Jwzed\nNWjIaCNttNDcXiGAcsW6GEjW7K9AcGQob2ZJpSonK09XZacaPP1f/a7ElRYp\nezYJara/k5VAfzrcoUkbqWY+m+M8qOhb765B4/Xh3RWJyUnJIMw1XcZP/HXw\no8by2AiImoNgGgB+2A84FVtrd/OSs3VbsWgZTvhdd52S7s8r5RYvgDLXr2iK\nfgPhfrWJIa2rbqeqf0Z7I3QY9SWETJpGhUFUqUWo02VzoE5l9vLO3IVy8KaY\ni9lg\r\n=90Zd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.aa0eba489.0","@material/base":"5.0.0-canary.aa0eba489.0","@material/shape":"5.0.0-canary.aa0eba489.0","@material/theme":"5.0.0-canary.aa0eba489.0","@material/floating-label":"5.0.0-canary.aa0eba489.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.aa0eba489.0_1575597578956_0.28936047906938334","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/notched-outline","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.cb7b71a86.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13f9f61215b85279fe515d89b9a46192e746bbbc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.cb7b71a86.0.tgz","fileCount":30,"integrity":"sha512-j0RnXc9hvXdbXCxexUB7OpR/d8x7yAazifLK1iR/MRhbI5t6g3ULZDYRc+o4vUTYISf561y/9Swv/JSo02bxkQ==","signatures":[{"sig":"MEYCIQCMDL+ggzdGc9m8LocgaOtM1RbY+i/4oeIv7qXyr4XXvAIhAMcm+qu2EmvCRsmNW/3y0Ra0DoL5OrwZlTRKNJbmJGh1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uqwCRA9TVsSAnZWagAACFUP/3k3DSH2QaDNRGVpqFM9\n6D5SKSNSUgOOUPhwWkT1NK3CluvjJjH8GoPZqaJXVcTdAfH7EXHpm9jK3vkw\n/XZ0huJFrMo1IaOclLoCHaFRccYQW2QrVN5c30bKKEtw+Qc84q7i1F7pSDvj\nx4mxb7fG4If+zUkOYhMU6c81/UoY0duvFZauS1O3gHHz2eFJoxwh1NmNZ+2C\nDw0iKJgNLnVRvMwpy67SbmbsE6N0T2A0M0fzonlVzhwwM4svIBAM/dpxDGkg\n7MpWiweAYLcLOCosDoMw3TEPgxgP6ljTkgpIN2ckXLlsiLqJwfMl2EYBfsLo\nLtNYgbt1NG/nsRiQYnyaRycr+VWEj3mxQcSBc3niRVOfqkaq3TX7dWUXIARO\nSYNeUuTOt7SKVD+uVDUfY2gxitKZ3R5zahQaYHDajf1597002OzT/e03kKh2\nn/wrP3jJHk+9wx1ufLoePrGPeZeLI21RNx429vg4PufS9RiCmjQ0H5LSKh/9\nEhhOwj7GxVXqQuxVxZ1RYe6goeRW18w/0qktjfO5JDaNG2mkfgQtc4njV64u\ntCbqCLuzB4Ar88ehuRm0hbPqO7N6gY+Zq60hmmlcsbFCvdnhw/xIeoWHPPSd\njbsTWUvHc7IIKVvQztHqsfAXI9Vi0HPYc7O0FD659U7mchwussrsqdHLbiTH\neTh6\r\n=nxay\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.cb7b71a86.0","@material/base":"5.0.0-canary.cb7b71a86.0","@material/shape":"5.0.0-canary.cb7b71a86.0","@material/theme":"5.0.0-canary.cb7b71a86.0","@material/floating-label":"5.0.0-canary.cb7b71a86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.cb7b71a86.0_1575676591258_0.4896933402791033","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/notched-outline","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.50f110a6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afdb7fcac6819ec083a5cdb0ca26c9b48e2d6b40","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.50f110a6c.0.tgz","fileCount":30,"integrity":"sha512-Ml29ULqU7ZbFecZT4Nc5X1tp0zIR4zITXsUyGZqYnKEVXCILz6mLJ2SOz/uCnt4oNf7c9ygqGd82uiLpcTjiPw==","signatures":[{"sig":"MEYCIQCBRoUHSGJntXg0LcvENXgF36WIGupCYpOxLcNiGwSyNAIhAM1kILgParLhRFnk5z2PIHtohr9EopZfZAIKw0q2OMCS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd788nCRA9TVsSAnZWagAAHrAP/1Ld9z+MKccnLSQMDpUD\ngI+EwVU3Vo/5LGHvXUdnHdIiZQaSKMrsH4zmHXeHjA+Q9TxC9tdgIrmsOzyx\nDjeoQqgFZeBTdcr9bYPU5eWDTaox7M2dD57aWVnNrZ67zrQ3hJxSg6Uq5nxI\nZT6ACO9CAmDRtopyDKLF8bLKiO8Dgl75QMrR0vBqOw9HURmQzmrkiRv66iw7\n5UmOmr9ckW9U18/TCVtHyPqPpPAmSbqsmyDAGm5yIK5pqV95GNRo8tVanRyU\nITZBllA393AaPRg4SCInnr8l405OGlBQv1bas6y0lY5Ye6HuG5W8DlvVucGD\nsDoFufZLLcgmnL2rMfTgjtwYEXMw4DIrxI6wNlIvjRUnDNGhtMugFfDWZrxG\nz3r0//QuO9jezwYrsT+pBf2Y5GGT1oH6ovabxaYyaJeU3aOeBK7tLhXUJjBx\nLVckiOis8GbwYCp0LRjsOrHMFQSHA1VoBbSy7y5wH/w77b2UJaRrCZBdXIXR\nd059kWUHu9L6x91bgVTQNbULnePb03IiMpHV5YSDGdnEpiHmpBEzIM7lkVqx\ngFbB1eZ7i18fxxccWvT11H/VOdv8PVL8smlY7F3Shq1hHfRL8s7c7pCgeNm/\nGBduW1TbGQdzNB5n7b9sqiIDJfqg+Ku+qPZjKSLJcfb8lzZ1dyUlo9xZBKP9\nXXMe\r\n=T2qc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.50f110a6c.0","@material/base":"5.0.0-canary.50f110a6c.0","@material/shape":"5.0.0-canary.50f110a6c.0","@material/theme":"5.0.0-canary.50f110a6c.0","@material/floating-label":"5.0.0-canary.50f110a6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.50f110a6c.0_1575997223163_0.9330987273464679","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/notched-outline","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.878a08b7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b37f09169b313709c27e58c0c3a6fb39013ebb2a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.878a08b7c.0.tgz","fileCount":30,"integrity":"sha512-hibEA/0d5nDYtFwnUGAETeV85XLYV6y373eepSnOpsf7FQzykYxkI0b28UxCMGxE8dpOcfurJKdWskQyurkdNQ==","signatures":[{"sig":"MEYCIQCgCtgdIRSjnXaK6aEbsD5fulkcl/X8KOYq2h8E6GFPdgIhAPii3ACclcWwRy5rVVcVYzx3VNR++gBDK6mzfAiY7IwR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U67CRA9TVsSAnZWagAA9pAP/3vWQXj9ZhQb1WO2lJ5H\nJv/lHrj/fAwrvLZpWZ3c74y7anI4SlQBNoMPcWXAKFVK+zLQFwOdwG4915S7\nlb4HXIodJjnhDkTMe4ax00ZM3sfWyvYVkTIAiLAdTsq9SWAybG+ORGhjLlBF\n5e2u9Kt7y3vZaTDWDHv34MUGDKI4ONZxleou+o1rdlpQlNi1U8iTM6+cvRew\n/qy/jWakA6T81KIS55x8W/F1zyeLkG4fnUeHeXQm7P23LJeOR8VKZusJOucv\nE5PBCmNzUVg/0w3rt6VswGxzOvuyHa3IBz+o6UZmTzvNrQQe+OIUGDhiu+vD\nWdbqu4hmLZoPXyBuyAFyP37zJEDljHx4RzD3j+ThP79NiaiEtJvIDX7bcJeD\nhX1rP+MrADMKi469EP3kEvWYMJN2IK8B071ZV/3sbq1q6fQKb73uAF55Jm9b\nfS94QOg7JNzKXOkf2ZWOsZPMPhWSttCH5qGQbQue8prv+ODSMzERVeKJkEko\nqGnPFtp2ihf606ixjqarnTs2gc1GjFmAE2oDFqj+T4L8RJlLO0qZ3YlYD1lw\nZ0hbjfh3vbxi2QTlzhZweePWYN1CX7745ZLTAi8fVUMnycxPhG2UHi5idUIq\nC497Za2XI/KuMPArtvNahIHOWQ4hnSB7ajsEOFAKZvOuqLYRn3FzTtqGVax1\nJMri\r\n=c0b2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.878a08b7c.0","@material/base":"5.0.0-canary.878a08b7c.0","@material/shape":"5.0.0-canary.878a08b7c.0","@material/theme":"5.0.0-canary.878a08b7c.0","@material/floating-label":"5.0.0-canary.878a08b7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.878a08b7c.0_1576095419291_0.855241988931474","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/notched-outline","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.397905b4e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31ded4f23f61e4d19d477c5052cada935beb8bdc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.397905b4e.0.tgz","fileCount":30,"integrity":"sha512-a2OTmH4zptlUNcwy9JvIeDqm56eRK8JunxXlsL6OzW+T8RHLVC/XB6wed9vh5dpiKdyhC2Oz9iwTQPZIxTsDJQ==","signatures":[{"sig":"MEQCIErFsm456s2kcNaCK6SojMP58QRnTPsDRQ7cfDG9A1uJAiB7BDbu8mpxZ11e2sf8OfuYs+V7saQf08OpngaKZVtkKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8apXCRA9TVsSAnZWagAAJuMP/REvKYT7GVYDQPwDL8iZ\ng9o6IJNwWAOeB6fyaEkXDFsI3dsftLeAIt4+BjZYcu27cC6LaxExnQiSjdkk\nrSPLL4/oewAkCVTqeR3ItroWIUI396jjxEffq+TqrDNREhHUhnPtzn92NYCl\np1NZ/A5Jm21OoadAM+Be98uRCBCU7pliQKHyXvgI+IYFWmh29QDtQHHHbNFJ\nIz8Qd1zpMgfyODEJd0jZvh+9d3fMe7KPSfLJSaiy3JvrsLlkXKhD7YCJWrzv\n5Flg2EF8wc+rDv+63CNYXkZc4Y/qAov8v+rneEVcuRzb+skD6UPtCmLorVCS\nn2cuCU6cv+kS3hKeBIWNMBo9KP0EUejDMmxOG1ByQkXESj4myCt+fQ6anIW2\nv/aI0XHqbwL1L7q5fER/qpRElrM77rZ2QfNMGYzVhfHzh5ialOsj/SfqDiSW\nZXw51k355W0qmMoxgJiEgjVxY3Q93oa6R2XKdbwuTnBoIpC9L2tyZGfWnLVh\nfinombF16uTqC+elH2PU0k4/Dg6fvusLpCmoCMmMAkLpA9M1xXFv5tPQg97/\nSNqC46A2eqN9H8etBa5YQtjFhfl6qx9p1H62DylEXmjtN/XkAVMxUyB+hpSs\nrt1X0NfdB19AlIPS7iOqubZFnqcZvqczDn+mr/a9tisqv05MgGeIk5x9Mdl3\n8VvQ\r\n=RRed\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.397905b4e.0","@material/base":"5.0.0-canary.397905b4e.0","@material/shape":"5.0.0-canary.397905b4e.0","@material/theme":"5.0.0-canary.397905b4e.0","@material/floating-label":"5.0.0-canary.397905b4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.397905b4e.0_1576118870101_0.8714454448632993","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/notched-outline","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.1fbf5bd1d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2eedcb964f6f2e13afe5c4d31913a45493eb3065","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":30,"integrity":"sha512-aB7J9q263143jXvGcWH41ocj5pWk+Kceq0qZQfkfuRg1oZuM0JQAR9OcKyxwoMoJuW2rS6p1WPIuN0SapMFGeQ==","signatures":[{"sig":"MEQCICrEvZNOWmHGivuSMCBbJnqx6dvwbcK/gpUN61Jf+EN5AiBoNFn5l7NvjyVVc2suv0BNgX9bnRfYALfsHKTAaBMDxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o4nCRA9TVsSAnZWagAA2LcP/A5Pi49rKEIH5x5ovFod\ntCkcyp6m6AQmVh1DTrgEom+UgPW3QZpGbw8rEy/m74hR1ZH0daw+Nq1PwlGu\nRM8XXfrhDIxdcadaynvclmHMRmoOJHXn0rZuxeQFHHSvd6+PQygcd4giNGKt\n11qcSZojV6o0KGb69kHJZIqy3CZtbk9Y5YMVkMFx/4ih59v4qmenBIC4iFXd\nEnLhVGpixgXfq7Vqf5p+LDkiEAucDPjm3JBheCJaQcKh2bACF5k5n3EYgpy7\ncJWj4GPNJZi0ZJhMMVCGn7eSZWAqdwiAE74frYOgj7h+6v9Tu54yrAd+sv0P\nUow7PIOWhpWXQVH1cnQE3u3P2/jbmLL3h6kcX+8/EqX6xPXEOq08TZ+ge4tw\nPdNNTBDl/G7dauLUO2pmatKV9VBR1E8sSqG2RjWZUYGgHYY9FJ+ND2zcJlnE\n0/nO7lLfT66Jt918v7ILTvuEe1SGj8y3g4jXPAVw25Bx/UZiE4koOeZhervR\nVqQ3Sn4Zc+bmcuaMGLKU1Nh6p0h6AjleffNdW84Bmk7cF+vDJcD0VCJUcART\nXYm+FqukncolU28WE8gks74XVHpRdJ+EuYXxcQHwb22UUDQ2/nO6tvEgejbm\nFDK5QkjTyvGzSqtiwgtS15D1wwD/KwCMUwPC+OgQCQOdcgqoFxqiNG8tU01R\nz4vW\r\n=v4du\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1fbf5bd1d.0","@material/base":"5.0.0-canary.1fbf5bd1d.0","@material/shape":"5.0.0-canary.1fbf5bd1d.0","@material/theme":"5.0.0-canary.1fbf5bd1d.0","@material/floating-label":"5.0.0-canary.1fbf5bd1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.1fbf5bd1d.0_1576177190733_0.05217377952694768","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/notched-outline","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.b723dfa78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2fa3a65b90a0dfd04f6447e60d8f56c14801c4e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.b723dfa78.0.tgz","fileCount":30,"integrity":"sha512-DCRzah0uZ/FSkD9S/IQ3pWAqZDx/kaDFuuQXtIQ/mBNX/mrgtGJoCEvuyj/ah8ij8doWonx3R5ZiqyzJGoXHEA==","signatures":[{"sig":"MEQCIDNGyED8WztZVPrBDpl3t1Cdog0BCUyYQZGN2NrE8yE7AiB0i+wZGi22YEm86a/y0S7qxIKqkWF1GE9uigSHQrEp3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p6bCRA9TVsSAnZWagAAOwwP/3A+GMIYQhfSURJcdTQU\nS5x4NA8QfKx7uB9xynoHmJGHeEEBLm17nbWmKAy6v8s7GVINfcaKzDxIrA1L\ngqCcF5B20q8+Edi0PWN1Y2mX+dEY4aVs8RocCM1I7Sw8+Ex3CLJB8kMIRQfh\nPm+PRuACuZ8Txzw+TwY7aU/2++Q7fD3VDHGsHwoCsKlbDOCnLWsbj0KwHOgT\nacKNkgjXpEBOMFWn29BwhX6T7QVdV1CTHKsCRypfsiQwnwemnLzQ3qtJ9w1I\nQ85ZlTufy0vPi0qZV7becmyolTLihXKfsqPmFNxf3Kqhq0QSf8fMRSTye1BI\nu5f76X88A01745H74i5SmeD3+sG2rJjNbJ+/ac+C6Rx8eChupOPgFyf9RU6B\n3gDB1b/N/544pDMoOR4tQbuL6jl96A2GHGkndT1Dog57tDlxIWpxcU+y5k6h\nIwzDg+K94pVwIts2QNMmHW2Aa5GMATCdkH+cuUhyQPK6xAC83Yx6Thi6Agty\nABdyE+EeBxrSP0uymNzmRGLfLcsVW1IbvuRoT6tBoNHjZ7KQhSbVk5/UIK6C\nMaLAf3u7FcKrcNqHy3eS4dSUaYAkX1LsLjgeL/CojQRGy++hIIxKlyyus/ou\nzyojLjWrvE00EQVFX4ENhJ851zVtt6kTNlNcN60OVYLCbuarGrDf5MaO8TIV\nCy3N\r\n=beuX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b723dfa78.0","@material/base":"5.0.0-canary.b723dfa78.0","@material/shape":"5.0.0-canary.b723dfa78.0","@material/theme":"5.0.0-canary.b723dfa78.0","@material/floating-label":"5.0.0-canary.b723dfa78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.b723dfa78.0_1576181403187_0.47477851399334337","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/notched-outline","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.1c494e567.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1948766ba376224f9ffad9d6f5fd8bc610c152de","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.1c494e567.0.tgz","fileCount":30,"integrity":"sha512-rxldd2U8Z/k0KYsFUL0Afh8ZAOJuEEGc3bxh+KcF/T1mf4pFXxe5b/IXfnc6i6A4yEDeqGOAKDH+DLQsOd+Z3A==","signatures":[{"sig":"MEUCIAQxwvJ6v/gqSrYUwdoqG/4VU2qiTbwIzOi2iq6x4uCtAiEA6aosoPNRY1ZM90+dQVyULGIn0CsKft6J0Td6GGY4+og=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s9BCRA9TVsSAnZWagAAmS4P+QGnMvAm5RM+twZg52M6\njWq2Cpgp8mj5uJHS3cVe5fePhmSWiL/N95ISa4Udnf4EQS5CVF0OaC45zz7+\n8t21BtKM12zz2cyCgoFuEhFMOzX9w6+P+EsPeplZ0Bt54UsMNQKcJLVVFuLr\notBa87q28z5zU44FjjcXCu+qkGiJNbNEoLsF8vvEIWAOXMwkunbKbYb0yNKT\n96EQ2ulqwowk+KCWqYhKv5pRHH7EgelctBVL7+Sp3BBr/dFH+oXWiL4J54Oy\n3ePyOofUY3OscS4ELRvpINAYWPFaUPJHQ+nxds8xEi530bJFLglcdkRC6PlS\nDwmKcj9jOqCskgFJAwfkxx/Fd5ZOaA/YnR8vAtaIpLvDluCyu9rc+gfx2pdm\n5+n/+cRSxFta3MbdpskDEYdM4kdM3AAhkmTgf388sQfi+CXKCdHhOqEl+eAW\n1R+hvZSwYw0U/Rrhr2JjdffXMspdvBLpQKMLr49JrUqn01lIEuQjCgl5KcMs\nReWcF69zGHPOtUXdh5jxAuylruitX9aJdDo/GqMofT33I8GaGQdaUmHoj/pl\nLf+R5fNlCs50/jlbYPz1ezGX16vVHpzVfbomYEqDvNI+rsh6VYYIsnCoi13C\nsm7kRN+YzkC5+i8oHOrXvbzByoAkmVid8SICvXs9ujNlpO6QKpsOnxYDCnJe\nYBxx\r\n=7iNy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1c494e567.0","@material/base":"5.0.0-canary.1c494e567.0","@material/shape":"5.0.0-canary.1c494e567.0","@material/theme":"5.0.0-canary.1c494e567.0","@material/floating-label":"5.0.0-canary.1c494e567.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.1c494e567.0_1576193856818_0.64244164180871","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/notched-outline","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.c9e98a125.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5dd80951325ec745c75c5638a1a34f831ed7a93","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.c9e98a125.0.tgz","fileCount":30,"integrity":"sha512-QulDC6Ag3tMD8eBvv0lKESrHHvsYoETxWCm0XZIE4v0QSHtt7ub+1NF669gqWzj9NRjof6BYpV/m6S56NzGHuA==","signatures":[{"sig":"MEUCIQDTMJ7qnVV8OQbEfCC5bb405HlAX5XOdOyNNQt4WXZFUAIgNbdFCD/nxbm6GldurybLb2QDDAZOxM869Z+5+InvnRA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RoBCRA9TVsSAnZWagAAiFkQAKUkR+5ZyRZFAJYEvw+G\nOzAkj1M1tmwKF5u90qj8YwJC6+qSDYo0nOKlfLdZ9WtZ0Od9WdYtdk+97edc\nGlVMUcYbp9Qg7U0Lxq4Fv7if02m7qP9V5Z1H49yNxMCy2CLKa5OZ9PYClR5z\nIPEuc9x3hKFFWqP3Hf+t6ybkUrnm755MuReX/R/tgGOnn69b7GaAdPkd7KTn\nOYWZLQpT+/H48yVWUVZYj9Gp8PUtOFUKpDp3dBX15lx0zPMbXUXMFkOuk+6s\njibmut+lOoQgVlL+CymzJWsJIrBZURrmF6SqatDI24M8Uu4CJCx5xh+s8bRy\n4iqvgjRlpatEgN4Jm4ceoNcrVv+KOoytnNFFtoeUMs7DPzjl4U6+vyWqdKul\nP1l+P7L/tyRBmmAShtLlJ/OQgZQ1a2206fkHlEU0KFkJ5IGWcRyMgwtNtgTW\ntiriDC8mn/413HsroM7e73A0iVjS+WMyJkpNp+T782UO8Wznz+iN44lH2YIO\n14Z1+UDwx5nbGSqFxm0kKz7OpqTKJ290fSYUOjYJmLVkadO1svumUe+WOMbs\nYayBm3OEomAaAVPZ8If7l1SRSN/1MJMj3mTH4jV/kfiI978Fg7itMjlY8BYJ\nGdODTo4expTHWnGFSHE/SPDmBiJ9rSLto1UXmcnN/mLa9UFCJQbP7+armvV3\ncBbB\r\n=5/bj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c9e98a125.0","@material/base":"5.0.0-canary.c9e98a125.0","@material/shape":"5.0.0-canary.c9e98a125.0","@material/theme":"5.0.0-canary.c9e98a125.0","@material/floating-label":"5.0.0-canary.c9e98a125.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.c9e98a125.0_1576606208576_0.1610202608896001","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/notched-outline","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.5ffe8f7e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1289d62a6fd4d502810ba51680c9dc9d7a3cd19","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":30,"integrity":"sha512-olCL9crL8ZzE40aa/mxX+EOfbWAhCOVuvNsH0MW9ChoRhJDS4p2e5bUOx7dRCO+gNwdiCohMXuYUrUD0HtCwGA==","signatures":[{"sig":"MEYCIQCSGIA1E5rVORD2qngiwvopDSgYALovC0vl1CYDWi2n7wIhAJQdHgxjx/z2OfxH0d681qSXjMknaT+PL5YllpDPAjfW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VfNCRA9TVsSAnZWagAArcIQAIn1wp7rcRgSCHcoHrtH\nQsJpEcX1XZuGbra84+BcoOsEMO5UekUp3qPKcWI8EpR8Ij7cb29Cb0L1fTAj\nQ3X+dHDpmwl5vZ7FeXS4WK+zxCyPdjUNIUhwaG9JivoLkyB27aMvai0g2TNM\nHDRRta0rHni/tXqezS/hT4Fh9bIkdWI1RwLnISljyBLu46Fqdg0rWWrqAK8D\niX8tkC2K0qn0XFX9S7b9TTDC1hZmaWFmD5HJo1SJsGRDmhtE0xpoaWuGqllB\nd/RJ50mWFcoQnNMh5+oKEyutWe/PV15vJ7JZ8+MAI0UPO9YspIC5IBJa+dgc\nzwEYRqKgqE6RByVCLJ8gntlz0DrOvaJklIyEa1fb1N3GYnHwTfLKBUQw2xQ/\n+aQnh04IC5QkDagcj4J0P5dWGtdYm4RbRAKhBVjqH3UDtSsoQJr/ycWg+RSJ\nHxic3zQv4vJuuQIJJmkwM6ZIITGWNjWXVeKdhLbO3e8eGqsy+mauhQu4f0EE\noF/OvSkVOP3P4GELa8P/AHCpDcUK2WqWpBBJpMoSM+T1l5bdBs/SYUwT3HHN\nJZiCgrZc1zCKPiVK/8ieh1Yz4P6SSBzBfk16wUXxIyohX0F5/jgo8+EVYx35\nA5dvx7NpuvXXvzNQDFeblQXC2gq4o+1hAnebzHtzcWGHEylnh6FeD5GnEKNi\nV8tn\r\n=CB/E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5ffe8f7e3.0","@material/base":"5.0.0-canary.5ffe8f7e3.0","@material/shape":"5.0.0-canary.5ffe8f7e3.0","@material/theme":"5.0.0-canary.5ffe8f7e3.0","@material/floating-label":"5.0.0-canary.5ffe8f7e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.5ffe8f7e3.0_1576622029201_0.10246994595429659","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/notched-outline","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.47949b08e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee7ca55d30ae904ea1614dee3382810a59dbbcbf","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.47949b08e.0.tgz","fileCount":30,"integrity":"sha512-lIkTy9AduWKYPf1zk8ZlwfSoLK1eZ334FFIddpDvXHAptoMMPWLUq9HN0dWjrk7zgexrJHMntiPbdeU4KFHeeg==","signatures":[{"sig":"MEQCIG7YafkZMKvaHKdu7cFlD4tjPe1YPBN1fDHJsrUvmfyAAiAXACOd1mlPqy5WJgOPHgxamxSjhLev2GzAsC3M3C7dqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mS2CRA9TVsSAnZWagAAqIQP/iRpEinM8PsxUxDI7jJh\ngXWklUNUaHPI0RlZp6aFShToy+AanqxyLWWTi8gkumd2gpPPl31DBcUHYDnA\nMayvy1+f5uTuZJcZA/BY43h3ncRftTJ6wkGXCFJoFKkg+6Tnq8Cj/x6H71qE\n6eWF37NcSMujaEpH8wJVSyXKrRqCNhql5qlbTSeB9E7SwiC/EUZxU8ApUbNa\niKcPSAWpZuVpBD/X0H1UG388B/5QGIYFcpyCMerJPZe27KOQZ2HaiJB2DiJN\n2u24KJV7VBSMLgHhmlKSIh/Ny9K39zZEHoBC3pOB1JtaN7s52bZw4ou2YVvC\nBAJPH4zYXkHbt8n+rIaaWXxmaSAL4N70KUd0G1kWFaAFv3hn6EEdt0exhq9h\n2Eu+hNY2Jck7IsdKWnYW+K3x+eLkDLi98mE2z2WaaOxjXHe1+BJ4Z92oUsKZ\n2ftbWAbmOIJlvT9lt7LNCdlIkXxgyJlaVmEFZYYUf/PlTGPDpxLNH70DPCOA\nWT2LQQPTViHOrLoyBTogCdsVa7hiKoM3z85qVqXSzIOTl0m2kRYswwylzzS2\nvj5Lx4BLfbv9RUU25aUgNXyn72D0M5NPkm7mMOhtwzQG0peS0kNekpriX9/W\nbKl2AgEmqlGKvpV0Z+aPg2r+CELVTIkcyUU45ifs6H8asGgZACfBvVnc/2b+\nC+tu\r\n=8YAN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.47949b08e.0","@material/base":"5.0.0-canary.47949b08e.0","@material/shape":"5.0.0-canary.47949b08e.0","@material/theme":"5.0.0-canary.47949b08e.0","@material/floating-label":"5.0.0-canary.47949b08e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.47949b08e.0_1576690870187_0.12596457073060408","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/notched-outline","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.b240bcc1b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0030c1c8e97e0e62efcedcefde959622d6c2d4ba","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.b240bcc1b.0.tgz","fileCount":30,"integrity":"sha512-RhV23PF5l4EeVUz6mQgrO/70zMCzE9Z0wV11UzTctnw/riLiB8vK4r7x2oNo7DLvkpjdKcRAVcBLOeMM3+yLcQ==","signatures":[{"sig":"MEUCIEZMUi81WbJZI5xy0rJi30JIJnn2GSTwwyHME09qIHCyAiEA8/PV+xu0xhbFU1lH/toptHe1LcaGrqWoW9TkPsKHv9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntOCRA9TVsSAnZWagAAhQ4P/1qfkI59yV0RShrmnekz\nTKQaN95frxYqhIM8JNtPe3IYA284En1kbnojN3z99b297eQ7btdApfJnm7Co\nIu4Y/ZFZOh2ZtudqSO+zvRoYUg5CBNnjS9sM5m0s7gTDA0qwm46V4jQ0BBEF\n/VfLupPNdrn5+giwxb7iEiyrp0blkdrnWcmNUzSgSu7t/wSwv7DBKQly5XR9\njKw135zxg7dcJzXVa0yKEuXCsOYv0XedEINxw0dkTeH4FJATBc1kSe6GDDcH\ndVpebiDWZk3SN1NKR786+06DLynZOfK4fwH7WiIqiJmIRS1AHUjR62cggCUG\nJPFufmpJQvF90USCsGmKTs0BqbB9rsXVR3uu2vREIN327Sje91ED1ulUUpXg\npdoOJAR93n3bNVundnhZfbCPlILSIARcjakaFbc9P8ugk1D3SBnmjGLz5+13\nnxyGqLFbFkXKkkZd0OziXlfdi17sKNPWs4af/7da0bK+gYBh9tTooVNWP7Ss\nwf9h67lFkwSguXgkdi4rkDPfk+3PS+xus+kt7oEXgswIRpl1V60eCo8YMRSz\ndp+Pg7bQfCubTZEIfK8Snym5i6mFk2Wi0Ld5G1bq6vEItMu9dHyA6lwKCFgP\nX1Ije/BwqZmJkNmI6U11Xs9OUFHNg93iifbNNBbKizIuNWyLhXHZBEeCiS14\ndyzt\r\n=ADvg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b240bcc1b.0","@material/base":"5.0.0-canary.b240bcc1b.0","@material/shape":"5.0.0-canary.b240bcc1b.0","@material/theme":"5.0.0-canary.b240bcc1b.0","@material/floating-label":"5.0.0-canary.b240bcc1b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.b240bcc1b.0_1576696653964_0.0020084485253275552","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/notched-outline","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.391674a26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0228b968faddca9eb21624a4b5d4f9f3aa4616aa","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.391674a26.0.tgz","fileCount":30,"integrity":"sha512-ntSitgumwVsTU05ZhCE/GfymaZhorKPCmQx0pNmKlVIwcUopKDTF+Sg8O9GidcJT40NmBoHvskBqVrUcZ/eIUA==","signatures":[{"sig":"MEQCIE/CjeYJiswHez0ZqggO3VvhAn5grNadCrQC8SJeiyQFAiBjt0bLWWfJAEK0+w3miXNNxt5XFx+tQGsH0msTRa0w6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntmCRA9TVsSAnZWagAA3/kQAID0hIKwY0fMPeYG0/9j\nDWtSNLjOX/4ZfxBTIoF+GqcQGxhV97Gfv+AWK73F31AAIrasVpRilcy5XCyt\ngUcc1gAQRl1xcKx25qhgLi+kUFcHe+FWLYS3p7xiLvQBuHQA9NFwMgTJ4wbK\nuH1WCd3poLCUdnTBXZX1Kq3oV2VG9w9PDp8Q9+MDEk8OAlGCrR8WeeN0oHVS\nWQyqZNP0q24AghnR39DtApn34cEPixDrsOQAy1dY+fK9arQIJeHhIGkAnf4u\nStmeWTWIsiPPrAzkA6JPck6MucYdr+R+rCL4uNQtaAE9jWLaXBfrQd8daZbD\n/p8koVE/Kkc/0Zuij8FZzE0GqMHSzrQdOZXc5sVmCLWoL03ezZRWI52wwHYq\nsuX9oihcR37ubgCvBShmoafXLEbm3ywRVT3e6xllkphMzarcsL5zJXzZKBm6\nrakJqWAM72uI/BqGQcXGqNAquR+e1DlMWMqrkCjMzLaJbsBAuVYJgTc9Sp48\nOp96v/egAwOttu0z32a4ZDWmHVG5/rGK3zLMyRMwDOT2C7Er3q2kltHDnnMx\nq0leLqlwOqnwfLrjaf3cGpaDLp5fi2yVKs+Gs/vuaqZ8fHeAcV8cxdkSiPcG\ni2DjObioIBtk0tYtsC2SXyL5bUIS79i04chS547WDjajCEIffVPWGkPM9N+B\nbgwj\r\n=pqvL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.391674a26.0","@material/base":"5.0.0-canary.391674a26.0","@material/shape":"5.0.0-canary.391674a26.0","@material/theme":"5.0.0-canary.391674a26.0","@material/floating-label":"5.0.0-canary.391674a26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.391674a26.0_1576696677887_0.4636022231829837","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/notched-outline","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.c4837746c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f2278746eeafe3477406cdce044f67bf4f71c73","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.c4837746c.0.tgz","fileCount":30,"integrity":"sha512-CiWGvNOlZq5zaPt8C7A91V9iI1qgWz9QB9XXn6CoGkWy/1ZbpqNdT+OQ4zsshCJ2o+cm8nCfFxkUDa8LOiHFxA==","signatures":[{"sig":"MEUCIQDtlcbYTW6Fx2DYFTlLkMMGzTqRZoGowYr1GMitu7wVcgIgO4MvIGFqm6GbQZK1s3pvonXaBL2uj062gvmUvKu+yvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n96CRA9TVsSAnZWagAASmYP/iVtdZzBatr+9bCFE8i5\nOAr6muD7+EBIyQIS418WxW/vZTQn7Lmm6rVHaGEpGk0waQlgHP1M1MPq34zI\naDG6E4jYsryDqFchMOTTVwliqFU5Ni3Q4WPV5BoPHdoMLJpQNtcO29pzS+gz\ny0J1fdQCY5+3cswzu3xvK8oD5mj++3nmnf08UkmB/olI/47JI7Jx6PB8Lu6V\nDtI86dZepEYtxM+jZcSPOOnbaNoX5JfdL5dNHqIr7tBHjuQ5WPkZPd3CwzbC\nMRO9++OP5tLGO6vL6+5W4j8I8WTE5higB1nUYUsyhc1Z5RaeR1+jwuH5IuAj\nEvpCz8dYPY4unpxpOkjvf1XTsy83+70USBtPoyseV4YzsoA2rkKHWYNLMl1a\n+D1txrRrIqDkfdGIwAadjNZyaGJ1JTxqMm5wFgPgqqnxUv48SEgy7ILgGK7s\n7+vr49Nzwp3xLFmwqrrpZ0NlYd7uwGkIErmVey+uYDoknmR+rvuRO16mpf4R\nLS+C/P/UCA2W4F4TIpepbPBOSQ6iyTAXpAI+9lUOcxWUaH5CzTH7uARBuvgj\nGTrGfiMJNPOC6GrgytVgzQOf1hzonGMbrKNENe/x0UeFCxxcgokFQxlu6IYy\n7S3+PGbKdLnerUSKlV0YKnVk3UMFcIY9KsPIwLy8Zs89I2XBxQBio3VKq9Qh\nKGRi\r\n=NUej\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c4837746c.0","@material/base":"5.0.0-canary.c4837746c.0","@material/shape":"5.0.0-canary.c4837746c.0","@material/theme":"5.0.0-canary.c4837746c.0","@material/floating-label":"5.0.0-canary.c4837746c.0","@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.c4837746c.0_1576697721727_0.8679307768084594","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/notched-outline","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.e41a70425.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9b3744d406fe8dc9609c5b76a2e21a43c2987f9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.e41a70425.0.tgz","fileCount":30,"integrity":"sha512-QdTGSgSdL3mQWs5sZ69IMnDzYM9jrefjbDMTtTb5MiyvyDoOrhGbXvLCwM4zF4OUKFDcYC37vbzc99M4JAhZxg==","signatures":[{"sig":"MEUCIAO0e6qYJBhBi6wEfX+B0AMbYufrJgki+p/s7BqzSrEbAiEA4uXX4SmWfYzOkiDvjZnhhaWnbXhJIyh1zy0kz4Ucjnc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rRbCRA9TVsSAnZWagAADPMP/1mcqgJ9e3uyaX0OkznM\nBLh1W0rPwAuNBe22A+icwLUo4T03/TirlnuT9IlleT9TQS0TDTMR4dzIvFw8\npzA67XE8AEeYn4jgCPwRyXBERZpxWHkVodahJLR3AAm662FAhMsADICQ2UDA\nHT2xzoD+7hFXznX6lmGb+YPOVSseV+YiAYDfd8D8zWrr8Mv7/0TVzi7JTQF0\nLq9wv/wtQhKR73Ffaesnay0nKxchZRW/YojMobLNNTzWmYvZXk+5P11E87aZ\nW2u5Pz0EaZYG03r7MHSR5Fr8CKJUV8M1EyP0RLOMXbVbfiDpTu2Nq1mm1M26\nLi0PPIWxj6kZKGk/MFvuEgGsgRa80RaBVXpraxfam9DnEfsfXmSSJ6uTFBdm\ng+E0Z2jloPdefgsZ++WIgtQTN7ytrsX9g7R10FtdbnZwTGYJa8LurWjHMK9Z\natWFDvNbtqR1gkug/hNmPREchOELz/wbzpSZjUKXZ0z9oIy68hCZ+MFkJT7K\nW/t+QzVjV8awZY2MQimAM45CZKwdQ24bMQXyXBpMyMHObg/92OsiZ8mdKI8b\n55bcbTm41vpChX46x2FshRynlIDmNzGjncPbKJ9Y9n/edjHC1xKiOjnh6Pze\nf+VkyfLiPN6SgrwyU75UuxmEdtZSM7m/QpQiobE62O3uvg/xlFY2guamasQG\nNVsR\r\n=BZhh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e41a70425.0","@material/base":"5.0.0-canary.e41a70425.0","@material/shape":"5.0.0-canary.e41a70425.0","@material/theme":"5.0.0-canary.e41a70425.0","@material/floating-label":"5.0.0-canary.e41a70425.0","@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.e41a70425.0_1576711258690_0.9590451581622474","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/notched-outline","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.bac43eb43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f3117d7873319faad1fa41e7caf21c80308e199","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.bac43eb43.0.tgz","fileCount":30,"integrity":"sha512-U4ZkU76T2mJnnhqw69ZcMPq+307FfJeD8yoqe/Upsgp+yEVlbDVJrOUP4Sil64RjvyGDQqMsq7SNcSiOp9Z3ew==","signatures":[{"sig":"MEQCIHYR27OHawfQQB/nvPwW8buXfXq3c+9P758ayQ96yvmwAiAv7JNWH7dBJ3ChHg58jL6yTIr31yKoACyZCw1lASd5fA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rU/CRA9TVsSAnZWagAAIk4P/2nKYpkG81c2nnUzGyrD\neI/X01MMdfuVU3NV7vQpp9Cihq5dJ2t+vbKoFnbZqpMfUKyE/uRd4zU4h584\ngsO2qbGAOw18mlCSHuLEjUvYtLUcKriVsqqe0HxOmNGvWjnCFfmmJXSA2IBM\nLr4BAhqMPtY2vVSCrSO10lgZ5RHyK5drY3hg10bu8aek1YJ6Fa3lJC9jgDlr\n/7CHSCYslc70aCGLq68j18XBtjQ7ilVtBS0g148WipyFtBIjTdX2x6QTJ+Pm\nZUrp8VloLs1KMgMz/nitoWObmzgay6RonvYKz049htw+5cfWDs4/o2PbHUrG\n2ccvK1DDktsUsZP8key3ileFR2vxEndGxD9/ZEVhNOdgSJDPUgBvO3ZVRJh3\nc0CnYbsR3Tu1dSryq6EceXhpAcndGBXRySWfIHx8SuDPQVeaMBC18hI/ixG5\ncaTlgOcMHq+ucoD+Z0Oj0UYDrlrZnCRwgr8L/cg4O7SIIoDI3usRLfG+tEzy\n83+QsB2v1a+1KT5AU6m5hMKPkFToN51ttbDEDp6Yqe/OPYcZbSxigzXUK/vv\nUjWgZXNyMPSdxJpGxmBLYhhF73XCnTUSOq4ds727+zUU2/vA4OrPNj9zykVf\nVa39XS4fSCvV+vFN4eRtcgaBH//raBpcJXowiBfmsFxVJq9UdLbK7x5RNPvv\naf4U\r\n=N8yD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.bac43eb43.0","@material/base":"5.0.0-canary.bac43eb43.0","@material/shape":"5.0.0-canary.bac43eb43.0","@material/theme":"5.0.0-canary.bac43eb43.0","@material/floating-label":"5.0.0-canary.bac43eb43.0","@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.bac43eb43.0_1576711487019_0.4847812995710168","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/notched-outline","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.2e491de55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6576777954ca6cff9b4e907e0f2fc5069fae2deb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.2e491de55.0.tgz","fileCount":30,"integrity":"sha512-AvAdNg5ZwF4uFHOiOYgm1x4DSnzLE7feI0uQLBi/bQMIOGskiPvt93Qcylfr+ke4vVSQESSBMVKMOQd/oxDYbA==","signatures":[{"sig":"MEUCIQCGPUOIR20NYdP9aDuUHBbNjwyLZYnBoEJ4ecPpjFylmwIgMFcfc4kwBYi+J19vUL6c8hG+kHgStbVoSsfRvaBCZHA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1YDCRA9TVsSAnZWagAAr3AQAI3BkntzhrOGnNiBFTXF\nus0i38gf4gPc6i8eKncDAyr17/BtU53WHVZbTXZS1NNSPzHBADBsI/bqhghb\nx3ljcwtx6J9tciruQEvxwICmcojkqLx15zQPX7yKpL24IeMDq7q4+TVS5QN9\ntkxJxw4R8xIklw6BI60jy794xuzqNgGgQl+IAqtwHK8dFS63Q15Ja4FQVWlu\nvZyBoq1xc1oVxCGsHWoLQfDtQcpdxm1RMchkzGmVSvr422k2/NDHrlyfabqS\n+aZixMyr2+eS5IsbAyYftYOJhFtaP87FAIV0+TzixnX9RrFXsas6JpEJmfCY\n98CQ1yXxHn5fQLT1AY3TRxcahnSuNnx0esY5lDNwYkozbLEQW+DBkk0hPDUY\nE9LyHnWZbidaD88v2joLYE/E70yMV1fEBuKi+kjHObEEyOPMMnytqos3Tl1f\nX6Tze7wp+qqPbKxe5VtXwvsb3fq65FTvxgCSX73unIeHHMgcgKETlNXRuMiD\nBe3pZQY29i4bsldZFHlbuSo+9iRg60NzrVXKdpaakmMExhJqWvKTX3uu4d9s\nMESBLFHUaqoq+WOqZK8+Bo07TUKTQoHPd1OxW68Ugzu0n8S8Soco8zJ0+rwp\nsF84QVAiojTnjxoZEBh5B5s7OZIDCxrtDooeu8HiisIPLdddZ0BkGB5oeW4e\niiAe\r\n=Pd2h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.2e491de55.0","@material/base":"5.0.0-canary.2e491de55.0","@material/shape":"5.0.0-canary.2e491de55.0","@material/theme":"5.0.0-canary.2e491de55.0","@material/floating-label":"5.0.0-canary.2e491de55.0","@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.2e491de55.0_1576752642702_0.08550380475391539","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/notched-outline","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.ae101c144.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa8aa98850dd96299e6daa9f4c702a1b46889767","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.ae101c144.0.tgz","fileCount":30,"integrity":"sha512-QhOSB99ZGiAaZWD0bCKGMFXRpnEMrr844rJJvaUEeC4zWHa6J/soVhYbVFHDjGbdc/VM+iLu3cptrl8q/jAVrw==","signatures":[{"sig":"MEYCIQCwmcQG3FoUnny2oaLVeWW/1mAJR8xSjkVhbaOpp5FMawIhAPi8KOoZgTwxr6skNT02pcFYaYvZdzW1lS44g+m8sVV3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6SHCRA9TVsSAnZWagAAkG0P/3gALYWFszJ4Uo677EFr\nS8oy0C7xstRJh2zG4JXvfpZC9i72EM8T8Wehk3nwLOyIXYDXUPP/7RSSwQHp\nnvu0szA3de4sVK+4FW1HBoeLfU1PShKUZS/NVrSzEVMMF8cJJex25DZ+qfDS\n2vLvRQh/14fbdWSkJsrKoiOBnmopzr1itRMnVbigYsNraPqGBplg2dQ7+Ypv\nYnqh8xSZuLPFWQyxv70TMIBHRK01uyP+PNIpvMSrBqZ6yv969l0HhVTCpYsc\nMrjZQZ5Z2+2qaJx3TPzjTKO+d2C+Eq5OIYqLuWfHDLkJPuJXQ/c/gjZMLegi\nPmIUNH/juld5ozALzbxHO63BxmiKv3+JDyaxwv7xmDu08nCVCiB/eBxLi0Bd\nkjidtHGcYIeFVyuvKCBNVVjM4WuXnt7YD9h93OQpRh6OlEuvO7i0MaSmXMyB\n9VxOmOJsR9CXMsk7oBG5qD0+gy9fo57KipGFGYXznl7j63LcZFZhw0ytJGcx\nNxGOb9cId/uQYK+WbP5YrB2giw51eAtxDjpjt8mIo/jA/AmczMxdOZWA6QgX\nxPX3X7gl/rdRrcOuO1dL+trI+h2eR5lHT/iPyhWBOKRorwXkXozGMZ9S+tW/\nSK382XxZCyTApNebHfOdluU9wARwD9wgghc+3gTJ+goP5X8Y1S3kMGjF3uf5\n1iWC\r\n=oyST\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ae101c144.0","@material/base":"5.0.0-canary.ae101c144.0","@material/shape":"5.0.0-canary.ae101c144.0","@material/theme":"5.0.0-canary.ae101c144.0","@material/floating-label":"5.0.0-canary.ae101c144.0","@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.ae101c144.0_1576772743425_0.7867936749779594","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/notched-outline","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.a51c31f26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7f9a67f09db6ebbfb89d0442e4ec8033ef84649","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.a51c31f26.0.tgz","fileCount":30,"integrity":"sha512-IX/e/3+HQdmqAxvI3UwJQR7Lhf6eDoBecsFj/cHkdCFrtMocHsOnGmRjSYarEqY5w5GRQOG3KjR+DzjaJLqYmw==","signatures":[{"sig":"MEYCIQCS/QN2deC8gB+CvUXpu5TqYLLSUbb+cryJ8pOflJwJvAIhAOayMIbw27oNypGPOdvpYIWxuW0g7CLzp3D8dsHkEUFa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+7AZCRA9TVsSAnZWagAAekwP/3f1a+Lp06n0Rujo179I\ncw0+3pZ5QU/teRGxcGoya6H0+jVt4v0+u5bocYkQk2qhcAzz2X31ZeiINrmo\nC16Gqjpdpkg9b7kR/yEDGQz9X9baDC/ctS+313/StWCp4bWE0C0le40sMrSW\n2b1877YebIfo3qbG8dQQJGdyQ4cErnK23GLH7WkLogoKYVk4MC0qZdG7Hm7T\nAYzyA05Wfej1duqWSQrm7nErUGYaOUeLsMVh9ERYiVoupgX63SwJ8amjHAt1\n0IujSUnA2QVgwwF1dn+24vfM7dP0NPhNCPcKNEny7oN/wTTrWfyUuslWbvnW\n1eWrlNKgAw7uEg6Qjqlj3k92Y9pkTdgHTxjWvzyeGwcaXZlwkIJMoKQBJ3Z6\nJdhQr9d2gb482QPGEtY7bAE8xnyyYu1ywDV9z+psAT0vNCxzWJFHKDJlFuQs\nu7WQvzfHiTWPu8+P3bvdRQxs5NYtLbmD9+bOaMTJSS3CnjeKswdtvq++WG0k\nXDBL4A6hqAm3JvQZPcONeNwtoFyfWM1RCEsceIGcptBJvtGI/oSIVo5CRIRO\nhuu/kggVd6XotmHV0VtgVrPdJNFbt045jyVBQTkr6nAkaDzT/8hm7/yDKasf\nJCtiNSAftrX+q/JW7iWE+9IQjIapu5XSWfNP1zdhh5kOC6zdOosg1rj9JVIe\n3y1X\r\n=MxkI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a51c31f26.0","@material/base":"5.0.0-canary.a51c31f26.0","@material/shape":"5.0.0-canary.a51c31f26.0","@material/theme":"5.0.0-canary.a51c31f26.0","@material/floating-label":"5.0.0-canary.a51c31f26.0","@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.a51c31f26.0_1576775705006_0.13479288867441386","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/notched-outline","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.21fc4e13b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6eeb865eb9a030908dc76c5e5c7a80e971dba55f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.21fc4e13b.0.tgz","fileCount":30,"integrity":"sha512-GUFeoowwKEmF+vJzEvxr22Ulhlzz1ZkuRBDD/RD2wwknFo12+3FxH0ntJJMXr+3aWJgPIHE8MnKeBBVPDKJbKg==","signatures":[{"sig":"MEUCICXjB7TKuDWqxSHot3s5kdRUOIqBOUqP3TONrES9LQYsAiEAss3Kv2wQvIo+FN7mLviPxqQFyxA1sQwY2EQTb88SMd4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++tQCRA9TVsSAnZWagAA/ukP/j7tFx2+AjOItiAo+spg\nG9fG/kBGQJECxLk0irLktb3IRotPSkwTL/iInHuSg3javgWbyOSVFGqWjIvp\nk1rVxmWmiTldCULEe4u4KyoVgpQqzprZ6NZxdVmeX4fK6xTeyXeMJdPozf/k\noKWa52RNKKe0g/acgnRaez3uPOePtezu5iVZE6iwtRFT+RVnsSUsSg3FAmYl\n1g5CsHwuq882nJNA1n2hqUrhy17yCiCiobQ3m8o6tLgWIemmUnNh7nzF+rVD\n3Z9MPum11TD4tCJU6uovGHf6Xv6wOJI6FpMxmsorZsvqWSl80jhRmlu4w7HQ\n1o+XKjsJ/7IIx2Vp4c+bwFrWUqc56UytsGEIwNUiDYFra80upGp8ua0KSTQA\nrKwZyAk1ZdErpYUbvLuCYDQ/7EMoIkjSTo/AiVhngc2mf3ap2rpJa04drRqY\n3KLsUpLvLNQ4dD+BatrtgRde9pkVJoDAMEThGiFgj/WlRn+SqmKT+CO8wGuy\nIAILiGMctl0sjgU5ArgXrxQSs9//GV/quQtN8I8WzmvgXFQ6wMOBmsmKOeQ4\n4W/r4gfp80ePICWPNQk60vJVABPKOFhQj0PD3CxQsD+V7w0LZzX6JJYoSkYz\nPsFx5Du6sPk+2sq6s7RrUuI7+pnAWB/RNtOdx8uba5OrjvQgI9J6ThPUNG9z\nd3Jj\r\n=UOg+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.21fc4e13b.0","@material/base":"5.0.0-canary.21fc4e13b.0","@material/shape":"5.0.0-canary.21fc4e13b.0","@material/theme":"5.0.0-canary.21fc4e13b.0","@material/floating-label":"5.0.0-canary.21fc4e13b.0","@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.21fc4e13b.0_1576790863954_0.26955816992134807","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/notched-outline","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.d2ae6e17d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48c9cbe236d64309ffdbbbbec72777e124c39e12","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":30,"integrity":"sha512-3iVIzXAOMzVs/LJckx8y6TRVwsjywREEIgaqN5ZpF6wTISlNZvRB0pF1K8y+L+A+teQxwss0obopBjOIWZfHRA==","signatures":[{"sig":"MEQCIDrbIrG2ttdI9ej1aQhvv3S7Zu3WCkyFQNyzmvf+bycXAiADbcBCh5ZzCCoCY9kHNwTyoQVcTYEqOP41S0aFz8ujnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/itCRA9TVsSAnZWagAAdscP+wU6nMqi35m+uew3i5t2\nPiA/VmxIngZovRtp6iKNZbfHhjYFOttJciE6OitihAWOgB2pUNay7y+zuOEF\n7ySJsu9DYawqWRULsjda6IqEMtlZyYUhFCFMzG4NOC5qmV0SLUIg/wwHLzCi\nHgT/H6WNa3vLrz7gIpigBysdT7vkm5tJCHY/pZlOg+LhrJY8AkYD3oF1buBu\nmY657vV3r9Sei4jjZax8Zz1/6SGudhxZH1+/i28q4gWjvnitc9NqTG1y4C91\njs0hZdYMqXVy2/oL2iAxKCI9Ky9gpj10YhNTIqk+qIapXs8BLu5janpRsa15\nmUELBVY66TYBSpE1+S5XguWLEMgY4F6Ro4YPI40BlN/MZttDUZCchpXIoMBh\nEMdF2DGk3/STF4VVIwHf7MUYExZNicioHQFBaDWEORITrSTj7fVYYwLibeyb\neQnHLml/BZfxYnZ4a9g+OEoCZ03W09dFhTv1MWNZdoG64ZB6MwjZY2Erojs1\n1juAjZ4aua7s45uEjrAq4OnQ0FtirkRmTKhiZhKjCzgQGjDOipX5X/MbVlkO\ntl0O9BXk1kDTm/DS+mHbeaM6tx6iZjSMjEfKIV8JIeDvnXxL4JPReRltJiGt\nhN+U+aFCbPkyJY40bIMq1E6u845658VoB8nluc2hJNM/WM30o6espDpN1BKP\n5Kaz\r\n=bOEH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d2ae6e17d.0","@material/base":"5.0.0-canary.d2ae6e17d.0","@material/shape":"5.0.0-canary.d2ae6e17d.0","@material/theme":"5.0.0-canary.d2ae6e17d.0","@material/floating-label":"5.0.0-canary.d2ae6e17d.0","@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.d2ae6e17d.0_1576794285340_0.5479030407723","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/notched-outline","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.ba30399ad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62ed18b4e5891ecd9de6fe07d69887a368f87738","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.ba30399ad.0.tgz","fileCount":30,"integrity":"sha512-lsO9fzB4s6Vf4QKKnvOgJKEWD+OYJDqY6MFIzkxN2DHg4LBq0g4jnceukB3lB7v69aNp8gtKhWG2JcsPtcpKuA==","signatures":[{"sig":"MEUCIARDfg4fKFG9wVDyVX0dwJi8cb8aJ2zXIIbaJ0OSz80LAiEAgwUs/3G33e/TikgrYry3Qt/nN6y3EJeOtX+H53uRC3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B+ACRA9TVsSAnZWagAAs4YP/3imFW16zTUerq6KUNi1\nD5bFiB+8olYSypX0fuTbjOlaRmYZQtXF+AgYosJl6R8RRPAJ/EgiYfN1NJno\npzc+DKx2jNLGVOB38WrRATWN/KvPYzERQyn74dK64pA0rXG73xIe73e4eeWH\ndKF1g+MDDMpF2lwXGU7iWzl4W5PTs1qshogQ1HUbeT8L23wR7M6yxjNJHYTZ\niIWFPjqxtfCZGgtMZjhqJ5uqQyOKXE8lvDYIULGKJeqexYbLbByeolv7HL8p\nxs3k6uUwYmd3WKisYslJIJ5rGoslP19Gpa/vEnlCQdG69OGT4KsEluhB9TPS\nwKUxcgUz7LGsPd3Rz1+QqqaWArO52WAnytcO0wfRyIh4oKHwR9F5rZMh4TOD\nxMQzNW9BNGvs0A1+t7IWQYhJs5si4ulZKsY2JmctfojppgCZeZxMWPdYshbJ\nQHAMGagtWAM4c3r0oGBVkxbWawprkkUV2Gs2Se/XVX1HqL80d194vkWoOrxR\nWruI9E83CkX9w56ap9jedbvQzH3ukpL+nN7mXro2eeYUYhTLERmpWFRxje4d\nz8IowrkUAZg2cKeEp2nhOf3IgINGoaglc7IXzIYn40PAXDk96ba0Y7ieaHoG\nlWJ8RT9+UApa/Nc01RIaRcrlVJbzWymg1ZsGAdIzIRRC5tlaR3L7lWtSlIoS\nI9jn\r\n=A4Cc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ba30399ad.0","@material/base":"5.0.0-canary.ba30399ad.0","@material/shape":"5.0.0-canary.ba30399ad.0","@material/theme":"5.0.0-canary.ba30399ad.0","@material/floating-label":"5.0.0-canary.ba30399ad.0","@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.ba30399ad.0_1576804223756_0.8840335361435636","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/notched-outline","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.a08ccec35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b70ba9170d09244dcf956db2e536be0f4512ab47","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.a08ccec35.0.tgz","fileCount":30,"integrity":"sha512-vcdQdqpYHP0e+NXN6Lj3KUVa+5C1BsTA2eH7RRkoVt+sdp5thPfeaTIpL8IpnnTBgpyckprrCpxC69AD9Mz7mw==","signatures":[{"sig":"MEQCIEPjRsxHyWW0rA22UTYxjlS4yPwfE36awfw36Wm4CrTLAiBQx+tUTbdjaxfPb4BxTdquIG4FIhqM22+xRRVh1Qxogg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/VjmCRA9TVsSAnZWagAARrAP/A4RuoI/tRIaS68kGHlV\nyMordYp0Vf7ht8V5d2KwupjIrcrDCh26EPCqIABzqV5R6N+Tqi25pC+Wc8xJ\nEJGVY9DXdQ4GN4bYx9xS1W319FgwVqxb0gpfO2H6Ncz8185tD+FhedrL/ORf\n9ii6k+3HPFEBF2bo/Su4Hqy3w4V6rrarfwkq8ajPl95dX39OhZtqN65E9cHk\nz1qx5RxikvZIBsyzL7v8Xfy7YDQHipGOHgzOZm8A95uMwV4Z34Ads4z0Qi2D\nf+eSq8yPA71MBaedRIFHChNMBRkZRRftQXvfcWd7EKWx9MghBNzI4j+WRgYa\nxRWvZqZVNpoVv3vETyOJ8psuEAdk1OtsojTZ5rjdEd2K4OKPn41McXl+iqa3\nmeHMW5f9uDg9lp1PbteJmbtiIf53+3KzgXZT8fDzPtwwjf3FfKPlTxszBVdB\nwZmD9983l6SkhALe3SLJow/yKOv7MrxWK/8k2MmbCXmQ6DTLmQrPpbIrz2JN\n6voW7KAQ0msagLmyekqtKG6VaqnCGJK0PR+qUwPHuR2+JsAlLfSfD7akTx53\nacdh0Wfcd1L3oJUeFEgMQ1eHkQgwmvtnYa3+Vyil7BJDuOqKxjJp7xus6A5H\ngFhlghLBSXmyiNTZSi9uVTwKZUT5SuzRQsUpdSgtEQyc/xulKbOWA4jMmwHE\nY0s6\r\n=MNUo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a08ccec35.0","@material/base":"5.0.0-canary.a08ccec35.0","@material/shape":"5.0.0-canary.a08ccec35.0","@material/theme":"5.0.0-canary.a08ccec35.0","@material/floating-label":"5.0.0-canary.a08ccec35.0","@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.a08ccec35.0_1576884453631_0.8963934344830187","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/notched-outline","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.a2f75105e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"867dda6a6025ca5c32eb470ea8bfaa5724c6152d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.a2f75105e.0.tgz","fileCount":30,"integrity":"sha512-BiGWPN0cTi7tJBD4/H6xGtg2YkzOIkiGYButvtZJOzkoy9tq7bVPipdDnx+prNYm1Fzj4ehVZUq3CZfuc+ul2A==","signatures":[{"sig":"MEUCIQCgc4FI4Oc67zW1UVTODnmr+BNASWVED1aBZt6/rYxLUAIgblWp8HZyxYYDpWGVBAddQmsHHiiJc6gTvNNnOitX8Gw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARoECRA9TVsSAnZWagAAD1cQAJe+pyaJN1GP2vQs2ZRJ\nUPvglpgeAuGqCZMIwocOk+Kvgnb8d1XmemcsWJ+8xjp81RwkYPSW6VWZ3bY3\nC+gLsn3YVR9SByIVsjTzg7corSQbBsqgPDZVlWZPMNY4MR+4W1C1tYfUUIDH\nTtGFHvdzBkc0TdweMs29hcvGctuXpOlZr741r+i21dk/o31f6THMu65DmdVl\nIaJPZpPT1JAv85Ak2Oa5XlIB8Ld03gOz/RObk0G1Q/02svoM8rYBpoWxrI32\nEn+PmQoT0sZda4bBLqQGObhol7QnSwB0txSDHU9uTCix2rRNZc6WMBTFzbZv\nWPJ3f6RdkLI0vRFzvShRmBsGq5309q/TXeMEe/u81X2MU4FrqxLxMHGTEVG3\nVJCLwNOz9ElwE4HVRdOb8/F10D4zNmcMrEGC29WeVDYm+yitWTqGmZhCAIBX\nxa/+BE5iE+p0LbHBnMqPVMLXuL7yC7ZUxkmPdsg5cjvApC8QT4dxHhBnHuDI\nAc6n/b3LX3Rt6K+05GG8YFu16NifGf9Rg1VFigjMKrwrtdnrTEi6iDfUpOuD\nxI5jOIk7pP7OBIZHX6tMgcS5gTTGE0iIjnMckHgAHb4cmhtwmLL3p01nSCLW\nXJhsJU5mpcdYWNSTIM5PMCPPytmfxvySRuFJXSspQ8BYpvJrwGmp4BlsLIQq\nQtiM\r\n=CBVM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a2f75105e.0","@material/base":"5.0.0-canary.a2f75105e.0","@material/shape":"5.0.0-canary.a2f75105e.0","@material/theme":"5.0.0-canary.a2f75105e.0","@material/floating-label":"5.0.0-canary.a2f75105e.0","@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.a2f75105e.0_1577130499973_0.398086396771119","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/notched-outline","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.c054a24c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be1f3632aeee9f3ec308644a42f91df112d1c259","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.c054a24c7.0.tgz","fileCount":30,"integrity":"sha512-4cBIRr1tTsM3aUfGb1KiKHUUGNdCKJicZ3Zm8EF4ftDp+C7Z4TPMQGIojZ6iXeLZFmHuXXhEPBaSN39Uo437Vg==","signatures":[{"sig":"MEUCIA9b9/dHZVVCib4lL7gVMcCv73xeOksHXyMWqGBCx+XJAiEAxu4TldDNzx2j1bA3WDJ6sjS/JBGQ43Tw/tM7C+ru0LE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATaxCRA9TVsSAnZWagAAx2cP+wWwWX9by44p654uLXjj\nCO2dfd2xSd0D3f1xtEk/vIqk6cJPVzCCZWpE5L8sTN9GkNHua27aKk7h4f3f\nAscXvvlQrpjWaesaC6sgBmiyW3oGhcHQRSN2zfy+8E3VOb1nw+FZYX0xwvh1\nsRGTpdbLJhiDqSopfcJcMzo13LHMlVXG3pE2WP/bgduLlI5l7PhyTI3iq9aZ\nZH0NsVO0UHrtEu3RHRz1/4PwH8E4gRtJo4CXjo6QV4Qi0VJun0ABukaRiTDF\nN3zp+QcuO0cRme8m0mmlF5Og8NmnppOAnfNW+5ubWVs+3eG0nVv7SoEZMz+j\n0oPuIhEXTCliOQHH8iMw+QMRp1mdxwQIUm/yhwmpdD93Cr2NiKtCjGYe9JV2\nErmZZNAE8nwQ8dzolOUsKTyZYLMZrPmgojNe2JjKa9AObKbgE9Kf7SMoR7gu\nNiHVH1MvXq1laTSBWYMV8IXJ7oAbUnKjqWJKJTWwBRHeC6JGqjZrW3BzRLxW\nF/4i3dcH6J36asVrH3WlTjSVaStCZE43ooj9/xuDZhWtRyb780vitWpfV/V4\nMBDpid9lyhtc8XNUx4ODmHxczXu7zRz9cgLpfZ7hAZhAmd9gVdg3aqs9HR/u\njDPIX0njEuYKlQgNCU6zsXWF3b6O9vhhCc1TkAf82h3jzDtTf7Kbt5SRMNtW\nh520\r\n=XHaF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c054a24c7.0","@material/base":"5.0.0-canary.c054a24c7.0","@material/shape":"5.0.0-canary.c054a24c7.0","@material/theme":"5.0.0-canary.c054a24c7.0","@material/floating-label":"5.0.0-canary.c054a24c7.0","@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.c054a24c7.0_1577137840758_0.14743538386028066","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/notched-outline","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.c6808c51c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78e459945373bd351ec71db38cdb7a21e6bb7b2f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.c6808c51c.0.tgz","fileCount":30,"integrity":"sha512-vg5WJXycK9uwvXOAB5UoI7pASkvlwqW+a8hZwTlIhXqbS0Pr4CMNmXEneHOheJXgCM09imhl7E/ihDB65JXTiQ==","signatures":[{"sig":"MEUCIQD3F8+8Eu990J+1E8qwUigVaNUVFjGCIGoNo8gTYj74VgIgcr+5PzUxPynReTJ1goUfrSoOe0qRb8NlhhFKGhOFW4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATfACRA9TVsSAnZWagAAe0AP/0xBhDKX353d3lPVDh7t\n9PpiGKKnvCThCWlflHuokR2/jrZO4cz78cpLM4+l+JvPcPdWQFo9DXRzqZ91\nKMlcMp2Ax1mpSdpTUwHuReogBkPejUfzItxXH7g8fxTBniUws4KkmhL6VL8E\nGXOGy7Jc4N7fGI2htIHzq6l2bhcb9s/yLGwb57LES0z3oD/P8V07oxS1B/y3\nKhpTb3Dt8Qb6tCed88av2hbjqN+39sZCLv1B9ZfBpUWyI9w3nO6ukpiHLB1W\nG1wrCDTzE83D1i+DWbpMb8VS0myXKB80QX4Oud7i2sx7xPuUKKKyYJJxcsNF\n2B/PVj5C5D8ycFlcfslkRcN9J6qWT17ybxlsJXsm5awAvIuvYBxuvkvOqaq8\njXZC7p2ZgyACKI/2UGT4q/VhswwRq9OpcnQzXf+YSI/Z7YI1ON7FgdsheOx+\nB8WKf8UsC6rKT7VRDpUbI5OcCb35gQ/gua3Xq1qxP/jhmD27FVvWSxNcar0q\nC1mgszeDok8QYFfGTMi5I93c/BJda7hVdOPS2DxLzxnnWr3qBWO0EX2Zhb3S\nLyGtfRk9axkaVPjqsoaOpg/KdgyVTnlPOHvoIfd/znS1RD1HuCXkb7kE4ZEj\nK3u7mUNgk/CQTwzl8276o+v3GlTkblXfhQEQ66ooZ2yjMZMPGPNMGDJwli0d\nAIva\r\n=6niT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c6808c51c.0","@material/base":"5.0.0-canary.c6808c51c.0","@material/shape":"5.0.0-canary.c6808c51c.0","@material/theme":"5.0.0-canary.c6808c51c.0","@material/floating-label":"5.0.0-canary.c6808c51c.0","@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.c6808c51c.0_1577138111655_0.5194995179456561","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/notched-outline","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.7bce9cf77.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d57408edd55cae24ae3bc146f8ea17a0a10b6fa","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.7bce9cf77.0.tgz","fileCount":30,"integrity":"sha512-HTYEpY5VFHJzvZaXiXmZLt0Rz0iHor8ImZYawg3V+uyprGYPAqppYDtl6xffkCN9xvtEyeKT2TjImvGkDVtFnw==","signatures":[{"sig":"MEQCIF0U90QeNA9iCkxDDkEAhXyHa+DDpHPcc1ZIuF+SuOBxAiAQeN36TMBcoqOaAwQEH/0kzy/oTggfsNRhuw3inxpQbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP/fCRA9TVsSAnZWagAAphoP/Av0a96cmrnrG/DSMHXI\nzA9O41cONQjZuPGyNBIp80KK6euul3I3mvHOCICMreupJNGd4WNXKHHChUU0\nP1LuU22dkBPuu+dUz+ggnevUBBetZhD1vmk7WEzjqcjrNMGkTqveR+mTkhZF\nl3HvGl9WZbj9aXPlSqZJ4nxm9MmVMUUHa46bSVQjk10EwpaV/PuS7fBAWxyY\nWUo69a5S5UtLr7ZjMLH0nMu0HZ6Ku6Vrrecra7yS1DsiPeFu+wdzztckC2ah\nu0WzyVpZXfimeAcQMezF4z9dnrBgPI/Q+WUk3VqmGFNZgqW5mtYLglJ9USaq\nm9ETly9QJuM21FNL++tVdPVBZEj1jXfmuZ9yERIHd4qGDBlPnyLq4c8ytX7b\ncmkrhZlt+7DisS7AopBxBbtCu+cdTeLIquxryM8ufoIONNKt/0grJXfBdmsX\nl+DrV38CLqS/7Vr4ZXWqZVpQtPmRP9eVqAV75cyvepRZF32rXRwz2EIjP8go\nz3225BT1/Qedmi6ZDDRiDQ8yoCjToXqv3lz2hZBy8wCZRI/5P7IzXGmHBAgc\nSTxyiONnMGP+mcVIDZhD9nJTSeolYRSDWGSZsgO9ST5Kmy6KNoW0o+/A+bLh\nZq88XBvG8WGNGmw6qW0U4uLg4v7jjqB3TtetyRi9ZVsidgFS8rsID4SAISgt\nWKvo\r\n=7jTm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7bce9cf77.0","@material/base":"5.0.0-canary.7bce9cf77.0","@material/shape":"5.0.0-canary.7bce9cf77.0","@material/theme":"5.0.0-canary.7bce9cf77.0","@material/floating-label":"5.0.0-canary.7bce9cf77.0","@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.7bce9cf77.0_1577385950689_0.5904919243328572","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/notched-outline","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.c92f038c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e632315f591b3059102f8885daefe99531110793","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.c92f038c3.0.tgz","fileCount":30,"integrity":"sha512-H8dDY1evdk1WVQPiY9IKeTlrwV28s6xoGbUq6PxXMjO810gCQDt+P6whqsQ+mrqGUBsh9wKMjNYOpnJH+CcvPQ==","signatures":[{"sig":"MEUCIQDSoPCLki69fn7ktjHx7FnknUJJc3kW+61WxkSDSIlEnQIgdCNjh4brPEEa8N3lrGaztPVfYGxqQp3kNJtLXrJP9WY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnRECRA9TVsSAnZWagAAZoYP/2l+xZD3TIm/okCCWaxM\nXla1D0HuXk430UrfEgjN+RcoaxYIjA2OkcfAF9qsq6smLE6cNvm4QSmCU3QT\nNbTNvZfkifu3askclkMFB85VOzYQB87j1RM2YLhQwgIgeWvjTrS92cY+vJMI\nOkPLX+P4bzNKnmf3oHOyooRaFOzkTQ/ZZpDBdhTTeOwYSWDCTogB+Ws1qsMX\nBPgx4sblRrpkwk6IPuNCwewZjIP47RprNF5wdgTzeWiYzm0etXOOpGx5Xmw8\n5s24BO+61veb/QqEl34y8zrpHZ5QpV1enBn86XmJT1pLFvG8TxZAsZ9ytqR0\nI745fLaBMltxsiJrpTXbKS3ehKvLgWqckVsLdbQWqKjxWimYbnfUhZErpX6I\nM5OHgFNmzxjBbXh9XRpFWVm8MLQpaOYCW3apgwyvQvj2NLy2QNjjN5nK/rj2\nYigf/ZUa+V0EZbu9U9wG0UqEfSdUt9RyusigPcAnAQ21Z+aO1Clt+dmXTxji\n5XKCn0VivVsidjbfgu1Pd5oOIigPYr8v5fPF9rOM+AmQq8lfNm2aSZZVNS0J\nsT9Ws5O2+8sj1VZBk0lUDp1soTmi1BT18OzfCb6eb67gMBs6/Q6lGO9g04uG\nZkdDpGOcnMM8jnRoHs0qiJZO6KviL5aQyQjJq5bBtnzJrfn5ZJTqKENHdezh\neiOc\r\n=wWk5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c92f038c3.0","@material/base":"5.0.0-canary.c92f038c3.0","@material/shape":"5.0.0-canary.c92f038c3.0","@material/theme":"5.0.0-canary.c92f038c3.0","@material/floating-label":"5.0.0-canary.c92f038c3.0","@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.c92f038c3.0_1577743428084_0.8410455816572515","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/notched-outline","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.1f1ac7558.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20aa312152c86015f49c5cac9b0807ec74551bb9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.1f1ac7558.0.tgz","fileCount":30,"integrity":"sha512-kYYIU+Q+L0d115CM1M0/iHV6wkqt0d/CUlJeI9pwm1kyk+WvbOsYdOSskwRLnPsa0ZaKIJ2YA+ibpLtZAMCh1g==","signatures":[{"sig":"MEUCIQCZpgVa7+LdZBfq6YKyBrSpT/5+/LnuWFO8iJnleqHdaAIgN/5BOuJ66jHxWZYWeVfmguKRcDrOyRcloFwAUFq+Y7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDliPCRA9TVsSAnZWagAA6XcP/RWFTi+nKMW6pCjLAHq9\nHvDU+wAiaLp49BkddOK/MKg2zNeeB7Zou+4WEGDN/WWp2ygnuWKl2p4ieR0p\nFpndZQdP4jNETcKMlaSnLEJ3Dzl5z0rP9xmYyDG4/n1Ojth1kFHtxoIKyVFS\nR8XRRPFpLoWYPBEjcI13SHQOj0bYwXIV4Pqp/jE8kNHDEc37UiU9J6EdrXbk\nPI+xCeouO4UqerGQMrt3FA0kMkSwrC84bqe/a9t6CVDDKLeY9kczJCjYtp2F\n4bYKxoghtBwO4DL5FxrmhsrwnaxYqic0c2IOFpWTm34Jqg+s4kxIjGq+cMVO\ns6NA3Zk+2GM1n4vINAj7gHaE5xaKF8lpYUCPxb6B/LXT6rc9LzinnZ0f3XyJ\nCdztg2mSNblL6csDhnEX9nD0NPgrKmFcMTkC6KZPTbXH5R+uFXkFm9/Z6TVO\nf0gLiIglns6VC5UUF48fVABED8TTttcbkl1HXGYIWbnyqRgl3RMBRHfFY4Sk\n8JAsIVy80JS8V442b/W3US+SUwtTCdJgrsfb/K+xBU8OMnDvdvy07+tOUPTf\nNlBM2UlgWDQ1B/Mk81z1YxSCvdLfg9oKiIG02NsK5fnxmjNuKqze8mzFfqMj\nWuamaqxMoZk7JGKO3fJxRcaHyu+0rnE5NIxdQXQaVLAkZhstlub4svqHmYym\nvHpE\r\n=FZIE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1f1ac7558.0","@material/base":"5.0.0-canary.1f1ac7558.0","@material/shape":"5.0.0-canary.1f1ac7558.0","@material/theme":"5.0.0-canary.1f1ac7558.0","@material/floating-label":"5.0.0-canary.1f1ac7558.0","@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.1f1ac7558.0_1577998479587_0.16166527715717027","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/notched-outline","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.ec26e799c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2dc04a1fe081bf4218bced457bfb01b4915a334","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.ec26e799c.0.tgz","fileCount":30,"integrity":"sha512-orni4NfevTJZXgmj1xtZUg9zaLkE3TIZZX9bq0/HZdtlB9y7Wd242D4YU7u3rlUaOn2klkPtxlkAI2D1+FTllg==","signatures":[{"sig":"MEYCIQCJc0amm2+gWwVMQ9+eNKYUWncc1CwN7l7ZGf3FR7H8oQIhAN2SnxpFk3fYLvMCGC0XoFP5SLQ47/D98r1OEpmURvj1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmPdCRA9TVsSAnZWagAA7ecP/3uIu4esFlHozvMbZsgX\nJ3DRDOaBXeDer8XshjP27NuaQxWEU+DxWn8AHe35kwoqa/AmFvLazUfWsFsQ\nhta+JHPAsSpODyPD3vRr3FYqMiEPdJ3Vp2chkTGFhAirc6wir2tUGz5IAyxR\n8pellfmeW28DM0m5FO/TVS+8q1JB8RK1JQp3DJvJLfNDl2kgY+QMSDVUfxXg\nS9x0FnvYZ5B34U1ZWHbmv0ZRdActoXVhUqRKUd4dgEyKIwv3rcl5A18fZPUe\nrs4CN0jKgTNWsJTiAfEbQZr4HY1nKalKvX6gQ910onEsQW/AQfOft5jfSkaC\nGPHxm0X2+EotMBBDEjgEEuVVYZ4e5rDABdTnp70StXsQcXZkf5VKmmZpj0Yq\nPoQJLto3WF+hoP+Bs8OW3+LC6hsizW6ORoZhpuxIHuQbGmai+LDgBzc1v3bS\nJOXQEJIW4EHGVlwjEpSU6iwaz54jCWybiCgFP5/RXzZXNMnIIb4Rjjpd9l9j\nVTB398Wv79ps6hiug5tE3N0qPzG4m44fGyGBTHpHSY482xgYCNg8IqBs0NxG\nt0Zrj13FQAr2gcGZIeZU/zqSR6tEj2tt5S7ce4sCVwunK4w/kDCY6D0erbfq\njru7GOJrZzurpwZMxnzpaQEkcp8JzsyouA2XABip2hVWWILEi5mO5fPLY3mV\nwB6V\r\n=/nBr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ec26e799c.0","@material/base":"5.0.0-canary.ec26e799c.0","@material/shape":"5.0.0-canary.ec26e799c.0","@material/theme":"5.0.0-canary.ec26e799c.0","@material/floating-label":"5.0.0-canary.ec26e799c.0","@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.ec26e799c.0_1578001373147_0.605655013302594","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/notched-outline","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.0a40ced40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dc42e12f474ac359197f5ab16bba00426ddceb9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.0a40ced40.0.tgz","fileCount":30,"integrity":"sha512-OYcldD2chMsBJOe6C6ms9R4pcRzUIOwrpS5Xoi+Albu1zVIa5iZ4XWo5LKwomQ5dqz4w63dZNW9R/CLScNoSHQ==","signatures":[{"sig":"MEUCIEu/kd1dy42dMme5R+AJXHh23AVvX2afpYgD6uYZ/262AiEAi4GpXhPkXGyj/2H35VLx9YBMBmKwVKVupgF8KZoHtmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3VvCRA9TVsSAnZWagAAwkkP/jQnz4zydE7CNJ6m0piz\nmKEin9RgEppzbSBEVTpmH5u917QbVryDQg1HD4fgciT1VtX1vLhUmTeycZNM\nYU0jAwbUB0oJxRoqtfDVNfOfB91auk/qBa8okDTqgVX5lUSK8TjvwYIi26Q8\n1AksjqSD/f4QHX9lKMQ/7kyGCaQTdEyzBr8BcnQQAuiG9bWU2Tpz5t7SGdU4\nnmTc+BzuOjLZLLoop6IppM3iGwGMMl768fDAmeofFvpzdJpNR89qAGIvhy/8\nwc6AMsR0YL3fzu4R9iRxZALtrIIBMDpowvVQHmbzFiRuVSMu6phoiKF9iDOY\n8xs6EvS/2jYOlCDAvAh5EeD46kHuDy2rEAr98c0vbLDk/JWuPSdH0v5r72Ec\nls8iY+ksbaORQjLnI3NBebFJjEQzIl0M8FOoDVWLpcX4A5Zm/D4tUq0zUYtn\nzquwixeZ9vNsyfDQ6plsqjkW7fPHPTey6Xgg+DTv4ypCTFU5NdDgNcpvk+P1\n9dCIB4z+hAN15Jl7N1UMGtrWeQr1tiAB2lIhQII7pUuuXkD8gt8bAEQKw30J\nY5t3HvcM5pNzAOuvHK1cGEFarmxXBi0QBkXLWIUpA4N3biKBp4BRPFgjd4sX\nrRxna7vJAj2HjAWAMuF6Lfj5kJyQiooXrgI/k77BxLVge+Z414JblgdSdt69\nR0B0\r\n=XBfA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.0a40ced40.0","@material/base":"5.0.0-canary.0a40ced40.0","@material/shape":"5.0.0-canary.0a40ced40.0","@material/theme":"5.0.0-canary.0a40ced40.0","@material/floating-label":"5.0.0-canary.0a40ced40.0","@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.0a40ced40.0_1578071406745_0.4723338184580248","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/notched-outline","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.3adf84899.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dca106412e2d56d7fe33ee3c98af3c385511aa64","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.3adf84899.0.tgz","fileCount":30,"integrity":"sha512-hP+6CF+tzFh09YDqu5jWxH2dRKXOjOa2mszIcfRcEbHHETF7beD2mh3g/wKTL2ddSKHzz8wZ1A9U9REdoQFhtg==","signatures":[{"sig":"MEUCICmw6Ds10zvT/JveKRLB/g+i1EeUGyCQbzpoOiPlVJCfAiEA9qOXdEXHBEcLx39gHsUiZI0jtDq1tXDTd3uU2jtUZgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4aICRA9TVsSAnZWagAAIT4P/3ks9VrdWx+OCSRKYl4C\n15w2UzpZdLyoc/TmWfivyy6dR5ihZYCXcCyM9Ij5Cs5y8mNlFEWc7+GpqhNS\nryf1tYnOM9XOaMhHcsGCUCu6+VKqUlhykID5CWQCol/04oMBHEeOV8U5kHjR\nCqOd9Fb5DOXlwKx5B+ivmJr+M7PtYO8LmOCkyZ0MiG4gnP6WcgEZmlKWEzMf\njXbs7VmRqCYuY+ORbIyT35bxUouiTCiQZa3F6eI9HcEBC880VUt2Al/1jDT6\nSZ6x28OXzZ7Iiees9YjA2EjQoIEdVK1pX7KKJj96EqZiVk3E5F2pz52TuZ0e\n1A/F2SizPPEjKMWVa9Mq+Q6e7ahi9y930Q9a9kt5IzgvhjY+pB3g0y9wm2Ln\n3hdMJoXKK2DBOkUrEh8y8hx/Px2axehj4cpM82OZzO6N4BEax4eTmiHF9kMb\nFratxLARd69Wz3HsYwJcI/G3Cv/F9xtaAtNTDeITZI+lDFQv1PvFrxtRgtSD\ne7YRBQAtC3JqaBPZw9Lv6s1ClULOKC5Ry5oiLb9JVilZ0v+l2pmhDLlQBQw4\naJ4YJINYqkHh/eyeL2ErwvadSyvRr4rUwGKChYfEW8wBV2t1zLaKtKxYNyIn\nRyu2ekPO4ljYst4FuTmKkaqnCUPYS7zF/8k/aRn5TGft9xYxyHap0Sa7ho5x\n4Gty\r\n=L8Ks\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3adf84899.0","@material/base":"5.0.0-canary.3adf84899.0","@material/shape":"5.0.0-canary.3adf84899.0","@material/theme":"5.0.0-canary.3adf84899.0","@material/floating-label":"5.0.0-canary.3adf84899.0","@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.3adf84899.0_1578075784505_0.4469027135515202","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/notched-outline","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.0d42ee650.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0411491829e853dc14d4e6aaf73b05c248925523","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.0d42ee650.0.tgz","fileCount":30,"integrity":"sha512-xLsaqa0vG4TuTQi4koHWVdAaEEUFfl7LSQ7NOZ1IdrHBwFhIK769mijxJ4QCAWY/rYMAoai66ThdhAq+S9GZhA==","signatures":[{"sig":"MEQCIEEa7Ax3PqW1/wOcWAIx2aMhbm5HAdXl/raf96ACXlS1AiA8Ds1izjFmhh3fhitZxfnDPrsQ3uTE8tgj/VWpoSWbHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7QfCRA9TVsSAnZWagAAQp8P/31oFFmN4e9qujApycek\nlvKBCg1psW2TDjEt/JeE7uGS9bB0Y3Z+vhANKB85PZatYtOnVWHYkL9zoh72\nvdnz6J0eQoYNfBNAuLSYcoNBjUXULP9KKxP4RdvypuGEYTZIoaTbvVtLGyZJ\n90RctH6Q5n50mWXouGJMntrLCcSvrJQuPE7b2/x1KnQIMhwrQl/j4z9lkMNz\nez2k3L3ZpSLMT5+kYcghvjF9twzgbRmeKeYhgfmgAnMQ9z9gZj0zBdCmgPE+\nSPYUahqzVbQHsU7sDUexDRx0knKmsEnppcxqcZ8ZGszmsmCqFWzLFlH25T6L\nrtYX3P+CaNRj9lihiPnyReT2X0JttdedT8QvC0Npk5toegiv19rdZg2DOYj1\n1opalQHIMMdoWGx4xcmQ4uG7MCcb2f/hwaRqmZ0y0lpHw7APTjoYL1gHimuc\nXc/46YoWfzHhdp8I5u5EfAkQSa1UzGPhw62TJoGaSV0Ejwum5c688I9uq9jS\naKFEdVmO5MpulaDafS26zp+0Sukzd/vPllZ3SebhobaTKrWfCTVBTy29neiM\nTUYNgELRZH+Ag7LwWMRRq8ncOziv+P4axRFynpkr6o+88y6esLJgjNHQSG9r\nVgZ1wvsnkgSHR6neIO9HpXXqWj+bPPYFhMjFJYBdNWvSXi7pnGh66MxQoZcw\neOCV\r\n=H0ic\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.0d42ee650.0","@material/base":"5.0.0-canary.0d42ee650.0","@material/shape":"5.0.0-canary.0d42ee650.0","@material/theme":"5.0.0-canary.0d42ee650.0","@material/floating-label":"5.0.0-canary.0d42ee650.0","@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.0d42ee650.0_1578087455199_0.6621396249426947","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/notched-outline","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.847dd1ada.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"312d4d09d8fa24d33ef7e71b0652915024d67c98","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.847dd1ada.0.tgz","fileCount":30,"integrity":"sha512-yoP050h0KGoLgcSf2cIJ0vOxWy6np01PiADeH7M4BiFIBs5Tc6zxmHMnQ/jcn+7rpDgY4Jj9ZLjrHCrSgfqsxQ==","signatures":[{"sig":"MEUCIQDq4S/prPDd6prqebqMYGenDol5iF/s3lz1eX3oHgV18QIgBbcvzG7AcZXWnXdr5u3LcInwpx5Z/YMwTJVqkydcyxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4n7CRA9TVsSAnZWagAAf9EQAJpIXZ5lO1cqPC4Nqg8s\nSRAZjkRVP188QRrZfyWB+7lKpmy7k2mmT1IKGjrVOjtJ/9QqAZuU/Mg9X7tj\nL8jsSmrdowCnfbUbJKe13M9ypWo0f9spTk5Mdqwa+ThW7aVfWBQL6nLcJ0tg\nnKaAkCeaSEfYBV8XTuXuc6YFaTbPne+oE1sjVAGrYDSyZfwr4X3my4+E2pgL\ny8Qi2McGVyT7HM/VWd+n501D9fpHc2dM9f15t1PBYIQAUc0ixmtPMK7m3rgu\njgs3O2ZJtc2blrU7Hj9Tkha3HWnExy2kteFpej25AbkytXJCdLdV9kU1gm/N\nwLganoGuRq/wu6+/lG1EPgLOehv4O2rz1+U5y1AiVWnAKwjzKXYYSi7l/+Qx\nVwmWu1etXnQw2vDCx8uNBfOpEgp9rlOPBGX1CtgSy45jaxn9Z4038m64IB1F\n92rrqirVkf2veRfA6tTlNw1Ab4brjJbWrUwqU0C13/FlXd+EuicIitdDrlA/\nS7km1WECY5VRo3uzNxXyblb/k0k13BqHZTIxlMPZIFSPuVCcaOJCae++CeT1\n1w0ddJqS3UpvjBCGqvmT4T0M8epoz5M8w7QyXCzbY5XVRqK5d8nGEXPTu2Cw\noQZkQdY6z4IfDW9KG11E2xmRNJZ5gfVXp4T+tjBfpCqlL29P+Rt5lfetwR6x\nPiLB\r\n=Zf9P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.847dd1ada.0","@material/base":"5.0.0-canary.847dd1ada.0","@material/shape":"5.0.0-canary.847dd1ada.0","@material/theme":"5.0.0-canary.847dd1ada.0","@material/floating-label":"5.0.0-canary.847dd1ada.0","@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.847dd1ada.0_1578338811221_0.18711107348527656","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/notched-outline","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.39df7e5df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7620ecc5eb99668f001f95c4db83ce6e4626811c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.39df7e5df.0.tgz","fileCount":30,"integrity":"sha512-/ayJUOfTrWQW6B3dtHxihqgr/i3Y23jK30LgcQiEt8DB1jlqaliVVF4d8wHXTXTTJl2onDDVRyAx1QPP1RpuXA==","signatures":[{"sig":"MEYCIQD3IkvIl6FPAR/9wogoyUaZWwMaoW7OClQKrOojcOOoJAIhAMtsQ6piYNozj2ItZSVXy4PjkZO9AC0QSvCJTHpdRtJX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9cnCRA9TVsSAnZWagAAh+wP/04WzsVIFAcwTuDq2PlQ\nfL7yUNjVHmb0lIebBrrQeMMtKhfSV5+EIQxQPK1Xk1PBhAzWYxnYotgzSYdK\nKKB6Td1RbVE6nDCnpUKivE5Jj9BDwjuW1nc9q2B45DH8kTBK1G9dsP+zVPgq\n0AcjGlSHmFUZ1Ok40X17YfrVnUDQBEfICNgWaR035Ks/omJG2/Z1Np1je+Ow\n9SU+gScYeFqptZPkNngQfYR2WXRWLqqReL+zDoDIVR6BgHqaLYWp/mEIkAtW\nO1kLYoSCiyOsIHOkhvJZq/FWWPPxYRZm+4BJhm/AlI7LkERF/w1VXNOHPX7U\naEiip3p0ThajEBY5FMx/o7t9+NzQhsUq71eG3SbJHfoxP7Z80wXBngV4K5H/\nCP6qMEXba078J8f9DhQA8dttWZCw0FQfRlV+2Gr8ioxq/uUa6x1xQ0M6zYds\n0rRa54LSiRofPSeXMfGcmvEtggu6KezhmPYFmIYveGxhoNzsxclrgtPX7+oK\nYVbarmRH11s032nxztW0a+qMQ7X2Y0tOXPU+KmIhC50AMhM3ZgUBCuVeS4SO\nRmNU8+4b7FNfLjVwbRYaPGGCp5kRc2eBWIlFhYOqW62I0/mQIfpmh4+J20Gb\nwJ13QFn3skn+2cf8BEwJ4C8mtvjOIaVG87sfv1OGUkCyt8h6WalfcBYdo0GE\nvdIq\r\n=M9rD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.39df7e5df.0","@material/base":"5.0.0-canary.39df7e5df.0","@material/shape":"5.0.0-canary.39df7e5df.0","@material/theme":"5.0.0-canary.39df7e5df.0","@material/floating-label":"5.0.0-canary.39df7e5df.0","@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.39df7e5df.0_1578358566701_0.6255404817241474","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/notched-outline","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.f1a2581ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d34e2a8d4845efd41bdff4f714be19c47ed8d05","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.f1a2581ab.0.tgz","fileCount":30,"integrity":"sha512-UDPIe/+icGxI5RLleL6WRa6uqnLR/AmIQBowkSIPqQkqBpDtE4qYGBo0dcp0lFOHdpQJcYv2Ymzo3EPBF63ayg==","signatures":[{"sig":"MEYCIQCbqCiRPCcF4HlkStx/jQodTCXUdbKHtf2DqQf3pHmbgwIhAKN0wKXvc4flJJVqQKTQwIubmQqaXoK9XMJlA1c7Fve5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJ0JCRA9TVsSAnZWagAAiG8P/jE12kz2AXCloMZgLijf\ntctQfUxnQ+Q2r+CRNswmJSV6+hgo2VVubQtK2lnHWzexvW5tVi5Dff+198Yf\nhIDRnx27MZy41r7RhP3v+elWfonBTVdPmd4KeeXZoR463rOm4Ct2oqRJ0D9a\n2YDXiYxkhd7MvALnMS9Qdb+YdJrCPpogkz/FhBPiZB63jiBgUQk2mUrVsXIi\nlpaXpM/x/Jwl3nxb4E1yh0G+nIr/J7DcsXUX8wE9TKdT5YSE3ZtiK/JPFYZt\nRrbJWO5v0sLb7w3WCxEOemBAMtHJW49ryqBfqgzXx2hPc13Q5F8yZDTdntmA\nWE8KF9xj8loSOe6+US9vNKxILivzy+b7JCOJrgNCvyZKS19i8G0pd8SJ7KG2\ndENv6xVb7l2AXY6YPeIKy3wuqrJDYO36QPbngm5yPZNZEOiy5KSgjx6IJS/z\nkjdqv6WbdD64GtnXrH5UOC59ElUljrjQEwkU0p1DqDvgrvD4zFqc4lStjQ9v\nxhvygVxC9w8iyD4HkN5pPxTvAZwoeNsk66M6n4QjBHjmPFurTmwWBrEbhIWq\nt4x78AUQ47NEEqanQ2BIwi6X/RwVU3MiCDJfCH88zb7Uu7Oqcj16pzdZExlz\n7VMX11OvazbY2H8k0IXspWcI+jgm1rrT5NmJHsneHR0m6hF2aGKEp4l0YKvR\nZXsf\r\n=WrYn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f1a2581ab.0","@material/base":"5.0.0-canary.f1a2581ab.0","@material/shape":"5.0.0-canary.f1a2581ab.0","@material/theme":"5.0.0-canary.f1a2581ab.0","@material/floating-label":"5.0.0-canary.f1a2581ab.0","@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.f1a2581ab.0_1578409224888_0.5127280158464778","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/notched-outline","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.7c7ddf347.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1988428aae4df587021420b921147e074565f512","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.7c7ddf347.0.tgz","fileCount":30,"integrity":"sha512-HbUV3GQfS+7WFo/diKMbZe0cNIHqecEbL/SGNAmKZwkFaBcggys8fD1kTYKWguLvXElX0NuT12tpj0RST2xWzg==","signatures":[{"sig":"MEQCIH9qUWFlHkWrNMM2Z+3/io095MwMti+3s9cssNrBqrfFAiA6S8d2HKDAsUsN7CBcBio/77mXoA+D32ZzTrXhTCbgPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKD7CRA9TVsSAnZWagAAGxQP/RGu63iyQa9NEQPqf0be\nEuW5eotbIoq+e4uVFS86Gev3C0mB7kli5TmzRr9aebRKuMbmUdAQbSOJ2Tg/\no3sWtXmSbJI2ru6qrRYHJF10U4e5D8ma9nmGk4GqwFcNS0ksTt9WHR+i2XAX\nuUynVtkH5e3FgHbYprUYw3SKYwZqrbscSpnUOpX1l/DL9PNY/CnCf3z9iDDq\nzXeKVkxUlr1L5xg8AfB25U+VxFHfpM61W7hBCu9CwEPcW1abyk1KAAz5/BpU\n76pME3mNhK/DRMXDhH+jAi0KKFCgt8HXojUABw3EgN9JqyQhi4MFaODsuPxw\n6PCSozZr+pRTDcHQxG6K5W+EiDxiuk+tb60d5+5cycSKgZt0zTszqHegz9kl\nbCMIqzFhTYR9McYmn/CA0Wbb80XOJQcbL2odnpRcOppfCMIoLjPRq8qtowme\n1e8VKDV3TRJdSlIkfrXnQ1Fu3FZb1JabT5uoy1e7B804wcHeP448KAF+q5uU\nBQ0FBqJVdKrrJMhIB4IvGQ4tK0sretVJ1NVdJEsJ+vwEdTtD8s3aSNo3dz+E\nJmCKtVIcjNgQjf6i+OuJeR2xAduEmIGmT1hwWIBX9LzdV2WS0CUm3VuupO5W\nyl7NrpGL01JozGlrl3TigVWx38HkVQmoSfh8cQJyS4DaKhaAeojesdbH5zvg\nHUXd\r\n=wyum\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7c7ddf347.0","@material/base":"5.0.0-canary.7c7ddf347.0","@material/shape":"5.0.0-canary.7c7ddf347.0","@material/theme":"5.0.0-canary.7c7ddf347.0","@material/floating-label":"5.0.0-canary.7c7ddf347.0","@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.7c7ddf347.0_1578410234992_0.9107929505748462","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/notched-outline","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.a1c84d4b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5fd252cd2b798440a39a3445c887e430c6fc1aa","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":30,"integrity":"sha512-R4qQJfZwY0nIywHDgTnA5vRr87er1MsKsxjlLmr1Y9I6zWHukipK8wxlRN+zIuxHXjNKmeRloBzbqMzXIb4I3A==","signatures":[{"sig":"MEUCIQCudMZGZ4xt5757dQXD2zppnfBXgcIebJIelb/qx+C5TwIgZX1fZLFK2y+a/xgSesqMvPBi0JPlkeckeY+V0ngfIsI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMm2CRA9TVsSAnZWagAAu5EP/304ClDWVkWpe1RovBjG\nvD4hQtbLeVXSrYhKah5BGPreCMXaJSCOAGSEqvpSOx/Ivc5S3reUdPtA6n/4\nq8OJ1XS0sQUUKETn2JXh17wYfkDZuuWSKRnxE2gq7ux7/Q9MEZu+CCUZTdZk\n3c86CoW39Y35Xgvs9o21TlNHum22JrSLi1Ymv6MVWC04UMls6pdPBH0qYlRH\njsj4l0ROaoCi+9DMRLp7vvZVgh13Smrua7Vk7ZgYtgbLbb4hfhJK1+qdyet4\n3o89gvPyQF8odVvk1IR/deyjavW9zwEbfgZdr57DJ/a42PguNX9wD05UJXBp\njbnLX9Fr/etANMIu6iKnaTlmTX9SAAkqWmnEQlDtNTI+IsiV/HylAjdBYBU2\nSjXiIR/LbR9t1BW9mn8oSLzeSCXnpgUARYusKzwzZWUVGxkzW5KnlrBKhwWF\nzbyP6xCZedRk2VYQymBK2HVfxRlyWbajA9cV5GHn7e56vTCQH5qOKzE1ZDBp\nJkm3gpBOXmkHLFUWD4qzZCoyye3EF6sXSHAmTPxHxC2tRSvO0uJ7k5PGkn8W\nzIyGfAhn5zBTLqXv0q4TNhH9blG/dAwLGVP79+klVAXsYsFVUfHgdy+9jsY4\nV/32O5t73EKnVp6KPPnAlXhZshiSYpb9W+BrQ+z2Ap8LGw0SHW+4dW8i/tNm\nVeZU\r\n=qe0Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a1c84d4b5.0","@material/base":"5.0.0-canary.a1c84d4b5.0","@material/shape":"5.0.0-canary.a1c84d4b5.0","@material/theme":"5.0.0-canary.a1c84d4b5.0","@material/floating-label":"5.0.0-canary.a1c84d4b5.0","@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.a1c84d4b5.0_1578420661895_0.9416007413505203","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/notched-outline","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.ec9f16578.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c743f7b1daef6f967513e2a8041717a97419b0c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.ec9f16578.0.tgz","fileCount":30,"integrity":"sha512-dW8EaDxcngb+dS8Zw1/95vU5wpam0bcQo9/ArJJjDj4mZWM+0lCOKVgbz1DDajIsNLI1XKiIKw58rH8SaHqCeg==","signatures":[{"sig":"MEUCIQCvIBCOThz7K36qWW1vXoliTudPFnJwVS1atdn5kCGttwIgfHWaxh43OSCFBK/imyeKlFQzXGNN3qeMh/tM5SkHEYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN6VCRA9TVsSAnZWagAAQNcP+wV0bhJvGdl7Xc0fxQlA\nTjz5slH6R+RysdfDTk1hLtcuj5oUupmmGBV6t/2ptj2n1y72GsOmymsz+Lje\nbSTOvQm3+H/fP14KO+xdA5bCebFbBT0wfGDYP7BXEf19UKz/GDzH9fRXfO1w\nJ9z2QutR0g2gRJqXcDLW/Te5UtEePTvKVgRrcCUk7qWLdTC64bSdNxWNRGcB\nq0lBKdv5of0sxnhOsjVTaCAM1xO6DWYvPa7FrOGEAcWHjaE8htoPnsOUHi9t\np1VWdf2CUYK5eeIdz1hgIxMHDV8Fee7ACqeCcee+tzbKTRSGEbipEwHQ5CTj\nhD0XvHftajxg11RmGCQNafgmPs60pau/ZIlqDsIYCIJ0PspPuC9Q4g4WWxnp\nzWcGAZ5CvpO4HrY6c2aZBMSidr8/A2i5IKyw+oPT7U61s9d+h0U/GM3L5Jma\noSleaFtLkKND4a9ubv3wqLlryy3Smc56WxN8jlHf5iQHf+vJ9Bof2bClRQq9\nWHMpxnr8PzGivmnsF5t/t0yrTLUQDZDWAGqLiJqvwJr0J+LCQJ321CmrgJWA\nyu7g9jXcdo30LkmSNdkVWQlSnQBBPPdIm8j2/G/6/+VKk5fXl4PtDIepuZlH\nUBUXCG0JGc+6/2rqI0nh9xv+3NSzgt/vIHgxg8V7PPpg4SFYfy5Cof/fTFKW\n6jkQ\r\n=LhFl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ec9f16578.0","@material/base":"5.0.0-canary.ec9f16578.0","@material/shape":"5.0.0-canary.ec9f16578.0","@material/theme":"5.0.0-canary.ec9f16578.0","@material/floating-label":"5.0.0-canary.ec9f16578.0","@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.ec9f16578.0_1578426005375_0.48448564488299395","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/notched-outline","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.b602226ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03b64710a061459e93e15630b3db0e1bf201cef7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.b602226ce.0.tgz","fileCount":30,"integrity":"sha512-FyPIIFxPhsJHP1Hnj+jnRFrLsDBMPqkHnSLXTBXfrP8XS7RAEtT6oIegdIKrVWifZXMqCBCTrEQzlqB/Xvfirg==","signatures":[{"sig":"MEQCIEQF1yci6Q0KpvoBLCn+91NjwMe+Anyg7+QTM/uly8nkAiA3tNUnayAiFzLVjNXTKKEi2aVZ46xYD4KxyDo2FRRikQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFOb1CRA9TVsSAnZWagAA2igQAIZ1lwnai94uKs0oh1V+\npzgMthLR7mejnebaSBGN7dLNj7JpzPhEpLhnmKhQ461stx5Xa8VUKv3Dyhpt\n894FJfjT+tx96jPtt6CnocW/JD2NDLsYsmUfYOZwkZX6Jb1wHHUiWR6y/+b1\nBwXptc1M0FWv0Dg133mUYE3LAQiQHB7puJLcI17S8TLvVqQdll/5SZ7ElUmY\nIljqt20fiSOh/x0tMBW0I4m4gKn/3LjanujVnj4tfwhjdpssFOz41dP1nKZW\naWFKoo1Uo33FkCKSLbWpew8BGTpaJUoZDM4IvYwxgggQy1mSGADVXeQCfOKg\nPpnCsLdi+D4ug3ZE//ACSF2dJqGO+Crfw65BgM8d9dwjh2kWTyL6P2K24O8d\n6r4GnUt1oOaujwvLv71SJvnBnf4i41lVciPz3QkYS0ovdy35fZuJUqnHBxE4\n9dLkeeBWRoHQjLn4A6tswcYEDYyjXLo8L8V2oMzrjA3JuNX2OwL+7F81q3lM\nyxPoSgQe5yO8zQJVvDKdaHvT2wHx9knRRGCe/d6ZoQ1JRJ3VO9q2NZlW/sdH\nqZAEvJQncOc8lL9aP+WQRYwIOXM3h/Id1QbW+AyU/7h0iNw5C9vBjP0ZOt8T\nKXGmgwesqVAG4qnA9+QMEzZ+epf8YpHWtw0V603Jm/tOaD/tAJKqHIzT2X6w\neane\r\n=3qFS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b602226ce.0","@material/base":"5.0.0-canary.b602226ce.0","@material/shape":"5.0.0-canary.b602226ce.0","@material/theme":"5.0.0-canary.b602226ce.0","@material/floating-label":"5.0.0-canary.b602226ce.0","@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.b602226ce.0_1578428148955_0.2899466545660343","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/notched-outline","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.b2d2dc08c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81c29c905c782b170a860db148cb6ca5d0630bfc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":30,"integrity":"sha512-rsv/krXPXFubadps8RlhB/kp4N8aODsibgHVY4z5Gz6RtvD80ZzL3lGA+jy51U+hZJ4ZU7+n1dM7vhcMuf6yGw==","signatures":[{"sig":"MEUCIFEHNMIvzTW7J0JO22iVn20wsIK2nUyWdtIoJffjznFAAiEAwVbOdHTP5HF2HfDe5O+FYyEFHNv4BAKxQ77tsYTJcCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPeOCRA9TVsSAnZWagAALF0QAJ+NCp3Gtcztv02QlZGE\nEGsS9+dEZDZ0TO7ZC6U0ItEnW2QrW+fNNTCGBXR+cwB6Eet2z+KDfC/DuwrO\nZ1XLf420d0bs9BjFn+6Hiz/MYrWqhGG5aczr7Aw1KHkoFb5th7sd9eHDK7sV\nLKNYp0r5V2t4YALqZU62Fk3Vq3iIsm3RSAc8mdYrs4OekuDLWNBMjNCrAyBf\nFfcJaz6KDxWKpZypNz8cT0ZBzlGFfWJgQfg3degG2vFpP5IMfzt1dLMVXNO/\ntuy/VFLrhePDLHrnc88+WOdGUUOFuUOw5Y/XpaFLSHgY9fRmoJFT6esN+n/Y\nk7de5Y9oSUtbNsEdc0iVZYTVhaknSBP3mxoxpATB/PHwPxu7jHpaQxWK/EV1\noOWhOrVOzOshjYSYiRDYcBeqvLVxBPgcBnGP8FKaqjfFJW9LVZAlOyoRI1eG\nDpAqleodh9RXAtbhL45UEPGi6Ox/ifJbC4zBBlniN6moBcYchUTnvBdkWepk\nK2og/fWgQsdgtN5F0UM7bTzdAsg2LYWu6TXHnj6JXNSBJ1C9mODQ28GtutlQ\nPyZlhvaT2p3H/SciUhI/8JhHZae7TlrXvMbKMF0zXx36NLu5bZfS48Y1EFrT\nz3+omfxmH36Wq/JjdW2ECQvc84IXhauqDzKnQllN3NDha6WSp2+F6br4CIys\njkZk\r\n=bI50\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b2d2dc08c.0","@material/base":"5.0.0-canary.b2d2dc08c.0","@material/shape":"5.0.0-canary.b2d2dc08c.0","@material/theme":"5.0.0-canary.b2d2dc08c.0","@material/floating-label":"5.0.0-canary.b2d2dc08c.0","@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.b2d2dc08c.0_1578432398618_0.765333283757107","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/notched-outline","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.61f2d7580.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47e361fb6fe145f37bd3f720fcde69d98038009b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.61f2d7580.0.tgz","fileCount":30,"integrity":"sha512-18hv99YX4oYks8t3Hl8V5UVp4o4J3yw4FQAP41miuuaJd2aN4Q0j7lUY33zHJOWIMzNFomjY4TjgjyrCHM0ayg==","signatures":[{"sig":"MEYCIQDODq9KgAzRcuEBRMhhqjHyhRHmPe4A5AiGnpO+xcngmwIhALNEUEB2NH84EGTha/BOrpIbrv1Qpjja3GRHZnkRZmIS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPq7CRA9TVsSAnZWagAAXWAP/0Ic3nIcDVUX7m6eYI7B\n676Cmr59uXahF9QmKlYFD3hhAb10V8S6f4AYorK215z9lBURjdx+10nkbKXU\nEj/DOQB49xuokdcoa50CG7MS/FfCLvj9bg1ExqX5hYznZ81q3MASVxTm2BEO\nZoK1RBztiGZtLaFRqxYjDaYzB+eMViy6S/nMNimKksA72fvQbKMbtihuUcOD\niS2f9edcr4uslLl6vqPHsYiib60RRvWCAziB3oX9jTDm1lGjFQRnNWMeJbGe\ni5mzDeaqCkaSSE0UyIZIoyM/qW6Lo/V9PvJZ740kUEE2GN5OOOIrR5WpFWLQ\n6zD6584XznyrPAgZToP85ii273Z5yEKQjJhXWeFE4njjBwulc2JKuy/jlejG\nfSxlD2kwCQVK5ShORcyMuLSWo0zikhpD20DvXXbBzoZlV/S/E0wRP7blWcAX\n5AemY1IkySmD6qiTJGSypv/Kj74owOQld6S+bc/SkVC2HruBWq4F6Suqgn77\ntquOvfzq9EjzT/0fwU7c4BtK/aWROL2eUqlQLWC596tep6MBRZdQgZROVT2P\nkwm7sjvs7YCT0niL9OcAcXJAfEzooJEaFfDuMzNgtET+ofMYj/TWrBzVRKE2\nGtI7zdR1pZxuL2j9+uBb63Ig/qZa7lk1RO0zMlLr6SkD6cuy0BeGR6hSaKF0\nT2ei\r\n=FmbK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.61f2d7580.0","@material/base":"5.0.0-canary.61f2d7580.0","@material/shape":"5.0.0-canary.61f2d7580.0","@material/theme":"5.0.0-canary.61f2d7580.0","@material/floating-label":"5.0.0-canary.61f2d7580.0","@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.61f2d7580.0_1578433211157_0.6429146666602348","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/notched-outline","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.d1be53a2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3544bcc9bda1a4aa2dd31514f8eceaf74f35c40","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.d1be53a2e.0.tgz","fileCount":30,"integrity":"sha512-cKTrOAPXru/fF9mm5CrsXXh8s9vaU/PwAs3LGEtu5Es/YqCguFtm/8IMXwQMrF50EkjBwMuyKrjZwQVG5xRKUw==","signatures":[{"sig":"MEQCICqT9uFSKBb/GrXgRfp9IsKe+nGvHph7AqWggR+2JAuaAiB6CKwQoR2q4ZDEvsoZXe9ASyFwib/+mKj8hlAuIVf7KQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQNnCRA9TVsSAnZWagAAZCoQAIEM+R3cT1JtSbW4nRS3\n/PrlddSdiAeuTXnz7ld2wzKvRgQYJReEMh0FV0swLUvsbcWh1+iFBjBk/4ES\nbiCkhiJyTiTJ+kLebIx6TET4ddaHPm0rS1lXLuNzutveWoZpa2NCbKHNLEFo\nBeeIc04EZfINvBXd098dlGA4ntdHM/lCxu5bbNMPrO0q3WvJPeFXy1L9Qt3o\nVP4siHF8gnzLpq2c9W/sn5e7PvWYAYqAtnPSXRGW9d8BkvrqC+nf/A72w7EL\ncyM1/7s5KziVqodn8rvFjcXl9cY7hFLrGBCcktUheTVxJ8ahFNIDghHrOFRn\ncDC+/oN7Bg2Elt5Jbt2cWv7nAuVSFhGtl/DroVH/KtL5eSRuw3zjVT/N4dcV\nVa4J8CYPpY/FEoQJWQTlPurbjBNJsQB+cOqMBSGkp1iJvTZqhLOXL2JpgqYQ\nKqKFOQmAGeV7T9JVo2L3gcBBJt631grBAitCppuJaDLipVuJzYBzEGtCnt9Q\n69dh5IEomHkIr2aRMp3GYthLrKbKGj4NoKXgAA/1+dHjsk+r1U2qZCXFMEdK\n7Zok+0uSQGh7MmQPoM/yrMJyyC7NOAZaou6ksqngm8QDjroPOTbU3+njIETF\no9zgR54e5I2sWrQ/0jaA6ykso9tsMKtp+aC//SuFmKQosMA46VGG7AyiBN7E\n1KaZ\r\n=qfwY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d1be53a2e.0","@material/base":"5.0.0-canary.d1be53a2e.0","@material/shape":"5.0.0-canary.d1be53a2e.0","@material/theme":"5.0.0-canary.d1be53a2e.0","@material/floating-label":"5.0.0-canary.d1be53a2e.0","@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.d1be53a2e.0_1578435431109_0.961247000797701","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/notched-outline","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.9b0d06e32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0082733a88640df5669a152bd79d7acfe767607a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.9b0d06e32.0.tgz","fileCount":30,"integrity":"sha512-1i+qDWhn2KCCXZS1X3/QKcS5IvU6eM7YyLYMsH0Rgbi0/P7wVNYb/6aMN5qljOpRTXZupKvOocTO4CTuiz7jKw==","signatures":[{"sig":"MEQCIGZEiNPKuXPjISTcC6EaJnR5GXbYjLZshTzaCOLDyfYgAiAZbus44JrtsoodNIwpYk9umEJmFaxDYKpSfQT+Y6FEWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQQHCRA9TVsSAnZWagAAQoIP/10gkT0OvLHXuSd6q+mp\ntOdxFuU9TOo3HlFDxTwq/pmf1yuMKDdblh3ugfvlWA+IdhyvLVyvd+j/dq6K\n7OBLVUBGOWWToMFDTFwabOH3aHJdVeE3TSo2dUcumVqpsoKlL3/Q7xeN454J\nLyfcKsbP34aLxltMJKRO6DQO2VvDG+9aUdOo57p8Uov5M6sztVJLqdei5ixg\nwirB/+hmb0zWiH9/8bFEmfH0iLL8IuemFY7vkQn68mwuOtKz3iuaf6k/zF0v\nl9YGU0vL6DwnBP+u1Z+F8jDCZTyF5HHyO84nowHQWMx8p+N8xG0Xqkg71hIr\nbaY7cVl/UKnfD6KTzlwRXf5ge/8bHR8dbWKPn4/xFxDUOJOaFT+A09TNveL+\nyCiWNXzvryr4Xtu/FdsOe0Ge3oFJClfeKAVg2sbeYPvt6PfKGACNpmFUDhp9\nJwrg0rVZL8kVKXp+mZ3+JZbz0VFO9d1g4L2JCm1Ktg/aJPs4npocaMG1sYNF\nOhfAQxYrsLsYIclVbdIzQtfH8nGSSR0qk4D2uwGVyjgyrE57xXn2fBFQQ+/F\nXutU+/Da6qaEGuH78FZLMDP5igM3qxRloWTooCMo5JHJPvsuJQN6yRgUttmy\n1Np1PpbtxCcrOsdYbu0AYaJlFstyq2PL3jXNukL9QKE28goRRIdOQePnbG1w\nGfrj\r\n=HgSI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.9b0d06e32.0","@material/base":"5.0.0-canary.9b0d06e32.0","@material/shape":"5.0.0-canary.9b0d06e32.0","@material/theme":"5.0.0-canary.9b0d06e32.0","@material/floating-label":"5.0.0-canary.9b0d06e32.0","@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.9b0d06e32.0_1578435591250_0.5286108689775151","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/notched-outline","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.730c807a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8488e9e6f1df36b7498378bd499890a3b100b42a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.730c807a0.0.tgz","fileCount":30,"integrity":"sha512-wrHudToDOZnEvNwWQjPWiSxP365hpHm6lPmYIvwLTw+ARXsRpt/DGvCKFA+MQGDPwYvpfosbSr7A1TLpnoFApg==","signatures":[{"sig":"MEUCIG51wewdRDE9kjRU0yW6KFF+B6LMN3aAoleBVIZhaVz0AiEA+2GBE8S2979HRmovddkqveTxWfgRTgljJLpZa0gWx2A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQRnCRA9TVsSAnZWagAAyuMQAJx626GkJqZkmsvX7oIs\nSUNXHGPbJ5a6U5warx/PhuRCb1OXMCvhvI04pEnc4AQ6I8DkOQIwuBaziMdC\ncMBT7UyIJMM/mhxQTLVpRmsFxnIIj/hloWt+o7xS5qDydDH7C1jPMMEroYA8\nZroncyjmoBeWcnNO0FD+GHKcvNCqbAW8wSQe8/fcOuhyUILyY8CUaV3Vmgj9\n7/6u/4CwUxcwQ5T/8WKQAGuDWK+Oc0w4MVX2m2UrRkejbnVLh2PY0HVhutqI\nzWBGfooCKv+7rLLSEGbP9FOecr9sc6Cm0T+aCpBaH+SWZJOchhqiuKFyXtEL\nrdmSScjpEUKU6q4/H5qCpTui0s0W3cd5RaZaAwnL00cNx/y8FHs9ygaYCryq\nfo4d6CLBMUNzVl5Pn5T6e3jNMrcO8115Wl/tZBp+jkLbEKqEWvJdc4XWiXdW\nJPYdjzuFbbDUzXYOm54D75iaD9N7qpKfzt2ni1ZZoWsYMEFgviZu2kopw3+K\nLvA0fdBcyQ6OjMQ6yfONUin+qxisKSbSRdp3ujJIEfnWk/HaAfewJNFWwU6V\nj66nk2dlqH571AcueRyvNWOa9NteSSu83GeTIe0PRaeKyNTWKiCUMyzR3hFu\n/8aeGmPOBJKBv2YibN3aFVp0DxxB9sOMqwN44nQVI1bq9kRm2eD5kVxVeQSu\nVKc7\r\n=UAPx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.730c807a0.0","@material/base":"5.0.0-canary.730c807a0.0","@material/shape":"5.0.0-canary.730c807a0.0","@material/theme":"5.0.0-canary.730c807a0.0","@material/floating-label":"5.0.0-canary.730c807a0.0","@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.730c807a0.0_1578435687069_0.4299788270220839","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/notched-outline","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.2213152cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"722bab04abae9762a5ac10990354538356fcc60f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.2213152cd.0.tgz","fileCount":30,"integrity":"sha512-F/FMtQwni1Vnq9MDhMC6/0Mp8INPLuCtdS3qxjD2eNV86PXL0nbqzl9G336Dnbo7u/i8bQHFUB/rlzDbUJCaOQ==","signatures":[{"sig":"MEUCIHPwInsOjMu1Bx8MtS+PGX4q0G4lUdcTAhaAT5c7SRU9AiEAjRH8Z93XSXzuufpq2kSUT7cbxEGcaon61zC1NZAx1c0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/kCRA9TVsSAnZWagAACDAP/0VcNaF7IBpXozwMZR1v\nHPkaq7EXVsMoPqMf2+XCYisaJV+l/h7zdNR1f/kFso7Pbo0QgBGAYlpfFC3v\n4g+aWAsUSAwLPzIb5BZmI5NmawhZoxfL+2pcGSP9E7Zr7xJFNRn+oXDdWjt2\n4tax82Oym/ZoDTmJfsalP/c0VaACQKtGLEjIoHBBI4dzli+VWkUwn8F9Ey7c\n8ya7LAQ2e9FHR2wwuOIlo0ByBH2UAHYh+XLBP21FxvRAYD8a7DVAlvNF2Hzn\n7OjFxt8WsP5/PXmvl+9LLD4Gowyt/QaVb4L+mmCYCCZ6t4SNkMM84R/PhWfO\nuJlbllSqa9uaPpLYFjM3pbsdSlbfiODZRukBCiTgKeiEi44ztpz81PC0mLMx\nyfCRSn2m3Y9Bla60NYeOg9Tuwa1/wUpDJAgjb3hWMFKwDvHFj/qDZNyHWoY4\ntsmef/oN374dPJxVGO2zrxIGiTjTV6zV82ev/+RfZ3N9LcuWFrklWKGUsb4K\njPMEwcrliYytclrwVgz/hWNK82XOt/EHexlDqGI1/kfgayhge2rjfvQJJrB/\nDnYgV4W6M9+cELrEEIgAhDVrk/AAzaF4GQNzkKsg9kY3yyyNrmeOmXPxW+H0\nPJdodewiIOf728ei29tD4pD70QtMOUS/Uj9FvDrK4yIrX/MgnERntMB3i41/\nH2w7\r\n=dXO9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.2213152cd.0","@material/base":"5.0.0-canary.2213152cd.0","@material/shape":"5.0.0-canary.2213152cd.0","@material/theme":"5.0.0-canary.2213152cd.0","@material/floating-label":"5.0.0-canary.2213152cd.0","@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.2213152cd.0_1578504164249_0.7425789659531299","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/notched-outline","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.5750f7169.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2854f2c22950abdb6b38530e142872917cc6fc7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.5750f7169.0.tgz","fileCount":30,"integrity":"sha512-YLxyRpjIx+HZ/vLeM4ivPMf1+hKxWIqeDeIXc2RlONZi6C/FTn6Jojr8E/oBt2LM0w4TUe0kBKgXdbplaDG8eQ==","signatures":[{"sig":"MEUCIHwyx2rm/SrzuJFOziBnX+Rxkz+lg0X9jA3pe7QZ0xScAiEAtHoTlQ5nHENC9XuZs+vnfzXg0Z1uQycbRmkatg54yc4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhgLCRA9TVsSAnZWagAAYYcP/00TtOQPwy+EkrIY6XXk\n4VOro+W7IY2p7FaiYnE+p2ky8YHe/jF7PGvxDHLVijlbDTb5yMlbT0QPeHKQ\n8h2UO0GNRBwvPWCTk8+rWt1vWj/TYEhUghtXvCOVBAqeAbrYYhclDOyCmlVZ\nZoIGtV4sGukbPq5N4y7B9QzfrGFMB8t2PshNi1wRIgN81oP6HUVRlVjs4bsk\nGOmTHlFGlYGb6/VqoUdgHDFr0tM2In8n1EsBEAQzEsX9NI4rdV+76+8hfFE7\nG6uKxKQ0OElChCIQmt4xTTP1+FHUEzrVJco6/mcWX4jOMUoCddtOzQDefAIF\npXJlE4zuzdYS+R+zfkDa9xZ6XD0fre0U6akhgKBpoSqdne4YOdEkKkiEOvBS\nci0AKP19TY7W4fIIinv3WIpxwhFd69y3dkArLHW3tE5oXgqV5Wo1I7bgW7Yh\nxNwwqKnj82tgpVsFxn1IPWSwEFn81UsV0nym4c1YRlY6jOQMPeclaiKhusXP\nO+9L3YC61yR6gUE4d1AvQxxNkenOyAH8DtiXh2yMkIm5Gy1ayyF8Q51SUjdp\nNgWfxxoNmFCVwRC8X0ROIhfw+27QTlrUnLrFVUbDx/mx4KsgAjPhxIhzc9Oi\nKB5O3Pk8i9IuzlIOlMRl5ssxws5pwVdcKlSZJHZdJ/npbVz+OYyFmlVpkwqL\nMwAX\r\n=KZg6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5750f7169.0","@material/base":"5.0.0-canary.5750f7169.0","@material/shape":"5.0.0-canary.5750f7169.0","@material/theme":"5.0.0-canary.5750f7169.0","@material/floating-label":"5.0.0-canary.5750f7169.0","@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.5750f7169.0_1578506250988_0.7259331490719394","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/notched-outline","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.f7abc7a43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44aba874e74cc5a96d5a70e353176ab2583a699f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.f7abc7a43.0.tgz","fileCount":30,"integrity":"sha512-4dIRAmiN+ZWpCMp6pWJI7bYLArczG0PSUkXAai/eA745jordn9sHzhi7zYRuQBtSa/Eixufb4M48WwkZEgRfwA==","signatures":[{"sig":"MEYCIQCWkB68b1ie6lFjpOYDolE3pIYY8j4NIjAn8+qBlujxHAIhAJDNN4N8QjlnFg2kJeS59CBUkrEczabj2/IHamPCFwxj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh9KCRA9TVsSAnZWagAA/oQP/i+EySQ9aaDg/C5wnilU\n60UKaLWDDw94ElrPUMBc8mWXyeyXVKqxBwuhc7pO4hvaPKUTGIzr4nnfvkRx\nbYYm6vYZIGIMO3HOezWt5+23cIXMhXB2VcLMMC5AkXYcbuiZjFcyJ+20nSHr\nNH1qnO5/tYBmFPTy3aO8mFR6w9i4Js+KVW541Ec+Rlca+ZUXkaGGv+r34QSi\n/dUfT464TMax7Sg2JHhjv6ZCbPqXwUXnpQQj5EbEFedD/u3TulKbbM+PvcWf\ngjfyuVSEbE4vsgLnr5mhHUC+BrDVIV6ozhShWONyVJgzkn6YtAJT2J92NqoM\npALEJgemlJlH+XZ3w9ezn+JExNIo7pBHaW4PmdLS56yF/VKuoYKsi2pZ1c3o\neJ89nyS9w30KwMHQWN8VByn5pAHsCKaMd9BYOzOOzr+g2JRSVFsAnekPCaxo\nYS9AL5CSC/6fdYQNWZS+nzRQnN+jC6Cf47a0734TJ5gWWFZmh2DwKqOgYhIC\n1vsncY5h0/pvdYu7RIn5+tntrUe651gHPEOcVQKePWEFnK/IG5HtQKatXhCf\n1TB6rF+G2ZBAt4ncPAipBVoSYfLe7pYDdI3TA5rKeNjJMvf9S5dtaupmRG3V\n4H648VdNPsqDvVdI89ytqr8UyEd1uJ9vqF1uLvom2oObcHdGlZfoxwWR7hja\nC/xF\r\n=yEXP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f7abc7a43.0","@material/base":"5.0.0-canary.f7abc7a43.0","@material/shape":"5.0.0-canary.f7abc7a43.0","@material/theme":"5.0.0-canary.f7abc7a43.0","@material/floating-label":"5.0.0-canary.f7abc7a43.0","@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.f7abc7a43.0_1578508106213_0.9412838541361008","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/notched-outline","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.bf7b4a061.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edc25fb64d11562c419de7d5221320fdca305d54","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.bf7b4a061.0.tgz","fileCount":30,"integrity":"sha512-dtpfLC3U+ZE6z17Tn8g09I5IOBUEt/k83Dx3rDAk2bTxUJ5UVAZ459iQBoM5uWfBfD9KACtkhUXuSVY+Ut0Mug==","signatures":[{"sig":"MEUCIQCBUK/mkR8/ZyrPCuqguIpAZsKxVMj0AJp5lssIkDGHuAIgKUIjwKW1SvD/3hI0X0jC8f9bCRbTpXdCJIi8WRALw1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiKBCRA9TVsSAnZWagAAeDgP/00GaJ2zYz2dH9aIDqH2\nQaiK1WrplHvXoVL714VkZI7cwlF8d8S503Iwr5mAzBi4HRykjrgykqZaTktp\n1h0Om71tYUCkmTQoXMuykZc3QcjhDjzey0bwfuUlHiOHmADWUdMeFCXmCKEV\nTM2R6Oga/jJCBql3hPy+aZeWJMASDFGoeZq4ZwuYZzuLt7v8aHKcfLukTgSJ\ncaTODh8REGsKDXqmMLjLTIEw/D2Y+Hp3R0s4H0OZ47GfT+eZnlZ5W9GU/dLE\nsCiRK10jUEdv2uTXlWzswDZuibeTIAbTKQP2Heop8Lncw+7rYwKGKIHgIDxt\nlTxD/pti6WB2XTywGOUAmWJHTWlEMelzCaV/62jCmLHajRY8RaCGWmIIBcWS\nwtjQT+dfU7hKApBrK/yKPBJksKW/vMQTF8UqRULVI+QOvLIqXTjlQulT8qbq\nSVmkgvV0DtoWza7/J8YBJniBzVKDaX7vz5I56wrTacBM937URQ9njcs2Blpf\n9mKy8c964Zhh+w4NLqCmZzUJkd2hUBed97lP0WFkNZcnPDTuNuY8OjONleYC\n5ZVnfhgk48Ftd9rBVS2pvYGoHoMncghz8cITD6a0283WMcFkQEr1oiJNcBjF\nmc5Qq6XMO02AAhAFs72Lq89kmeRIGnSmPOdGkHXnzj9PIDX3S4Sl2CwJl/o8\nDPUo\r\n=Hf2P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.bf7b4a061.0","@material/base":"5.0.0-canary.bf7b4a061.0","@material/shape":"5.0.0-canary.bf7b4a061.0","@material/theme":"5.0.0-canary.bf7b4a061.0","@material/floating-label":"5.0.0-canary.bf7b4a061.0","@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.bf7b4a061.0_1578508928711_0.005249110984031136","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/notched-outline","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.784fa7903.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a1c83304d776d9607455f854abc889b6ef687db","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.784fa7903.0.tgz","fileCount":30,"integrity":"sha512-j4wYgDA7GLE/mMPdbDgdXSBTN9+dpTVuCID72PiCNto/9uBsS0AY3dF2f2mrpvMynJ5vJ3HGMZGcNu0iIL6cTw==","signatures":[{"sig":"MEYCIQDtITBf8kHIW8y+W7Iqxe0pLUJ4n1e07ZSXd7m5Sddt6AIhAMXJwotyLVBxphEykNXf5dzpmqB+uqUQa4PIpP6xG8/t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFik+CRA9TVsSAnZWagAAujEP+waQvKgLSnWmVZRQFPja\nQyH+A7A9UBLPdZy5EOY9MrOUtjSXSTMNE8Ua7C7HzwQqHFw4E0m1YiNNpJoB\nU37a++0IfPTBtl3/ZRm2gf68ZfYVxOfPKkCKuANzPQ6X84opnn/CrYIr9Iou\nRxwEoGD0apDYCqyitRcD0JKvU9Nee2xKDKLGDvkWbXIROgDSoVISFEDSp1Kl\nZGs8MnLhkRFQRFCzb5Tfam9jmvykmrEnIxb8J8qlrUa4e9x+Ddg4iUogSoiu\nUPFfl2c2jk5X8rTmCXw4iFgThroWuYKP4URMS0wdO8e2YO0TWZjVq6svOZep\nk4CqU6oKMByiT4W3aublp46w1PIZBbMXkWb609ZpO00OYOzznRO9rLSFewZB\nM6W0I2mgp9aS7t5Izf5cF8hiVc2je2xqCPPZRb4ipoRHhDM8g1o9jkuCSnf/\nqNlzBR8TYExamdzdCzjfnwm4B/tuLYvIj5q7dZqkp4AQvc08lESMVi06KHzt\nRx1Ff4AKNUHx+kTaVskhqqbxicCFCF2JdNlHPix3KgvOJK/Cl7kNdyW9MowQ\nUdaufa40qepLNrjcgYpZ5lPNex7fvOh9AuQPLGEmQUFXGWFs4m13BHGWl5NF\niGMF4o6OYemDUoegQgidV5Y/DF99VR6MTW23Ldu3af3f2qafIVXyBoJJtyxD\nrWm3\r\n=LLva\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.784fa7903.0","@material/base":"5.0.0-canary.784fa7903.0","@material/shape":"5.0.0-canary.784fa7903.0","@material/theme":"5.0.0-canary.784fa7903.0","@material/floating-label":"5.0.0-canary.784fa7903.0","@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.784fa7903.0_1578510653989_0.6276727433541227","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/notched-outline","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.823c050ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c1d3633296a8409ab6dcfe67ebe8e31539b8a7b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.823c050ba.0.tgz","fileCount":30,"integrity":"sha512-JjA+G5vFIMiljHjnVWZr/eqyCuuzo+e23SbWkLW/ND5icrbWAOLp3IIpuFDMx+4gCnjGX5WrqI5IBj/ctMOSaw==","signatures":[{"sig":"MEQCIEP2R5eUhaz8U4F1Y0fwv8dAtsgNqKW3xgTgZ2yWVpOOAiAENlNZ2KMn9Z7smL9F4t6z0rC9VPVopUmyHzZxyXLBtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjdvCRA9TVsSAnZWagAA8HAP/jeg4w8jzCd9TbLt/noN\nT6baAOIs5tOlRBJOxl1w7w0h6C1IfYlfcoLZshDKrwdxb9itFBmaohqi3REf\nqvEghm8HNVF2mtygktV0B2JB01DUFbeGNVGW0PdrhBb6S+mPvjqwWlQgnnMU\nU3Fy5vap9bdCUftU8vy0J3AbWxvSFsvA1tzN44+qDfB1NYUx6Sc2YnhXAaMb\nKBCPL0vaOeiB6gYUv/15ueyX4Y+TN1gndnjCK68Swy8guret6BIdGhXu3m8E\n435S/T/wUo1PUaUkofiA5qg+r8jwYeIhQibuqmunF/S3ayyxbZRaa+j/tzVH\nFiC2QJo7YMSXXwcYD76PSqybWyh91yWosEjV9qLGxbodvNoFLqBKCu+LEqsm\nV7jseRluLWRAVYO0O7FgxQHY18ZBNr8mRohJTKaTzZsWLQZkAe2Uv1miH+DX\nQEPyv4HzFjrpmsbf/OxE2+NMXJhNuc9SABhgqzk3xZ7NDxD3lrWcfhxdOwNx\nYQZSZ2fEZfyTbBCEYhU5IIRWFfe08BWiBjCHCgGfw7ncG3k5QWJ7jA7rmDK8\nTQ8L9IR4ECVQsKgmrzW4nObzJD3UUC7+vaIayg5qfzuF2fX10SmEMiXVPnxa\njLX9+GbU0etPT4WBkCI2pGTQzfjiuHr6A8oDiTS4x4Z60kHI1/y1zioKLJDw\nYjAj\r\n=fGPv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.823c050ba.0","@material/base":"5.0.0-canary.823c050ba.0","@material/shape":"5.0.0-canary.823c050ba.0","@material/theme":"5.0.0-canary.823c050ba.0","@material/floating-label":"5.0.0-canary.823c050ba.0","@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.823c050ba.0_1578514287188_0.5461096303113846","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/notched-outline","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.70c708dee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55b8d19fa36cbdc31b96d8ac7afa59024491e726","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.70c708dee.0.tgz","fileCount":30,"integrity":"sha512-j9hoagkJBLhIQzzTzslOkuJrWZevqKWc/euca/jMvryLCIxR+TknGxBu8z7Wpt593IakXGrDdvphLCOaBssugQ==","signatures":[{"sig":"MEUCIQCOrBmYy+nMTMFRovnWnDmRRsSP1br2QXv/HlAL+8IcXwIgQrkj4ZLgJHunHaLbwj0vxKSzh12Tm3W560vHUQUxpuo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjocCRA9TVsSAnZWagAABZ4P/RLhWYFWUsvFRcHWh677\nMFMXrduDy6zcBM4Isa7AzyChK35Jq8a1rr3Kxrr+6XQ3uKCx+lfOVh6uyLTR\nTfwt6TdLVoF4ZJ2wr4H83cS7I9+ISzhZZd+NSb+v4KWFTur0KcFyeeEbTvtH\nXRn+oTe8xVDNYHz8QoNBIqMIEFZxWRnspwcmIvv1FOpncXqWN2EY3B6EwG6J\nAO9LXniaHD0jaJp/mdUERoCYHrSg2nGmzL3fp3teiN4P8aFdspkLFJsiElze\n0dJG5lKi3Sye2H68e6sJPQFqQTq1h3vkEbpBejHTZtkr9KX7Uur0BYLcti49\nV2nDxwYe2mvwluvVClFwhf57Qy5Xj7cRZbmXLZgGwI1q1U9XXaPm9fr5JVUu\nfRM81NOVAZdgY+Du1fmzySUxwbzlY2aOaiZynz27WmHjdr4AUQGQ+yWESQdO\nEh/QSFhQRlqvCElhjkLTPQxCxnVQih2ZveHCXxqw6esZMDIgLnF7UfZGzyC1\nqjB7BJ0j2D+rInavhPmGVADtv8GYXxYf05NA8XaVSldHtNVYKtcw2SHsljiV\n4mtbZB/TEWxFZF9Va+8lI/+TcIoKkaUyuoSy5LJblwM3EOfHVeyB+jzPuDFI\nUGqrldY14xzkiRAXkZhgS65ZHnaxn05/Ne7ghRXUALL2GtfUwGSQlPi9Z92L\nlR6o\r\n=kecB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.70c708dee.0","@material/base":"5.0.0-canary.70c708dee.0","@material/shape":"5.0.0-canary.70c708dee.0","@material/theme":"5.0.0-canary.70c708dee.0","@material/floating-label":"5.0.0-canary.70c708dee.0","@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.70c708dee.0_1578514972068_0.24657547219289455","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/notched-outline","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.5ed9d13d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0bdd2f4328157b18043711e9864ee95bf603c0c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":30,"integrity":"sha512-fCJyqsbIgjGQjKenK1sHJcN2GSBLIv2V/VOvd9olM6HwzXiMKSd5kW2JoT7hbx4ZWqT+VyMueNxHDy1rJNzI5g==","signatures":[{"sig":"MEQCIHFMZ/eU2JAUrklmdaqghVqrte9B6BuO/e9cqSWEldI+AiBC1iiEzQCrQ3HsZaFEsdctRRKp4KplnQY9wI5z6GraKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkzxCRA9TVsSAnZWagAAmh8QAIZm4TFBqnPRFsk9G3yx\nSuqJZyzdD1LP2WMphdGgYOWOnbOEnlc4NK3oixwhmZ0HE5Z2q1jY3v94rn1B\nD0tyxmWfA6ZeodG/7M+485/sBAecXiXs//USaFz4RxcX9ylwlA4HhcLXvyyz\nBkdfoVZMS7i2f540/DTR3r9BFoMXvakss7zZOR7LwRXtL4fXjuQ4X532dLtY\n0MhuIxWrXI643gSggIxlv7FHG6MjcwEG78wbypoZM4jREjaFGQu/NXTVcGsH\nse1/ydjwpe7TL1x293cUt6Y9KUhb8mcT6GPtgQeprHl393kYtAlrbBhA8g+s\nF2EgfqwSgrdemaV8a+BjZImh7EujOoMVHreq0+leFShAQsCOILcPvXsgAHeC\nE4kRRWI6gqarICPDR2ZoqIFpA8yI46nB4yj1Ukmlahf7uyil//3/kFqUIJ5Y\ny6qIxWF5xzp/UvLB9IuzDMxrQwHu41T24PdarGHJ1TSvV4VF+X7BR/I/BNW0\ndo7soY1UOKlLacG2vjW9pz/Wx7qFOJC3V9VND3aP/wbaxA/TiqvjUUa7JJRa\nwBtIxcjstf39WcW4UpNHW/4M9v/zIiFaJJ4yCA9oxagTCgdb6v9il8Cqf62B\nydXiOcj1j2zqYQbYJiLRCDPLiQdbQOd5qPW0/khcXtdIxGZZtG/Awb/PAuIT\nHRbJ\r\n=O/qn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5ed9d13d0.0","@material/base":"5.0.0-canary.5ed9d13d0.0","@material/shape":"5.0.0-canary.5ed9d13d0.0","@material/theme":"5.0.0-canary.5ed9d13d0.0","@material/floating-label":"5.0.0-canary.5ed9d13d0.0","@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.5ed9d13d0.0_1578519792743_0.6971891552867358","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/notched-outline","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.4819cc7e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7c576123572664b8fa67f2c25b9bc169d700c2a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.4819cc7e5.0.tgz","fileCount":30,"integrity":"sha512-JdXZYZv35e2rYMrKzk1zVfyUgCpMfDJ+NqYCdWxEdFkVzwIiFq6c8J8MTUWUEbA3DuCwqqtpgt3HcWEXYzCH+g==","signatures":[{"sig":"MEUCIQDKaAAwmgs0GqYjC+x64iX2dJOSxiFa2sJA2oU6lU2PxwIgGaFrM9a+THZuUacNkOvD+/ZtiyoxqBJOdtNsTpjr6Yc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlCfCRA9TVsSAnZWagAAi34QAJfeWk2AqC2gDSoQtENo\nE7CW2dzZnFdbnisEqLa/52Fqo363MjOpdD5iTdUKANLSnHp++Yrw7RfCTXim\nVQGB833OQ/JOHx8g/01uCf7w7bp3QV05aNWKiwxTwM9+9X2api39ujBrUq4R\npYsCJy082EGSXMJRNklAd2NhP39zTLeTfAlbmG/JfxwylwnQZsi9wEBTYPN/\n+UV3BIM12bJXRUQx3Is7aXLKMDMIaSLMF9pdaAOJl5bExcVFAYffTA4Z1usZ\neqE3cUGTh8Few5K6OIIR+wH7MUlpAHZvH6OpcE0UBLfjr172kR2DSzybr39b\nVG9wjfyQWlpon0m6Ab51mPPYS9AbgJsCdu7L98C9Li+CIQq5LzvyPsmKa2V7\ntaP1ltVQgrEi+ZTh/8Cro4QRGiOhBSGUcRHHPbmsXxrh3YKE/U6edNx7fIDG\ng8U+pSIDkqSM2GlHHgIFYia8d8FDZD0j5402gX5F0Zv2R3H+fCdfBUfYa+52\nQPm9EFN1datZe4tcoCdgbCekZT1b5kC5kAqZ6oCMxc2/E/vzyF4j2iLwNez/\ncoX04HzMCmTqKP0NAtCU9CkjQeDNCTJUbECcwOY0UAa++GVJdnku//dTD3kO\n8DoTnt65IHeMVfkFl4+nnqGZg7Ho3W56AiRkBegsGipxhXCI/w9gRBPam4jD\nbzbr\r\n=vpI0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.4819cc7e5.0","@material/base":"5.0.0-canary.4819cc7e5.0","@material/shape":"5.0.0-canary.4819cc7e5.0","@material/theme":"5.0.0-canary.4819cc7e5.0","@material/floating-label":"5.0.0-canary.4819cc7e5.0","@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.4819cc7e5.0_1578520734975_0.7280680712624317","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/notched-outline","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.fe3ffd2c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e269534792738d521b65208df1bc482c7886ca61","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":30,"integrity":"sha512-iFqVgE3+I8D3navP8fF9EVIEf7hcpMwVb1NLwlRxfjPY2c3y7TOWrEPp5JQKk15Pexuaowx1aB9gKTgA+sSmPQ==","signatures":[{"sig":"MEYCIQDOarP+Wot2XZUklFQmLfTkVmax0h8A2ATXUvMC59pt5gIhAKjobThjg/c805LswekuFkx7QrPYMZVRFq8WzP50twOp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlTWCRA9TVsSAnZWagAAE8wP/1tECQp9ygI1FxLIGHFH\nI80eamfPNd99Mp9zpEWja0z3/7O7+Mwd44Wpr5GyuYyj37szhBOKK0BqiBd8\nRy99rfUKbGmajmmhlltrM5QVrvinzatTUsMkoQFkO3guGyrSbWuEQkVBDHGt\ngTwXgv2G5iboLvSim9jUPU+RazqBd1VUMJDLBE6Wu7+92bb4BPBDaW2aNBHe\nBfn37XrsT8vtfNGlNoXBP9BJLCQrIU+Uv9thZ9gIuY7qEw1yq5/8RJc4F0Jb\ngTlXN3cwP4n2D3esWn6vwsLpzKblgngoKCTeHGKcbGKZItD3fGl3GpEgtlWr\nYpjl31DwQU+R3oS7Pbdt0ID5STDBh0U2VI9HQobxnNZ3FPggl1QX3wSgcVrJ\nq+6LzpxI+A260tCLF5ZMvwagkfEvmyef6VMUlqQvBy5NzQ9Eoot71YH7TVKA\n6w4j96JdgxACxBlxqAwtRRbP2UISTcYhNVb3gW/whcy7bLBNWOb7aBEYpPEn\nCWeknrXOUA9JowQk2naD93W4KNw9LAGAngZjjkiRI1eGLduV5lpuuz43SkIP\n3WO6ynVWGdSilVqemQyyXpgXAyzOunO+xr14dGxHQXaOwwqnKcmLiNiAj0IN\nUWgT/faCFpSh4WkuYilwqQFeUWBP47iu3KxN4lriGeo+m3n0LMyZ4znSJc3E\n5fIs\r\n=KCjO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.fe3ffd2c3.0","@material/base":"5.0.0-canary.fe3ffd2c3.0","@material/shape":"5.0.0-canary.fe3ffd2c3.0","@material/theme":"5.0.0-canary.fe3ffd2c3.0","@material/floating-label":"5.0.0-canary.fe3ffd2c3.0","@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.fe3ffd2c3.0_1578521814431_0.11643323280473261","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/notched-outline","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.c0e850090.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adf8cd1a808eafaab264a268f2a738369b35550b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.c0e850090.0.tgz","fileCount":30,"integrity":"sha512-kQmjh5KoxneaulK8JlcnW7lDYHIbkJn6wYFWDQTd+ONk6+DAaYFldgpbVR0TI4tCVpoC73I6q63MIQUbv6bwOA==","signatures":[{"sig":"MEYCIQDyBd84QsG5/PKO2zGSgl8jwsPbEDguB2JzKOtejdTC0QIhAMwX8CyUqGdc1cKqByNAhyu9f+/DVIxmA5v/rH4cgf+j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZtCRA9TVsSAnZWagAAUm8P/2XoocLw+CoM1ApHqFCa\nZYAiY4dwvS2ZnmfZu+rYutrsH3QM19hCm4/o2wwejQjs8cv0XLQyFpxPCDsd\nPtbMcl24QGlq4CnHGJ4AQPQ7VRnROI72uk4gmbWJYzO54CTiDJThWLRglzkT\nGKMuiVbNd56flcPlgAWSmpOkg/DSQbQvIZpQ7NKAFhMRH0FMZ2pEOMaSUnmw\nt/c7cprzmw2zEumWqXRRT5CBiX9eLZBfjmfMRh9OeQCeyYaysxZZz0tTk9gh\nKopS8Hq9nctIzErK6Y4mBvXR0canYkSY1lNV3C2LK8n7F8O1hwvbh5BELhwu\n5s33/uC9RG0o5WveZEvhNrs4f17u86QXRdmxQNmktTqCv0CHKRCGDmpY5YHb\nqgbwcOaoJLL9au31l1AmJgSS4XTU5GNFqvc9EPbKEbw/J4oJkuewu5mPiDXM\nx5Yk6Oj+o4ApOEF6OwoKnycnSmGh6CxR3jW7v3og/xL02JljLEplF6p/oAr1\nO6rgJ8i+EYf6yWuAwdv7sFi1YuPS6J3GqkAgBzVSoOXYURJVGRDBmiTmcrhI\nOEPClZMfUjb6TmBEiCl1sonR57NRtP7rSaeq3i2XZG0KBsdy5kPK9z3bBP2s\nFee4I9oeA2tOirAo3t1thzH/g9UWQK+yTPTFg7M4xiykA/QIx7PrU3cLcp10\n4xIa\r\n=NHtJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c0e850090.0","@material/base":"5.0.0-canary.c0e850090.0","@material/shape":"5.0.0-canary.c0e850090.0","@material/theme":"5.0.0-canary.c0e850090.0","@material/floating-label":"5.0.0-canary.c0e850090.0","@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.c0e850090.0_1578522221644_0.4398217980131194","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/notched-outline","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.615f86f38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe392ee8ada18b6556f58551f7896070a90295b1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.615f86f38.0.tgz","fileCount":30,"integrity":"sha512-1Jq0qQ6bUvR4BUo51QcCD/nPpXm3nMBAEXqWINobpmf6f/alIHqL1qompsph3T8Aimv+8ACITzafUPGVVRGedw==","signatures":[{"sig":"MEYCIQCOk2SK2WnYBx5M7DQoi4+tXjgKQLJJAb6cNU3N3+rAOgIhAKlKTvbGcV2Weqy69eBkQXZIFHN5+RSXW16zSKssTsUf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlpzCRA9TVsSAnZWagAAWU8P/0Opk6KbEoRqXUM7tCME\n5PTlZezNYcR3/uspvyK/OeCnlc2UWHDAWk2GPkcqiUpGvaFqqUtTT+V+8373\nKfQ669PopA8y3km6M/w6+4ffIEx593j/EbBSZxXEp+Oacu10rws3M9lOM+34\nZb/W0ooc+nJtreX5xL0zBrWtws3hg1KXKm5qapFA54czXm7sWBXeur8gQ/hl\n1mWkprzBY7GSi8kojeWO60UPfBdyi4GQLtRE9KFsQhSmXnwKRk0JW9qLgtZH\nBL3wRFZVdjuHs+KTNTHXrGbgxau0kk7whdP28/5cwUwU1ObwLtA9GWrA/vUJ\n9j3zZfC/pj3BYySLTDnEyv7nuroqpwk0io0O6x/7eLUcHmx96YTGm92nXbAx\nJVHOL66Pk0K2t3CrY9xbW+WBDMoxo+Ojqi71dwY5SbKCoukvA4hqUEK8CEUd\nXQOm9IsQFzF5ljhCN/b7sXX5UfPQTHm4bg/3GMDrrMOIOmZrhwI8C84sVUS3\ntnPK0+OD64te9Re+EAJihYb4DXrzrYqi4cIbo0Pcw2edzRiVn+UvXhac9j3V\nlPyUpeG246fqplh22WOWIfOkaG3QuIMFSs1UQXHjLbf6pGYOBHY0MdA73AH5\nG9YJD82Ecwv0vmYMWvhVO4ETLphAdTvbA2tXNu+Ou521adoUewVyAD/MN30D\nh1Pg\r\n=N2kY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.615f86f38.0","@material/base":"5.0.0-canary.615f86f38.0","@material/shape":"5.0.0-canary.615f86f38.0","@material/theme":"5.0.0-canary.615f86f38.0","@material/floating-label":"5.0.0-canary.615f86f38.0","@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.615f86f38.0_1578523251199_0.3957090082433279","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/notched-outline","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.1eb032637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a31e58b1cff086c5785be0e4b25ac7e3afdbc3da","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.1eb032637.0.tgz","fileCount":30,"integrity":"sha512-kdzUjA7fEosJhTAt2+1WTSO2tU8oXUDDCKTI3kNpTuPmWbm2XgN7loVrLakTfFDm5GCtmPoWkWmq4n+JqaA2eA==","signatures":[{"sig":"MEUCIQDMDSE4yMXjXpDOu2lKnfctwBrObuFpPqV5Aqkv+mBIhgIgBUwF27LrvM7zKzrBc+Gfxs6fBttK/dE4nwRH3pGrBt0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8dCRA9TVsSAnZWagAAWxUP/1okPSZKgQXke/BUSW0o\neUz0HVWOpGNoheGzoN33mjU0i+NuqhAajVGRWJOaXi9cJS7CIqSmmGdZHwtr\nM5j+g7qczGHaZ2kYJ5jchtGzmK8uEe+FFegzcjXdQra/msPBS+oEOHiDlq5b\nZj2W5eEyVwENkotixULwWT8/jpnDIe27ZaneTGw01TRwS2kVnOUSZsW3SMeS\nZxBdZrOyID5WUBuPk6DPszbarERI0ev+8Nyu1IBpKPLCif7VIwqK6K0gfWyn\n1bHEICCOA0Nan7afYmXCxBnrzj4h7t82BhrRZalaD2VJSH0yk+613mAgf/hu\nVZsUGWQeKMhWrC86Qv8LkyFqrp19yLTjjUsLt1s24oVc0sSQx/Z4O+wadWYp\nI0DmedKmo9j1SR7FWTC//59eaQzlfElRmKzLJU5JpW3NRIN4UvF/0Iz93MA/\nMc90Ek7mUWl5IId2G3Kfj0I4VFrxU1y+fSlFTOYYK07zD4eNiKp/yHSKELGS\n2lUbZUD9iF+i3XqIMAz8FcapVoo39Ug+t2Qd/xbXUaxbFw2sdX8EPcyQqnS2\nkGRrESBB+75toP6SO2/BPKwVh7WqMl1Bj2U2lpwl3TWqUOrUS6yn10yxzgTx\nc/hWUzPnBKR00i6iWQkegMhNFlj4ZQflm/ARn8jeU8BDZMoyEPNn3as4rVkZ\nTeC8\r\n=SKN/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1eb032637.0","@material/base":"5.0.0-canary.1eb032637.0","@material/shape":"5.0.0-canary.1eb032637.0","@material/theme":"5.0.0-canary.1eb032637.0","@material/floating-label":"5.0.0-canary.1eb032637.0","@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.1eb032637.0_1578524445470_0.06998188320967569","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/notched-outline","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.5bc5ebfea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44ff1bb121ef6269a786d983959b61a9f19fcbeb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":30,"integrity":"sha512-Rm4ykfGniCE1jH8CNtjVnO0iJO3DWr4vFkBlrp16qU0RjgsstLzSXUb48pR48FMANLSz03PLQAEwRXBVYbwqSQ==","signatures":[{"sig":"MEUCIA54KDGUgHGp+wuX2ppHX7mGouOCzywe32jI0zvdFIWkAiEAoM+vGg5vdoNodpXTK/eszxqD69EZPqGRt/TjAJsD+1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl9HCRA9TVsSAnZWagAAmesQAKPdDSwtALDKSUBXVw+L\nZHoVhOvmRGYkJIgOx6IiExnMAXwCntuGGs15CXvpm/xFmICroQZ3yyBXWSNx\nY2IwxROTtD/DGaKancW7U/iTmxfPGNMSsuL01b+3CH3KMb3CkNRdRmWJ1TbP\nH1Je70tnpuWC8Ii6sEzqSS/5yS5DS+eBIx6zXknM59HtipCAlNFRzusvT1OD\nkdBcA/vwK9YKsukHv5hRXIvNhRl8iD4o7W4LSid8BeBglcQ3TRElm2PsRWDa\n5YQ3mJmjq0OmqTIX6IwDMEEWQhw6pKPTBvk/0nxKpZIKtUvYITs7Kvd094L4\nd9OSTvdKfFTaaRyU/CjuOYgt1S+NwjEpVZc5zILNXT8fGlfnpwKT3utP2XKI\ndWL4/6eprIk/HfqLPkuh+4yK6jLgaRrm0Ocnp0AVa2ylicraSZLEyYI8ZpZp\n2L6i6FBxxpv0+umicRmfkXFHRX5cJiM9Bjx3pivUOhCEbErWXTzVehEUoxl/\nyqvy3HIcLG6cxKzaHnALFohUqLeHVVHfcG7BAgyavHy3DmJHlOcEMdCEEbku\ny7aVQNtBSiXA7MtKVdSPI+ZxiRzrUME8X+cxKVpzka8QfptEqG2UAWMceKQU\npexhUFJ2ZnVwQQtJ+6EeeTzkgSaxfKPFXCr9FdBOI84svVu0CG2NuIMHKRkn\nebW6\r\n=2Azs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5bc5ebfea.0","@material/base":"5.0.0-canary.5bc5ebfea.0","@material/shape":"5.0.0-canary.5bc5ebfea.0","@material/theme":"5.0.0-canary.5bc5ebfea.0","@material/floating-label":"5.0.0-canary.5bc5ebfea.0","@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.5bc5ebfea.0_1578524486637_0.7454935952396868","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/notched-outline","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.1112b8def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce42d98808148289cecc40787e7dcfa301cc35a4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.1112b8def.0.tgz","fileCount":30,"integrity":"sha512-pfZ++H5gR7NnchD0eUQEvAR+QZmIKkSbWQvyAQC6Rf1DukXQQXgFUAUtuHPbcyfBYwVoJDsRkkgTyDU0oXdJ4A==","signatures":[{"sig":"MEYCIQD7hc0gItOHKw7+gXb/hhI9bvExzKUQZihljOoT/7exPgIhAPNrToEzSX7k1o4WtlpkdEv0i94NpNF/p+kStxyqRsNZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6TrCRA9TVsSAnZWagAAeHIP/ieQ+YpAVwZHNAXfuKnr\n5kbSnKNxoBdljuVj9MpZ7lM+9HfqmiKCQM8hxAzRQnkeV+mNuqWD593DB2Rq\nSZSF/8tuuB081AiDqYWHTi0JgKxeJ5huRib0TXdRsdsI5KCRHkG4AkfJhV0h\np61z5RELnHDSxxtdbpNEL7+0QHVCdGvulkZm7aLVofHUeF4DCO31R6N0qVJb\npbOTXmbG6CVS36hqHPJDbBjE2gjajVZXx3Lo53XzR8vsAtWUi9068ELexFUb\n9fitwiMJLlTxKSwXTRpGVzi/Cip3QoGie6kXCXFKtfLiLU2rxg62cT7nKbCu\nErY4fTNoC7FCnchpoA5b/3m9Cc1Te2b6x0VbG0FGlfkSZmL/mhJFVb8UfssL\nTrcV10JFrptP/b6twVbnh5JB/7M3zUVJTtu9XhLKNbG7eHddfTZrh0ApTphf\nrHzOc5bYdc82prcgT4YJ+9IjQJw7/zVM/YP5//Y/CMGo8zslLiW0e6n9A2vJ\n9L6fSQabpTohcG0JwYcRMyqyW9BEcGBiDU7gslB9J6xATVziSntEAOW3MdAX\nOKjbyMajDMG8M6W97wCR+8h0d/UO1zSAO5sdtb7/BmXafeTckKfFmOvTZWwQ\nVp0dOjLjxUc0rI95/RifZFNP8eRi5Dn0CRT31ojCC3fRyrQUMqWTwlHINWs3\nV2vq\r\n=Cobb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1112b8def.0","@material/base":"5.0.0-canary.1112b8def.0","@material/shape":"5.0.0-canary.1112b8def.0","@material/theme":"5.0.0-canary.1112b8def.0","@material/floating-label":"5.0.0-canary.1112b8def.0","@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.1112b8def.0_1578607851609_0.7542759281263756","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/notched-outline","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.aab102017.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8700800210e88e9c30fb1be2ebb2dd2bd336fdf8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.aab102017.0.tgz","fileCount":30,"integrity":"sha512-5mH9z+xGzlwWODiWYVX/AHhbXeMpc+CwAih8LddupYkBXWH6X+leQI/SDp5Mdzh1OjaJLfXPosOV76bwjHQxXg==","signatures":[{"sig":"MEQCICaVYD0haQhLWnFHeptyHIT0pDGUdX2fbikoGg9AYJ88AiBS0De1RW/qqy7o5eh5cAeS2/lAZv+CAgQ7OT0UHhtMmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8GFCRA9TVsSAnZWagAA/6AQAILoNz83hJ7UgyPYY7wF\n3D6wggTtH7FoxK6d42mmXyAPV90JvDMaxAW5kon0rrdERCG9y9h7Kj9Zoweg\nNcHgsDhMymJvqTAX7x91Edtz3nnKRRLCnottR0uQjUiO8QoxHaKxptGlETfD\nquRHcbnaXJjTa4V/Yxr+RItdBeDVtWUIXCpmzrIj3NMCWF8FFHVh0Om49YhS\ndRZ0qB/Sy4YO0eLmRQEkehPKux9N9bUHONW8Z3pSSOcYDh6oPQOb5jjJ8EsG\nNbe4ODJlLIFXYLJe7Oz3CJZAE5Ts0TQe9HHjN6Vjd+4dcNY1vnEeRbYzbF3a\n9wKMsc+JFGzUqv6bEo1pTPhsGMNKuyYTd/pTd8xG4ufBXtPCFT9EzjG6D3Hm\nnvKKQjXY9M81azm9k7e3Z20U9QBb6I5UkWIAfv2P92AN8vj7mq6RmFlKIc3L\n/wQOU778+nqViOHLBokwilwdcupGi4Loopvp93j8jETU7gW1ftEAuH1Rea5D\n0HmHFeK0W1k1CSxRjv1usodK2OQ92y4a7+AHiqROsdSp88z5CNMe1E/HPXwF\nk0ThxjMiq7/NLKQwpIO5Fm5amRFkYWwIe0phLqwrs25/XPYhQoD+xc/3vZo1\nRsLSs9GsQCVLZVcueaoMUefwtool6g075T5LjpWPMcTOuynHrVNA8jWP6Lt3\n2Y5s\r\n=k8Qv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.aab102017.0","@material/base":"5.0.0-canary.aab102017.0","@material/shape":"5.0.0-canary.aab102017.0","@material/theme":"5.0.0-canary.aab102017.0","@material/floating-label":"5.0.0-canary.aab102017.0","@material/feature-targeting":"5.0.0-canary.aab102017.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.aab102017.0_1578615173509_0.9002580105781357","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/notched-outline","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.426913342.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b74652f0d3df009f6a2bb62bad97f9eb60a9a867","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.426913342.0.tgz","fileCount":30,"integrity":"sha512-N4EiRCnVTsXB8WGL1iXN6ZMyAsJogf0Q06Clnp2RAGzb0SWs6/ndqQbg5yiifj0+t1Fo58xLhQc4HdLoVWBoVw==","signatures":[{"sig":"MEUCIHITiiEzRdZf4z0/8y64THqw+sU5ndFcGqdsAZZbcbV+AiEAyAz/bmqS2rmOTK9O6pnvWJln2NypcDH1ja0RNVDpnuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9cUCRA9TVsSAnZWagAAPJIQAJQHDDMgV1ylcEAGoxbE\n1IKnpAcpzDxnNNPa9CrAFBbd+V1D0zpU5GI0L3Gor/gQkfyVgr4aAfOzRkn3\najNAbCLl5Q8nEzEdP+bJcmpKwpwEFX79WzPluSpP4UznFKidodphs/YeZh0s\nfHQ5IjBUNg63HXDBgB1bZZuKi/GsoTkRvhjSYJ5oLyBJG47Jy30TlWHv9Yyz\nG+eylYWz4z95woeGUx8Zl+tZBX1E1sly9mxquXWGuYtAF7m4XGIt/5oK4mF1\n65ysS1g5nu9gqgjCZKkHxrqKpQSD1vtbfxX0/1RgDIEn+3NZvoCJ6X0+vfS2\nlrDG4v/yRjseD6xZyX87Rlf++Gj8sK+3Dgewrr1LXaPl071Htf67ye0dQbJ/\nzjQIErbRMGkYa71SGum4TYmSMa4JkIJs2X1LF0x7ETFsg94/aaPO0rQ/8iDI\njhIQ9xt7J/6H7pi5BkrdUzeYFALGFFnZBjF0dGtQDLRQ9h4DH+54fuV2JGdQ\n1Ntq4Xi0ZAOOJ9+/COmdsn37TdGzWK1mi+oxF+STlaJa25WEEtqiJ1XNkUAi\nzN9LY0ccjcjOrGacQUz1pBZ+P9+HcYe9+9pebqUYTEd7iky6pTLw1KKHno5k\nqY1GaXdCptGEIZkJn9Epl7Egu1nNPAcU4z/wmC1DlrhL3Zax1J115YMAsfWF\nVjSL\r\n=qRiy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.426913342.0","@material/base":"5.0.0-canary.426913342.0","@material/shape":"5.0.0-canary.426913342.0","@material/theme":"5.0.0-canary.426913342.0","@material/floating-label":"5.0.0-canary.426913342.0","@material/feature-targeting":"5.0.0-canary.426913342.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.426913342.0_1578620691731_0.8518416331296725","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/notched-outline","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.d4ea9a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf49b1a0d876750fdc11c5ab18af5effebc34879","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.d4ea9a706.0.tgz","fileCount":30,"integrity":"sha512-+0veu9g5SMxd28z/LABz8odtvnqRnirx+f0DwElAtSjDgtp/bivbpbRbWqwAfhH4GXWmSyOX6+xGcgnkDD+yUw==","signatures":[{"sig":"MEUCIQC7mCT+khU74rJtNwGvAPQ1Qlb6xFPdTalQNzporBn2MQIgVh2qYlfiUYZgbL+zXEHd9aaLll7HBXNJvkxwzcqte3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLOnCRA9TVsSAnZWagAA13kQAJHOJo4uHJCuNmc7yZue\n5gxnik7/dC6KU3p1lebyrqGJv2Zlp80tznlxzXhtrzbecPyQ848ayWP3CLev\n22PQnrBGCkkSHc1LCRdLOzIo0Dh02ntja1ABIQ5DqYMFT4IFhA5o0SzMtrZa\nV3I4vb4cdq67cEoneOzHNiK15LNM/wNMeWUAg4aEuz9ZqPsaRVQ8tkM/wlOF\nbplwc8SDJfStrhZ05ykePVSSRxjtdw0HhMlg9+0IdUZSau8RwHxb7SpdKgon\nX4rU0/yPUWq7dPFqPu+QLumcgFDfC0fGhfi9Ro4gSf5bWkrlNG7zClkjQeE7\nEm79vLid1CMaSuPd64IHH4f+RwduO7jN+KrwNj3d1Im0crgwpPtRX9eESvP3\n5htaogkjpEARPgzKpydcpBvH9guv91eKNgXRByWgKDqe2gfORew2bfEPUhiy\nt9PG8nehwJOUPfXeCwsqr9Nbr9dTokLU56vdfjhUoy2VoJ6dWXlWhHY2bsIn\nwk7VEs6EY0dOGMy2EqsXOjF+QseVMKBNM5QD0emvgMYs+5Fv7ea3jevPOztn\n9b7phu7zaked+nCbrFhk+fZaHYl1uT68IKorL5StzoCaw+G6F8uJEJG9S7Rd\nGJ0sHgUriLN+Zx3zSDcv7KdFD4+uvqfyEAOkLbqQgHA6tCCNW6izaAxg33KT\nqg1z\r\n=Ndqb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d4ea9a706.0","@material/base":"5.0.0-canary.d4ea9a706.0","@material/shape":"5.0.0-canary.d4ea9a706.0","@material/theme":"5.0.0-canary.d4ea9a706.0","@material/floating-label":"5.0.0-canary.d4ea9a706.0","@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.d4ea9a706.0_1578677158972_0.5785962685003363","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/notched-outline","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.7d4ee2996.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f480249c9355b9dbc81b13fdf46b3a801073dda2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.7d4ee2996.0.tgz","fileCount":30,"integrity":"sha512-RXlOX/ubegaJJXMWF3Al5cXBaxAFgaiJu09dI2Aorj6oE5AthP68I9Sk2E46meEVOJ5zt5ZqZISCvQYwvVtPXw==","signatures":[{"sig":"MEUCIC0XtytQYhETMYdyIXTofXuFPTHrGVJpxUzmxhQHAZIiAiEA/1P9BLxyXx4y/ho/1Cs5hdWm7LERFoV/qE3jaezbEPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLsICRA9TVsSAnZWagAAOeQQAIVSN9T9cuXnW/CFYc8q\nC54+592oK0K8kDbm2ArPZSZZdC0RhTM9rlHkUaII291i/FJ1AcKNohZZ3soy\nFXd64zk9Ta0AK7GhBpcsMNcZ+72i0auYqgmH94bOpFDK5yFL2ZXdK84a9gnC\nDJ5bba2aCM79tF/Hh2ap3ZIkhAYx+XDYd5uZ6e1Q1GDFOfAuXxF1iWbh5uDB\n8llfKGDKVJzKgvq/xBVnmkHtMapQNlRONtAot+z1puzL/7o5se2IaWdyu+b+\n19mQOokzZJwEojQhrSI7SUdmLH4EpwLGy0IL1H85Thywl3JoifkW8sGRWxHq\nPaf2g6eGvXTn91b5NM6p1HzqrkK+NL9l7HPBmoCPQdeWA9E4tsdCbDzepxBw\nKNNK024ws2Xg4nxLSMrDS7it7hd2ilBzq3SmpNg3eW9A6fxIVUv8nEP835d7\noAr0v2ivK/7K/IY+BzKXgnW+Wx5oyHlF+Hzcjnh5tG7swbAFUGqxPYYjaUdu\nDWC6NMdy2pY9sZ8l10CUxc1t2xSJV2QetKYbSPD2dNYGYQwNibcbUHOIMNep\nk3dnFNsg1936lYKlPE9+yPwBPfzcvoqLL/Rlol+f+Wjgl4NjUGh7JHKQ+27n\n8nbPOv92FoUxmYr6YHxQT5eni8LAy3bhbfDEIoWbnctIkmGFnNx2snCYANEg\nlrAT\r\n=0rR/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7d4ee2996.0","@material/base":"5.0.0-canary.7d4ee2996.0","@material/shape":"5.0.0-canary.7d4ee2996.0","@material/theme":"5.0.0-canary.7d4ee2996.0","@material/floating-label":"5.0.0-canary.7d4ee2996.0","@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.7d4ee2996.0_1578679048010_0.6168940943979311","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/notched-outline","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.981ec9b6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cae8de35521aca74bdd358973f06466acb15a86d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.981ec9b6f.0.tgz","fileCount":30,"integrity":"sha512-mdK/gidux26GQMl7n4qJ8+FSEO3PIEp/q0vfG1r9WGAIDFK+uS7G+Gwez7T07nt5oym2i6x9Bp84wEmKZB9bwA==","signatures":[{"sig":"MEQCIBPQMakl3tswpoPzdtO/4mUjfKf0wWE/V+tNWb2zp1dDAiAoW+0ikp4dL05Ud8CKkUL1he6gU7nRIkF6T25O0cjNKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGNAzCRA9TVsSAnZWagAASJgP/RDkdHnnsBSWDbgHSJsa\ngCKil3t8CLdVkth+lPOgg1aLNE3r8TNd9a51wcTFdluXrBbWSBIYERKA7C5p\nMXrylPQIZUufz2ql6pyDrmXYKUpNQ9OOcIeiwlPSmDPqrd+7Xi8cwSBgSFAK\nXnaJSgR6THjKjJXXDzevpThNMBlaHhDjWBLh5llbLEwosHkmnFfAhsbUEu56\ny3N/B8VrouTHl94dmxDIqhyL91TP1Y6eJdcD3fHMS56+YrZcauIHjo54vPNM\nWLER6TbVEBwElG0lPyAe+e8+qofui0SY3cE90U0Oikh6v5ukfIiyalTSf+LJ\nKK7wcd22hSofCgbWVp6Xx4zhwFZIxlk85Tnddr/Tbae4jKBBz/Hd587Mu90G\ntackuusO5e+nXtdGQZ+3LXU1HuxaKgr8N1plqoaVKgB+At/PWwIoKbjzVyZe\nQlVN9mO8LvQqdKas0g1vMnWPyZJDGzH6c6QXpD3czsfOAqE8rV9qupRS9iUe\nyCwCpiAHJ4perKeWWAwnADgOtdwFeZgyy3qQzGWq3Ivl6ciizlJXBTsh7ws/\nbRbz1SUNS9dZ6mngtqmygE1H+rDsWq8tFSnycZNc9rfdKKxZ4g2a1C5Juc7Z\nGDUutIWrGZoA7YoDoEiYpMYEeQKybPeQQrXTh/ScLkrxVWWagX7tAJxRng1u\n7dTk\r\n=gzi5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.981ec9b6f.0","@material/base":"5.0.0-canary.981ec9b6f.0","@material/shape":"5.0.0-canary.981ec9b6f.0","@material/theme":"5.0.0-canary.981ec9b6f.0","@material/floating-label":"5.0.0-canary.981ec9b6f.0","@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.981ec9b6f.0_1578684466585_0.8644378791267724","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/notched-outline","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.737da83fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12c28d60319792ad45a3bc7118ba1aa12e69e2a3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.737da83fc.0.tgz","fileCount":30,"integrity":"sha512-xyE0IEqd/DWLrTB2rb5TLklHCqljUdm0ytauHMZjVUlwM3Eapud5aoQZWFbFc2qisnBNgTRFTID4EaXgEE6BrQ==","signatures":[{"sig":"MEQCIE7rINTINdphGcHkQE0m5ZZv5na/bJjNiQtGQmff+1Y9AiAhGE3n3+ApT9ULnXWxrEpuuOPn/nMyf66zNAfqnFwjQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOpeCRA9TVsSAnZWagAAS/QP/AseHfF7lYOndM1y536B\nK+pqtkJ0i3/82riGY8/lnlcn6TOYq/w1wL5qAN9ILTMuZvBITtdfw4LJVfqe\nfdOnYyB/aJII7hAk5XntS+Un496xfJaYmOUUzra/Sbl8kXMI6+i5YbUq47Zt\nCx671k/BjH4PyiSv9rV17rrFNhxZOqgH1bTTONnsiizALvJAst3NWo1ZsGr9\nj5++nCU4DQ4wVv1MZyhCIOhgVw0ZiESEdg6XT3zrI0WAqVRO9QavPVb4h381\n7c+pdXtlgeiqgmiTciVViEqdZxesU1lBL1lbzm7PmXF9RiRJzrrYKXMSuh4R\nL4K/86jfj5mYay5MJCwAiWMOhFbnfokGPbnegAgwIokAL1MBwaqJ1UQu9J0P\nwau9YsdLO/I1wTYRWkvsz+9jVaYcJBK8srZUze98mPk5TH8yRh6SG2iLAWNm\n+xvfN7T0dA9T8hIm7IvlqQe6GkjiwululU2y7Dfj6LpU9trtHmcimjV/zVTw\n8M0Q2IvHc4Z5D5+aHNN4XiQVdz4Sd5mEjmfTkYCFOt8EpBjFMzW/Q2ZAR5gW\nVs8FPL/h2gU2ZZjVkgtSItCW2yI+bzV0jVK1EAPBBV+eGxEKqm/jt706mIJV\nJP7ocbAzhquXCLRqkgaB2bdi9xuT4GGuxBec+bdQz3jkZ9zNwCUK/4VHHNAJ\nLe7c\r\n=3Wah\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.737da83fc.0","@material/base":"5.0.0-canary.737da83fc.0","@material/shape":"5.0.0-canary.737da83fc.0","@material/theme":"5.0.0-canary.737da83fc.0","@material/floating-label":"5.0.0-canary.737da83fc.0","@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.737da83fc.0_1578691165858_0.4910554107513243","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/notched-outline","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.aca8e6c18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd309b8fb1c7ee7c06c16f85d42d0860ebd5726c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.aca8e6c18.0.tgz","fileCount":30,"integrity":"sha512-y4TI1LNRXS+QY/gMcqf7EEIIiq6QsDi2N1XcycPDKIjEHqXLtwfD++dnnngZPhNBSywI0lT3LCMds48Kl1g3pg==","signatures":[{"sig":"MEQCID6RthoM+2pS45V3ZY9P3QlRxyGL40MzypIuvdht4Sd4AiA6T5J6PWO2Y+AUulUud8ehvTNSQM1XO1JgW3oK3gaOnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMW9CRA9TVsSAnZWagAAu58P/2qW5gaC9biZXD8XL0Hg\nucnvILT3dJEEpTnEhn8fDfYdD9h4cjvWm4yRcFAiTemwlS70Ud464p92zOLS\n5QfdaAWof94Be1q2HzybT5+HO5D6i7zm/hLsPt6kqeZ+kTh4K/l67ViTXfkt\ntObr1UDBrOWTZnh+t5ciEKtZlMpkxsnEoheYpAV6+UWBsqJyQ+kzwmc611iH\nvnddwSZjvMQfamkllZcDgVBz4p7bWTF6YoWnhBeai1aLBZXqGUuG25cAmCwC\ngHpQhU15sgikLW9S+kWwOa1GbpB+T16j/7aViP9wFGHueGZ6kZlhq0IeYhmr\n0Z22clZafj1CriDzo+LJxyjQg0+LDeoQ5Pr+CKVgk3INxGm4NP3eFyVQx0Do\nRLlXE9IpVwaW3s1toOLvRxzimcAf86IQ8N5BrMr5xPFm9k3m7ZZ+6qVrhZTq\nOpp8YF8L6ehQkcuUaKgrNaOxsxHrEbj0H/jqrNHRjQc+MaGFdNovR/eYil6D\nfCnzoqnUqo746MXIBa3Uv7d1HYUhQKNJMG2o0bNr2Kien8MPvGAU89umjZNe\n0eZNaem1IT2rzgIr3v3LxxFca150mDfx+uLoNFAsoh8aD8V4KP4IK7eXQNEd\nP5H6apyvGzrbCOCELJNv44xkNNDzu+LEBQq3u+IHAaddRMcp2QrC0ZWtTIVW\nCVHj\r\n=vhZQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.aca8e6c18.0","@material/base":"5.0.0-canary.aca8e6c18.0","@material/shape":"5.0.0-canary.aca8e6c18.0","@material/theme":"5.0.0-canary.aca8e6c18.0","@material/floating-label":"5.0.0-canary.aca8e6c18.0","@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.aca8e6c18.0_1578943933203_0.9519813885014858","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/notched-outline","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.c38d84e21.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a16095a157120b64deb402bf59456f1ee97e535","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.c38d84e21.0.tgz","fileCount":30,"integrity":"sha512-rdCIigrHNDwlslbMgD1Nh7X1YXgXXPEVUVQm1aTHeJyFD552VzIXedSOwA/w0kWFBq8o7tBT5z78uo5bghpWcw==","signatures":[{"sig":"MEUCIQCYy3FWH9lP8mlw4ioQ7+3ywgfs1ItdRkdUpVjlxp1oDwIgEtiDfd3EYGUdR7s0cquHZ1yp778cI+AnaoU99beI184=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOu3CRA9TVsSAnZWagAAg58P/AsZ+p3joAq21ApdfT9J\njxYsWOdSLN4E/EsR/MFmRA6rjFEgI1xG9OHJyLlEqV1qlqQxhkQ2ZBvAPwdd\nVXN0XVaL3L3SGV2jgJKZIEZQ7pYDLYu/f0hhMd36llS9wt4qxYpipOkHYvpm\nlq4m/bZMBSj5vPTf1dJbpOaEgxFVQUaAhH25SGlaQXwr8fXO3E+WMBw6mCEd\nrHtPpwk4EyTKQgt9+fWhihsgr401zxW/rLboJbc0ZrgIxkkVoWbhs+54OAek\nURCaeQhCzBQELIAiQLHpKHyz39rXImd35DE9prXfQSLE1O/a/plI+HvvJKsn\nCcrnoZypzQf74jvEglbBCoykxXjmqOUka4FfpH04XhBUOWt8fDYDZtOJ8mnr\n7AFZT6G5eYvZ/f8IQzWsHZKKc5f/bXxFAHr9k5pBvfZUDX+MuAxS0BJpL2SX\nuG5r2S4cOQnmgA0spfkTH3G1XZqP1Utpa3fFIt8tnlavR66fGpd9QjLQ+kSB\nql/2S6JFHH8jUNVaFqTHfUu0CH8fOd2E3i4e6Zcj2dKngiL86svZW5510182\ngwbc68eeFy+agAzdHoS1MXuwoNIq8n+PCrdwDfKSuqoSMZuomAFgRrcDlPm1\n8fEzhoBNEU8k/+9vm0wj8Us6HeI7fmMzggGbATu8IAmxTvejhhD71szAKBZP\n0018\r\n=0cJC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c38d84e21.0","@material/base":"5.0.0-canary.c38d84e21.0","@material/shape":"5.0.0-canary.c38d84e21.0","@material/theme":"5.0.0-canary.c38d84e21.0","@material/floating-label":"5.0.0-canary.c38d84e21.0","@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.c38d84e21.0_1578953654658_0.7488798063726345","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/notched-outline","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.a4db5fbad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c0db104e178dc5ed29cc564476542e35cf8e544","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.a4db5fbad.0.tgz","fileCount":30,"integrity":"sha512-MbLk02msCwWZKrktbmdHkXGYJwblbIWHVnXYGEjf9AOp18YGKx3BPSxah1dBO/lTkP7mPlWkD3HvN210TkuTnQ==","signatures":[{"sig":"MEQCIC++JFZWHghjewJW5/F2r+8UzGRTCaM29E+gNkF0ikqsAiBx5kx9/WJfL2pfvpCOGUJDq7zCRrci7+qInufhEdx/7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSRbCRA9TVsSAnZWagAA8IcP/1rGJtMTupwPBygqWK+q\nJ9Z7NedpqB8DbpSH+o5ogrgsJ+gu94uZ52z8RzWebktIITSsMJtbucarf4ks\nW54T9/ysXzMbCgbM/LIJOkb1A1LXWWPhpIHzZUziynl3Ac/QCmXmIfvJVeUp\nrU/6VbMLjfulNv7HXgErTA4E01dqNUfAgC8ZZUlEug8zh32yZ7uCjzdLKxf7\n3rnYgqkx1M9N9H59VRcJ+WpD/METoh2lvp8yLMnzQNRnWDcuxawWgJuV4ZhU\nlK76+c7UXMwXGNHbT5Mb+vOkY6dmLPh+ToCm5CveANlmA0lXwJLtuAjVMlRn\ne9J4hJRypf2pXd+q/S8a4quLtDUJMavDJpjFdWlYEkKliR3froQF3RZr2JAy\naMdLGnT1YFh3dYiD2mK5g6yhjsKuf1KfsWHzEvYnVzd4P8Sxrbj/w4U+/enI\nPWtxpp6BPpZUDmZPL5u2NEFf35sIAgkoJGgqbfTyTfdDMb2TtBSkdpFvnwZu\nhPT9WWlZVUnJvppFd56KtvmSa/Z7VMxzW7w13se2LSisOSeG9nxiVxiIlJaU\nQEH2we8kU1XRCXEOPiGp7uLHEyLfhHZP6GBwpBvILqKxuk3rbKbkz/dfUL+0\n/ngqNmz9jDDpqZOWUJdbn/jrbrcjr51TdQqdoJnhZtYlkClsqUwcRhmKgYac\np0BT\r\n=RHeH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a4db5fbad.0","@material/base":"5.0.0-canary.a4db5fbad.0","@material/shape":"5.0.0-canary.a4db5fbad.0","@material/theme":"5.0.0-canary.a4db5fbad.0","@material/floating-label":"5.0.0-canary.a4db5fbad.0","@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.a4db5fbad.0_1578968155424_0.8027272424921479","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/notched-outline","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.faa9af310.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f08d7a91a03e78c8f3f447924c42737053d399fe","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.faa9af310.0.tgz","fileCount":33,"integrity":"sha512-DzqXHDAe7kWGjyK+/IbRoAD126LGlpDBo3O2c0Y/KHcRhEvSYgJCdk4E2UXrbe5js8OsQK/FRS/sxWF1ZQRTXQ==","signatures":[{"sig":"MEYCIQCLvEVhcB8UXbuQoCCOkGdPVINoRhA5YHmGwYSng2CFbAIhAOhThCHTi/ZfDKd3hgi+ahCBytoJRZn4W3S7VdJFmALv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfIlCRA9TVsSAnZWagAAMOcP/0Oe4ZsIyt3v3uXIvJRQ\nfOyiTPF1YzsrLKVdrdkFkYT3UnyQfd828K8QwaHXXUxrsS/0xU3VxQT6x8l7\nuTuwGQGBH59vt1qxTStXmggPTtAv9a7aRCJaPvfXilGFvwI/luFGFBS/gvZ3\nomOHk7HkkmTx1eY8MJuk/1vsW1+YaHJ8C+wjr9xINxp77ZsXaeTj7pvEDGde\nu0aJKU2tyRLyxZM1X+TA3pA/hvCEAP8SaAIN17PT4Q9pWe+Oe22y5utAoL5w\niwwMCskT8kt+gwVUtZAh24iTE2zNPYHDKKlOjjTL3i9uMvsE2Rxa5XIbKFpf\nRXdpCTE3k1m8JlnjQh3jyFY+u/SW1cNCj5VLEdNTbteg8IYd3fJBacl9Kxgn\nyDyqikQIiikUf5/rg6aMKGYGCSZZ25f67c7vluA83E3b2qn7EGJYnskAt+iK\nmAyZSvu6zfKAyvWfEpGqfnllOVy/SCVI88tDwEt0cLVZbGgHFgW51n/Gou4M\nR+Dy5amELByKFw/5FmbgzP7NX7pLfwxfDIUAqaFv4SqajjFydFYGcIBlYGkZ\ncQQHVfOTyWFH6pPr7nR+rGr5pK1OGZ/PWEd5JiY0BP+YGkiDngRJJ0OHvpzq\nLJFxMnr2PSwF0BbhsfXsSnRVkK7ZO3bT1ksCIfYHNVhLLlTJWixlQD7YWb/4\noL6w\r\n=uEbq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.faa9af310.0","@material/base":"5.0.0-canary.faa9af310.0","@material/shape":"5.0.0-canary.faa9af310.0","@material/theme":"5.0.0-canary.faa9af310.0","@material/floating-label":"5.0.0-canary.faa9af310.0","@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.faa9af310.0_1579020837526_0.2999831137851148","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/notched-outline","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.60354c577.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"309cadf96f6b8be26caf1a6202e991b38b9685a4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.60354c577.0.tgz","fileCount":33,"integrity":"sha512-d2U6+UjQ1N49/KTy2xm1U1A0MOoMTZmszue9rvFAeS8CoCEn7DT71pGvSWH98pte4F8HI3uy0FU9mUNc5g8+qA==","signatures":[{"sig":"MEUCIQD4m47SnoabKed6EVF/mS+DD7Mzp5BkNofHG0mFhCKYpAIgA5eSsBLsFr+n8abtogM/VMOOPPGsEKFgG20+AYC7spM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkTHCRA9TVsSAnZWagAAD3gP/217uhNfkomSDnL3hBjZ\nhXqbTib7hRf4dukIdxvYc+Llatdr42JJ/dJbVjB00zPfyJSrss5kF++nKvf5\nrNRwDcpuEAQq+++y/sIBfxUum3dp6bVPdI3sIGP39aaOb3PzEjQmWbRPz48N\nFwfWElkD0Pc3p4XTsVSxsnLsmvrM4HTgjSvotK/qAn0EboJtzTtY9f3sie/u\ndoU16fqL4n1W4w2jf2CuBsGd5l+0UeelICL/vAuydXgKospVd4AvWxAxWPjk\n9un2gpKNXDVct9X8Af00GXi2XxPsyn8LBwuscE332ps5sUA0KpKxHEAzirBl\nlc418oGUwjmOo3Okr2JOAjIMfU+ipDKCveMyYH12aECA9CZDSZEYbUXB0aqO\nGdvPv4HWNZAZi70Fp3CM2k/8KwNdjNBYVAXZeANFkAl+YwqUF+p4iOLCjzAt\npTsAeU1uKDgvUg/TJhBiSjSbPDdpRA3A3m3wu8lPFh4l/JvV5m14+m3hWAEu\npVcWOyXVaFE+JLt+qOeNwcvlMbarYCcX/blxoNtwpRU2HcJoI8CqH/rtBNxU\n1BQsBr+hpO0gCux02FbiVdipqk9XN4zvy1ySZx+abopmRn/bvbdv5586iIfD\n4sV9Lgo10W27f7hcBDDS2aw1S4KSW+gNirT3CYSRhZHOVJenFh9s3Pfw5MG8\n2pUa\r\n=F/R6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.60354c577.0","@material/base":"5.0.0-canary.60354c577.0","@material/shape":"5.0.0-canary.60354c577.0","@material/theme":"5.0.0-canary.60354c577.0","@material/floating-label":"5.0.0-canary.60354c577.0","@material/feature-targeting":"5.0.0-canary.60354c577.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.60354c577.0_1579041991487_0.6915059987948518","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/notched-outline","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.d07c78daa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f086ccd3fc9d029494bba677e05bf16701737a9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.d07c78daa.0.tgz","fileCount":33,"integrity":"sha512-gUqwfQsdUnKJ1aHNrmv5aHLPIt9ngocY6v2vdZA/+luUeX8ueSPt8DZQ1UFZjGwYSN2Bigk/yh09iI+/sMlTHg==","signatures":[{"sig":"MEUCIFT4xULuaveUaiZN5rWyj3sco/KwFL7aLFfCvWybeqC0AiEAmhXvGpVJd8sLestbNFeTB9GFuZUpr9kmdGks/9Rzh9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlEuCRA9TVsSAnZWagAAeYEP/3G2qvnCtorx6WnaukYy\nvOnxUuRXP11voONuzjJaS2sZJgTafxEOhJyoNkiM/2kg/12hN2ruJ0KykoCp\n6LXV+YybZtr3tx3m9YQ/FjPk5LvY2dO44XpgBcM8SF5FJfaRiQdGe6QzqQF0\nHysXQ70c2WhHOpdEZuixWonRaju9PuD4Dj2zwFHPg2cr2A1wUz2027dGtzqV\nFL8oR1K4pFMQrelbQ5YRiI6yubvuSYXj+KFGI9Wg5j/aQAxPqqVuanyzBJlj\nTt++D4z3TFXcAP/m8E3dtrYPDJ3Opq6rrRbd44QIKcNL3KhR3iSSPDcznZyl\nME3I97iPAiPxUpbzkc1exwjt9z2FexoFzN/P1Dzgj8l42u2Udq3tUhhtwIOX\nlNY+WcaaP976qoe+ky2aHvh10JS1Sd2JZ3IS9jPjW3Ypm4qvQN2J3s8Jov21\nQl+8AZlC+cjkCzW01/LDb8FNI9v4WrFGIBRijKFVH33Ntnh5hb0SKd81cbW1\n8K473QdGwZQvNgZIXcieNXw6pKkz1Tt8yoAFIDxVc1qLUmvmICbI1n28WA/Y\nn+rzayix91YGfBKwxkaJtPLLgRSOwQe6ioYz73OZwnDU54uGxBZjCvY98lp3\nPMQcF7zjy4unOPZ81LtaOPzbFfqWOZu8L43of3mwJp4ZEcfQzgYydQIP/9fb\nnZ/3\r\n=2LAE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d07c78daa.0","@material/base":"5.0.0-canary.d07c78daa.0","@material/shape":"5.0.0-canary.d07c78daa.0","@material/theme":"5.0.0-canary.d07c78daa.0","@material/floating-label":"5.0.0-canary.d07c78daa.0","@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.d07c78daa.0_1579045166395_0.382997222584859","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/notched-outline","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.8ddd5c6dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"948164795ba6d6433ea0ec6992619b939dd37249","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":33,"integrity":"sha512-EKc1trzIWNAsLJPH/ea7k7TREcolmi4SBUny42j4mdCaebF5pL3xCyGq2g8G+mU0gvmGHQx/yv0N8RRwT1mNog==","signatures":[{"sig":"MEQCIGdy2RiD6b6M1c1o5JBY4luEYGnj4+t/Eucl+jRJiahsAiB1XXUyC1zlrCH3TdmJFnAO29Lvd/mUlgbCMTDSkPZ6GQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm5LCRA9TVsSAnZWagAAVucP/2oEeDZPJhrOBHyfC4FL\nm31xKnvY3sVGoTgMwezwGXuHGCXkmct/b9RYzzmxQ4NtEvrW/qLf1szXzAsU\nQviU3ADp/D9PfyIrsTwZ+0MC9If7IoNf1xd1HNv7mGvlisVxDzYBAFVhlpo4\n5H1lC0cs9RBTbzdaglKkraVy2ryAVcpFeQgkTV1GW9d+kQpQQ211dV4MRXmx\nSlZSR74F64e/JgSGB1drRIpwoHD7vThNIPVh8kbAfIh+anzzdTB/CrOR9tQw\n9wkmaCJ/hdSTzcTkQyjiKc0eUv5IiNuSSWbC7MwziFJ92QqT95Unz7XdAk2H\njWlWr7rTyXDA7ocPmzQqlSSbipe8fS5d9hTvz2AoArtJANNUCf28mzSuDslo\naUw/Hs+X2M48cdiLOt/UctT2rxEFqyD5x6GgzBOSq6nTPBhPABc5JR3tWkHI\nQujd1BP32LPSDWlZfb48vfVhb5tta5pZO5+oWZqG902n14/eDnlc2A6SCxuG\nFq2Rj1NLgG7ObCyMBkEbP0G4xxtDNSsUir8au4sjxx930c/ZjgOHKUww0y1X\nBvXC1/bnsHnpjf5aExmjzezMOWf7kfb+vq6lprqVrsKXSixeFrZi6BjjXmnw\nHfF++3empn6NFQ/r9bYRCYieISbcI0HvLh90iAUfgc3ACRihJS6fYODd2Obc\njFxo\r\n=M0B+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.8ddd5c6dc.0","@material/base":"5.0.0-canary.8ddd5c6dc.0","@material/shape":"5.0.0-canary.8ddd5c6dc.0","@material/theme":"5.0.0-canary.8ddd5c6dc.0","@material/floating-label":"5.0.0-canary.8ddd5c6dc.0","@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.8ddd5c6dc.0_1579052618223_0.9092324471561164","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/notched-outline","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.a9511d870.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9421c549a1317f00881296fc227b2c6f47ba5c70","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.a9511d870.0.tgz","fileCount":33,"integrity":"sha512-FbzjK0Oy+ArYMeXHfbbgoJglnFdHwzDb9NfuodPycc0obV5cpmRaSOJTh7DVgMINDO1ocFrlYuFiHLqVNl9Tzg==","signatures":[{"sig":"MEQCIGIIJsjSKJRNyvZf4gMTQmgzTszMVW2NAQDBovmmvC0bAiAppN1g9X+gesFLuBDCr9/8spSQnSDcYQcb2jodKFg4Yw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2PBCRA9TVsSAnZWagAArqQP/1XHfNvcYspVk/n2HWus\n/iumeMqwB8+UTvoL5ZzzU5WofwjIipQW9Fdo2YGsHg9TEepCXAoWQycIoNkZ\nBN84CUi7Tba4hAzXdKh7HAx8l1pvds+1eJP2iCk2dZhD3BlhmM63g1ZJ/LnN\nXJCtgcmJ6IZXj0PyN+FoKQWbM0unNv54E/q+ZjBqznC+8UETnIZ7dsZ8li09\nbsLilzkYGXlH2VJ8YHf/Bz+kjDfmcpyZZcoKuPELXQfbzUSf9mWPDIfD/zen\nyzzz+0CIE0qMX+10UbV1vgherzN2envwqBB9PP8gftL2toj5Q5suzMiQMF6H\nBivi9C++eNeUbRpeNHqc38uQ1y3idlamX7Y8/RnPqlp6ny50Jw0pVBt5hEQ9\nDN2mxbXj3ufc4CD2jpId5ZIvvKLFCWLX/+Op6zs/ogHPiJ+kawSNKXp7K1gc\n5e4LuFeGb1CJRSPugxd6Nfcuzw+OEKMcCeRzIk8skXoSFWZG6bGp2ZePpgqE\nkP1PDb7o7QXDOj8YLvWv4DVhrvjZ8q020XJK406ny+Ae3UWrW965MK+I22ik\nyvzTf8mnJbdN2LGQM2Iq8dh1b+xRXeCqvAvKsITPvitKKGhuEYx3EDd/0zUx\nJDUTgRLtZ6tbem9SSQEliRZ2gQC9xai+GJsxxl992HV6D6sLweT2vBipPWB3\nNN3v\r\n=+OJn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a9511d870.0","@material/base":"5.0.0-canary.a9511d870.0","@material/shape":"5.0.0-canary.a9511d870.0","@material/theme":"5.0.0-canary.a9511d870.0","@material/floating-label":"5.0.0-canary.a9511d870.0","@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.a9511d870.0_1579115456713_0.09955332438521847","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/notched-outline","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.7c8583c4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f229cb5fc68dbd17881d72b95adf53ec3e6b2974","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.7c8583c4c.0.tgz","fileCount":33,"integrity":"sha512-L59YjPf9pPBbwzpl6R+t+bV2iZJE7d2aydyeVHMsW0jNDnA9e2Tynan6+j9cFUSGvmwBwICCnNRUe7kvJ4doqA==","signatures":[{"sig":"MEUCIHbC5pI9mCgUC5UCAdCt9kJMQOG3KNMVXn1BrWyzCcesAiEAyMqVT8as2O002QFdLR0hVnCoYJlM7Df/ye1KeyLT/O4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5apCRA9TVsSAnZWagAA6iMQAJNDUddffFxtZ3Rl09nH\nu0uxgdxQQPMviBv/vK0tB8r3d09cfnF0VQs96aZRIgqc8uFkXWoQrbznpwud\nPuRZZ9Sve/5cHjWIMfJvpzQXmqezQXH5P7GrvFZ0jpJBq7/gGQHcvmW5n+9n\nh2UawfhkT4NlYu1pTZ2Mp8YeC/DuBldQ4Z1g7JMLbEkkD4xcM6xOt75QoDCa\nXJ/GKXgQCTaMBLV+yv19m6Mb6P5gk0FoFkOFM13aywdfCpEhBGoF3tFXSjoA\npSGBLFisNyB2xxbM+KQH6i9TTheo47HpsshnqVCRavdWOiSsSWE6vfGuxBU+\nHVYwCjUYSAYQpWzzR1A6viNYazQaRRvktnPiMj+KrzWWzqgMu9aGbjL/ISfS\neUwF9xTIMNzwOfhMgNyChE7TFclMBbxRbbu/j1thfj3TY48ofXY6wPI5B40G\nm9GixstoDBokZkyxqfDQEG/wTIDn7cdFp7YuKjJtV9z2ZTLYxzMW7y+hf311\nYEkCb9Or98F5QUhmX4P85QYBUhjGlvOIsC6IP+6hp942O8mWHX3RYLNoXZv/\nAvjUnb+uTEDBltwpZ0HhD5PgUZZGVicV7dtNsEEKjNZWFpBrX0GSlW4yuIwi\n1PC1UqffYFUVhb7cXCVY/h+UOMlMjH1j2DO6l5KozkK3s9yQ4CB0mbrqSDUe\nk9ps\r\n=bgVw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7c8583c4c.0","@material/base":"5.0.0-canary.7c8583c4c.0","@material/shape":"5.0.0-canary.7c8583c4c.0","@material/theme":"5.0.0-canary.7c8583c4c.0","@material/floating-label":"5.0.0-canary.7c8583c4c.0","@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.7c8583c4c.0_1579128488813_0.8967674130127008","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/notched-outline","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.5d4b82bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1655f9908a266cc18f164066065af8a2d96008c0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.5d4b82bac.0.tgz","fileCount":33,"integrity":"sha512-nwjQymc4maJLe64UrAt8NyCTsnoWgfnYxxOOPreQBqD3CTgoOTwGK/NRTfY13rRYvT3LltZekab+HmAauEDlbg==","signatures":[{"sig":"MEUCIQC6wu7o9yzozm/Kt4a0QAklmsrqSDIpF+a6ZS+vGU7EJAIgI/Ow91oq4NOuAMvcyqF+TBwfh8ydbklAhS8YRE56hpE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5bbCRA9TVsSAnZWagAAueIQAKQBcR599VOL7smuy5Ff\nC99nlRHAX84CYBwf6bF4Rkt7j7r1ybpgdG6zteap8oXm4/DKiXdabz7W3ELD\nh/MSbWYBtUN/ys5TKL3CZd5/KgQtNzk+9b4EeQpAeNggXtkGrWJ0844VPbnG\niHwYytOXyph66ANQOXee39plnIinIsW1jlY0DXDmSj2RUzx4+DPA6SvjtfjY\nH2b+wlDj+f78SdvdraQZk7ZTydRmY30kEDBZia5P97yK+iWj38XCMzQPb0s7\nxIOo40GEgMeNWvmyau1JpqAvXlbcU7Ibyif0kh61PHjYMKM1aAmTlqeoPBm2\nZgZEqbMH16SCW8aoyIhtWC4+QWs3RRzk1XloIvloDUSkyEdx8D7+V9RS7/KM\nEmXslcPdg3XppCTWL1uKt74C6mHp1CwhaH2izFeEfWvYdK6Zzwl1XCP+xd0p\nFBJt8CO0IfNPUVEuc+BOw4vrDs+uvsm97+1K6hLMKVseBp/I1HPJkaP7DNjL\nnUgqxmN3lkbBDvdu3R/NgPJPQcBiyRTRqc65Wai/78e5DoFhCnGkhwS/ZgXm\nGBzemNabJIfCyjepejSEyaQemPGjyN8zYs3o+HPlkZbD0XlzYBMIRlT5CxJr\nIFqSox5pkjk/fYo/a1VxV9Nlu7+FRonKu/6iuNO8GjJvGEUBCoAloZh9G0cY\nTMyd\r\n=Ig6n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5d4b82bac.0","@material/base":"5.0.0-canary.5d4b82bac.0","@material/shape":"5.0.0-canary.5d4b82bac.0","@material/theme":"5.0.0-canary.5d4b82bac.0","@material/floating-label":"5.0.0-canary.5d4b82bac.0","@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.5d4b82bac.0_1579128539060_0.9241242133981125","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/notched-outline","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.57d0186e4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aeee7888dfa3180995f0b7dd28ff8c405b7c7bb4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.57d0186e4.0.tgz","fileCount":33,"integrity":"sha512-S1BzgvZxU1eYTBEgPjoOx+klXLBHhtDm1+imnJZWnEmcbekfaWJwh8zv2dqGQuH8VT4ado21H1LVu9remf94NA==","signatures":[{"sig":"MEYCIQD7j0DsD1iv/KzW6esMoETgSM+zXMTwNwK1XFBHW7RzRwIhAN4fu2nBI3rPoJARpY5wKhrMxEBOnO+PfIgZpeFtFSnZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKjcCRA9TVsSAnZWagAAD1UP+gJwEVq/3NoE9AYCxuxS\nG09GEHULcUrXz7/e/sCPdZi9ia5Gp2gPk4cLUTUGblrELTfWzfiSY/6BpShg\nEYClr/H5Hu26qIUI+oQcNKq4adjAUV+A2lEQfNbY3ayJPnME6P3VkGlMk7uG\nHE5x17cFfY9nPl38RFVp8MyvmF6QNg7+8TGBnhO0lskhV+tV9dHt8Aq8XQIN\n4uQA3Pic928Et6iTQRSZysOJnXxdtMRSfYgSKzqNdNPJDb6FKNQsAVmByJa0\n6R6KFKgMqUppSFK4y/Cv1wf+4xi4O9yP+6LIM1L6gHkwbPciMzV+4sHnGq9J\n6E2gDmS06IhNAc4rJOvhLGFYdtob6rg6z/1JoL0pilCApHwTnHGJ1H4i+Inl\nnRACcR4spG2L48GVHLLxmBar3rMi6eVFYi+oxHzGQFqiMW/Ch1mC0PjlZ7JH\nZromDuFi5ldmAlxAaf29ZJlrrfvjDjri283q+pfXL9HXoEtB+o5VkdNjGxAp\nwXJ/PKRg58uc/AARiFn7o89SGzrnZ2BAxZ4a531eN3VIxiU8pqpt4MySrZIe\ntBtPJALgFxQFhLElZ2T1BCfZt6P1VVjn/Ast+d4s4fn/OmB4vA4Bu0Anw73M\nVYjxP8tTX/NwqczI3Ysm2HgTwpwcKX+SP4ie3GVYrUYxGISwyA7NRML0y2FR\nwHro\r\n=emKe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.57d0186e4.0","@material/base":"5.0.0-canary.57d0186e4.0","@material/shape":"5.0.0-canary.57d0186e4.0","@material/theme":"5.0.0-canary.57d0186e4.0","@material/floating-label":"5.0.0-canary.57d0186e4.0","@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.57d0186e4.0_1579198683503_0.6545625268952449","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/notched-outline","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.071a6ab70.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb16f468e5c116e891b58bc569fd68981a594f86","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.071a6ab70.0.tgz","fileCount":33,"integrity":"sha512-k4KeS+N1OP55ulA2kV+qsVp9xkBLqmQGQyLNChxuOwy8c+RRoCSKbFqjRdeSmkUCJ9ki2UoXCV4KuTuL8Pr0zA==","signatures":[{"sig":"MEUCIQCmHJlWH5M9KPohfoSQKlNn9vLst53UZI+EHfmiBLBfTAIgag+dveIP4aXuyWfkd0yHWKTr4Pd0apfoaPpdvGYam/I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKpnCRA9TVsSAnZWagAA5hoP/jRVeEU4Kp7wBr6/Ktfm\nL/1OTCz8a8ubPmswxz2Rs5bsiUELMhKaUgy9MJEnVCmzVK7Xtf1cky9fRapi\nAWxf6Upb5UQMXZxcRQB0fXGFSHFMe4Q4wFTbmfWLmkIqM3BLKmpkTfcgU/b8\nRT3ddJC39C98Y72UE1VHm1cRc6FV1bUWxrtzUqznf3nBDPvyx7b2uoEFEcU9\nIvKvp/EhQGhY4/1y7BV8kW1V+qwGms9gR1HVz1w7xDtcRidbZ4BKdSmG8Bc2\njFoJboYqDmiXWw94mnHSRLnv0kRkDAmOnzGh7SXxDTyWVRGWKcs02rVASp4I\np6j4Yjry+l7QXpU6zZ0HEtIASuYDkbMZRWf+GTtV8Ku8zJzRC8v0m2BLc6jw\nANpjHpk2obBIJ9yyR8DuPmIdR3JmznW9rolB1wwNS6ZyRN6fRaH4DgC0xvPv\nBeVQpQrnw3jdROcJkxKgpDtDPuL0Buu/NsrzEDhht+fS+05D3OLZXhJFvAYL\nfEGFKzty+VVf0hMNNrLNHhUv6hhMT9w2fG8V92D6dEOOsIN+lttAiyScRrhe\nbxQdOVhf82+kJ5HcozhGEZ56DpCUmdxPoBwqoHjLUzQXwevxP+tdUDGWXgq3\nhnwxl0dnQ7oxOm5lm+a/QmC1sFbsnyHB8Ald2Kvf2ymZlZpXClOG8FmSWglp\n0Yre\r\n=/t6z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.071a6ab70.0","@material/base":"5.0.0-canary.071a6ab70.0","@material/shape":"5.0.0-canary.071a6ab70.0","@material/theme":"5.0.0-canary.071a6ab70.0","@material/floating-label":"5.0.0-canary.071a6ab70.0","@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.071a6ab70.0_1579199079530_0.44187136865432786","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/notched-outline","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.22e0cb618.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16bd9127ef7a607a927f038fd5f398f4cd5fd60f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.22e0cb618.0.tgz","fileCount":33,"integrity":"sha512-viH7WrSom/6xdTa2Tf050Rpj3NLpAwOV+oNtPN3hT9tHRYHno3WqcgH39shjRcBsXwekyBHVW0casQZUxT3Dxw==","signatures":[{"sig":"MEUCIQD+Rmsg4y4RC1qdvxIG2tGx93+AQpqbWApGRl0Yl+kywwIgCjG+YcRymP4Ck7mvo+bcVAukQ5PiCJVewZFdsdvmfXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK/ICRA9TVsSAnZWagAAIuMP/28SwKLPjbBxojJ1QKes\nOt0hDhEQ6HLMQwL8S86GqqLIkmo+jBI5xVxoGPvAR4IrgCJbRAP9s+abO14n\nJ5srEc+eOr8vIjC5tC6Q8gLhw1VQt9BK5wmMIywuVILOQQfNlo5gb4osshxu\nBfQOkRO/QMOYJdAOGDZ/GMVZDH7yBI4NmQmWw9ugsfJ/E87bBJFzU6tPRxVH\nq49gby/uDF3j9cWqyWYfo3IMfn6NhRoHHXgb+2OXvmMeavqYfVaz2QXgobcx\nfRjOLJI5GyoVD36hgZwURSO1ED0CMaTd5gjWBO5Pof3rdlwK4CACuvXwL6Ts\n8UMlokkqi7FfjVOgVIxb6Gt+xe1MsmgOkNrTnOr+6iJ3MOvY8dkOAdRqPfCD\niVmjJ3jIlGcoUbUjkQiZny7HHizmjX50JCY5n0IaHAR+oW0OFeTfmm0vr6z4\ndVN39kSsJsWEyMLzKO1kZim3Hx+GkoKLiXtnUxWKBIqe+vvrQaEJRSqh8nUa\n5gMEQaQ30MQ7piC3SO3T5fP0j1suoe1zx8uMbmXRvYpCNsBscMP6+VM32Fip\n6KD7O+4dWLzcgEXd2rpr/uSVVp3l6T/OCe3PEeGEjMCZD7Mec6TtX9O8xT9c\n9tFJoq3Vek3KJ97kYd68GOW4gQEqTLMAGn1lFdaQ7ZPKhLNc3ZK4gWHXsr1S\nvAau\r\n=dwCb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.22e0cb618.0","@material/base":"5.0.0-canary.22e0cb618.0","@material/shape":"5.0.0-canary.22e0cb618.0","@material/theme":"5.0.0-canary.22e0cb618.0","@material/floating-label":"5.0.0-canary.22e0cb618.0","@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.22e0cb618.0_1579200455553_0.0708299976940383","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/notched-outline","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.f16f15b8f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a673746efea3a0d212a104003460a9a5e047306","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.f16f15b8f.0.tgz","fileCount":33,"integrity":"sha512-C7ebs7fCQQzhYkiRi64SiEQC0WrYrYHWGl6NWgE3ehFir/bUlRazfvHWbs/Apjvwxj6VXt5M32AW2U2l+p09Uw==","signatures":[{"sig":"MEUCIQCnnxlkDqrGE9xdISm08zBClraCxgRdJVT1cjd8Fmu/xgIgMikAzS+xvU2QUdLjbuGwWOzPBeVB1+teJrt5MsIuxdM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPrSCRA9TVsSAnZWagAAj8EP/RVxTJssfoD+jHxCLEYW\nrf0HHSkYLYKoteZUJdHYGdWywIUdS9+UVdAeuznGFSxKDZNN1Tw2WLBnvc9K\no9b4D0SynefvKpCTgSNUbEjBe43/UjQBA0ijJM+JCSSxKlcClwSRgUSx5SUL\nPebJcTC/FXvnK8PeJd/Ww8zGhqKg129EoSkLwjWYjozbNLJmSIXziuczBZ4y\nv+SP5WUAIVyThr4bgtzLs2/q8JxuaEoY9gZU5fO+ilVY08cnPX0bdWji19QB\nMWG6FztDuD2ACpQRdhRKgKmgarSoDf+/rCFF9MtgknOanxIG1NYzyPPzfeGI\nQfnNOJpVlMfH0bPUxMtQPrV2lz/VJBqGwsfZg8i/P5GlHE2e05mzk/PzyVBv\nVuuEJKyzf76U8f1qO87EORpWBlEe8Q171GIRdxS1oCl4R3xq6NEGaGrjJTIu\n8cn5atLWgY8WY1dZNRpmLq04OTAMcqkg8HrO2rPU2mSC8B5aCgj/NSy/2GEM\nUa2Qe/sx7joT1wI35hcAG0fR4+gAXavfRAZWyD7ucn4kymZSR2AgYhqFFs2t\naQZ5oilAwDXXzZkoa7UXxsAzJBrfkzYAAIXt9IpuTZr8AAs5/3dpnjbc5nu0\nPR6TCLNn0HvkDJgw6doWH3nktoa0+XggnchNISi+q9HbNWx0V22E96oNVxMo\nmgL7\r\n=r5Ys\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f16f15b8f.0","@material/base":"5.0.0-canary.f16f15b8f.0","@material/shape":"5.0.0-canary.f16f15b8f.0","@material/theme":"5.0.0-canary.f16f15b8f.0","@material/floating-label":"5.0.0-canary.f16f15b8f.0","@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.f16f15b8f.0_1579219666062_0.08404974053331915","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/notched-outline","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.aa8e43e9a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed5aee3eb8af29bc1e9f1a7d47608a3d15ec97db","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":33,"integrity":"sha512-L66dmlmsIseKajSqUOJOuRwBn8FqoTI1OQ2lUu1IMzeMgpPuAUd/9+XcirqMjA6SwYg0J+Jd1/E3vTSdU6qWtQ==","signatures":[{"sig":"MEUCIHNC/0e/gmryPK8kmpCl+l+Q7PjKzu4R0DmCf3SRsPj+AiEAh6Tr5tlDr/JIOrpQTIB/YyeXVJZ0g3F002vNXz36x18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQG9CRA9TVsSAnZWagAABcwP/iOPHmprAaKaIONM24GA\ns6PF1GGGfMKRj6rmMB5A5UV+gX2M7crLLH0ss1p4qm42uuYKZBhFdvQDzem6\ncSzDQ1JgT04f68MfzjSkKEcSuAVDfQ0o9mdJrdhk8XZdO4jJXOxcC+/i78+x\nHAqbmAN82g5SZ/dnVdjtRzAOgr70+6hr9huLl3MCJDPS6YslznInFdW1fbNn\nT1L3Fmmu7fn7etnk/VgjvyHeaaVweDuI50llqCPPk8M2V1LOIuDXIKseS56r\ni0jdDGZf+VTSI3RQpKjNmLNeobA+7bZL2HlhHwkkjqARWJK+vtc9dujNXNUB\nZn4fkuHUuqOGuRsFN4rRfZmUWzMxYSK9D1++mAkvjglJHsGc+2QuTorDDrXE\nAYnOn+TH6Z76F3dWVWWHli/dz1cVNaSXP5O5aM/BEecktuvOocYWj07+9eTq\n25mxWGSpMLJMtNsZyPj0zvfrlWUHUajip6h+KeZQA6ImGCVb3Cfqz6t3n6wU\n5K5mD0mJy59sSNH803tbe/tCHOJmivlnQ6KlVBV8sozV7b7uB3IcDAo7EClD\nG7nBkMlkRbeYmGD5hiMjrzTO0I+0h2vLBjdr6NQYTJUdH/ntCYKd6AgCPCs4\nqM2QUvxER1JYoEqwEB5rSMvsLIwNyhFd/wCwtiB7TstfZtAKv/rVxq+aY/pn\nWCY5\r\n=Pyql\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.aa8e43e9a.0","@material/base":"5.0.0-canary.aa8e43e9a.0","@material/shape":"5.0.0-canary.aa8e43e9a.0","@material/theme":"5.0.0-canary.aa8e43e9a.0","@material/floating-label":"5.0.0-canary.aa8e43e9a.0","@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.aa8e43e9a.0_1579221437492_0.5224933615739207","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/notched-outline","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.fe1f3ca07.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1290649835c69ee6da302c6eeb269ce35235c5cd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":33,"integrity":"sha512-N9jxgeIk+3mV56RSIc/hGBUfUiy/lpCzMgMzdNzJlxfViIVlCzcHnr03rqQ/YDyN8Bi6WrfTTf8er7e775Cfuw==","signatures":[{"sig":"MEQCICO3+9DAChMqg7ZnAO3kO/BeMZtrkIS6XOkhkGfmc1aDAiBsIawkBHpZTetnrmXlZboeG4DznqThdwuxHbnLfR2AtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQdHCRA9TVsSAnZWagAA5k8P/Rn1WyIT0hfYzxu7/hq0\ncPZf+bDyE+gX/QZ7TLl5owe3/Q2/3LSrbqT0+FluZ/r433byshWahrIY3oGk\n5CMeN46V2OGm6dRrmk9hUn2vWCs0vHfER7Gi3cbyYDT6ba/bZCc9HqWpE3JW\ndXSKawAmRI9AlfoDCY+4T1wS30MSPajpg6ToC7tUAwN6VXqbOX0pDGJDWu5P\nevjeX96+LlBIN2uJXyUVwYQLY0jQf6h6PsDINBeCAOg9MUQs/4wzE32vs5r+\nh/jQMlQ68+oESoVa+8Z9RRepZWTgdBFLCFUnnuoSFN55FoDFOmh1CSYP2JgZ\nydV7kxv80lMvCrkehdAZH2yUa3atja7MD/GlJjNhvI6H7t2hUFlgwrHcVVYf\nIQy0kri2U/Prv2PsA/rQYHaFJ4vl59YuaOPpd56vCvZxNavHdHPpAIu1KYFl\ng/6CzDKbwHDeUsGOvqKtYve0V6SxMdYwUiZGFw/9SogY3YAB1AzZKKnCTPPD\nlhx/Rc1ODIYmZIsjaOPKTN02ZSOhxirj2MP5mBbXlpu2QGiQWv3Sv+um/EQ8\nXmwD4/hL0VyNFW9WFw2qKXcm6t4b3oBiV2SVFSvd+MBSZlGfMaAWnGUwQYIS\nR5/Wrwe+jul7EbYZuDtUNirQKhSKykzkcW+sUf7XwAABcizROzLfaT1c1P1u\ntjv5\r\n=50sf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.fe1f3ca07.0","@material/base":"5.0.0-canary.fe1f3ca07.0","@material/shape":"5.0.0-canary.fe1f3ca07.0","@material/theme":"5.0.0-canary.fe1f3ca07.0","@material/floating-label":"5.0.0-canary.fe1f3ca07.0","@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.fe1f3ca07.0_1579222855235_0.899522277167975","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/notched-outline","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.d405af26b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43133fad109df360a09bd8a32e2008f5de90afa2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.d405af26b.0.tgz","fileCount":33,"integrity":"sha512-nWJ/6DnzdEhQyA4Djy8WHlkR7S1GL8ufJofML6TyFewkBqFA6VQM2IH8p10awPFufyFmv/bqZpySzKgkVHHj2w==","signatures":[{"sig":"MEUCIQC53f/tJBqheGg1MP5tFvpYW+tPCSdZ/nD4TobfyyAmXwIgcii4uxF7USsFqwX6rcd0yBB+Z+/RpF7n+Z8sqYw5KRw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfpVCRA9TVsSAnZWagAAGaQP/3/BUquAh0eqYAWLyfyS\nFxAuPeTva/OtvWXtnXzEsj1+3DUZXyyjA+JFvyPeF7RTa9QjhAEIGeH0KSuq\n0/3d2x8waS5H9kY5P5ZvMhQ4w+pVJ0T6NwHqQPGsf/ehMusDtLS0BeFnCq16\nYBgqLgUBcDO/abEkZC7amn2XgyQyjhA0y9coX7VSWonVxfcY+5jzI+h/8Kpe\nOykBOQ0uPEedUZnD9TOW+TlKvoTheJfdzXk/wvzTanqJU70dbqhX3Q6SO7Tx\nznFPvBu8eVTXMwqxCReVT5O8Wym1WYXANlFkrmWZU/Rypfd5pGUtNxmHHBbN\naScFptYrFG1W0Bb4AAQzcuMwanAe8db13FYetKHVogkHJJtxDLukM1UrK9Ub\n/Qdl1S2nsJst3l4TdEJiUdA7xXkc62iCX6h0MdIJSQRjwpx/thi4UMkAs4ax\nJHgIXJNSPt1+Y6eqhP8ydQBtlTEA4YAhW1ovcyRYzz7AEYOAdtUdRvtudEzJ\nHmMqAKnye4VlvFKhGVT0oczB+IjTg6XtF0CmZskYWjUs5tCCSD44g5uA3rKU\nC88tstQ0sLMVUTlLOd5mhg9L1NXfSuo0cZjrmKHYrlhn5JoFG0cjTQUHIgXi\nYsl3tUoqSAhusRMZIeEYD532BntiFWQzcCzFWoQn4QVyjCsHlgElMyDO8ggk\nO35H\r\n=TO8C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d405af26b.0","@material/base":"5.0.0-canary.d405af26b.0","@material/shape":"5.0.0-canary.d405af26b.0","@material/theme":"5.0.0-canary.d405af26b.0","@material/floating-label":"5.0.0-canary.d405af26b.0","@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.d405af26b.0_1579285077347_0.40068544009281637","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/notched-outline","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.6e857aae2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e06713d4cb07d182a79a9958ef35a34b7ccfea8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.6e857aae2.0.tgz","fileCount":33,"integrity":"sha512-rolvzltqoE0p4bnp2Yt0gn/qMQwgBt9wsN2m3f4mI29zN5hlxe25TXgrXl7XLRiwXvi3yqNdFsKYm3JObRPhjg==","signatures":[{"sig":"MEQCIG5DdQdwxZiBfu6UIK5LhdL2O8sDkMTgMPew4NwvPm/kAiBW89Dt3E6ZAmmLw566Z77mCdSyDnWQrWDsWv0NVydzqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfsfCRA9TVsSAnZWagAAEH8QAI+N+QhqX8duMLaffZ/f\nLdJbZyNHRhMfDBJohZL9431jH3JqEsN97JvrlyYVgxJl3BYbnWAnkCv1QphD\n3IZ+x1sUL4WUleWTyIopUI71U6yPenatnVnjRtM0hBfJpbe0PFPihv1+klUL\nUpIdevqJvhnk7rFToJ33/mPTpvTVenij8kTnVrTEZw5THclL4sCQAoIlWOt2\n4lkmX/VzhLZZRztjpvX1xN0+lumgcInjDApFr0sP8QKDSbK2uFVIYn6LIg4X\ndByMK4s2bLYLGGV6Wd7xIHFQ/KNYabtq5g7B9RPLOUglaKP25lovHff0Y75c\n6LJpI4+0ffeT2iF/uYhjZo711UyZIFSugACJe0c4dGOeRg6ejC0lfJzAXExO\nN1aziQk5jnPlVP4SAdLrDlZ4V2H+TGM4pZuKQ22D9iruGG4MyWVCvPefn5Yx\nFsA1wHMooF1CdL1Z/M7j6MNE5+QxyShet1gd61x1vz3xXNMWxzRkK6YRsrTd\n5enKPHFEzmxtDPw+xwaUJM8Y+pc3yoEGlQ61SXF2LD1KRzmwJLcpxKjsv94Q\nx90nhn+/XwErkXfwPfilIMyvoKAClFtbq6PI+1HUEnyhEyOaTqMaOlZ7jwid\nn9IrmJQu7or0KBxBYEKLCBks4Flb9+LeXxG6KYCPxVeLSgyLenb79Wipto4W\nxO7l\r\n=pzfL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.6e857aae2.0","@material/base":"5.0.0-canary.6e857aae2.0","@material/shape":"5.0.0-canary.6e857aae2.0","@material/theme":"5.0.0-canary.6e857aae2.0","@material/floating-label":"5.0.0-canary.6e857aae2.0","@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.6e857aae2.0_1579285279600_0.18967198271340702","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/notched-outline","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.e2e764f7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0b953f6d735a97c8c3987d88b4f4e94d98c1734","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.e2e764f7c.0.tgz","fileCount":33,"integrity":"sha512-ZpauaoydzW0Td2nTL9OM/NYAf5wOfdxrY+J6n9AleEGxRUxyaTHcjtVdHm46WbO2bvL/gLFjb75hgYv7z1zKGQ==","signatures":[{"sig":"MEUCIQDBtIju7Y66h/ef+iRPhgvKctcFjIJAZDG6JA75WgBG0gIgCY7IfoQOeZU80KTwQF+r5KEao7ORM0qhgpoMZYs5sIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf66CRA9TVsSAnZWagAARZIP/02xT3Uco1yeGy/uVn7q\n1aoQRUZ+gd5H7EtkCXJzBaUmEIgJBSoLyvHvWHupkvuz+tLJZxhLhLjkwnuF\njM0A5OhBd4kcKcxidBT2H0gVK6VGoxzSBZxqlFbii98VuYKGo/qX42IvwPdy\n/LcIVS+NX+sOMWqvRzlZjamfgKGnHG0T/sX168LlBM75ld5+2s23OIpwp7Fj\n8b8xhaa2kOncr7r2VkRxoEPCHbtn1w6I21Ih/9tMgsDy+Ftp/xcSTDJQHaHB\neAP5eWqnYpMybxMBK4NUlz771qF+chxISa3p4jLeAECkEo/WrBABcMiwJbKU\niPmUAP/Ji0rgBSKzf+uK6uzoq/gdAfCzSL1DYTVYG5O3yfA4z/qSuZkCCCpJ\nDk9wabo5YakAyN5sct1oHzypBP60GquogftqLCtCugGliORFfc1DPMvXsd03\nBAkaPPbUeN8V7+V8jfTvvKKdcVHHUwe/5TyV2o9NvbjXkG0swX4YONdtqwR2\nkOgUqsBVff/y1jStQE+pno3Lg3wJF201vpVdESsG0c/h+/b8pu7tewwwr1Ii\nWR3oK3s+byB5eBp22Mst7hrRjVwevD856CQOmTs4x2NwXpSiiAjWeSEWG0S0\nHNbCvq5xBypDiXf4mSYQO8if5sFNThJAMjF8iewM1qhh0tjyg9xR23R7xnQP\nFfmF\r\n=MzWW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e2e764f7c.0","@material/base":"5.0.0-canary.e2e764f7c.0","@material/shape":"5.0.0-canary.e2e764f7c.0","@material/theme":"5.0.0-canary.e2e764f7c.0","@material/floating-label":"5.0.0-canary.e2e764f7c.0","@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.e2e764f7c.0_1579286201584_0.7076916987518476","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/notched-outline","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.7ef986a87.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbde1514c317c563a286f2e36798deded430dedd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.7ef986a87.0.tgz","fileCount":33,"integrity":"sha512-pBO6JAj9xT9s9fSP/1S7apx+h56MazqxTKQaxxzl826+HE/XIfikDheKhgIx+Lz4lnt1uebNIYi7xnxaMTl4KA==","signatures":[{"sig":"MEYCIQCJ6yMRWPrGrQFWonM9jhYQkB6uaFhRkoad0Dr9RvJWNwIhAJ2zZ+ipVxFu0phgit0C91FpF0mxSLocfxB9p8db6rbb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIguMCRA9TVsSAnZWagAAyc4P/jnm3kQZCimPocuRu3Ba\n8sEtrm+rmk5OvXndM8jKiU37u2kvD5spE01O7vUutNKP53eiRaqZo6tP5F/q\n2wXQBmV08HtDvIbRiUVWJi+B0V2Clc5xGxxU76/yrjl+SLGUaGTkO7gAvGvs\nkiYkTAOKXtLIVZqWx3SwGms9O53Tjphdtku6BiMHINoPXVkBbM45y/B5w0wV\nUuptK7jDi2d3wXdx6KhjZNT8bzYG+WDJt9zFa+p+Fd6RcY/HQ/j6I5yoXmsd\narAiSoIYCBkY9IGQ9s0/uT2teEr7B5kUelEAx9PY4hFzdoC7wdbLyuq+zPvH\n6swvl1DiJwIpsS/Kun83mm1LosGFbYxeBpzoi3Cq0VUm2hhXd05kofLQO+Kn\n3A6mLA0XAQA4qhuKYvQijyVb1M9BCg45L0Aqo/QjFbUO6ZHrXv+cQxhJtN1T\nwugWV5XXT8ZVBnqsWkOzFwDqFHHqU9wtFpu/Bi4cUqNdJuwajP3wt87KOp14\nAdQ/D+StB+6wRecz7gURO51BdwKAJWBUhSfVLujuxYXnhYC+G42D0EnK/1D4\nXFyP32+8/axV6X2OYhZAKE3BAwTGaWWSegDyYoPafR7nJe0ovpX6yLUUE4NO\n6+/b7BqIkwr5PQoFn23gMMdo/Hqn3VeEi6nrX4zTRorba9WLcXiisseofYIF\nck3p\r\n=Br/S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7ef986a87.0","@material/base":"5.0.0-canary.7ef986a87.0","@material/shape":"5.0.0-canary.7ef986a87.0","@material/theme":"5.0.0-canary.7ef986a87.0","@material/floating-label":"5.0.0-canary.7ef986a87.0","@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.7ef986a87.0_1579289484379_0.38840528142765596","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/notched-outline","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.29402e2d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d53a3e4881a67760edf01ad49c087f9e73e38213","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.29402e2d4.0.tgz","fileCount":33,"integrity":"sha512-SmBSbUX8ZS1uL6wvS21gqJYp8Zf0t74YAcbbtoxC3kKoyS8+2PMfs7XMhusSW0z0SihY6WiLODIGOoLM+V7W9w==","signatures":[{"sig":"MEQCIFpGDSINBK4mgYaCXvuxBmFQOwcx2sHKNL7Yx9aWbQuHAiBFAI724Dat4RDki/sX0S4ruRM+NhxQ2vM2ZneUUDBmZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhvACRA9TVsSAnZWagAARUgP/Ar62N9VADPhBFemgMj7\nbFlLl9oeegj8a0GLwanpy2VZ+7xf9pKnF+8ov/0+Uwp0VxQkMbv0lhcOyFVw\nYTavcqL0+BtIhUr2AFWOAZjZm8ijAgiV6C5fNd8VCjMXZmNsrwd+LXcbqXjk\nDIIMKb7ADxKiYhN3pKOP8wCT1Hkn0brmZr+qPO4ihO+rqoW20VUK3wgr3c2o\n1jHC1I65nF0XsEKPZWABeHk6zokJBcHxNZl5zr8pb+h7xHSUNcY36UKdT0Zs\nWx7xlrvCGkTo08maPJ7o7ufzH7wQnPnVKCmDEX4BDNrgwt6dvlSFAwYS3ZOj\n4xFxg4/UzNmeeIFPZaISnFFkR54G63GIUA/FD/UOMaRk+Q3Ks5LNs+biWSFc\n1kTbwLx8aDqGe63vXgPAtEjrTmnavC2AKFAXtLCzP6+b5kPiaeEiIGLTg9LU\nTDw4VjnoPPNo+fhmHoiEsw6dr3Es5b6dXQbCawp2dhecYzlwn/7N0GRtzY/P\nTtu1H484xUTKZqX9ayySTwv0CZYEHKk+fAVBgEVSpVYA6TVUKc5K5Q0nxujF\nruNT5tihpS2D8vpGPVRZ/CQCO3buFqCZIqsq0ylvR3n3HL8sCMErK4Epv6Ak\nHM8Exe2cW2F1/SQUpQ15y7k4or0AE5e2GUG78ZgdjCc5zpqNSyqyEYGjM3nC\nP7aa\r\n=4g7Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.29402e2d4.0","@material/base":"5.0.0-canary.29402e2d4.0","@material/shape":"5.0.0-canary.29402e2d4.0","@material/theme":"5.0.0-canary.29402e2d4.0","@material/floating-label":"5.0.0-canary.29402e2d4.0","@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.29402e2d4.0_1579293631602_0.06773565243257806","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/notched-outline","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.2b3ec563c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00dbc3323a88269b5cd894ba12c57a419c9c2803","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.2b3ec563c.0.tgz","fileCount":33,"integrity":"sha512-kXk0Z1Ihsjpm1xE1CWPyzhdg/cPdPriB91W2jHVSueGj3O7P4eEZsarJsRprfmqekp/7MlBw6IaZHXJT2JpZEA==","signatures":[{"sig":"MEUCIQD7HqmePvangdsxrUVeZZ1STxKO0rDTMtzJgpU1NZzIxAIgNgDy0AG6zXMSOoYbxZAjrQ5mWtn7DHLxnf80p6ZEQ+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj9NCRA9TVsSAnZWagAAYt8P/iwcZovBaMAKIThNx6H+\nACgkmh/6nunJNxXAw5XIHwetWuzTrrSR0Bga9QeGbV/P0XZv5YuNXS8+EDHD\nMbepz7LhZm7rnXY1o3caJO+KWNR0Ad7E4aVWnfStuwQDkK1JFV7/VzLcRN0f\ndPqsWb9l134aEAhsg0Zm3jXKgH2bsNNTzDPlXPJGjtDQtn1kOaRoWtHuO7r7\nnX1Z41AQQnn2bqD6OphtD5OfZwAuY9hJHNcZw4UE446dnAd4dS15BHG2k/Z0\nPirrz/0X6aQqAJscTF32s0yBlagdRNC2hlHvK4hlDxTQr79q17+Sc6IrOGiv\n1P1mLvvl+XzLUquOxb4jCZzOuNXQkvunOe6Y0oSineNVyqhE/TgXqTOIDQTE\nFbX7m9iHYuSebSvYMJ12ZKh5pxT41vrPkTTu9tENwnBBjNMillRhyXXPDcUa\n6yNRkvvopPCNFH8H67bn8aTN7+zbErv4o8+22EjyfS3pttFnlEXNOmRp7wbs\ngUFF/zDDYWWot8JxjbJ4YA1GgSQwbmjHye5QBAxnPT2MVEn+V7xDLNeP77DB\nhBuNUgrY64ZXF3CXjIx7y6BKTYprBS5iorKVF1akHPuWceOxbhtnFCUczQEf\nb3C492vnQK3IGauf4SXxyGKHH/8B1a+wezBZ3CTF+5yMKG8wYYS/Vg5yzquk\n2M5R\r\n=y5yw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.2b3ec563c.0","@material/base":"5.0.0-canary.2b3ec563c.0","@material/shape":"5.0.0-canary.2b3ec563c.0","@material/theme":"5.0.0-canary.2b3ec563c.0","@material/floating-label":"5.0.0-canary.2b3ec563c.0","@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.2b3ec563c.0_1579302733182_0.08083386835598705","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/notched-outline","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.e8a993677.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9dac25ead8521c7b3ea6ad72175087d11684b8c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.e8a993677.0.tgz","fileCount":33,"integrity":"sha512-LoE8Ic73ECR7LOUikdxEgvqNOjicC+mTtT0FMsgABXNoUYzp++gYW66/PiRZ7hDsn8CtHmP9oRLsdEwMe+K3Eg==","signatures":[{"sig":"MEYCIQCKXoP2HV1XaeDZYsC/yLO4slVl1m4iZST9YPEkSd27ggIhAI4Q1ohMvKT9yMdwAgBTa4MbRChw+DMZRhx2KtnpC8tu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyvYCRA9TVsSAnZWagAAd+cP/2tbr1n5tkMzVMATHU0h\nnfDm2HRWMM4tRSh5+nDJk084czRnML59QI1jp4kEXjoFrxjWA9YiIZoyCwMK\nyKAT+Rd8GYMBQh0FHSzHvJTMIFhgQh06KNufblzl8Lc6KboDLahdTAsImmzU\nuXZpfEGu1Aqi1vg0Av1r7brBYwVLiBBdGbge/rBFeBa/FYBX8+AZoEjg5O0N\nQMaQ3tzaHOcup43LXOGV1qZeGUMDdFwwfJCRUZIZDMDt49YfnubLCIicbs2S\nX1m5n0uosU+8qb3o3NjfFj5iJTHiqNcW+/p3cwxZYdi+S/Kwky1Db9msOvgJ\nAbnCAUR3icJYiDGRNd/is42khJiBEChkH9p2yBdF2yOJ4ArQ3uzuh2M5ESSg\nb18oWXOaOLnXXNiTDTpI+GTzcVVM/RnBBSCmgO8dkV1kzWDF38OMe+KWHo+M\nhptF2grBgWWLNRve9W1f2h/3mD6C5vasArH4sXCCqZanQ7O0Ur2iTx/z3q0T\n6zqsPi5p+zalwa22KTL32DfmQXuZAUUt5Ys4nb5w0rfLNvgfG6w5shz+pgO/\nwzHxvWK/aGR6adKkVmzDDu5wCXOVbFZm+rd/blwFl3r2Cdji185mB1c4vKpW\nkpcxNmoEV3f3iu3TQutM7bGK9XSciRgSC8eieLxEVgu6GZrEJu9T9Q4VhxLt\nStSi\r\n=l4Oq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e8a993677.0","@material/base":"5.0.0-canary.e8a993677.0","@material/shape":"5.0.0-canary.e8a993677.0","@material/theme":"5.0.0-canary.e8a993677.0","@material/floating-label":"5.0.0-canary.e8a993677.0","@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.e8a993677.0_1579625432561_0.5297670597847532","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/notched-outline","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.cd4903304.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b18a6438ebd0fa6d04edf0249588492f8de18a7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.cd4903304.0.tgz","fileCount":33,"integrity":"sha512-v68ZxNpAoZTRAdP9Y9RWjyrjHK3mcHbis+KBJyaDo57eAeDdEB/+T9W60XKoZILl+CXNv7//+WkdtuD+ycgHWw==","signatures":[{"sig":"MEUCIA5yTyMUSU2CQS+3OYFlJPcGXVP9GV8a8dXUk3QwHGFiAiEAh/Dq3QgKvcnOCS05a4YW457SYSFBQVGvZJWZ3SfmnA0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ28yCRA9TVsSAnZWagAAM6UP/AuXUbGUfTI6VQ/t03z8\n/Ma+HKUjZ5QT/2pTfuj3FCLAZvz7zN0KuXWVIGeGjtFJxIrVw9mrBxmuybJV\nQanw3ZWM92tgrn/CZHVckSFfiCkdjh8nc4Wz4qyVgfEWssCd8XYdR5CPC2y5\nfdYZP7zdp6qejsldm7phqQVJ+KUMn0AsKJazIGJdPJJM1zcOWzFS65Gm6nSG\n1jJAGQN1pV8CDOdbcNoiOfzzqwvxfkE35YrQGpCXxH59w8IT1CUiu4LvdIBl\n7Ph2KPxKSS0DviE1bRoLWUFMETG5TtXpiXfSpBlDIa9E/KE/P5qujyTMSF5g\nRbKAEYU4xNO9OqxILOg3hDWSzmXOTcunVz4Np+H0uTOWTRcWU/ltFzyQYEqk\nAYgIIDPckrBw01WmYOsa9yZKdEmCNZAf0gSzuwOlFai4QBpw+YaBWHbB4cPA\nesZ4UAU8JHI9FVaDGH/DfSxmGMemfV021MKCq4CimGEepnYZl1Odv/6UmS3D\nroFdA6G8vktnqWpj/4D+/CFfTNVFtdkwe94/Qn6b2bgmKKWM7TsL9Q+CkxRi\n9SERh7IrR2TAPYeZIlMCZQuQahXXG7njKYvHLSPD93RPpIRk1EtGWZnHJ2YF\nOyGc8wn6flu0pshXHCbBPqfV9ZjJzHBkfP3kUiD40DBdNC0Q6I+wOctA50ws\npH+K\r\n=0gK8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.cd4903304.0","@material/base":"5.0.0-canary.cd4903304.0","@material/shape":"5.0.0-canary.cd4903304.0","@material/theme":"5.0.0-canary.cd4903304.0","@material/floating-label":"5.0.0-canary.cd4903304.0","@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.cd4903304.0_1579642673692_0.0063133655281550904","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/notched-outline","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.7e4b04b25.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb98ccfd9d9071475a9b52e219806ebc595e20b3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.7e4b04b25.0.tgz","fileCount":33,"integrity":"sha512-Ar9jhPo0gNJvDqYwC/0JGCZVJy7AMNjchR8AX825T5uJ2cfSAMX20XxlgcGre6rw+IllCQaLQkmo17MSEjTCOg==","signatures":[{"sig":"MEYCIQDWdnIRLNdwKXuA+WVKGSUwT1pnJKZK9KVkIwE1/FCVJAIhAL1P3SyqrdKAqDuwzFUqUpL+kbFizjD0W/nWHCXR845l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ39gCRA9TVsSAnZWagAA7akP/j2CDRFxF5iH6d1IL/AT\nt8V8oRRhpbSo6Eo95xG30QH2HrQdlWB1Vh92oFrrbATWXjCKj7glnw+CLe7s\n2MfGj6rE0hl/7xOk70gTyruGdOYTngfMNs117hXH5SjRstrlDtRQ93icQ5Me\nZUna8mt6RvMYAEVe8T4xUcLUCQTu9URPwzVO7qG3fBY10h90HdkkWod677RJ\nAzW1US0fRZgzQxSxgu9/PIIrh0pY5swZIddrVYKyZ1agtHpOqJ6ZusJd84Tx\nZ7sqPp75I2cbhBdAYbZERafjqZOWmgWVH7AQ6W4qZ0BU6P3NhBojFqdGmbyV\npiavK1PB1wWeWvIZ9mGNP5vs+C7N2L4Jii9XfRZg8O0mu4b/Z5qCgSC7znm9\njFRymk+X+Tdh/upahSEpVpSjK5WLJ+Y9aYjvG2u7DzXcgfIYE3oyS/nqnbuY\neyBrhvGC6I47+4Bj40KqeDHkwXBd+K0Rj8fGKHJzCOQTjz+Tx0PDkKXpS/Qd\n2P0Y342PIN17PHH50gPPIVY4m0NH5Y+stP81O6YVOhaGaIiKjDYIZ2gQmD1j\nvb2hLt56JyiW/jkx3iYzd8dIBvhLsG7/FfWMcfK59YKInONBClHRrSc65qtR\nYKkArxrEnmnL7p1ShYFx9DVVJeTjz2ne+ITMT9SokhJ6S2mGK2q3/0plYJ8o\nwdpL\r\n=MdIx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7e4b04b25.0","@material/base":"5.0.0-canary.7e4b04b25.0","@material/shape":"5.0.0-canary.7e4b04b25.0","@material/theme":"5.0.0-canary.7e4b04b25.0","@material/floating-label":"5.0.0-canary.7e4b04b25.0","@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.7e4b04b25.0_1579646815633_0.8337997105579218","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/notched-outline","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.ebc296937.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9fabf2d0cbd6e8a3638a5afbbdf8bb11df0a7a3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.ebc296937.0.tgz","fileCount":33,"integrity":"sha512-8nc6EmIY0bMJNvqVsvMgEkjM8dv50SWAkAAXxTxqGnT3dT4UHPtfdDQxEbn+wjM4cn9VzCoy3pXXPH0CLBWJ+w==","signatures":[{"sig":"MEQCIGGTPkW5d9E1Vmb5tI1IeiySUjaYO4UUg1/5BdoRgYVDAiBtegZGt/9TVQ4S+ApxlH0Uk6e7XLD6O68Wf7KV5Db4cQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ40fCRA9TVsSAnZWagAANHoP/0gAF65sd7t/xuZgvQNE\nfOgVAsXFFAURZJvM13P/uaIYG8yhLC5e3pGp24qr/+gEAkgqKjIId6ch6O/i\nUrguCZnr2V16e1S5C7WYOYDXxubWpetvv0EO2F1ebaLz+VV6WE/wtghFkXPO\njg2Hjppe28AzsxavgseEPSi5YmEIzgFvlony5poT8Idl78vr2HhOgYnQ1GCJ\nvF/ecERBFnOkafnhkpVQ71v5RvyOs3c/t5mDzE3G6TC1StQLPBTYg0Go66/b\nd7+V8viMsNLWUJtH38kAfq05TiuptM85eLF90wggqQH3WumjThx36CNybbda\nQSoggRACvt7qk120ooJYB6/VVOOU0QfVmSoSBgiybJN9pugC34hvW/oxzMqy\nf4+WZbecabLw2iIRkziihmLfkncoP/wHLQ4yTo2x9c+OSLbPrshma4Kh1T+c\ngtRFtAdZ+NLtSX8AQ6nJCzeXGsbMn6GRKUozefm8oJlrvm6iHwkKYEURq182\noTnxjX1hlS5w0YT6NKpdk2Sa3ip5NGPZ4QlLxVK0B4K4bpxXem4JTcUoauX0\nlXIc2pedt46vPU7nD7/MifFHsabqKKudR3mUdbkKr3VK+yPr44P4nh+kr252\nFwLwX3TldY7Ys4/saizLDx8OCy/30NsYLf0FSGdaPB5NH7Wr2ZcUn1QJiEol\nxSiT\r\n=c7GX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ebc296937.0","@material/base":"5.0.0-canary.ebc296937.0","@material/shape":"5.0.0-canary.ebc296937.0","@material/theme":"5.0.0-canary.ebc296937.0","@material/floating-label":"5.0.0-canary.ebc296937.0","@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.ebc296937.0_1579650334747_0.05463849311653024","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/notched-outline","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.cf33f113d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e54879173abe126530661695a6e996fe9c14bb52","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.cf33f113d.0.tgz","fileCount":33,"integrity":"sha512-BUQNveIGkkBNBEe2zJizxQwUPWrsG2pNqEvnUbybt/DMpz9EX2tLUDo5WsoE/V+8/UHe31R8X0VrUhgloh99aw==","signatures":[{"sig":"MEUCIErjWJTCUljplIAhbU7mZJ+N1ni96s8OxRKAI5A0Sa+TAiEA5gkrwTAO8ijrPnZBvwnXQZ18E5NbgReTscJOUwtw8UQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6QACRA9TVsSAnZWagAAJ0kQAIz0NkLJ4bi2pdAAb4Zt\nMkCWyAxbXBtBaO3De9UFmNJhIXT+sPkRgHTnsoHyihUYZUFlckbqMHOZB3j1\nmeiGiiSwFvXRaLmKPBjAEYyaSLUgVSqiT7NNYN7dgx3jp+Z9ev4Bj/x+az9d\nqggzrU13tkxLbF1Pf8zlMXkpzQwG57GO85Ym+NC/TzuY1RU779xyjlJr/3ve\n5BlbHAzXMH738RL9r64bS2IzV1AOu49wDxX5n9A8fjrYj//+FmHoDYWzQNXY\n/CHQizAfE73EG101lFRNQOwSArcNXKihmu9MwVZ9MTq/u0g8zNlvJFMtGFgg\ncEAPLxoqaBTGy484jHwjoCnKRbB22DKtvlhk7rfqTkQ8gzSYQJd6aeYB9pMY\nYu2W5UZi9ghESDZleieEa2N8MFMLUi3H1vFjbg15O2jgCdIVzid0rsgkyZ0f\nmKly5mlrAj0oj6Cr6h1BOfjSeegxRLKFugxSlqFCT9FvQXJVx4yjVu0M5ZM4\nhbgWUDWjxpnExIAf1MSXMLED+E2E8ujy3l4k6rgV5lIBuLxM2Xw0Bs8ZWLlI\n0VjS5q3Oi4N213HlgbB3oHKIjv/wKkOgPsUela/X8Dcjc4bUQYMNsakinY4+\nT7FVODNbjV6LytrFAX0KNeOTofVh39uyW658qn+w+AxRV6h8Oz7Gi7wSG+A5\noVSD\r\n=KHb0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.cf33f113d.0","@material/base":"5.0.0-canary.cf33f113d.0","@material/shape":"5.0.0-canary.cf33f113d.0","@material/theme":"5.0.0-canary.cf33f113d.0","@material/floating-label":"5.0.0-canary.cf33f113d.0","@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.cf33f113d.0_1579656192296_0.5580851263616302","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/notched-outline","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.e1d5f1be5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2b2edc41145e5977d17c1bcde60c46939654a5c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":35,"integrity":"sha512-FSauAP3oovRf90ik7weyaLV2LiYOUke5Yp0Zr4xlrsBHAxK+zYdpBAilXNw2KmHbQ/+WjVnlSzOE83nfrp9Kzg==","signatures":[{"sig":"MEYCIQCXwxZRuDMUqDJUsDVWoPlEphhTmsXd8sO1dl2FG6NLEQIhAI+R0ZIPRY8qfaPMcQvIH84vumy1a/7F1UeIGKp815Ty","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH6xCRA9TVsSAnZWagAAnKgP/0NqSRNW+YLJIRiT0LPc\nlPDFiXkLzprtC0z+mgfMx0awRls3gG2Ci0O88QBuWmLlgulJD3BZHjd0ZEFR\nfIuE2yqgOtJ80CaXxgQ8s7uRpaS3pTYgiA49t3d9F0ZHlTkoWQklNsDO9RYj\nNP94bw4QcrHROevKXBItD1/QAu4qbo6FIczkxsVda6RGn/X2l7zirvLDLsky\nEYCtTB7Z1Tga/uekEG6A9cQpeii16ub9lypymu+uJfyYoDnOKQcq9ryg8DQN\n9PUe0dkL9mz60k0lgUcEMM7J5FZbg95lNoERGiKpF9u22WiI9Vnmdf7S3KNA\nqMsmsKMkqD1kW8q3gBxcLgAJTqoIQPlwqsq/g2nwSxrsQLyWktmjDXZfLOzS\nYEooA9PawZbikDiP1wT3hlVSYact9Lp+Gg87O8KxkUNcnhQcGI/QaV5Cpnoy\nnzxKhNCN3L62ZoNXZOtZp+fLiD6FHwq06e9OPkDAeRFviTTcbbSJkhxVRdzc\ntP6JKI4l4s4dRAGnUKeD4UuLrfVUS44N5LRmYc8zOEdAcEmBnNnMA08kPpyZ\n//0+E9TNJ9yNFWEfwst1Hipp8Wt7Mim1ptHQuuWBfnITVM1NfNmvKsFHfQle\nnw6lxrEbG1oMet+ELkzEifitiVum58GEqQaYDupavOTwTOnJ8j76pE/zf+k0\nOeXo\r\n=E/2i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e1d5f1be5.0","@material/base":"5.0.0-canary.e1d5f1be5.0","@material/shape":"5.0.0-canary.e1d5f1be5.0","@material/theme":"5.0.0-canary.e1d5f1be5.0","@material/floating-label":"5.0.0-canary.e1d5f1be5.0","@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.e1d5f1be5.0_1579712177448_0.16583121889064723","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/notched-outline","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.6b6a4ff92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12b37aa36141a6b81a4569176946d0ae2728a889","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":35,"integrity":"sha512-MD7+tcItIeOXKrNWr+K2aMr6cA21RwNTQ2tw7bjOHawXDP84ZSmhWS3b0LdTZCRPOaip6wtW7P305PAMA/0JuQ==","signatures":[{"sig":"MEUCIG2Ejj+pLArpDldcg8GsUVsFok3RsZ6KSKhlLK3+XXqZAiEAlzEHWpaOlgZuOE9yuOnjniO37BfPuDxcsfGZMlSX7Gs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI07CRA9TVsSAnZWagAAJ2IQAJvbYCjg57BbWGRmCqus\nP2MO80Rj1VHLVsxSEPOTzlgpTF+VDwbCy8oUDiJUraWg2tKNRyqDDZz+do6M\nAY/JwgIxlMpHyVRmzMU/1+Qqe7r+TYlPN7DrInlFdUbErpvOORpkQo8i9cRI\nm1oiHPixhxCcN9t9Zc2kATMMbMt3KiQP6+EgocSXFTb/2fKvfJ4OmhAjvHoU\nZ7feheVHNJ6kV1Zl1LThTWVFB7X2Rn+Q3XtBQVNK+RTi/zINFa961sqRNE5p\nakRBsxs/g1ZRCjfITyD1RQILYKywa/andI1Pk6QAa/Jnm1VU3Kn05pcYY6Ry\nhkq6K7EXXy1ol6+rnxm1qDYCPuC/UHksmh+QdxDcnpA7yn1W/pplWXDx0/gJ\n4MFLp+Az4ozZddUCZBwTmkLhzeMk8TL9BIaIUdK4O2CMAlEfhQrh9IDbFrpn\n6w+QK+OQzfCx5StY6IQ8opL0P5gSSFfLpxOrKXHHecblp5UQUqB3qm/TlBno\nbgsvB03rbpeHQHyj7fDTLdTuLBWvql6dvNznkwRpBDwwItLbPRmDfm8HHqKi\ndlYNy5gUASw/ZE67LkO2Ocwe/FUKEqDU8FNQodgQXJwfH1TctT8nvI5M67aY\nK6Ye8l/PJRX+3mYHTxVmno1qJ5zYzZHGfQffXu/LpuSvaSOFKqv+9FhG2xtG\ncS8v\r\n=0JX5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.6b6a4ff92.0","@material/base":"5.0.0-canary.6b6a4ff92.0","@material/shape":"5.0.0-canary.6b6a4ff92.0","@material/theme":"5.0.0-canary.6b6a4ff92.0","@material/floating-label":"5.0.0-canary.6b6a4ff92.0","@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.6b6a4ff92.0_1579715898816_0.081816683609226","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/notched-outline","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.6092f71ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"894de86aec2064f0638020f670d2850b3934d836","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.6092f71ee.0.tgz","fileCount":34,"integrity":"sha512-N3Z4+/wnbfsABzoASjbvLxPHqV4S19ab5Ah13Vd0IfWPqwyJG7xtFIEMjkJEQRfUOQ0wpBlcFeHZ6OBeXHGqnA==","signatures":[{"sig":"MEUCIA7yKahpqdjTuAxn4K7mY98NHw5FgSapgEfsUqG9nvdLAiEA4v6js639Yf6iIBQXcS4OTeeK44RHe4tRI3uWDH6MgiU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLv1CRA9TVsSAnZWagAAj8AP/2SPj8BYFb0dTGzm9Z3o\nMLiUklcyfNZq8UCER1lJLK6ES+AldQXPqlQrswTWLeR2w39+QeaVdnsiINN5\nWK7RnkWT/nnvEnYpNo7c4yIV0ZklfjuEjHmoQC+8o+M9rA6DQzJhIxRxp3jq\n8rZtoOjPd6OAnUojT/Pjzg3IfQte/wkgkUe2/0sBLh+rKMihQbhe5cDKRWRD\nDgbxGTwy42lMBNKo2n/bLA9G9dhZN32J0Av7X4Ms8slzv5k29iS51mLpnxlJ\nRUgJ2tekNwd1VpYx+WKxA0IWmEpcjORT6wNbTkmbCtmgFZt9fdY82HyTTk2x\naezyxujKcpvITNsH1y+OOqkReb9a5Dtdhi5M+KjcGFI0C6n6CVNSqIPJaFGh\nLb6kHuMFtrEW0p3IOumMdCtrq/KvJNQHIvcX39cbyI9KB54YFkNObpkjQhhM\nYTKCztwJ3362j7Mhu33LTcRNTcqWsEjRe0CAE758JdCNhn6l6KnpA+LET0lJ\n+XkCPHhfFSinDIYVLnuNEYTWXLseCmfMHPzQYoA2pXo92L6p1sFsDbq84OHZ\nbn1BWRhj8dZoW+Mp+hg9hYuCm5yTunNuoz7J/KGKfG7NEy7D2PTQdQinNFH+\nEEaMp1Lsy5a53WjFiqcJGokCzD0DjJ3ZmzntWHDxchm2P40ZHUzQ5zbKIuhh\nAKmd\r\n=oGlh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.6092f71ee.0","@material/base":"5.0.0-canary.6092f71ee.0","@material/shape":"5.0.0-canary.6092f71ee.0","@material/theme":"5.0.0-canary.6092f71ee.0","@material/floating-label":"5.0.0-canary.6092f71ee.0","@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.6092f71ee.0_1579727860878_0.32887950857736015","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/notched-outline","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.d8d95020f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75f084a6cf6e6522b0214d792de36d88eac31f36","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.d8d95020f.0.tgz","fileCount":34,"integrity":"sha512-UHUnQSqCCcMFoP1tZo6kBIy62IiqqzkszMD0i5k3PqkxUbyCtfhHu1kG1xAFMDQj2YTwMXW6D2cEkpgJCzSAIw==","signatures":[{"sig":"MEQCIASIor00gOjMJ31iFsWImm1mlAWCcoSUC25Qokbq2zPkAiBliKTkrPYS3LEiplpwfaqUk1xqXgTHAzVF0c+G7qH3gQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNZICRA9TVsSAnZWagAABRcP/0sr8271luVmf10sQjVN\nkpYbZNQB5aROikomgcPLgids+tLOmeM10ZRL7pgpgWFswSZXnuhOekpp6Siu\niCpDeUmuE31TMP3RC+FXhU2GulWM/zwNMlJUsp/pvySs0ah9YphwBOtbDCBw\niJW5ukTIeTQKLMG/tqx9N8ZVPmizQ1FdyWpoK0/uJbMo0+x+PPQopOIUy3Mz\nlx3InCixh3U7gI1GKbHj8cLZx4euoib+o1MAvikMJkXnZSVpe/Df0XcPots8\nvqhSjpoFqlczxL0kD698FtLVflhUbgQDlSqKV7XuzS/d9gkPkpv3GZ8o4ZcU\namucLSILAfZe4FpM8qfNRlM1mGIHmrwjAt68fpVprPDQPfsx47Utbng0Co12\n/VPgNc9/R17yhnfNYxDI8wvqRk9Avj6+0Q2GwngkPHyZBv9zglgyKsLXemy1\nK75cJBjj+Mb0fqPAOhLih6pwR59/BEU2T9Sk8qKs6q/MW7aTTL6Syz/QNcet\nVGQSGmAo1DHXMkXvwK2ybP+5tP3e6SakDCLTIBbGFpAYRBavCWlVyqzee2/X\nqLU0DnnKuItVdKaGcGYIHnpTZrpjoQ2HD9D56JZ8p6bwR5McqsOnhlPCOrJj\nr9Bgl5Wlqaj1RbiWBCcxMm31IrzEpHqIe2Mm15QvG0Tp8e47l90pWIupssIR\nK4FC\r\n=qnH+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d8d95020f.0","@material/base":"5.0.0-canary.d8d95020f.0","@material/shape":"5.0.0-canary.d8d95020f.0","@material/theme":"5.0.0-canary.d8d95020f.0","@material/floating-label":"5.0.0-canary.d8d95020f.0","@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.d8d95020f.0_1579734599943_0.34014296793991394","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/notched-outline","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.b7facc628.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd96ec90f747925135a5da876b6c168cd5a14232","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.b7facc628.0.tgz","fileCount":34,"integrity":"sha512-BH/ly/FBGwFuvBOVadJRU3Apo7GdhxiptX7CdEgW/oVr0q5KLD2TF1Zn73xlKgvDsaUHr3q/r4KRoL0gvkoGCA==","signatures":[{"sig":"MEUCIQDhAiERwos90epl74oxeCuLElOxO5390A7oTBEfCpeeUAIgOXxv3Mv3Ut9Hqqzl7nt2G0UBzCeE10Hh0tfou08428Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeI4CRA9TVsSAnZWagAAZEUP/2xHVziBIOmI6EloXumM\n0+GaMs+8ZSV68AI71ebXQw3qiBxtgEu+2h2ymCjyS2SvjuSCbPmgy0jOQ5Yo\n37lQ7gBTmZU+7WKGYFTWLCgvsYBXi2HIIXODTqYydyUO/GRcuHhDPiifY6WY\nQYyT/xQ6Pkybta1I9JvIWdy8T44TlJKqIkbo9XU8NMq16GZBeoPznHdCb8HN\nUy8DwKhCfyZCr9PWeVrpmxOhtZX3/NcUeL7EtIu1J9qt1TA7ONKBv8uoPnyp\n/W0S3DrxzgiUKHps1RU3RfRq8I8W1mEdnyfoAF04KgwLjm2EDV1KlGn4QXv0\n7gfPEonCi/Do3Xh5KTZoL5STHg2r6FjkObflgdoPSzTq5ZVxU1eDPpQQsOyn\nUerklfrAfH1KluO9KjgrF/rrcgD6sI5b+x/nyX+TZzOG0o0+wfBRwYVVWMYu\nCn7senek/+KAa3zW0Qpv51YcY0E8X2rMTnXXeRfpnV65imXrk/ip7j2UZ5Xu\npgk2FQatsm+MEBmvYOIPXsEdSuz+aV0j4PlxDcDeddPUXPJJcSavIZDElc0i\n5rjgf52271wrAzUsrXJXVoScEYHSsfQPQ2H/mOc2qVhYS8b4dUZL4FhP8xuS\nXtJxq09Yli5jnE3BM1WQmqJFAAPACz7RfapPEZA/OOS3hQEMvHieA9uX8N9J\n3o5D\r\n=7D3r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b7facc628.0","@material/base":"5.0.0-canary.b7facc628.0","@material/shape":"5.0.0-canary.b7facc628.0","@material/theme":"5.0.0-canary.b7facc628.0","@material/floating-label":"5.0.0-canary.b7facc628.0","@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.b7facc628.0_1579803191870_0.5515614089528724","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/notched-outline","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.63f357dbf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"884e30292df53ee47e4b0bfabe2e6223bdc34581","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.63f357dbf.0.tgz","fileCount":34,"integrity":"sha512-qDcHCnvLQ/W6UkbfjvAL4PbicD1US8TodKX4Kd9AivMTyLQT5F4fcdumHiUn9V+DXU4C4QaS+r3cDXDMa4svKg==","signatures":[{"sig":"MEMCIFu3BrJULjDZhJBN7ZwX70/jaadwS7iJHKJeC7xVbKgLAh9EeS/pmQ60Eg4MjEMP3avfYvcP198jEL2Vu7SSa8BE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhZrCRA9TVsSAnZWagAAA74QAIGDnZCCIynmTa9rCYze\nA4KDTdS8ibj0ZFG7pDOIbBL7EyE52pU5Ay6OwXL3Oo/aFU27bwrETivi1oal\nKlLTdFmvWjvuaXwdsa8riuTvRTugSJJhcZGLnceh591/mFgksuGyX+0mtWQa\nzlXILL3xsLaUtuQzn2OYvEGHXnqMuOfdtAjwp5NzEca7rm8EFkzAQ2VKF2gy\nJQAeMM9wv2Q/d3xRXpTA9j9IRg8/c33fVTgXxwUr/ktAj5MgDlhm9FbPd4SP\nbWjLFR4PYrCdKoTfmOThqzsmxKtctA13F1VMgA/KtVSIennlkphykLsxQRhn\nx/XgrB8nFnPHBGrUqV6NeXic1Z1OJ1tyaJP66qkfapmmDGCGtLfQwy80yfBf\nRTl0bL74ENO+T52du6ochQpYNJG6KgIVit2a8WN9Q+87Zb972+mEVqdabJbM\nUrm7ui+Svmesb+ePzYiJbbQGZOTXrk1Az3FAk0A5TlOtgEgKP9emBZmyrpI3\nVS22dpgzY06IHj/gD7bz81XQprav+vReqPnLKu5k8CUtWmPBq0zgoLWX3G1K\nNtg0Gu7QirLozX80bhwiB+7gGMEhtwaJxx1tg1VWl2/eUr9GewdEZzD4NNP8\n+8RiDTf8LmW+j3FaQFHTC2luXq7jNRWX30XXADrL6C26Y90Sbq8tAX973o0r\nk9LE\r\n=dDUe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.63f357dbf.0","@material/base":"5.0.0-canary.63f357dbf.0","@material/shape":"5.0.0-canary.63f357dbf.0","@material/theme":"5.0.0-canary.63f357dbf.0","@material/floating-label":"5.0.0-canary.63f357dbf.0","@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.63f357dbf.0_1579816555438_0.3609334938321713","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/notched-outline","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.f2426d26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e149835af3fdef1e4cfdf37386ebf5c06666f3f2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.f2426d26e.0.tgz","fileCount":34,"integrity":"sha512-GNdxz2RTXhy3P1ZGh90jwbe84b7xg6f9oXpAE1YRRpXR7qqaDdsJqugl1xafMx80hRrlFqpXcgxoJhXDCXxJIQ==","signatures":[{"sig":"MEUCIA7vUXBCB7URHdkjYklHZAFunLFd/n76SfotXhXc5m89AiEAjQS/WngX2coCNVCEHhoqQBuXGJccV3dXin9hXVrbxRw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjJ+CRA9TVsSAnZWagAAZwsQAIa6u0EMlh9sYc8hMpu2\ncbYjFMw7Rv/LOtC5s+ehRQ6LXN+KSFZML25gmx69dXidafRKsnqgoNw1AX9T\n93Zbs/1xr/9mMZNHR/zHbIwXYdY53cWemGwoiAUneZtTUNKdFWPDmIMrSc7q\n1MY46Zko0jJslnWVpI9jA+BCvwD0A8Z7sITzNCaF5MgFYRsux4+Fnm36U9LX\nLGIZhDp2CYVOlkHJcQiTEsC+KCYf+iFztTbRv+lgpHqq2741CXVMYh+rzmD7\nl1Nf9wSpFLFT3DJJPIf/KC4dwG1Y+OQzrkBn/wGp50fAMT7kjJM8MTQs2JVb\nnh9iiHmMXOcNSiXvlLnhGwXzrySsuwC90QH/8EWwXwvSljpLhAEla5gQasdc\nvTVjpLrtnD8dKM1g27CCTw9q0dlrfxH6G3jWAqugOfd6SZOOHq0TjUPGKFqi\nYX2Iledh3it2askWSitE5qGtiwqZySJGlmhbb3J1GFp+YhTKA3jiv//Dwa7U\n+HFTu+i4RpfmPEtHYm8riO/dP1v3fBwz9RZVRe+B6Et5grTyftvYmqIUvNpl\n6w6eChEs71cldYLl3cUnh22GHbOyBuC1EX5lXICppSlu3Hv/5FL1ShVqhcqs\nkc6V3fDojRsXEKHXP7oCDfQ/94b9vYj/V2cPGux/jay+ApppKCgMAYrJPLS9\nM3KO\r\n=VME1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f2426d26e.0","@material/base":"5.0.0-canary.f2426d26e.0","@material/shape":"5.0.0-canary.f2426d26e.0","@material/theme":"5.0.0-canary.f2426d26e.0","@material/floating-label":"5.0.0-canary.f2426d26e.0","@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.f2426d26e.0_1579823741604_0.14330570461794667","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/notched-outline","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.7f5e0c23f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc12243d21975ed4e19d5f23a3c0de369d5c4757","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":34,"integrity":"sha512-m4M/C1cZIWtcZSVPzPTDpyTDQF7q4owxbRx9KThUES3hvAjmgrLtAF57CPIVLuAzx+TouZEl7OoBB0tBMlO1DA==","signatures":[{"sig":"MEUCIClMGvRSOIIL8ousRFwzEwtaTsx7JeZNTa8zWq+r+iMZAiEAzrklf3PS29+sk3rYPY0dhYF5Pr2tUfJ67btHuoAlvYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx/LCRA9TVsSAnZWagAAIbsP/0pZ4W3nZLIdHEXqd1UG\nMsIyvDW0JwxCwKvdtrjZyE+Q+9Gx/XJ84kPjnNQCpEBQ5C8cdXAhNsjiTKtI\n6ITeEDxegYz9gmZ1zQl90rTv5l4DtwXkzo2PDgELPRHpg5Ps5ZEGWqm73Fv4\nYmpksgovcn3XuIJTA1D5AygQUaJEaVXP7xZmRm+913qnuMLOjCUr2Bk7dUPk\ngqtcOePjguIw2nbxK3xp+pLxzRmi2LTHwAUCt5nZIXzSVM+7Jw15DNIu8v9W\nUtj92yn189oV/NqL+gmTMC3yHV9ixS7SieLQAlswVz2DAgzw9+Al73YU/EuD\nxWtU17plXY4LUrhhvHv5/JejiqJ6HyH2im+U3b4m65DbPP4nrDGAabiosChZ\nP5wtBWYR6SnblTnbC28mbfKjedhvLi1VCUEg2PHBcoU3UpyUHNRzCsK2Oh2O\n8vjVyp1Wise7mDz0cQkYmWGpnkJ6iNICH9LtGaK19VzAG2gzMYG/m/c6eAvi\nE4cBUPPcImBO3PgpqAZgqHtxw+mPjX0zr/jMGvwZ3QVoxwSY4fYIyZudq/s8\nF8aAUoTjGNKih7T3T790e5hLnHKIldg1iQlKLD3r/XSFr8E/Tq+QHjWWw5Nr\n0x6McCFkAEuliiIsX5l7OXiqs6MtpxD6hRIyCp+JnBzUQh8E7irPbG89KwNA\nlmbw\r\n=JW5t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7f5e0c23f.0","@material/base":"5.0.0-canary.7f5e0c23f.0","@material/shape":"5.0.0-canary.7f5e0c23f.0","@material/theme":"5.0.0-canary.7f5e0c23f.0","@material/floating-label":"5.0.0-canary.7f5e0c23f.0","@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.7f5e0c23f.0_1579884490874_0.5854991022973639","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/notched-outline","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.3fc3ab520.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8d6e73505161cd37f4c8704821700ea39825940","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.3fc3ab520.0.tgz","fileCount":34,"integrity":"sha512-ARxAXp024VPsVs2uZF0WZsUu78TxxpuSIbxAIthKdb+1dfxDy058xmhA/+MhoN1HCMj5SgpbWBfrAG/vpvbLyQ==","signatures":[{"sig":"MEUCIQDpbY+XqmntKlooNU5MRsOz0fSfL6B75K94wlxVtKZUnAIgVityWbezqGZATGaBb5LMM2bLMgb3ZD9Z3EseAF9T0F4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKyeoCRA9TVsSAnZWagAAGLwP+QFxXH95IvpvRiW/zsUn\nm97MO4QloifwBPsf7KyU2dYlU43+gWdtZaknvzwtvLDzc9ilueOMCnxmzowX\n+1rUGFCYI9oz7tEzzpe+Qxe8WYkcQCRVBq6DxfCS4f/NeVqLwUpxE2CB+1KW\nTYlUnEC3UBtcNKpM8wfY2nglXU+J4wVCnmirjLdgLLF8y8b1l7sjeqEjB5uS\nj0lZL3N+NPwfWXutkmRI1q/BIPiRifpv3Tu2PB8EapXNxvndKjzkAoc7co82\n8ZLZO5vTGc+hZuTMYNwT2fnDFZ8ed03n3sLkbu8bS4v1jNnp5LeDzIh6fo9t\n/YHB72sWlH3/0GQuvqvgFwoKOTMdvTHZ7JrsudJfAbfRwxa5AZO6wqakMQPW\nq+hYq9Z5Ee8aoilGux0WOLB5U3QgtFnv7VyAdkQrKLeWU+//NIvK4HbL1o+M\nSgDcoRMY+6GB/QYHOsQpjl4cdUboCVfhkhaIshK6xbSKjZp6IRX77N3AcZEd\nbSjhPry2wM+oZ402l/LdwSfLiPFLPZ3M8jHuIntHji2KSvVyl1amOD8GkW9c\n0wDr6HAmMrBCg0nESaHzsspiPiSfeIIzhKJZMJ1oEPChMWHfqFK2PCjnrXVI\nwf5TJCaDAN5aBN2YnPG1L0fsu7th7kjGE+soZ9dyTqMINyWOl/bdhgI3OPXv\nRvs8\r\n=M0DX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3fc3ab520.0","@material/base":"5.0.0-canary.3fc3ab520.0","@material/shape":"5.0.0-canary.3fc3ab520.0","@material/theme":"5.0.0-canary.3fc3ab520.0","@material/floating-label":"5.0.0-canary.3fc3ab520.0","@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.3fc3ab520.0_1579886504161_0.8471467383349942","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/notched-outline","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.80a4d326f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80dd4a06ed4182231a7a2411263deb1d6f7e783c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.80a4d326f.0.tgz","fileCount":34,"integrity":"sha512-i6YdzNLmsvQjwxFBcGY1/DrQ30PvvtWMh0qbPBhL0WOtaTZ9uhQnh/KS/ZNyVTnQlt5LzDwARsCGJE1DFyJr+w==","signatures":[{"sig":"MEQCID4NE3NQ7iddfCTxkPpsoSCKO5Ah5W5IgoCDk6+K9CwmAiBP8mXVAFkKxU/Vh9Atlb52ug8XoUpkVo538MVAFJQh6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1enCRA9TVsSAnZWagAAVZkP+wYNSFLLzzsomXHb9ZuQ\nQm7oUVJgIarpayXd/kT0GCONXok4qTQpMDsEq2TBuIYzQCkVYkLEGSLFFAy3\nAbkcZkUo9Qx97Pjh7o4saAPE4DR5PrbtfYN9sAEHnY5O0FIuRWbwNosggizp\ncASiu16EwHt5sU96NvI7FCFdhOBnUZFFxs2JNI4GisST/vMLuML2Z/wEgicg\nG02QmGZei/Fdi+j6c7VSCKi+jfHh9QZIBafmJ2d8lgYSdUD6OFPjlF/g1yoR\nY07VHFrhOLMH8qBkkBM72cJ3vQAASjJL4QwN60W+J0vqclpSEfoTC8H70dum\nzpxV0q5uAbkhBToSaortXoDQ6y263QTRDshZqkyKGlKXwaF0TDwzsJhqMCfS\nmVfaeEWM6sPSfefEG8kMiH2M4s6PH+ZYkGxU33hdJF576I+i1BVPVl8gSaBa\n+eEZJj9y5oZa0lPX+FrEEAO9XuwMITfTGCP8MJxZE/VSazWURk/daSqfryJn\nF2QAZmsUv7b+lFQidza1GK9QZ7WNbKsl+V6IGzM482MaIdAy/R2d7aL3J82O\naoWkxo79Vi3CNKVN+cgGNMPW6v/WwUgr5opalaBTp78EGgYu1o2643gvaMn9\n8zxKl3ADHyxI+tvtA+36953RRe0tH1y/g73vcWj44C3TiIGaabeCdFgnoL9g\nyRT7\r\n=bQ6q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.80a4d326f.0","@material/base":"5.0.0-canary.80a4d326f.0","@material/shape":"5.0.0-canary.80a4d326f.0","@material/theme":"5.0.0-canary.80a4d326f.0","@material/floating-label":"5.0.0-canary.80a4d326f.0","@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.80a4d326f.0_1579898791302_0.6995690122235958","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/notched-outline","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.ef7de4def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6659d41a9954165a96f5adaff1edd131264105b0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.ef7de4def.0.tgz","fileCount":34,"integrity":"sha512-VRkZ9HbUnTq8IzziDrwYIQCU4f9SAjHFZsaG0/k0/gDsAWXDYZp6GeX7tM42gmknfRQ+KcTV90HKJtLn33+Lhg==","signatures":[{"sig":"MEQCIDU8+TRG/UTtAGx62yE/qu4RKghUqFLTwzSUSDbJA5hzAiAMVxQ6Q2kgzLbGcewCGT11NrKDx6JeLtE+vkDvKlkdEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2JiCRA9TVsSAnZWagAAPNYP/iif6gOjhZ2wT1GGlsvZ\nDzWQMhXhsVdYu04QETguioSqVkrTL5ZgIULqpxf2gXKJlefSj+fHKH7fb1Gc\nAQ2Jl/xv9SzjcLwmbwZoxUAXO17mRMqVuAyaW+w+K9PjYQHK+6OgvbYMAgb9\nP3NwgYhoKCtDovheZo4bY1dM0FhgzK5D9Uqu6b7LE9cA7+KySQlltnoQqM4P\n92MsWWrKfhJBUahTYoEhS9oukGK50Wjk5lnEJ2kXu+/ZRieDPEvg8FXcCQ/l\nA7srHLuv9AsOgUGuQz/XifxSgMKR6Zxz7r5oCI/Dg8kEUgnBTsEUnekX9Wrk\nVxa2kko66ocAhFCTMxiwA0NP7x+1u475V5X6Xj32VHEofVdZZesXYZEU+tl5\n5rRLtGPK8I1vp7M3kz5/lr0O7aqOYDhTwMJ9yUNZWAOuVXzj9g9K7dzw5g4p\n0jGsdyfhTTzeQNSvePdEY1f508QSIUpTXLI/9TFqJRn2BkS7xPU/xxSjtPup\nvDgAP8EJb33DG3CghmF/9CuwzyP+lLZTdjdVkkZ1PLZh8ds3m0c5SYZKsEHt\nXkaAKtSzb2RoWCHV+BkpcaNXvcalxSemyKxggmvdGYHCh8cVmPI7xv8Gf1GD\nMaplbKtbxXlNG3VvtFDY8RFYo2LQly0tBNCHWAl7vpdZ9QeEgZlFHt+9e6Sd\nmmeA\r\n=pjtB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ef7de4def.0","@material/base":"5.0.0-canary.ef7de4def.0","@material/shape":"5.0.0-canary.ef7de4def.0","@material/theme":"5.0.0-canary.ef7de4def.0","@material/floating-label":"5.0.0-canary.ef7de4def.0","@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.ef7de4def.0_1579901537838_0.6997901235091564","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/notched-outline","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.93e2288b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cddf90cfb020243e74cd6764c6acccc0c87abed1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.93e2288b6.0.tgz","fileCount":34,"integrity":"sha512-kJs495V36L1zKRFIr78IBxiYMxT8IgneAGIsuTtZqq2DuGdAUPL0+VQVToYfaax2pSndzVxZJYTiIW5a0kP6DQ==","signatures":[{"sig":"MEUCIQCXB3HXqg78NrR51Kvx3VnBFUTfZbyj6UOnHSuGkxCyKQIge2NqoiRaOtCXeDUN8VXNtpk5J0oaXPBrbjF/QD9Pn/I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGegCRA9TVsSAnZWagAAXqAP/RooGKF8HsPzOu49MR4m\nnqzz/IMLf1iQ/NXR99/+VXX+DL784T3paFnoviGb/sc8kPhlbirwDvGWKw2n\nrJio3ZetJktlx9gfU8EWLD5ITFjZ04tUncamyr1pRyHjNUL6Dq7t2T1RtcGy\nGR5of5eOHXHIMu39nxn2YmD9u0GybzGnKOsAXHjpnnrXn/jjSPsyPjhXhWFH\npdoqIch831KlLy6fh4TC3gwOVrUhBZFIC0JSZO9PUWNkPUPFsshbEV/oQ7SF\nMsLlpOpIlJOMp0I/e1Tq7xzSj1BRqCawF6MGYhLMB6URTR+picdElQWl/l3r\nHCtGxCyvtEzD56zUl2PftCwbsKNE+u9oxf3ctWUwHJwv5PL/+fiYFPzx3r66\nvBtkNJbPG4VzBmthMFmHUUJNowNqdcACdBr8wZh2cDV2Ly/1N8GpNTWnMarH\nK997WAVEps59FmK1hr0Zews0oxmPZWliDdpQqFcGrKi4a83PjS8g4Wso3UvQ\nmzhPjPlW4Ivz7gi0aCoEVxkm7BIo8kz6qZdwniaOq0j5NAxcoP9MUSjio5gy\ncYps2HRVfW2a8r8Lv3QZRitrAl8MFeCoTfMbWghqu+LObXMFUxxluVvHUB72\nJMbkwxWepyyEDTgc6fRszVsTC70Ub8Ybh0qanF34Zb29bdVtnXiMLxTJWHRT\n8pjr\r\n=YuhH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.93e2288b6.0","@material/base":"5.0.0-canary.93e2288b6.0","@material/shape":"5.0.0-canary.93e2288b6.0","@material/theme":"5.0.0-canary.93e2288b6.0","@material/floating-label":"5.0.0-canary.93e2288b6.0","@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.93e2288b6.0_1580230559759_0.5500716201266045","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/notched-outline","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.34ef15f67.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7af84427e195c13a024db7fc03ae03a94d58f339","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.34ef15f67.0.tgz","fileCount":34,"integrity":"sha512-fr2FcBLqQ3lTuJpoNCq66ws5e8UaJiaCKZupNea4Qu5tuIFYMEccjhvmHP9DRi+tzu6ZEHPRxrDlEcKhgT4hTA==","signatures":[{"sig":"MEUCIQCCr8CFNxxBRRtTmGu2RcbhKGPIipAn9A0SQLFo/oWjnAIgG+JeEUJefdiwobYsfICu++okJVisvP0kc0KvAxMD3h8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG5BCRA9TVsSAnZWagAAmaYP/1P5Da3JLAfRHaM/g6vA\nVp24woeLLrJPRsbaF7kFlbaW0Cbp/tk1NC7yNGD1yCjRlzXQAP/Rnaf2eSUq\naq55HSuEfDQapJqzpFnYfW1FfKL455qJR2SdwyGCJsKtR0OXYqUNE4677Jv7\nJuNGApMW5EouIIMFX5VaY91zFzdFJdfaPthXTwlaJbjavLPe8YP/9RpPS0LT\nwZKKED9bHcI3b7cerNnhF/yv2xRhpd3dO36okRXOnzbSLyGHVCVaELSyB/J4\nvvg1ucxcZ5ip8ByxD8HQa2IFkDojXvgQ2pZwOwMyvIPtvWGvqwegOoxo6lpI\nxS+Vt4qW45o+ghOkJD1utdapR04qYbTCQbkzG9QSWlyNdznMF+Iml1/2/e+4\nXdpZq9JTo+ug/FDlexYwFKuVR3cxtGfoih7gY1TMKyLxh8Arm0PahZjwycla\nmq63lb5nsmITtuCoi7Rrf2e2/0eHENIBa06WEd9LVxQMSvhDIjbtbPdVXEyL\nwdAeoUeBcdRG8pnPBAs9Vh3XK3GINLKXoRc0damnsT75yX2pZxdMTaajUlMT\nZy5DvXDkm/ofxdvBE8HNcV50h9yC+iG2YD0ik0q+Kvap509tpG33NhjHt7FO\neEC/g7nOZeaA9XVh7NkqTJuL0lME+w0hdeIHR49D+IpTKiRUip3icAD7WwWT\n5xyS\r\n=pHPc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.34ef15f67.0","@material/base":"5.0.0-canary.34ef15f67.0","@material/shape":"5.0.0-canary.34ef15f67.0","@material/theme":"5.0.0-canary.34ef15f67.0","@material/floating-label":"5.0.0-canary.34ef15f67.0","@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.34ef15f67.0_1580232257259_0.11276238421993101","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/notched-outline","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.d3d176ba5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dfb62b59ef87ab2dbbe961e990ae520ab35b57b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.d3d176ba5.0.tgz","fileCount":34,"integrity":"sha512-xQf680mkcTAkIvQ4fi+/NGdgPiBc8uJ9KTc6T9r8FPBu12jj2WJJg1n+hWIiIDmeH8NA+4xgWdzB0pRPn+doCw==","signatures":[{"sig":"MEYCIQCfAnYBdtbCXYHd/mUiINJf9sDCnvYd7MSbIf1z1hYQOwIhALz7U+j1r6Gx2kJGwgQQAeKTopesU5XbPQVZYotJv3BB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG+SCRA9TVsSAnZWagAAUtIP/30HLCj+iytdKgGXrx+k\nPURFkoluNTDjA76RIcCW0tDFiw7Pe9SIxFcJHjDfsfISYHv6yD+aZBl2Fn1U\nw42XjRQUZNgz9BQX1o996G8kcvfwsh1jDgSR4Q5111IGa6OUxz9xJw50RkDI\n3OuW4KsZP6vhNWhisftzSLKulmU9vbwD0mFI6d9T9UWuLjqwVXh5c41iQdtM\nZzAY/J1TbEoHso2C17e5nX80NiUs6C1ZvyGn5Ho3hqNexZ/ao+DkHzveqcge\nDwhFe78arBqwbyVNaBuIFXLIeIEjS0+TMPcNuqgHjA2AO1CDuBcrbU60CoMT\naqc7PEECYMvyrIXFow1yuJ8hHWMsA2zcqPATBTuXp+Fefx6aiMj1fqsnDCoy\nTWTF+mgmYDLHiM7MhmUo0OChLyUIJqcN3+x4/PauA19RBFFkOG61hKjtUliI\nkF2ObS7n2hV/ww3MEIabor1H5iJ4TXlIU+ykUJe5IIChAXXF0JTkEsJkXZm0\nf7U6rCnNMOytVon08RHJkGoV9TTZe/9f14g90Zn5TZKPoKBoUZaeVSwlL+99\nsjrxM6utQP9tWqMAheq8aS8/VhsWDuskGFObkgeCcj0sIG2vun7kNQKNSffW\nYYlGXG17ITXggycD9GdngOFERQtj9bUMNFRoYrkt0ZizstqoJj5tlFLuIpNX\nBrXw\r\n=tu++\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d3d176ba5.0","@material/base":"5.0.0-canary.d3d176ba5.0","@material/shape":"5.0.0-canary.d3d176ba5.0","@material/theme":"5.0.0-canary.d3d176ba5.0","@material/floating-label":"5.0.0-canary.d3d176ba5.0","@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.d3d176ba5.0_1580232594387_0.4858532773366686","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/notched-outline","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.32c1df133.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0c4b9a315c62acd551ca7d7c684199d0c25aca2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.32c1df133.0.tgz","fileCount":34,"integrity":"sha512-ASoa1SrpCjdPM8DT/R9SSdh+EjzEAn8vFVd7ezN0M8jB3Hd3v1y+xzEFNFfzhOiZNeB/s7r2TgsTU2Uc4FAUKg==","signatures":[{"sig":"MEYCIQCTT9asv7+k3Wf0nzS2vE4dhRR2j58w5r/JeRgj2bVNPQIhALm17eVtBR9QvYvqEHdclQR2eUmjOmfB4Q+xVQGH8FcK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI77CRA9TVsSAnZWagAAUOYQAIyuYIBXMAYsNHLlsTRt\nVOvApD4fCnuM2gTZ6Tm5+4/CZLlOz4RWyOYwUcUfNwQBj2FaSJeggteq5L1h\n3KHtJJ1AH4i4mO3maUrXsuC6pzVhsZva6AO4v0jYIWA3Jhn78BK/RhRFAsbL\nFF2hZ+Kmc06wooSL+pcSFFj+HSMGcJpEbT/eo7zzwHctmyQJeTuN7K/X//Uh\nzYnzyt3qDCNHkUH9Vq5E4xRA5HsdIvpwSlpWTmA/gVGXDrP/o8qMBEQnlzb4\nw4IqIdLFYCVf6EPRY1x510/l6h6VZF7HrG/TrsR5F0y5cPED9G5EWJ+71sfA\nN5lIKRBRUgKtMp0+sRcJCzSvwd/iCuiTFRjPESkdH87fgwyMWLJh1XLiJBuP\nntVCno9tPqNeQ4D+jdVnBSuWIFPr2xHdM1L72JkQqdCIad/NqQm2UXi+S2q9\nCL+n4P3XVEK4oc0GobOX/FeaC7Nal8gC6BdYq8f+5fSdZvSvG8NWe6Q6XFIL\nHvfO8wI+q88YM5XysV2phFc40a2k8qT4x49bR9zlUq04TKhTsB3knlixhvkR\nWJAQp+8x5adplFF9dzeZ86JA+eiQfhhjBAlooTX9/V9fJUF2ZX+Y8Rk9n8K0\nfSokAkU7dG/3Y4jBTc7oj/fqxup1zp1z4LIiIr8F0BfoSxIbxX0P/kQ0m4uL\nklLw\r\n=4Paa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.32c1df133.0","@material/base":"5.0.0-canary.32c1df133.0","@material/shape":"5.0.0-canary.32c1df133.0","@material/theme":"5.0.0-canary.32c1df133.0","@material/floating-label":"5.0.0-canary.32c1df133.0","@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.32c1df133.0_1580240634690_0.06661728656395427","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/notched-outline","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.f3adce86f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d7cbf983b302e3c21a160a3622c11f43f177368","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.f3adce86f.0.tgz","fileCount":34,"integrity":"sha512-j4Ci5mb+c9gqIjS8Rkb8ivW78OKa+Lt9kh8SSYbSkFiZ9j1YTrb2HLt1ty5+xd+jcD8uP/Q7bWsU/Uc7S4r6hw==","signatures":[{"sig":"MEQCIAg/Sb6+jIKWys7ejxR0j39BdG3z1t67QR9tMNztSLxVAiAnTNMjXpf8ehNVq61tEwg8/1P+hFOE4KHkBZPeKdu89A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKxqCRA9TVsSAnZWagAAMUcP/jXkxEsuC8QS5aXLza/n\nGpc7Nzcah1xlTzEfAX/X2LG2U3QGgrqCz/UMEB/AI50DW0oHHKwzmBInoD+C\nY5A0/lot2nhY0/WPu1Gb/jbzkUt3BUiu5OApG0sOSrRLRB6Co7xP0bAiNfJd\nGb8Fzds2bQkM41az4dRthqzexiXMSXzSn+MVta08lwOa+HlUKomlCVsR1ko6\nlDfGTt+GZ+y+J3uSb0b1b6UNobg1KqnICwb0+dkEYB+PbDZ7LUWobbQLpcMq\nUoRoDUEMGD31FTSooYUTa6EdtnIZFb1Qarto+Doa37XvPgnFg5TnGzHWq6xY\nsMwCsYQsWiGwgaLCc+FhjKrZ2n9qT48yKjCWKENmhhYWMIf1Bspo/orfAY+d\ni90048AjghP1hGvtlz3DGZs2dWif4Wax9pMKhIJVEMGT7KhW34O1Cvyxp5nO\n04Z0CoiRaL4FbkQs6WRX2v/qdFpTVGZRcEkOLXt6lhUoFCSeKS8ak9Fz+lHL\nBhQJhzeO7xQoQjaECEC5NwZ5dxy8jR2wuu0qmPcT6OChEpXz6gUlNhlKJ5uv\nFXFmqm1VEiqFA0n1y+MotMtGN3u/P2CL3bs1UK6ud5hegmu+vFx/CU+u58Zs\naLnD6xPM2pWee3UFVFFXsB9FxWGlLaWXhaFhacrcD4OKEvV008gb7hEWATd+\nsOMw\r\n=dvxR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f3adce86f.0","@material/base":"5.0.0-canary.f3adce86f.0","@material/shape":"5.0.0-canary.f3adce86f.0","@material/theme":"5.0.0-canary.f3adce86f.0","@material/floating-label":"5.0.0-canary.f3adce86f.0","@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.f3adce86f.0_1580248169748_0.9348227220363645","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/notched-outline","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.a4423f890.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1e5f96e6a8df8126310fc5d400c6499bf17bb51","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.a4423f890.0.tgz","fileCount":34,"integrity":"sha512-e87xThmS8w6pNW1Tr+koZyrJfRqkNIhQqrdeqDRyV4QXWBPhp3Z0njBpRZM/tN7d9IU4zeVBOoqUxBPbQ7S7mg==","signatures":[{"sig":"MEUCIF3p5TFdt9F4n/ZDPXgaGGSdM9RhyxaV9Ex07BgaBByIAiEAl4eXo2DpsFJWxSXeJ8rTldy2qjUmJRZ2s+zLiO/5A24=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfS+CRA9TVsSAnZWagAApIQP/30ObP5Qov4Lt4ri2QqR\n9MeW1cfxmCm0yjkrxUlTpbaIAWt9YqsHRxQkZzofQEeGzgNiMcCjxUQeX6Ts\nMXRPDC3Nh3mO6OwhkyHpNnz/qUOfbBwKGddiEYWvhmOmkwuT7p1417kBJGFG\nFhf92gDgljdJ4soIEyKa9+b5GUxmzR/Oyg+sgLPlEPSrrxL/r1EjUWGMMUQu\nwEYWoZnQvk8gWSOl++h6Z1A6DXZVFxEWbbI3aZ/khCn3pDRuJJJpHcJZqTfo\nL4wqI+mYa0zZmAvYeKGRfIJwPKLAj6m9qyP+Z/SSnL7vXVl6UXMH7TIdhPdL\nw+CzqNw37sxaEHndpnFKiHylrynOv5B/s5DZJX0QTX/7yft61AvHbrNOfqZa\n6V2S0O/7R9ynlC73MGI224QKvR6NAb2Vu5WydJAQ9ZNksM2H6T12MKF4+PeA\nKuTGXyjJv5Fce1GtMUM9HJX10PD0QlSXcPcU/WwT3hZsrlAL7adOQ/lLa/9N\nI55+IsX+FGKy2K2aDfXHMO0l5RiTR6l8hn4860lku8WXfKAKaUhTo75M0nOH\nh1UnENPH7PLuAZJyqk/esNWHPvTG1dIot85w6mfQc7GKLa9OroYMeb2wRjis\nRNWUWIbfsyHK1pyus9QDU9MBuyhYfbuuOPZJ1LLEuE4hvQzJ8uAKyKrHZbgA\nOOH2\r\n=Wc7i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a4423f890.0","@material/base":"5.0.0-canary.a4423f890.0","@material/shape":"5.0.0-canary.a4423f890.0","@material/theme":"5.0.0-canary.a4423f890.0","@material/floating-label":"5.0.0-canary.a4423f890.0","@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.a4423f890.0_1580332222155_0.21403477930850556","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/notched-outline","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.9351f167d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d04e05555bc4673d389908e097dc7716b9847bd3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.9351f167d.0.tgz","fileCount":34,"integrity":"sha512-55hAcJlvt/62eZA0r75lnmzZ9N8QMP5uB+ChKpnaJAjUghOlK/Jah/8lvKgJ7IN8cCM4N0xtpnyV7L8RMFvHWQ==","signatures":[{"sig":"MEUCIQDFy+6XiACDO+I5apEKIczO3DNtY2Nbz20O9+NOFbKwdwIgY+qcXTqyUz7KoVvnFrXMNLtUANw24cegagyYJYxkaVc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf+DCRA9TVsSAnZWagAAfxEP/02Ij3dMybiYrRdHXabd\nTRiGCzuM495LL3Fjr9QqwIcAo4LmPkU2b/sX9n1xnDVE13shsvE9WZKO4gfI\nm9ctXMqodMhzNuZD4erGo/vKn/PGRB0XjYjdhabl+kCG3yJ0mDRJD9tlCbgl\nBusc8LUhJKFhf8A7WJKvRI6O0EAb6JDdo2fOzIx22fv+/oZpSMI4U4oxpIBU\nzI6e2S6ri3k5b2Vm2eeqhwqbTx9kHTlow1nN3p5JE95aUxNnOy4yzlxTvUQj\nyVap+xWy+nk1m7xIpANWLI+O1MIzyJF0fOtxN3MeD2ag/9tzkuPAwf2X1NjX\nuxD2uBHzRlNRN8w06M4FaixY0SYE56yxXMTeTbzT2AidIrUOsEZz/xCHWWf6\nF+xm+Al9y9YQTqg1a0SvqctMeYDWRCAlUfw8gQGi3C3ICH3Uu8p613qPmEqk\ns8UMZn3YRAbRtnPWmdauw+j392L+Q7lR7wZiQPNHg1cbG//HrpN0JANaKIlv\nEb0n8vfg/OV/5IYx8BSC0RlxwRw9oOPzUYCf3BqExw45bE/9QFyg1XQ622eS\nevlcoJoQ/0mc3dKD/sz/jkWs6jkzfADuoSReFk96LRlZQM9eEKaS7RtyoBj0\nl5Npza5vQ9xB0j3CXv0Q5hadjbVy1EhltGWvq7QOkBDsuxdqj1q+uQLvhTuC\nNO/d\r\n=nb0F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.9351f167d.0","@material/base":"5.0.0-canary.9351f167d.0","@material/shape":"5.0.0-canary.9351f167d.0","@material/theme":"5.0.0-canary.9351f167d.0","@material/floating-label":"5.0.0-canary.9351f167d.0","@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.9351f167d.0_1580334978731_0.24865713390971367","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/notched-outline","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.29b89dbc1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b5f813e34015998706ac2c74eeaf296a63be354","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.29b89dbc1.0.tgz","fileCount":34,"integrity":"sha512-6cri8vgClpF98B+jvqljPXfHRCqsK8HhQGby7Kwt36eUhbmYGX607mJpSLcMYPPa93kEolIsP4o0N2sDe/uhFA==","signatures":[{"sig":"MEYCIQD549+wnLTNNcKC/CeBQx0IttyiQ3fkJ0QoMJZYsGqk3gIhAPCe6kNyMrDF8OwgK5Oo+6eCGmOhuktrjhIPU0LftbzT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgRVCRA9TVsSAnZWagAA1hMP/31ej1pR4RIUGdR1Zggl\nP4aR/KMhAGB47x1qWbYTmCjftXnak5d/ikHOdjg82JrBGFnx4y72eamRhO7+\ngWfP4JlHs7yODCS0qOY2+yy+cIroxB2nUbadTQ14N37nMx3M0xvFEZ1zZIUY\n3SnO9sih14y9+VtJIiHjmlYVpH1pjO8is/ExxZ59uQxbqbCyIdTz9vDTKivc\ny/BxkSXR9eMmGHbjAiWnbK2YwMR7iIM/zQefKcDUqytMISGCxGbcL/xY/HXb\n/5m9ftmhRBK1DCblwFVT2qQgCjH3WjSvbENYhTYxc7z7FCzujEciiwJ1fmIY\nSeXvdeAnCvLQCGrf4jAoOhgEsiWO6G2NG+XW6dxMtE1d2O2KFH9WcolJEfsX\nNgw7E92izXHXIZW+czC3Fn0a7/7V39t7z9QKop6HAaNoTbmXNyPppCcdC+Oo\nkluwAuFa9Y7CYzaxFB1T4g/nwt2mDZAtQnisc2U7idu1yA5GecpmFHMB0v4A\narVabj5WC24401N/pU+HM5IOQnckBLAoJfHWwGRwLiW/BhpAc5LNknMbQBHK\ndwamKCUnc7/nXbW3i2mezetSF3PsG6vkMOpMsAo4MzQ6f8nefd2BNPou2OcL\nZqM+sZpVNYT/hoc7feMuc4EH7m7HtQ0hqsPz5Iy0quvIDKLUYwFeR4hubBBG\nntP/\r\n=hKWZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.29b89dbc1.0","@material/base":"5.0.0-canary.29b89dbc1.0","@material/shape":"5.0.0-canary.29b89dbc1.0","@material/theme":"5.0.0-canary.29b89dbc1.0","@material/floating-label":"5.0.0-canary.29b89dbc1.0","@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.29b89dbc1.0_1580336212818_0.0902010754893745","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/notched-outline","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.45985457b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5c0ca419485403ab4d22b9e105f2da406a6800a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.45985457b.0.tgz","fileCount":34,"integrity":"sha512-d4BYU2YgIKtOjbF7XVL2w97Uoza6eqIPBeBWhA8pXl3h83lHKyQaQewRtE7kLfex2a35WCTc/o5IotqFK7v7pg==","signatures":[{"sig":"MEUCIQD5Q6Yv0Emf3oqW7h6Fo0yrHgkPfSRi2PjYnm7ZlK94fQIgJIlRa/axH7jaCwm9bdG/0B7FHfq3tyA0hENB5QjA52M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhZdCRA9TVsSAnZWagAA5UwP/0rpueGiPQiHpEBICX13\nMssVOBgEyIIYuh/LTKtHc8vs3EERfOcia9pKomD2D5MWm7UK6MJOTRMtHu9p\nHjUJ1lCbs2VimaJPmsbbQG3EDqPKPHV6NZ8iIVbg7J+FEWigETkpiZntENDi\n3mTq/OoOyVlqPSrQrdfRFU/2m1/Rv1lF3Q7TdKyRTkHYc8Ilkg1i/2Rj369U\nMauRwMY/IHJ96XXPUyrDYxczZ4oZ1fTiujbPq8+O/0JvavY82gfdFFCLlK8E\nVyA1tNl9qKywIJsCiTJJ2XKRs+6ArEFB1Ywjj0JgcYexuEVFNlsisWuZxLp3\ncZb8keFBXy8m+apKXR34yq9PfPl77K6Ps8Bo/PJGN8zbyLrIOSKUU8/aUfob\nC/2D+uanwWCUKTjZD4kECpOHbfmRiGG/X2410CypM/MIa28lGBnl6yu+6mW2\nIPp6b9MzsffcZcRpoYs5XiqyNRQG/rWw920wQ/VSUt5uty1pymIxfRUiLpHm\nUw/p4wvtZOLedfR4+udS20FTNMpQWuMOCygQbq/UzCazkvcQr3BDVj1DOlJZ\nn90W79DrdO3angnrDPV9fIm2qYblnAptn49vpk8YY/NfzSeEjM8GY44rQ7PB\nYQmSbyehAfdKr7GJ00ErzFTdKHRXigaNjUC5gpk29+bY263SBqRSkgYWIK/X\n+C0q\r\n=8lBz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.45985457b.0","@material/base":"5.0.0-canary.45985457b.0","@material/shape":"5.0.0-canary.45985457b.0","@material/theme":"5.0.0-canary.45985457b.0","@material/floating-label":"5.0.0-canary.45985457b.0","@material/feature-targeting":"5.0.0-canary.45985457b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.45985457b.0_1580340828587_0.3239412562351156","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/notched-outline","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.a1a0deb3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb8480400b60bf5c78fc853e1c94b80f4d2d8abd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":34,"integrity":"sha512-3X8MDHJtD8xw0Azytubn6/hpunY/rMvHj9vPgaXaV974jfsvK0be4B3xaLAj0yef24JhhWsgqcm5YnvKCTcUjA==","signatures":[{"sig":"MEQCIE+6fewf/3Ryp6mwuqspz0Q1qc07fI9DuG7pNE+ITqY6AiAHSiRsrDd0esPq5Z/Km8Dg/XeJZsDYiziPcIAfcvMWuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxRzCRA9TVsSAnZWagAA61gP/i1akE1YLhTaLR0PoiSS\n1BNQLBOGmNh+Om92IJrhmVtORfBRAIgx14KMzUYzJ9MXeBijym76VQ1zf7k0\nz04e0LzrZ0030jd5m9syZZlb1M6P+cpEc5YU9xNk9EC19L32CZlT3qi9yTra\nJf4DUyU9GtWft7Lepg0q0VZP1+TAwNlapgzaQg7xP16CE3EyABaDjRBC+0OI\nFaNpRjsbXfSeIMdVQphGkDQcAcrQiD+/rwvw5IShUtymZY5/sAuUfL8YQFfp\nCW+GBwo+BsptIno3+7xnNGpVu7qIShr1lxQlGvciX6ewqh0l4MMScQS3Mdy9\nO2oBt18E1lLHijzA1ZLE8xB/XcdA4RECtMs+LnpiU0Ugiq8fVUa+pXyE+P6u\nldH6PrCJfLIBXe8ehGw8HgjBoOP07bcB+WUi7XJGHXt4cgafGBeV864mclej\n6hziLn7f27Qn4PmArjxU5yN9oPExkqT4bbMiLuy0yrzARdnuAQe/4OJwzEB1\nTF0kw2+f9sRxfh94kqAdBTQ+hSosZDMWkL1/IWrM24ukTaB7T5xmdsgMELaA\nQU6hx1G4py/FFepeIiRufxLBkcUN4jlgmlsLPh8M0wkH0Xzn0kN6qHpC+vn/\nHATkNSi0f6sGkmv/sM9FirD4VblKsb/NoQWgyqLIQZ23Ftv024FrZ3QTYCIL\npK30\r\n=OLWG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a1a0deb3e.0","@material/base":"5.0.0-canary.a1a0deb3e.0","@material/shape":"5.0.0-canary.a1a0deb3e.0","@material/theme":"5.0.0-canary.a1a0deb3e.0","@material/floating-label":"5.0.0-canary.a1a0deb3e.0","@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.a1a0deb3e.0_1580405875030_0.9011333744256296","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/notched-outline","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.181486643.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2b9834c81148a1fac497c5cfb71d28bfc1b8f24","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.181486643.0.tgz","fileCount":35,"integrity":"sha512-0z+WCp4yyAeGGaNsX1SLqg/RUpe2ix736UfdxEmMwWvbjaMAhBrIIOKrumBHY2XTVcTyT5NHre27n7AyUUOuxA==","signatures":[{"sig":"MEYCIQCRoTvA1m7UhEhoV3Qq/amWQOzsIrjV3gSXMUAK9e12RwIhAOFYU+/emblu2Q/qFlPiD7YIqsIEK9TSQYQvGvvk3Es9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0MOCRA9TVsSAnZWagAA3BUP+wXK8Ar2nO9i8uGd5Dgy\nJGXtrvcURRednEz1mYoEMDt+G5X1WCZMIFCIcXqkY7uCOwwO2fZVJQp/hbla\nm8qvNV8razRXT3Ys3hiefHBzPirRPOkxg72SOxEAsECPw8Kgxxwvqf5PHGo7\nnHNWGS7W9j9cx9hYoP0JiMSP1j8RlyRHZc3rE7lC/Ckeuv4WNuQyFxdCEKvj\n851rcoNJRe8A17/pkMhAzK1bSNv6QX9ghtenGa0wFD+qCcppyj6RRCmzow7w\nzIXpa/kF5e6aRoDVcBAIjXlgee+R/K8LSZtG993lQZcmWjRWdzRZg8VWCcgk\nj19UmDXNm5f0j7Xn9sbFT0rCgf0axJT1ozF8+z6LIVh4hWZ6Kmpfxvxtzazt\nc0C3NZNCCu9hG4Rnq7VA95G885pWWarfYaDPeRNjdhcX0nvp0nQDg34uNTnk\nRD4rJq7tXY+6vJDvn91QOtqIZHB9nJ3Ogx03qsg8lBcq1M64Sn6/kdhyprNt\nLRY5muYmMRQckI9hWAYRVnfVAHNcxnc2iw5Y4zg8WsZSQfFh64v6br1UR2rw\n+nCfM7vso0Y+Xxz7RBYb2scmvZaF1+9KBG3OtXhjgi2adGbxh32v5K/siOrm\n9h+YUYu2CqfNGJOVl4TveIW8i8nYKX+2swlfBiPWzcvZGXUZgCGsm0sOi/Wq\nXmPr\r\n=RGn/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.181486643.0","@material/base":"5.0.0-canary.181486643.0","@material/shape":"5.0.0-canary.181486643.0","@material/theme":"5.0.0-canary.181486643.0","@material/floating-label":"5.0.0-canary.181486643.0","@material/feature-targeting":"5.0.0-canary.181486643.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.181486643.0_1580417805880_0.8989418300276855","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/notched-outline","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.3a85313ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1db6ca242d103fff1eadf7056c1e13b11498ef3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.3a85313ac.0.tgz","fileCount":35,"integrity":"sha512-LgKGXtI9tzmWtAfrh4gpk9NsYiIvGMH6GIrhFz64twEPvg0AKD4Gwdf8ZY3HNf35lJNStk5hkzRnG07J8QPXGA==","signatures":[{"sig":"MEQCIDL+vm8u6+/3hLuWenas/l4nEu6mfTLo4/bFoOsv2T56AiA/NC9nM7VEZ9KRUhB7KgV+fo83PtekIF9mXZdtenUdjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFSVCRA9TVsSAnZWagAAAyIP/3yaB0kN32aUUaAxQhib\n0mbDOjuK2SUOLhuM9lNtjlhs5tQa0+BkzF6JNHOjUZgFRuaZqKzmCIUHqqBB\ng7dzT7iXdD4JxtIuDdgZdQK2cWIbpHoLRlS40+qP0N0ni79BD5iDk+UmY+Ty\nC3j9/O7qUp7G/qNVvive4Pzmh37xIblkQoc6k7T1nYVIPixqvs6EvFDHDtkT\nYo5C9woVg0R5MeKqfcrqA25TOEAu3SoBrl3Hu9mG8Wl4itvCRToonAwmiEsA\noA3o+6Cg5jD4Ds5WI3Io6JI5u564gzNwnWzBrTPOmClqPmFVFv/tHUxka/JZ\nzzFIXNI3VInhJTGi4QaS+74ZYaOgYD9L7/H0/44ukRSWhhukrUudNlMg2n/M\nHXYjLz7cgfonhXaz0triiSVUrPwD0oSj/TTn3oeJ6eEnRM50LnmJ3XCpafq1\nOZXqruzNyE6HODydWEV0RlN4BfxlG83r5ZPExlxBRRusemf7T5nWTZ2d9OyN\n6mBXa9AFTWOnNF4RHtC6xA/uoeMlobO7aAxmy1mue1geZeHB0mOZrjsPb8/k\n8J7jOyLke3WhVrgTasnhVpo+tpJk7dZYeoN173Mko1FmZlvitCF9YS2fUgCZ\n47OPY2AfUMGml8Vr4prGgxClbmdKVQewlRPakk8bgZMomQZqjqOkei1LmdBX\nO6n8\r\n=3azd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3a85313ac.0","@material/base":"5.0.0-canary.3a85313ac.0","@material/shape":"5.0.0-canary.3a85313ac.0","@material/theme":"5.0.0-canary.3a85313ac.0","@material/floating-label":"5.0.0-canary.3a85313ac.0","@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.3a85313ac.0_1580487829169_0.73433230009434","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/notched-outline","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.b6c7f624b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f1d514b40ecce06b21e378029575518679d64e8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.b6c7f624b.0.tgz","fileCount":35,"integrity":"sha512-trEgcze60ZNGJrR/qDw4A0lEmbEnpSgm+XlI+xPxDChmukB6uRf8acl64nvaDwRGhb8KLCfCLyoxmDbur0aO5Q==","signatures":[{"sig":"MEUCIDcX+E4kXp3j88wwMtEmuFbZ2GlLkiWliMPIj8qCeARsAiEA58l7Q7FDeeqEu8Hk02z0AaE9wAC2dcLQpoSG5acqTZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF3oCRA9TVsSAnZWagAAfzMP/iFQAycrHWj+KftehmZN\ncLg6YHGa6VYlcLF7q4m2cVXYN1f2Ao+TDkHeVAowMuaENk7ZU7EflqtL9hgO\nDQB3wHf8K1wemfQ3KzlSAI8put0jCN8hiI10Ye8W1GdZWxHQ1zFHHos4U3VU\n50GBRmslx5BL3PEHme9Uu/fIJwrYfhmM1Qzem+vwYdwV2pEkL3xtYGe95RYX\n0o1mNzCPoRG4XpZSiXnysqch0Xy6uv67JHOz3qsEJVhNSELLGZcoYhAN+023\n2cQ4JSHlymI2zPH5U9XgbDRBNyGl6YZFwb43AwTRXnZcjQ8i60X5zQsRrAmV\nfIn7GOQliNEQC04bAAGPFIFify/zrwBIFxuWn3gJNicxpP8epR7qStYL1k16\n/fRG/ZY+n/gJiYsPKOqnaGq5JQjIrVev1VKM9TdK5aCGmWvmuc4K/jwj7Y73\nAEaKpgOU8QE0o2pieHfifjMzxN2ok8s2y+waXgN7pHF0boLkSefQ2Sd5AU+N\nnhBZ1thrMu4/EBbW/gdY3MIwUQ7wIjXqKjfPYDxAhsgt9PBe+zhN9u2Fw35x\nWa9TiPv/w8wMr7BG1Zh1MAkJbBnRW7k0//1Tys4k3tjN0rT1t35ph1lTEkSx\nt3yvkn2rupWjbSpcI+T7tZnjrPeW+LqzbGkP2QkTibsO2scrx8kPONuBXnJp\nt/jG\r\n=IJaj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b6c7f624b.0","@material/base":"5.0.0-canary.b6c7f624b.0","@material/shape":"5.0.0-canary.b6c7f624b.0","@material/theme":"5.0.0-canary.b6c7f624b.0","@material/floating-label":"5.0.0-canary.b6c7f624b.0","@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.b6c7f624b.0_1580490216471_0.41142548121819056","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/notched-outline","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.b3f70ebde.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c52d3c972d26edd6bf4fbbcc83cdc1ca081816bb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.b3f70ebde.0.tgz","fileCount":35,"integrity":"sha512-n9lOooYOV1byY+/VVnbbI8SfPylLSU624EqERxKHFT5m6ZSEpjJ1nj94q3iQtYQDUZ8xDiydy9qzzGwP2rI8MA==","signatures":[{"sig":"MEYCIQDfNve3/HQWxRqoxS2d3d9XwBN0vUop3WlKjk+EvQ+xmAIhAKMAaPGn1u+TMeYCUiSLOozumJ4qxpisNEGkW9jrqe8E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNInNCRA9TVsSAnZWagAATfsP/0LhPW7I4Bn7QoidvwBO\nnmwcwZHluZymAFtboQNZj0zQEiPCaFUpGclxsTVJqDjYgJPbuIv5jvolcNXu\nuStbm8j9sibZvjMjqOY5extzYGHIcz5WOM2NajSucVw4EpS4d9AMVyq98mNN\nXgBZhEhvwmWcTqUccbJMfC1ud92bMfAVWeh7WgEICKL7ASG6WZeyBYPvfX7q\ne+B3eOZI8iCTPAX2hrRMZeKl21Z2ATgzXu+Ki+KwsDJvz7aS04gqyN5pzWRU\ngJ4iVi+iMqu4ZgL73+Iv3TzRIFSwI+ww/m+uH5vOEe0bd5jwHbe/kgVuTsyy\nxWaS0IOUNs0VXaQS7Llhn9WASkk5UO+h9//aJq5Z08X4oG3f3siYBQsaI2Qr\nXXsF3sR4DsczL8yndrrLnvVIAGpVBdpWewFcLqBY2U7MN2MH/FSZLBwb1YoU\nG66KXKGNXesGZ6Oe9YHETYOVR5zrttAIdZgfX72ZzhI4MP8o8t7tjV2sAo8a\nt2AlKVEJobRQDZlx82kfLJ8BwTE8gelAH7zglpcUPBw2ZxcmWe2OfsmjWBQ3\nvMKa9S7UtfEPZ/Pl1Gubxtq33q6YA5D7QPvxT3ylviIr/FN40g50XK04xeFj\nG3DR260PhaACKTtmtAvcwTJ4bwjVQ2wMnhqed/8yR32qFyhkH+BL7x2P0/0L\nLjU/\r\n=tM+8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b3f70ebde.0","@material/base":"5.0.0-canary.b3f70ebde.0","@material/shape":"5.0.0-canary.b3f70ebde.0","@material/theme":"5.0.0-canary.b3f70ebde.0","@material/floating-label":"5.0.0-canary.b3f70ebde.0","@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.b3f70ebde.0_1580501452604_0.6343241475993902","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/notched-outline","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.3e782d8f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"882f74e7d55bce59971f82b3b07f8a56fc175fbe","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.3e782d8f8.0.tgz","fileCount":35,"integrity":"sha512-kaAGO1Vf3ZxZzaq6Ix14qimWS9wzDfhaRNO9NYkRxYyld13lYP3grGXdnTNVzAnCNa+BEirnfESsLJh8vwk6mA==","signatures":[{"sig":"MEUCIQCpdG0OifL08EgYrMPagk4o0Di2+d3/ULCQBFcYWWQ4ZQIgBPrl3CRF+Fp1CtD6gsMgROLCRIkdnhMREWjsVDkSkMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiInCRA9TVsSAnZWagAAmawP/0ppLCAGCdR89ToZVx/+\nQcRzONUI/BIMGSdkIbKc7VReeoXLv+tswSE2otezo1MACAfhwwZRfH/E5i4t\nUeVluVwo6qCSPgfcwwJhpnXLj7Z8Ki8jmqfhXNAi2QP8VirG3wsp4HGS8htW\n+0DBD7KeIeP1z1zeKD54789y8lj4YVupna4x85jHYBTu7iYzvtGPm3/LWvXi\niUTho/KJH1r4Wf/EuOc6ESpo7XcQNbPSZVSceDFU0OhssZ4zzQlwWKRXQPRI\nxZvIUl8rQ3oenobLIQA5RH3Q5PtNBS7pMmeh0R35aDRx0zMa7WXunYU2M/1S\nK6VWy71B7j4YL8Q+kMwLm1gcKVElmiHfO3bcLbr7lLyokbBvfLzCqex+E0NO\nhErJGZ0XGWWqQEVAWv+5yKgCT8eMplJrWmRjufOOIbBa5QzquhghW4MDPyMq\nZHnA+Fbn7NHlDEojAECh7wxssK6KSQAxbC8dSHsNYrLbXOX6yYcXpNycl9mn\nF0DtR+XppgNTEbHfZzNY3NyOZ/F9b3hGNCNkbyMioo2vdptzlJ6UQqrsoxYa\nuYS6AkIJXO93KkSC1fWvlkS8eL/UcDwA2ft3QohcALL8wniZvSjU4iR3TMi+\n3Yx8/1NN2NtZH2LepCfYsOqH9oKK0zyrSTz5nVvFOS4bISuGjuRIquamzoQc\nl5GB\r\n=sFBb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3e782d8f8.0","@material/base":"5.0.0-canary.3e782d8f8.0","@material/shape":"5.0.0-canary.3e782d8f8.0","@material/theme":"5.0.0-canary.3e782d8f8.0","@material/floating-label":"5.0.0-canary.3e782d8f8.0","@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.3e782d8f8.0_1580605991081_0.28499511330894856","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/notched-outline","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.535398572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9d5e997b0e46185abe9a3b05dc636f1441c0185","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.535398572.0.tgz","fileCount":35,"integrity":"sha512-ScKl+ZK5qw0ddhC2HLxUBy6k6fc2/xIm0/1x14b9afDPjG5BOrb8/Qtd3PcyJfOy50DJTk0AaYhgBeapgpc+Mw==","signatures":[{"sig":"MEQCIESQWnSqzFl9qU+IKGwvXBxY+rWSTIfWBHuO+AJx9StyAiBoUELeUT62iJ/EgdEYPODK5iOV+PbklW/nD/QHJWV+ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGJ1CRA9TVsSAnZWagAAx9cQAJpFMz8dJW4CsARxamTN\n5C3x90UbR2281iDyLPN5JNWtfETDWVtAlx/ht+o2Qr/dHW93ZpIQ62JP4q9X\nrykkluR9O8t/aeSW6msS+ghpD3VhZjyAe9K4gyqO2ppauVwhfU5sngYgzyJv\nEeMMjfl9h6kLwsY9mZbHtPNL+om1m9pPyM0lbOzsFrvifj/7Wq1yuZNsvBWf\nB2cXxMA2KieKkt+bXAyL19ovPyaMZceUOgiuRRlsXcTWqApt6B7Ko9rhYmvn\n89nvEHBnE4a55OOR6WeyvBF/WJ3roraCAEtKZyUGpaOh+whs7QLqeoB69ytz\nzaq9gl2k3ft09SsF9O4t3sC8FSqRTnrUj+Dl89AIWDEtWqVZmw+6jJO2Nz7Q\npMVsGj04GoC4VQ92a3ValyWyJNvr0F103zyU2Je+h5YuNv9tesemjOYMC7Ju\nu1fpifSDqn9kJPVjAKELNGkfSgMsYSKyYAA5/hwEkdVhTzHCigW/PP9zrYij\nn5/YjX2nGY5xM7ECmijKJSgTRGU6wVERQMlnxE4zQXLaZ9eDgvBx0piQNBCd\nodktrX15j1QL/TA8/sCLW/yEE1L9cAgX+9D6vQyXhSJKVT9ZnYlYmfm3+c+8\nL1YeMLvnfNdNNSshKDUKwL25S5ka5uqIIv2QXcXDy50pk0FTTC76XWgkueS6\npHiy\r\n=wm70\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.535398572.0","@material/base":"5.0.0-canary.535398572.0","@material/shape":"5.0.0-canary.535398572.0","@material/theme":"5.0.0-canary.535398572.0","@material/floating-label":"5.0.0-canary.535398572.0","@material/feature-targeting":"5.0.0-canary.535398572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.535398572.0_1580753525392_0.29633395867223866","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/notched-outline","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.5ff33802c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4b79a8a0f672351096b0cadf65926d5aa6cc3c0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.5ff33802c.0.tgz","fileCount":35,"integrity":"sha512-6OH9w1aDjVKjkApo+2rQCc8GRb+ugpBstwqg1Pygtnlb00ASWODQNkiS2cUVIghVegn3Qx7TCCwwccq678/14A==","signatures":[{"sig":"MEQCIBXfDW6/RUXE+01w9ocd4alYzavszqzMwDHCHE7BB78WAiBu22jV8kOLx93hm4VBOmn0wVeNM6dHpZUOlvoB9AVkLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObIsCRA9TVsSAnZWagAArqkQAKJlRjjutKU6slLRmDOv\nM3peLQyq/wRtxIxkNz4+5OUf1waUIYP9SBJ8ewOdyF9flM3IYfCpVAIZDiRC\n9qHv3zDOzCCMtKXiUHPipKVOdLKoOWS5NZDWceu3T+PWUlKu5u2AUtp9wqtc\nqyGBBjB1zkcxmLbelWC7Tf3g7GPbtZTMdUKjMZj/nnxLTNr/xheGWXKykLE1\nXNPiYOKiWLjfmOeXIYpkhJPByK/HGkyfZHkK3re7C5dpGRkHbiBmzmg1xlZu\nAU/Ran0vDQluyjIyyO/egms/cgBvn1IYmAlKLHwAXP1RmYIJIKgqH7KDz/1z\nCPLUBuBe7TFZc/HqHb2hcIcypB0VY6V4THxIOt2dRkZ3t3lbvey7qymmw2r2\nNSzkim6vC7oM3iyqDKWESQ+zHWmzKb/34Ghdgcvsm8P2cNSyFDg50wVADXbW\n5RGOYY5WgEtfCMzcaeh0qkiFQ7A2D06z72cMQ9JX/3t87UL+gxZDOx+LelsD\niI5jgszKspAFFcW0AmIsk4ZTAmcRjRdrWXf9q+or2p55xoBuq16fZvoNWegv\nay64S8RoFinHw6CT93EIzn0QmGlhUAErjatqJ6W5wG7ghUWDq6TUkJHmx90A\nC8ayZ3d1/n6x+tgnZwNb8UcrkXNMpk26B0wGlUdCgm71RvjTdp0nQaGzJoL9\n97HA\r\n=m/R/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5ff33802c.0","@material/base":"5.0.0-canary.5ff33802c.0","@material/shape":"5.0.0-canary.5ff33802c.0","@material/theme":"5.0.0-canary.5ff33802c.0","@material/floating-label":"5.0.0-canary.5ff33802c.0","@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.5ff33802c.0_1580839468429_0.21986517177097742","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/notched-outline","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.1eb29491c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5100df1f50f6082f5db5c826ef1f3d6bcc3abebc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.1eb29491c.0.tgz","fileCount":35,"integrity":"sha512-wU/eNW+nR2Ef+8Knb8GAl0U+N6t2aHOoPh5wkLjv/hKwfCGbAVB6+KcZQ/wDAZRBj1q1i9LWaKg9G31s2XQnCw==","signatures":[{"sig":"MEQCICThT4KOWDjP6GvVHXPq/4uVIxUDwAxpHp3mBaIWfdhtAiAOL73GQObHUpjDgUEE6Ddpy2sRc5KzKJIMcV+YAkdf/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOduiCRA9TVsSAnZWagAAsCYP/A0vIP8Sa1nM7dkPoa7c\n6ud/CAbb2wnB7tIjFqvwf3/Zd89yORFdesqezt324IFrG8izATj1dooXIF91\nBViJ9oS4oQAPmZbzBpm4EX56FmlFpxyiVYOHGs6SxRDa8/+ic2Y7fRFbuapd\n0wmif7fmyLUxmtAvaQDJ2cO3nnYphOYV7LkUU3s5D3zJ7ZCkvmIZdkilwk3F\nSG2BcISm/MFZxBGsPK/6W926tgzidGu+hlj1SVazZn3wBOqhAU4Usd6UEC/N\nzPpQOX6s4B/nZmyf7Zm3mq4b0A2NNAHraEgPRl0CBTrSVIXMKHolO1goszU5\nPddFj/EOH12s+w2xB+0UwQGKOofkJgbvqNZIbR7+qhAhkBLjLtRf1Mbjeunl\nRchUOKq708KAePf+gY/KVyAxQEeQTLucrabKh4eenET440c004a7m4iv4kUm\n/VPxzR/ILG9uWlhoggSsRcGXMRe8qjP6BdFs48KHyAAcgFYlizHAQ/ualCNi\n7P8giiQJj0h+B4Ru9XZlEN2dKaxcYaK79KrPBMEC7lccxT5rLHJw9T4eSXcR\nHWkfT8+MYkq6PRgi68Tc2njIhnn1CBWr/1u33I8yJVlaqRmk/V4SPfAQgAsS\nCbZKyHoymY5rAcaVvWFxBuOHqm4zPXcpgFY6a5pNohKekVzwQZUWipsZLYeb\nj0KF\r\n=pA81\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1eb29491c.0","@material/base":"5.0.0-canary.1eb29491c.0","@material/shape":"5.0.0-canary.1eb29491c.0","@material/theme":"5.0.0-canary.1eb29491c.0","@material/floating-label":"5.0.0-canary.1eb29491c.0","@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.1eb29491c.0_1580850082409_0.4868306585625728","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/notched-outline","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.4c7154b26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ee7c4f14d273fc4c819178cec936630b4c9be74","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.4c7154b26.0.tgz","fileCount":35,"integrity":"sha512-k8mnYtdeV/OSY9Ule6x82QgKSCZaCqaeGRR/XH5CyK7bBlZSQ+spfwQ8SswLdZsnqZAKSV0lGr5NMdCxnZI03A==","signatures":[{"sig":"MEUCIGwU42MptoVkhGtp2YEXsf3gV2TBfu5DEE80q3/E0yXFAiEAjtC+W/Eiyk7SiAZXt/mhhrC3a0wJ3enD6ft5ZKNKB+U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOuebCRA9TVsSAnZWagAAmhYP/iRkFXUywEQmnNh/UvZ3\nPgkEHtBqNvL0gBlGG4bDWUSW3RWpaGsBiPdGFz6PskVNkDDtZ1tJiQDgG/h0\n1SBTdRLcEpfVqZ6KJQa3J4fC1nfnwhj1O8pfPQfItG1TG2d0js21d0m4j4ZS\nGP48l4LNMVeZ+sRmMRmxO/FPtof82yWGRrzZSpKp5GLQi0QkDB/baYvcWQBb\nPahv4gV7N7twZsSRyZkzraB4G3+UAATmpAPcKyLt6W6E+Zz+bnhsn1HyLhze\ns68nMhz+mhcT2b4NfhlClCc7bG2NxqL4q/wSO2oDdFwyBg8C5zRxDI6XIP62\nn5JFYPrJbfLwfb5Vp9GEQBvoJYk7SipYoiizG3jddAco/utHsK8I+qP4zGhO\ncpHFrUKhoBCFtzXmi09gcnf42oDfsjMMjaOfoY7EfMq9+wA0CFRVdyHU00KU\nqOtjX12v4A27szylM1F/PPeOZCIRgfYZRh3co9abh5toOspabzW+h+4IrcUb\n/ekPC9Wym4qm1jhDrGwVAlKP70BR+l0MNTRJavz0+H21kFhHVkYPRQU1z1X0\nOGmagAytlm9+ew5+2ObrUHWPDOVeXYZkrFPOHXV1M1pNR3VR/tQPxf+nw8ls\nei6j28MLEqnBqUf+zD8Xqb00mNRdUC651E8G1HvSRi4lCDigZ9xdndo2yv/L\ncFWg\r\n=mEmw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.4c7154b26.0","@material/base":"5.0.0-canary.4c7154b26.0","@material/shape":"5.0.0-canary.4c7154b26.0","@material/theme":"5.0.0-canary.4c7154b26.0","@material/floating-label":"5.0.0-canary.4c7154b26.0","@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.4c7154b26.0_1580918682625_0.9491594873170031","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/notched-outline","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.ab5f49a2c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0057b48a797352b0afbb9bb53ace1a014690715","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":35,"integrity":"sha512-6xXjdLV6hzyEfSld72HfsLSj0/7i++pMoSkzI5SroAiHFQbmVA2IzpoxIWZs05SzdCGm3o5zVE8MGpbpc+3Nmg==","signatures":[{"sig":"MEQCICcvPSzYF9GO4UFnRWAIxweyS1Y1gnxpEx3ScTP+R1bwAiA55R7noBJyaaFe0WA2LoDEBvGG4nX+M6W76ySV8Z7oAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1C5CRA9TVsSAnZWagAA7xYQAIXU1OCz4uwSr3xSkM2U\nyq4R75enFqo5WhrvQDUvm2bBgttdSKSsMtMVY68X/qSZXtguz/mETEC3Az8c\nqax4B2NGkqsrHKKxy3f6mQ1IBTJn2j5azZ+Pybq+G67gFadP3Yk5MIy6x+xe\nfhzxSAw+mqFdZ9b9QsqJX3bY02D8/vuRMer9hTGK/QPDZCS2N/z2P/xFfLd8\nHDlqNUHYG90DT38lHuUo7O3myOdHzVpEfatURnSGJXW+/naJYdWDBjRXzpwg\n8dgEqTxmyYDs3hOkre8flwI8iKUprPuN+PSk1UA6qIprjJyphqPKJSJvpTRw\nN67o0TNMgejZQQH16nVuZWL9g6b8pCUjKD+y5ABd8Jp1W5p1+JF3wxTs3izI\nr+u6gQ7hvDNkEIhXzlMkMU8hyYWcCJNBcIVK3332EF6sdQKZU4Kuujz0CMLO\nalKz276K5JVKfgxLJd018uX6At//rUM1gLuJJhGsNrYGyqKjEvgQUDPGOWHV\n8ZLxSV8Z2wfNsZnJGMipW+1q4Z0KBMkOt9zXuuz1WDTCqZZmYpIEY+h3LUn3\ncIUNM9rAqNTdCqL0jPJX4FmYg9WhxDN0C00Fu1rIYCEgCG/097L3R5tJ1obF\n4RW+63XSut0WojplX5GEjzlYNCefcaruL2l7oN0eiOvdvBOTjW7cVc8aSSj+\nLqFw\r\n=0ekf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ab5f49a2c.0","@material/base":"5.0.0-canary.ab5f49a2c.0","@material/shape":"5.0.0-canary.ab5f49a2c.0","@material/theme":"5.0.0-canary.ab5f49a2c.0","@material/floating-label":"5.0.0-canary.ab5f49a2c.0","@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.ab5f49a2c.0_1580945592650_0.2495336203182601","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/notched-outline","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.c541ebe15.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb12e1ec43a77e597537e7966beb227e5348a0b3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.c541ebe15.0.tgz","fileCount":35,"integrity":"sha512-J5R9dHyyFF+pfJ1G86IVh3RcHx2PYzbptTCXo8BE6fKU4KPYfu2YkovDuAEQN2K5Ldu8v/vCUT4fQc1Ekjgz9w==","signatures":[{"sig":"MEYCIQDTVFbp9S2x/tb2d4TZ9CsE+d7zE+XPDQtqGZAn+ovF3gIhAJcOjf1juBSSPuHv9sTbxbcAkbg5ZnsR/BJfyVXhmNVE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJOACRA9TVsSAnZWagAAJUIQAJIHs5xDcTJ6s7JaZBSU\nUzA7nJhhiH2vWIi/Bi9hm9To8XUamG2kQAwr/Km29fQ/3DWqeEBGhTdxYcr8\nrRCtX6c/1zWiFHmLw7OHmbE/7XkoF69N2nHrFWPHNaAcQMcRW7yIjeuvZAxW\n6bni3RnCPW0lhtPfMvvtAHaxUIaUXL+48yqaz1qCh+kdPhCQcQ9ebYUQjdSX\nEyBSR+2YjS/gEI50OyWEMzJ6Vmi/tPrD2+BYj3JLP5/jxOFQGOzkUW4TkKt+\nxyd25heqVI/DVuFYP9fzkt6SvHPI7MXjb3z+CUk2Jy5LJRZoVIeF2BtV5F72\nQqsnKnx+L/dSs4uXii0ybTaLNd55vlZTs/zxbm74/LEbNpqziESLIBKmvhty\nBuyfcJdkbiiOF/DXieeTK93oIHQ0C2ujFEEYC3sNrmLcN1gLEPxf7+50pEiS\nHmMOF5hFlkTP4DYQPNlgS1McSdq3paDOC6J84Jy38PEAKznpOPU3CQKEAodR\nu1uqEZG3TntHEmOt3GWu2oQtPIAbiVhkKbqZE39sh1nmvnkeQsCwGXEYAETd\nLR/ALsgfCvrh+tQbn8vYl4L3vMpmVPBay+VIwKTVIylPy5agTRWltF7m68by\nAYlflq+qix55LGNOGVBOf+PXGVFwYcXJb2uFyfB7vscIoBECTq/HMSJbmnKq\ngXgd\r\n=N88D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@import \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-notched-outline-color($color)` | Customizes the border color of the notched outline.\n`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c541ebe15.0","@material/base":"5.0.0-canary.c541ebe15.0","@material/shape":"5.0.0-canary.c541ebe15.0","@material/theme":"5.0.0-canary.c541ebe15.0","@material/floating-label":"5.0.0-canary.c541ebe15.0","@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.c541ebe15.0_1581028223651_0.7666997298864553","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/notched-outline","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.98f7faa05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d521c96a5f965f2d7bd67713e421d15949e0525","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.98f7faa05.0.tgz","fileCount":35,"integrity":"sha512-aeILPPYGBgDMBDt7EUK+QpqiZZoOs0pbJwAIf9WeDrfGpySQZinaiyMA9sO3MUD5OO3cUrC7baLVgM5v2DnSZw==","signatures":[{"sig":"MEUCIQCpglVnPt+xo41ymFx91NBhCxeuXnje8nFvWsWae+zJpwIgUOSU1A0uE31CY/adwHVnT7sq6lCnvsen5vzTop0V+NU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbjJCRA9TVsSAnZWagAAjSIQAJMUQw5K7BNlrAb9VdMf\n+xsMFgb0CVkkoq3acE45jBROxINxxZYsATirrwicl338Ca14COJXhheg0TAU\nZA6FXglFOVbT5TG+1SxqnKWbtZ7X4m2ayxsS4OyxsyTrN+Fbz2ARQguHYpMf\nsYDnaaQt7VXyomO3oAUSXEQIN74GASR+ieL2mM3pif/Kce3S0xeKSHAxOK5X\n74a61ASywUCZs7/5qEz7mOuGHkrfRt0MkPSR9MNmVWZo8x0n7nwytlvPvKya\n292XmpTit+1YDwI5yKzz8RJUe3ayXF9Eg8oLxOL805rl7IDwAPxo4ppTGlJX\nCCznjmEsCS769pZ9h7Y4L576meW3kt7a1zCD7OrVO4r7W4VQ4fSpKP3HE5oV\n5UIgqTGo9JJ32F6TVfmFKyUkrReFw/oVsEPcdvRENhHOfmtpH+NdUetRLG+i\nAKkVQWTwQVjFWO0PQ+zBr6r3gzDDw3Bu9YCGnv2JjhZRjjjsr5OjYTBfCrsx\n9OBdZLOVl8VIQZFOWUn+X5WpuEMheRCG6hSS8AB4YFr51H54kZBZBnahufhj\nTxnxzsIsMgsdpjYyePL/rWJZ+2xljLYaPiRX+y+8vtFPWf3WcO3MDwlo3uS7\nYGXpKFaq41vcs2rjBmQnKBq+BTL5sBgiX9tmweg7lqY6CMBXQ/UzcWSX3zU2\n/4lg\r\n=Ma5c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.98f7faa05.0","@material/base":"5.0.0-canary.98f7faa05.0","@material/shape":"5.0.0-canary.98f7faa05.0","@material/theme":"5.0.0-canary.98f7faa05.0","@material/floating-label":"5.0.0-canary.98f7faa05.0","@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.98f7faa05.0_1581103304898_0.8893811652464285","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/notched-outline","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.b4727e43a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d5b72b088a85cb993fc7c325b1fc6e6aa84222e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.b4727e43a.0.tgz","fileCount":35,"integrity":"sha512-pMtwmoxfXYpD9laM6LC7Ziyj3lW+dGwIpHP02wVCF72u/Zr/DpnAJSNxl6SnrFwFTvpFX5QFE7iycav/UkXhTw==","signatures":[{"sig":"MEUCIDpbF/fZBG2VRHOjzR2/icptaY5be+swSjTqSglzbZB4AiEAhsNjn/i3YftESMg3Df+CJqCEh5yCWxisHcAZlymxqlI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcDQCRA9TVsSAnZWagAAho4P+wS1bq+Ao65X+x0In561\nD4OPqlxn6tQ10XxVdIQ5hB+zYPqxy5NtgCe/KSxHiAovA4Kuc59sQ7le/1rO\nrWn4j8N8IUocfS7K5/SXfJGNnkvV7reJhDtWkL0CHID3K0/cSna3P6regtoU\nPqpLnik7/ynBKj/BnYUeyP5X3rQMSur9P1VSOAOqk7mmioheokNiC21Wy6TS\nX0lDUEK830fYgKHP4KaTeO0IIePG1m4rJRyA55Ozv8LThhyMqHlq0Gfs4A8y\nyw8qKzUwI6vOZshpk8NCQijrstDVnn6fS0AfZK2ZpUq++wTcqfvg0bemrWeH\nCV2ook6kKEuLmME38SFH1HKricz9f3mshwSwmVEdQ86lXPZl1DijNmOgUQGd\nGUCf+lPXGEtjzaZk0HgYwOfVHOKco+R//NJONAITX3tIIxr6W0ONagdnr2GS\n+SQg9fdGiXxEMJBP00yzDkrW4gkJ7de8UXmqLlI1Uh1oIGs/+c/9580jTaLu\nxcyQFdJ7mGsXhdMNDbTWiwqPxSqleg2flffyjSCHF8+DthsXeMmWwYRRJ8Zm\nq8fGpkn8b8Lnt8T8uLhD24s4VdonKn5M38t6ZPR2v+uT2NNr4ETluyHyRe1w\nsRHQrXNu82ieyamqKFyW42jn3BJ5z/ndQp6wQ2msWFPTrfcPmLppaAB2v2zz\nUGCb\r\n=tECj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b4727e43a.0","@material/base":"5.0.0-canary.b4727e43a.0","@material/shape":"5.0.0-canary.b4727e43a.0","@material/theme":"5.0.0-canary.b4727e43a.0","@material/floating-label":"5.0.0-canary.b4727e43a.0","@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.b4727e43a.0_1581105359787_0.8486308454151432","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/notched-outline","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.91d9d5a65.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cda0e063f0c8f3855175fda18708e605c096e512","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.91d9d5a65.0.tgz","fileCount":35,"integrity":"sha512-E4zFr1Igs/e2Y2oxl4g4CPwL5PVucvLvZ8I9cCirpvZZTzBDNwhm94dg2REnz7hH6HOWKtb0iZYeqXRlc9YXFw==","signatures":[{"sig":"MEUCIQD+UHTWrr0YGQI2flhF4/zoJuytUJr6jwjpdbnBuWXtTQIgArus0V1WTcv/fEwidaOx6FfVw8ygAwRNNjnhTMY5vj4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePevtCRA9TVsSAnZWagAAMUoP/iobH9s+o9YBhRNq6A0B\nFVHvwDCT1ZnO3fOQvWRsrdztM7KhjnGHYWn2Rhd07oC5Pyrja4Gg6RAEMpxL\n4efR2xlhTs2Znwh5KmY5DYHP7Z6aiyhvSKNLfWL6hNC8YKaK8V/1zLH1Upvs\nlm8fzxm8SZ73hcJZsCKLWHJQSpp8wkarKdlp4BjFw+336btFKDu1v+Afhowh\nz4k/fK3VcOvyntnLZrKfYkEsZSRx5H9Ci/OK6JKFXY1uzTuuXob9tl2cBVR0\nI+t2BpHbnXef5xtenUYsydbb491hVaxxb2MSDfgYSGXIvPlaphegGq+ULCVV\npA3Gq0x9XH/qMmWH7tZPBbwvQ78G1K2851boPJOn0kZ3LT/LiFb6XSV9MDYj\nWwclqQCJI8wxudQ1qEzYY7KdZ8AjlkruCHlgtcJHl+IEfAkR6bz5d9qIkFRL\nCF/BOvKM4aIb7P4/MJyl/Fw5ZF9B4pwNT7niI6vt505imqXtbhpeJ4cpsmOZ\nitTWKfdPkTfTLtHfRKgtsvQATPBi0jWrdCxwjwJoJi18cfzZZMHjToT9ZxFB\npjslZwPHgB55gVeN/BrayXLGy3t+NKhY2cs/y9STIy2Rxn6zPldgpJngypqi\nbMJoUJwrDOyx4kgOInaj4sw5lwovfBkiNWIJ9qNtxou3Vbp5+9k3uIkiSUBf\n6/87\r\n=bivW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.91d9d5a65.0","@material/base":"5.0.0-canary.91d9d5a65.0","@material/shape":"5.0.0-canary.91d9d5a65.0","@material/theme":"5.0.0-canary.91d9d5a65.0","@material/floating-label":"5.0.0-canary.91d9d5a65.0","@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.91d9d5a65.0_1581116397431_0.1516633189566825","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/notched-outline","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.d5c006ed1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58ef87bcaa455116399a42dfa4d0bb93e3bc863c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.d5c006ed1.0.tgz","fileCount":35,"integrity":"sha512-krO8T7kCB9sJ7+42ng38mPG60ChohajMuqM5niWNyrfScFh5Od/9PXsGBh4QPzPu0UF4cvLu+qKUlEkEYRzEVw==","signatures":[{"sig":"MEUCIQCpAUs8+n6cHNf4H7d+6OQfLzcHwlTwwH2Mh/vk6sDzmAIgStGoIqUyauCYmj5Z7OIY9ynZ6xc5cs9UdAhF7+RrxeQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYmSCRA9TVsSAnZWagAASOgP/3520aZ7mdspfP4xEdAA\n7MPZKBegbB37uU2Wy/QBhXb+VqZIYUIulgZyBhTYSENKlFNL3OxkybA12rKl\n2BdmiiFpQWZiFUlz7fvmCbVLa/7fqN4jjkGHGdd9MxH+V2aTH7e7LN84Lukz\nmeYfftPnBYyTSTlJfH0bThFTARq9Fk/XnA6RGyKa4qJEjA9qz/DtSHQx0ufg\nPHghesLum5bTFsD5zW72XaZz4gJN3Kzth1q15Vm2WVq7ChdvZuA2vzL2GDZ9\nB7oxWiRmqfPWiLWegM9hq6AIOr54OEEVQX36eUAgmq08ykpDdS/D3jj6o0va\nMPeGAxEIMzKr55TXltuzewWP+Cgw+zBMdg0ZSpX+z46Bo9Tot9+8hspgBwnl\n6JtJxLxuryTsDvH9OBdrwCcokuOUQWiY+aU2suqRJ4GtG+kgxz0Pt26V+tIW\neL4RrpmcDHJKw0WVuFUnFXOKRyWqxYitAkLyx1wjDWUMfEGDIG2qFZE2+9H+\nAR+2jVNDPf0jNuJSG2airVvvE27TcMVB14CoSWVfev9m/XdCNSWALpLoEcJ6\n/heVvlFD96M9Kai4FLGwOA7QQNkE+92gC58xfs0d2m9uq0Exw1Mhkbj/XC5U\nd+d03qWhgLPX1osrOocHQFzMhTNaPYCRuO25YuMoBSsuObZqpPpQ17g55kD2\n+0tB\r\n=Lucl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d5c006ed1.0","@material/base":"5.0.0-canary.d5c006ed1.0","@material/shape":"5.0.0-canary.d5c006ed1.0","@material/theme":"5.0.0-canary.d5c006ed1.0","@material/floating-label":"5.0.0-canary.d5c006ed1.0","@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.d5c006ed1.0_1581353361984_0.6519335586577111","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/notched-outline","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.559f1a570.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fddae00d58e46f0fd31bfcec5b52668853d530d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.559f1a570.0.tgz","fileCount":35,"integrity":"sha512-72AZm8WBlmkuRZtetGu5eS5Y8nORHe5KlpNgvYeYXud9Qc1zj46xL7JRfI7tffEAwubL4Zffr6xpSMJCujt5lA==","signatures":[{"sig":"MEYCIQCrBFvhKJmfMvBNjQPj944Zbe9AMcb/cJCxhGL6Fs2FbQIhAPqyKVQmYqUHiUATo3uo2MFmWu0atl7ArtSyTNqvwOal","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZIcCRA9TVsSAnZWagAAeEoQAJChwhe4twXW8+UYaVZD\ng1bx94BjcZcsbos/q8JnjEn+ACw2obZeCbLKDkBdpHvuq5VFFt4IZxc2yB69\nvnMDYVIA5pj863qcOlEheN3Eng3msi5FfWvSI0QwLvx9n1B2Vs/Eyk6wuzsC\n3fQZfXMQ8OWelwKigfmydPPwLtIA78+9C2zGL48d0IK8MNMLP1fG5Ww+/ZsR\njEEDMeX0AwcJgn4dJ0FzpyC9mO4BCgZqkKHZrCAP2yz0/vJQ8AZGiVMX21ck\ngSZZK7druHTOnawi77u714fq3bK+3vOXWdzz1yFqESChfiw7eqKBs/Kr+wBe\nDnkTdaizIHYdLt9UeWYCi/1jeLHcj6m68NeU5trEm5cxextiKnDHEQJ0i/kd\nlZcpjpjTHGpC60H9DPTvgVVBpbXmzfKWKV9kxbJBXs3hNReZlaTThs8k35ai\nRO8G4w26LQLEnbWKF3I/jiK+tw1KREK92g0EUPKLXTeJFVKieGUYFC/etRDB\nTjFiUEsadJlGv6riQEfA02elu5/YynE4PlNl5BKuNmjfqs4FykUOhEVyzYuO\n+JXXHxCg0Fx6oo4AtRP3hElf47ewby+w89Isl2lg67qxSJu/F/lVw7xxJB79\nN61yq1nJHtKqlQxbpgGboxhgVqIq843+iMCZQjzENFb8kTR/o9cgbGilUb1l\nGkxX\r\n=r5SL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.559f1a570.0","@material/base":"5.0.0-canary.559f1a570.0","@material/shape":"5.0.0-canary.559f1a570.0","@material/theme":"5.0.0-canary.559f1a570.0","@material/floating-label":"5.0.0-canary.559f1a570.0","@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.559f1a570.0_1581355548130_0.18158838232092367","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/notched-outline","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.ad3bbf782.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f3fba2545c681dda3b81f821dcf74c3f3b71b4b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.ad3bbf782.0.tgz","fileCount":35,"integrity":"sha512-dnpSDq1z8RH/yk0sE857uyNoCZVYagTi68PVCQYi/qSOyCUfPOmz0VQMPEWf6ogx0fvjGb5j1HRwWWY3yHJpig==","signatures":[{"sig":"MEUCIQDT9qnDYEg6WVrLFuG9zZ/O41Ez5dPErQrE6eQYNdFNEwIgQqgR+bmQ79Fs19dhVEGQECwTtVN9vUTOs+j1G6LV6b0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQasHCRA9TVsSAnZWagAAPYkP/ikwMeO/q78GdWoH0PYF\nnvQ4oJ1XlVeOFzmwI0FbXahMr82P5brISuCVBPgze3c1+Lz6X6MHvw79JoYX\nPwCEFVOaxlfhPdgKbSFZX01zI59G70upXRUPghEx7hmaRYWPWN5ujJHr/OKr\nLad4hqPI+K4FPLD1c9MB5V3o6xo8/uRtJalaE+irCcSa0cAwTd9ymMn7MaXl\nR1mEyiJZ+BLeCQ4vraL0A8owUsR3pSRE7/7BFIYp5Gp6lPf1YllZNbcbe71V\nT1SgKVoyrWYfsVfaMNhQI7DdUzcLkFCys49chn/JrI9eDqz6KjQRK5i7unQ4\nFZiqncPGcKqxHRjwZ0hl3KBUavlXSnDSedrddA9/Ji2dUP15EiiWC2AcdDUd\nOzX6GtMVUE+aQx2CJ5UDIGEJaV+5mE3yA5xHlfsY8gDrGR7I5usdVFQxZ63M\nFhyPbw1n7fVQgiYvUQdPmg2hIN3Wr8+PdDcxynxE0Xgiai2pN6+Q4D9SZ/xx\nKx+/8aTlG1FGDdYP8YtSwEhbvvUrkTlLOsVtLERBO1X1ex1HqM6BYyqRvD8o\nDTgNNUHsHtormWaqxaGZ+INN3lz73+uV87auzfs5bA03ZGaBeRiFMmLtgw9r\n0Gn97BuqZycSiYdfwcNSsWSZE6cnCoeDw2B63cW8Pcc3MAbftfwUhGPml+VF\n0AqD\r\n=+zud\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ad3bbf782.0","@material/base":"5.0.0-canary.ad3bbf782.0","@material/shape":"5.0.0-canary.ad3bbf782.0","@material/theme":"5.0.0-canary.ad3bbf782.0","@material/floating-label":"5.0.0-canary.ad3bbf782.0","@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.ad3bbf782.0_1581361927312_0.7079666026663465","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/notched-outline","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.570d8e49c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01cffa2484fa87d9f1b784c3b0975cdd472f3a6d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.570d8e49c.0.tgz","fileCount":35,"integrity":"sha512-BMHyxOmHkArrhPRlL022P9rycTI3GSay7mojOuulo8E109DbQd4ctcntsqH40km/OGAljBBFn0JfgNz+ip95dQ==","signatures":[{"sig":"MEQCIDfy+1Tpf/zQOivTLYqda+FQfHYqPXnAeH7F5Fpzb4XeAiAopLsUsKvqCPzdgtrGpjPqjj/ICes8I1+rTX8ST7qppw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcCOCRA9TVsSAnZWagAAaesP/iDbPVW52TCMKQnkRloh\nGT8+me+uTq/evRYvEqPgmCFAmxxxHwqOqugj4We9Lu44U7YX0Fdi64x81N+v\nGMm4/7JiZg9Ee+BsKG9TrzaV9MQDcZDYdiwep5Qj9Pl5yW0FcUbVOJIwdbkq\nadv68J2bFt87udmkdpsExxafLStcnc7oGFKgLRFnQ83wHFs/KlCOzroTWEzh\nrLPbNquUomsdANAfzhsKwwqO41mQcv/yVeTK45jp9m1W39Y61Noy+tr4TT4h\nGSGiOcqGPe6ZbH1dYbZ+ORm3FuWWJh39vjEqVuPHVNVAoGf/WPOpqyKV85Mp\nw5lldfeXqKdWD6GUWZVfTXTn38RT9oq7s7ud25YKbB54nNZAaWO+Dc/Jbo72\nkp6CiKLmGcgRnndyEeTJsLZYmaCpIDfpxvch/3i/bDjt9GqXnqdM3dCmx5C1\nPcE/+nHGORlk9ysp9PC/Hh2oADO9DMMUJJoBi2lNJLheIsr64QB0Cnt/mlFA\n6DrNbjYxc+Oifrm1jp+nAN5wsF3J12E5dDyqODazaEHuDXUs+IuqZHebK7jm\n/gLp10tU7L/bflNjS8OvqhLYxvlN2HEjlDRDUDALCFKajT6TzZqGsl3wuE9W\n0b4RNfAW5Lbb9xacqd6zIZaNQ7MgsZVPEgE6x5egTh8ccKKFWT3MLlHNP/sH\niZa3\r\n=n2al\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.570d8e49c.0","@material/base":"5.0.0-canary.570d8e49c.0","@material/shape":"5.0.0-canary.570d8e49c.0","@material/theme":"5.0.0-canary.570d8e49c.0","@material/floating-label":"5.0.0-canary.570d8e49c.0","@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.570d8e49c.0_1581367437974_0.278906761488233","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/notched-outline","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.48b06b89a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"162df481269a0c209e086bb700cf50169ad07e40","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.48b06b89a.0.tgz","fileCount":35,"integrity":"sha512-1rkbki1zDmRWcpXM0RpP9aoGJza2HZdmMpIgwrpY+aAQzj6QkGEHZtW6ja5GYDgnwNjKXu07LD2SoSHE/nEA1Q==","signatures":[{"sig":"MEQCIDe5DKRW0YBauLnnR/1wrQs0Y6O8HUrt98O73Wlf4kxrAiBdoE2GYF8+34lmNfe9d+MeQMDvx8K6v3UjopfgWw0seg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvXhCRA9TVsSAnZWagAAQ5YQAKF1Vgu/asiNhdFwQUHq\nG4PvqVK/0j/8NDKX6aTmFAbvIIfKQa/ShaiUNbH5lC632D2pRn+ZAgxdOWEK\npINbkQgmxL39GSXyEtRNYTM+68/5r/bS5ERY94qJWWJkHnaPJ3yc2R4Bj0sM\nFL7mx3lEbdOk2PgjD2lTPEZLrmm+MI+Dd+Pof7dgIf+PyspuWE/dOLzlqw72\n/KGNpT9Zc/j2ePN1wKpw9tHjkrlxNoY+rMkAMNiphzlD3wVl/WsjR+QnYjUv\n4IXss1W8l8vd0TdsH+Da1s39cflikEsc9YTTS8U7Ixut7CF5fyWFYYnmc4sM\nn5mC7XokXsY7aXzOdsS9qEVRJd4aflvQqxY1D2nLXy1V/F9LfljaAn7vZ8E/\nz8zWRHfoQfPSM5rKA8kI98c5Er0jlzGqSTNOr5KazjICI4AP+yomkz4X9n8G\na0IXGM9AyPHLejUgcczy33r9yZKlVvW9ADqgghCz8At1BqIocQlxJW7ojMY4\no4OH606kPj7m4BKWQCZJjwea0YNaSwvh1WBJKntmJmD+Nmreuk5zDvy0HYPD\n56K4j3SuFI1cKVW1P7haQmASi0BQ/pwO9k8AMRmeriy57YOeyi8r2kYYWZTe\ngeKYN05JIKi2OuotqUwb/jfYTgJdtsKT0qo/LpPsycmQC2BTKnl25qJpyhsz\nyOLT\r\n=w/Ff\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.48b06b89a.0","@material/base":"5.0.0-canary.48b06b89a.0","@material/shape":"5.0.0-canary.48b06b89a.0","@material/theme":"5.0.0-canary.48b06b89a.0","@material/floating-label":"5.0.0-canary.48b06b89a.0","@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.48b06b89a.0_1581446624859_0.12543380427551054","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/notched-outline","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.612443dfb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a693e3b8e9f56deaddadba9a6784b3abdd5ab7ce","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.612443dfb.0.tgz","fileCount":35,"integrity":"sha512-3VbznIiOn4Ug4BppVULeoE1V+D1VOHIUicemThuoi/pH52OKvvAyYXvWUBDNcDVFlW/miG2W6jr2Gd65DFxvrg==","signatures":[{"sig":"MEUCIHs373e7rvRKacrIpm8u9NuvfwPJxW4uJvCqIjwaYwvlAiEAvq0LWZcMTDPICfUAe5RhAcMFHZOipSL0+lN2zBPYwow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwUqCRA9TVsSAnZWagAAW4IP/RWPTt86XFPBiPw7UTL1\njxcF86R+ps3zLveqRkD1+v68/SaWLhNyaFVswX1iu3Tiwa00TWbGT7M7HgIo\nuHGTHCvByopFbfFIebRBXpcjlKGn/rMlDKq2ECzKd1xuXg8lnSnWOR9THC/f\nnyHBx9RC92euVQgzdEs+YuUIWLX35CztZdUqjBI5915maRiLq4AG7rmUNL/6\nvVhC2z399Cgc8paUsqUowtpiwUVIecktBrzMnaWjdI52KSUljFV0DiYz9/AG\nvuSWkx1jLA0vrzrtjBIEKvFrf+D6CxrWCz/dzjB3N8wGmzawMTmitmqE9qCQ\nS5VnhnN4bMGv6C+gi+GRrBFlw1/cYZ9CXJZhuSnJrDKqq/ap4gd39/uDUQ1r\nmTW17H5hDC4OuoDzvmCU2crE+7AgVKL21/1PBvL5sTnVHRCHziCq4qC6m40p\nkrWlC4nEmy6LI22ou9W5RNI3KPmCwRFg9LQgvdessWNkqsTDSYuN5G+g4+K/\nyF6oQh1/8GVygYVZqX277U3X6tuOyIzbVGeYvy1itsyPcxhUueSkYlIDpOrc\nOAhq4LJ029VsJo3g6w5Fg49NJIbwkvWVj9vsVbly+43VEkK6+Jl5dv83FIKU\n40qyGUsDuAg50iz2dlU/JDEH4Kf1SKFW+cy/HiYmjBSvGBQ6bBzY0eyMasnS\nDk1r\r\n=8l+j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.612443dfb.0","@material/base":"5.0.0-canary.612443dfb.0","@material/shape":"5.0.0-canary.612443dfb.0","@material/theme":"5.0.0-canary.612443dfb.0","@material/floating-label":"5.0.0-canary.612443dfb.0","@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.612443dfb.0_1581450537861_0.36849169884862776","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/notched-outline","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.8c11ea2a3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"502e25d8d2ff5669cbd4630b78c0f0f339b4f1a4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":35,"integrity":"sha512-8OvLoeac9YpRm27w6HRAtkboAqs/tIVyUsKM9lCR/wy1DwGid2hKXt6lKPrMJqNqkr1GeP0VQx0EYNSQcaFYLg==","signatures":[{"sig":"MEYCIQDhpCh0/9JrCgUJNdreRut9g6lcLQNLgB+P23ru+MkR7gIhANuDw1qcivr1JWCwshYbV69dD5Rk3tpBQN0moLH+v8fR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7y2CRA9TVsSAnZWagAAyCIP/i8XpE1yBz52vxjVrUsP\nCa+Um0NXOOFJZAMU/1/1p5NV632ozNmzxW+z4UTPr6cOnQxlwjbT1yfUAXqj\n06Jb30Zc0MLjN3GGQatVegd3Q2dQyAnqe5UeCYz/cJVOBvxl60ZKHpttFx1b\nDA5DhebJLQ3FcgoeghaFZ7E/eQSspQJeCfwhQhk2CnCmOmcs4cY6skzpcMfD\nNjSV7VVUr4sp4KuIvo7KtI+CuXH7Nq5ihHy7j6O5hITqn+rc3YwQqaYi5k04\nezrEsrse4nNCMS6bsuFI2bCQlCutNsOntdFusZOCPrgi74poLOuFahYyLQmh\n9kvbp69yJyTjSwEAs8JB00It8izg+RcGubudukluOED4lC9RIjY7VmWeu5DI\nlUKJY/Q9aGr5zATlUWh6A9dWlz6k3HO35qSZIpzQF4IYG/ry1lGuJtzoQfWY\nvtydOHuWf6LOv8t+8AP93DC9DZu75vIKrnmYKosz4ZDtXr7G67wbanvkz+0L\nfC1x3NMxg9vkDgCkxvOH4uqbBkcsCuVo9LJ585ysVncexXrto0uWkin3+RCC\nk3joT+I14j0/kfFm3LX7v2AhlYYtPDvXJGiLb/ah8ER3aNuudYYqeyEIUOwS\nAON3did/Vc5sKIkw8j8BrxqQ/8zaS8fo1r2XfnDxdghCq6ZlI9SrHNO4geic\ntiSN\r\n=AKsE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.8c11ea2a3.0","@material/base":"5.0.0-canary.8c11ea2a3.0","@material/shape":"5.0.0-canary.8c11ea2a3.0","@material/theme":"5.0.0-canary.8c11ea2a3.0","@material/floating-label":"5.0.0-canary.8c11ea2a3.0","@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.8c11ea2a3.0_1581497526319_0.7955590004526165","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/notched-outline","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.b2f3d311e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"875992db66debb8f9e950ef75ce94db6ac68e7b9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.b2f3d311e.0.tgz","fileCount":34,"integrity":"sha512-R2PfzmUyE4mEH69OCPa5lyRP9pPF7CBg13JRQDi7I6z6yzaesbeJRjm7qoXUbvcmSIXdGCwuxH7xWpMZLwnr5Q==","signatures":[{"sig":"MEQCIC6WgJkQiB/9ZIGk+6Kgnwor05IynL1aCkJCavL3GK1jAiBstmH7fPtqVrNGR4Zr5knlAcP8eczRApYHf1aV/TBuaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcM+CRA9TVsSAnZWagAAsbkQAJlOkgLoFT60AqvvRO/b\ngO/R8mwx5Sn3kJ56AyE8DlKYfmM/s3KWt9uG+Ok6NLOYnWVbW+EFcGbpXZqt\nTjJxLnXq6hpT4wgorFxUSSMi5JIhJdnvxuTlOIbJDF3SMxQMF0g2JFb+i9FB\nQVDnw45eWznQ8Cj3rHM71oPgF7RhhSyG/0aMyUMbNQgX49dW4i7aELLTWBpU\nWPl8h1KsZiqzohjS+YQ2CM6LfoNDuIBwL4MXc6Itvk+omKijgE0zGgNUk/Y0\nnjSjmu9l5xGbrIaEVAmLZFE3VHYRXmezNV0gD4Pv3qxRU1Ffd+Rf5n/emAcH\nT8JVRnfhRw28Z+UC67WsSVne2oUbo4XwKBgdLJJQBoJ02FOfM5dyXIxF3Dkw\nB3pp97RflbGJ/AjTVnbvG7yybrHFjo4VHfBRJv9GfkwR3oySo8KoDjxCAP2n\nQyNptDnPHu4WMNkgkuxRmtEB1C9dNvsmA7zraFZy5qJe5nqmIS34mvxZZGQY\ndvyRrad5R/7VcPsJO8jd8RFo4gtq+Uv3aczOQOXUtE3xfeel/KqJbLV8IF3u\nQktR+/d1kG7nGMYiRC3u1EB7z5sVvfpa0AdmLUVJuy+qm05PH+IHawjQIYs7\nj9IqBOCWJ7v+fi7cjXmg1IhYEcByr7/VhqGS0WYxbRwsHKQjdyY0FDKqaM++\n6+J7\r\n=RrL8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b2f3d311e.0","@material/base":"5.0.0-canary.b2f3d311e.0","@material/shape":"5.0.0-canary.b2f3d311e.0","@material/theme":"5.0.0-canary.b2f3d311e.0","@material/floating-label":"5.0.0-canary.b2f3d311e.0","@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.b2f3d311e.0_1581630270105_0.35014598814530795","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/notched-outline","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0-canary.4f488d0ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74e8b7f360203387b98892fea7658ef3831d6cef","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0-canary.4f488d0ee.0.tgz","fileCount":34,"integrity":"sha512-qxQSg//AL2BaDOAEj5UTCpCLJA8RUl500VB9hJB1ApwdgMWjtkgIIFkqSTxPppEplvuIhwlvuBuJVqCwCaCNSw==","signatures":[{"sig":"MEYCIQCzoWnbjbD+ddc0VE7V7Rc4LshfbZcon3XfjHhY3EmpMwIhANuOFO5gurOwUE1cbCMsZOdbx4PRWvEYuQB8G/7qK+6I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdaFCRA9TVsSAnZWagAAWJgP/iP1TOpxFoiJLO8g4R1J\n77xtIboB2P+0yu3RFiN3VxQtOiakqZx18jzEEtRGs4vsPZ4TC6YGtFlr4vDN\nX9drWRFCYcqfwVkR84QNWSqfOcGZgr3ShKID4Hgk2Crttt8Da9I3UOUU6QvI\ndJ2BpJstQrco/4W4fdsCULxzN53qM10rko7lnfMOtnfCHKXYGZVTU4A60ooi\nIOAbpH5KjTQgZwnr0wOzT0oxux3dwcOfs7cz5jQO6zEcpksB9R5KMLgHUChU\nJfMLxEGTtrybeOv9d97wmkq9mDUrmvLzc5CmkbTXZ+ifRIGT8N+PYbHBXsXs\nsy8uCZRu3QBN0a37Lg0FmSOurpOmyQNfiuw0T6MAN+WXyW0NgA4EbXp97/Zi\nCy0zNMpDYo1PAq+eUYBgdifCJ45t7KtDBM92yzx3J5CtF7ZojWo2y9i9Rxqk\nm3hp9rr6fr9FZ8O8lJkUqQfGQcb7owJJq51nV0ltAEu5BDJUBg/kkB6Gl6r7\nqK4kGy9kvCUVMgl+0VS1c95MpFDIvX/62C87Z0xhzlxI6l11fn1gxxrDo5GD\nNuzDXCWW4PkpdV4nmikj7dnB1rvGaI/enPOHjA+SELmh1bmzCDFV3jOr+Mde\naTCVZ+Hj0KU/QH93wrS/wH9ivpCNBPI0grHeynXT8ldJ6R3/29zfq6H3slNB\n4GX/\r\n=oaPs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.4f488d0ee.0","@material/base":"5.0.0-canary.4f488d0ee.0","@material/shape":"5.0.0-canary.4f488d0ee.0","@material/theme":"5.0.0-canary.4f488d0ee.0","@material/floating-label":"5.0.0-canary.4f488d0ee.0","@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0-canary.4f488d0ee.0_1581635205329_0.2910507423002471","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/notched-outline","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.fe79de07d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74078343d84554368c4340ea7b21200763d04c4b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.fe79de07d.0.tgz","fileCount":34,"integrity":"sha512-8yziRDRmSFLz3fRRMUAhIcLJ225U9eyL36hMaj2XOeEUuDWKpPHDx7k/dbt8lO6zo9Kvw97JtmtIxHPFZVsNHw==","signatures":[{"sig":"MEUCIQDVW6Y8/FDbbyVBdm6k1aMwuIBUAiCUiR16y3TK7057iAIgRY9PJhWfDX8nEcGkQqq4jy9ZwO8qIgBQ656J8MLGQDs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdqaCRA9TVsSAnZWagAARoYP+QBKQf7alYh87KFmLN1U\nC+BWMuKKr1T2C7qJCEJ56g5gSiocYPwwmLMrDJ7dtS1vYNcAifGhI5lEK6wj\n8l3XeoKRuUTgvAH519M0o2dTG4oNTjaWm8nVaWDM8RbUAcpbfnlQNJnU+p81\n6YoKJ1cl008lLYC/woDFeHXW8XYz+EhCGbDktQXc7qlBBE7zQGyh/8zbQojr\nAmhRFLXiOMSzXH5JLNnvRfhJ2uxnkXC4eaN2IbpnxrVOO+OD1wCXRpHP5bLR\n+L76SoiookHKX1eCrgibLFN7IDeZNqDC6I50XqcJ8TNUckQrApGFbIpxCwP0\npIlQHFfhY0lf3lNxFIfd4wLvbGRlusaecnjBbazk83bd/xOrW/i5sARs1pIe\nmSNFucT1QMrFUjebp4Uc5EXIaLAlg/QqS5BPgP9+tiA5T+fM/CRMhko3HPdq\niG8Pms770DXDfn1dNAHsNTmkrs9xO/gvJtDZ02LqK4+YlspFsyeLaFMPdsYn\nz6HQnpAWWt1mcZdnMYqLiPQKrTbrz3Cm/WP6l+KL5+868W//Zxav/ptnk4hF\nYD4o/N+v3JryMp3gjuVIJxADvV5fxpF8r3WGKkiQlXWDAcqMDKEbGM4eGNX1\n0Zml2QLGv24S/aDmN12Mtml9VKRiD8LAY/kS9c5FrFltLZrVbVcnHAJlJQyr\nkWYw\r\n=sG6v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e2b4b3810f62a16846d719ee7439bcbbac266d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.fe79de07d.0","@material/base":"6.0.0-canary.fe79de07d.0","@material/shape":"6.0.0-canary.fe79de07d.0","@material/theme":"6.0.0-canary.fe79de07d.0","@material/floating-label":"6.0.0-canary.fe79de07d.0","@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.fe79de07d.0_1581636250234_0.19128792061993893","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/notched-outline","version":"5.0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a09ebc04f82e3dc9b2cdfffb8d7e7225b10e8c6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.0.0.tgz","fileCount":33,"integrity":"sha512-c/YU5RB6ItnEpQ3V/zDtZH9MoEvuQq6TmQxgtlfnfmiBVV1Unlu01B/7zSQ5X63IcKTkPVaN7K+zX42dVA5aGg==","signatures":[{"sig":"MEYCIQCA+eKqDFOTfu0Gud58oX384gRHxaFwz64KLq1sZW3mqAIhANlgdDfRxa22wfCpnP8XdHZ1RELtdcRs1j/ZLPoKb+Q4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReU2CRA9TVsSAnZWagAAuqsQAJVRYxPu6QB4MbvxYHYO\nzZEr2T0prYowUjWZvHAzaMkMGjvg5tNIo8KVek//M1QgzlaaMhAeOXuup5An\nRTfoVj9nVJkQqK+R6Asc7m5BhxwF+dGNz/A118ouQnfdAdremGBAdkmXeOnX\n4TEs7xUf627eqJMqSRMxQTTfdCIL/OmOPnse/fcqJEQYCJ3G7BhZz50jSW7y\nJh334afAPSogX9ptdQZaZSIUXSZadFSNAGcaA5jXKfhoHkmUJbkrYKCi9XkW\nTr685jRyFptyNlKJRCbdyBiaByomjRn1xHReY/CJrWTvmjrS2BrvyhePMzrs\nF+TGQaZk2d+7KyK+3AhwD3EIf5w1yQf7lAVNq10aFlBTHGFOhCvS9rV7BIvq\nwRiE2Qq6vuycXooJ/zR+BMTrj0zldlIXGh2qQBhexySQzEd16dOY+GDuZO7Z\nAEaCo51RFJYTq17UAHw7q1YkC+wH26g3kFJVVqVDjIUVNyP9zPhNpOaKrQ7o\ncocMeGdtKx8XE7MiIWnFgOwUmvfNRPPzECjAODjb6q1JgfnQ68DBK9shpolc\nef83JrvYJHBE0FJXSF7zJhkhtLTwBVMlWkNqqojp2feCLFTIuSPCFe+NKDws\nrTAxDuAalKZfSqKrbGSB8l1QM2MornUzWWtQ3Wy8v+YUNgahXHNEctM/Gr8Q\nBQvH\r\n=Hnqm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^5.0.0","@material/base":"^5.0.0","@material/shape":"^5.0.0","@material/theme":"^5.0.0","@material/floating-label":"^5.0.0","@material/feature-targeting":"^5.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.0.0_1581638965936_0.16876756067494858","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/notched-outline","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.5e313b1f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9afc608b1bf556507a686cc27cda7656e68bef9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.5e313b1f2.0.tgz","fileCount":34,"integrity":"sha512-l5YHqR/aunZwqWJaEN9qv83t692+L//jNn0dYTyJ1UzDP3cRXxF2y4B7O9dpeahnQCQaftmcZl+vwn/hFhndLw==","signatures":[{"sig":"MEYCIQCKNdLHdip5UBbVeZdtN0XjPF1EG9Dn5uYwXEyFO8MbHwIhAMe0FBdc2Pw0itpXSV5Y/+FgVRt2PNpZD1XX7KpzmAgt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzHbCRA9TVsSAnZWagAAMVYP/1Nb+s2zSE+N5d2LA5W9\nit+4K0lP9dhChn0E6Z9WCvkbONnixwYObs/92iWXlqbmN6QTv6x0KTXp3juP\nIE5yMc1Rmz9Ligk5yi8kOKP9kkkFsSyPdHlGf9Ldz+Q8AR1ZJT+A0SBM2L3C\nbzrJK5zQaAIUnCj+if+irVpJvkF1hnAUyno/FIBuA/+AheuY9MRJkxLvBxes\nPLUboFYdJrHnqK8qQqS1GywTqPapDRBlDuwwVWN0SdhC9e4Fw8jgYdTfUrCB\nhss3DwnJoiYSzIgq+Tl+lw0YIhnBBclvVgpN8O3/iVptSiXO1qw1wM07kvaV\nQ6N1TH56v4GcDotYOB/DKVVK0fS9vcdeicnGDj7o32PgbaohqaQqQJsaMZxu\nRTAIVfYlNsh6HzM4oT/t4jiNvOIDYBLB5Drew2omnSAAovSZWpKHqCh6SsZ3\n5RFCj42vSn4rXklJY5LALuJZaGq3g0213VyeunamMKQOihrIYAtJVfuBKecA\ny4AkPIEVx9TCFpFNdYykL7drTjpIa9S4xyalLzd8OHmUzq1tTgcdpIA01Oih\nkqal66OiJubpB0LRTQlmBNHrdamJ7Mcj8vVs/Desmew7oDbTS7/qWZlcGGjB\nCLrfNXocu2IOnP8JjxsvqJ6I/lR2UH8JRm7rEJWbCgKXc7dMnqXutTzcxCxx\n170n\r\n=t4hv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.5e313b1f2.0","@material/base":"6.0.0-canary.5e313b1f2.0","@material/shape":"6.0.0-canary.5e313b1f2.0","@material/theme":"6.0.0-canary.5e313b1f2.0","@material/floating-label":"6.0.0-canary.5e313b1f2.0","@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.5e313b1f2.0_1581724122755_0.09162789680565875","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/notched-outline","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.6a56f387c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"526d5736d2556aae11641510b949b49ae90d6572","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.6a56f387c.0.tgz","fileCount":34,"integrity":"sha512-GEW7BIz0DBeYXrAS138j3/iu9+MPCx2ZH1nmWBXMTw5h75p6RE4/ynuFs/r46Wwhak+tQMgdhWdvRuvdJRjRbg==","signatures":[{"sig":"MEYCIQDyjmM2wEpeJnvapsaDUbX2upxL8KygRzjlCpUjqkriIAIhANfIq2B0ZFrCayC5gFt59zq/pqjLCB8rLJrswJYFAQRA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD6tCRA9TVsSAnZWagAAhe8QAIJ61e09gaWK5TiUR7fH\nXvWShwAyi34T4JIFQVk/8jIf/rKevyHkzy6x7tjUP+eAFjj/Gp5IbY4houj1\nMBogHsCYVe7CMHjzBVVl819pKvkLrE+kFWjAVSxj1FyAicjNiTRs9OBrMt6n\nzUJnWJEFhViGiXZboE/F27/hoBgWtzkrRN4F0aPlIj8FrmxARxvk0IxRMgBV\n9LC62s8da+4gsCBmvd3HLatQtKTgPzR0ZX+ig6h7RCLwOwNdfAbt2i6FUTQW\nYoyQ7J+xQ49Y+ikbkTrjU0K7OywL1NqJn5zltprN50nQVRgiRmHw1QFFFuJP\nGH0yjwSf74FRjSCq6/y22crz/OT0GisBr+OzZFNbW/1Pisbcm3hq75ynUvY4\nz/WhPiG7U7fqbw9JPtE1IrrRtnXG4Qik1YcbXsuybHLE7fPNNGF2SPi06Hmc\nDxRJ+YGWZ2IrQcU/RCqAQKS56N8j3sF5v4uyhW8DDFWABTLOz4zyhFWWM6e8\n7EiN0B1jvwlgDh003N+yU2gc30n/wPs5c8TR/N1q1WNeOh4V1yNaGDIy+5aI\nmgWf8G7BfnQZc8QdbFa9gShDZg45OdIhkL/ldub9+ixQ/aQJoHwetjVwMfuW\n4tfRb2HJkrpvvc+IahzzOh7L0S53A6i3c1j0MyST3ljoqkHGF7052pAY1FLT\nBUxP\r\n=Tzx5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6a56f387c.0","@material/base":"6.0.0-canary.6a56f387c.0","@material/shape":"6.0.0-canary.6a56f387c.0","@material/theme":"6.0.0-canary.6a56f387c.0","@material/floating-label":"6.0.0-canary.6a56f387c.0","@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.6a56f387c.0_1582055084595_0.9548493906884643","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/notched-outline","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.bdfd52632.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b77b83aedcdd06358f8acaa859de2845c0634260","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.bdfd52632.0.tgz","fileCount":34,"integrity":"sha512-7HjqEhdJ581Cft6T76itt16pGQxJyy5An+7NYi+PzNr8OuNCMyxtU6ZxH3ikhrYkl1APnofbnAjJfp9P6Q9SBQ==","signatures":[{"sig":"MEUCIQCOt2JELMfebct8zMTOErEL4c4PoAhvq5yPyK+FEbbP/gIgaCssBoKwR+vSk5zGuDrHks+s5L2TvNdJf5R2LTxTkzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZk5CRA9TVsSAnZWagAArV0P/3uE9TuY44+NHzbLMyt9\nOEbqMZxpiBItHgqPid7CeO2oY/wrB2xi1WuqBP8rx1a2CYnjtiGPkn/xh10Y\nCyA0OhArpjt/WOeU9HB3wUuVXC+gW8tFTWt5M9Q7p2N7QPVuzOdk+YI5Elej\nOv5WYHBqXFMZJLi6Bos9jKcqW+YNc5deiqM8hNaVDDihMFsvn/1XvTmY82K2\nFHdPMY0MPx6DM6JHShT4qzCM+/oBkFJRwF1+Hdh06UA2rtE249NSqv0UuefC\nFAjrbOXclW1bP6EMq0Rn8cuytUWZfnLEJGb4kwug/AA2NYFNOxpBedLB4AAT\nJ2nDwLxwZdjJ+HsiSA3OiU78A8oC//6uumXWIXnRyqW1Yea2hT9Q1vXxbHnB\nA5sSN0TS3ryE0pt/wKm/def41QcN6ivoCpT3JI+05qb2II7PPd3TIQ9mugY1\nVAhttYCMs7K0FEMSkYLFiqwd5znCadHBUd0lO3oPxFeVzgtXyNHv1viT279H\n65t2vknjwwBMZjNkqfntrQBmvS4AyylGwy/kJWfZqtt23XWU7yaXKxt7srpg\nD85XnXPaMCtV/DSNX+ECRMB1fyoXzCDGxpN1a0/L3D2h1bnZf6xG7UhigmOh\nImfvgZLbykiRn/jGLJdGuR3N0jJL8kAxoZb+n3lqx2hwcPcEpGTf6HdFcct2\neltC\r\n=R8An\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.bdfd52632.0","@material/base":"6.0.0-canary.bdfd52632.0","@material/shape":"6.0.0-canary.bdfd52632.0","@material/theme":"6.0.0-canary.bdfd52632.0","@material/floating-label":"6.0.0-canary.bdfd52632.0","@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.bdfd52632.0_1582143801026_0.49682645338979836","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/notched-outline","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.ad2e4376a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"428497a966d3eaec061cf748d7cb6e9601f31773","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.ad2e4376a.0.tgz","fileCount":34,"integrity":"sha512-uwkfx6pLsfnv0gzkx5lWAP+aizs/Q/LMwq9TTp9mJFVv0/9Gi+9OX2oX0gPosT0gXnPSidA9Qh0+CnYjFutvMg==","signatures":[{"sig":"MEUCIFiwpszR9UjxfbFCMUa+G0EAuC3kiCx2IJYynCJ77jCvAiEAhh8tQkruKcBH4+jBIBt0QUYmCSU8dJCkPIMWkUu8BMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxNkCRA9TVsSAnZWagAA4nYP/RhNsRPyjED2NnHRtnxn\n8+EkvWRI+cHLH+bygigKtDBXv2OQ34NveSjy1wG7YukSGwUzx1NPCtEdPrQJ\n7yNueOH2/ODPT4gyhlXSbhcnzs7FR7BfiSEwS/cYJr29LAcJKap9we3VDvzv\n+BS28E88RRSXAKepniCML1iicX/Oz4bct9GaJnFT34gZbAKlRWLoyLO9bgfb\nsH6WEl8rpZGt8d+NfwW3Qk5dU9+g+tohJkTV1jVt4g93f1gd5JdoRWFsNFI9\niN7ctAB3V2ykObE5ly3kQWRChgsE6GnSRgd2JHzsiwhFvxS5z0OaEBMdIqEM\np5+lPmBLijywBr4BYA+QrlfJNpRnwAYpFq7xt5VuJ1ThYEdByOcLyKTorNJv\n2FWu6EaXQicbTc7Zp27rs++IPhyRMD49mVn6B9agmc3O/tiviF+9z2zDZq6H\n5kaCc3OE/xBczTDwOQcciSSF4YIOVYbGkKkYD5K4ce4aEx+lks8HgpC410RY\nVFrQTpB4eJh9rLPM0qvQQnthYF/BJvSFZxNuI5GlPlYwmiewpQqbeUa+zOLL\nwUA+M0dUDWvdublUuHMcgzPLsLpSAiJbp7H/CTF1bz3uZx3wFketr/VA+US6\nXw1faAxIqB2fsnnojSnLNVN5oKxGE7KWK+b7i6nd30jSn5ZDfOy9cdbgCdHM\nvVNq\r\n=Wdrq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Label\n
\n
\n
\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.ad2e4376a.0","@material/base":"6.0.0-canary.ad2e4376a.0","@material/shape":"6.0.0-canary.ad2e4376a.0","@material/theme":"6.0.0-canary.ad2e4376a.0","@material/floating-label":"6.0.0-canary.ad2e4376a.0","@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.ad2e4376a.0_1582240612021_0.12468383053273602","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/notched-outline","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.765caef18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6f1d3a6ed137c145c7c0abd95e027b71b3ed928","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.765caef18.0.tgz","fileCount":34,"integrity":"sha512-kdhg6knYrRa6de8W4eSlTGdXgNqgkIrBvyPerxaXpb+uDq1i1DnO5v5ilvW2f9ac4Wk9Aj3BoV5EUxTr+xIn6Q==","signatures":[{"sig":"MEQCIBtq2yLmTTUyUGPe0g9OU/yiZvF/7QDdisS+atrR08WiAiAtq5yJRimwnleDcvk3rPyE+qCSuU6s+Js1PobhC89EBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBRzCRA9TVsSAnZWagAAVDsP/iljZTvifNvQbLPtIbBf\nd0gDr5jtMfF6G/s7aGwN0VKmXNpJzYFZUB8vv7xpszDXeL1Yr4t39K7HgERF\nvwpM7u7GEFBP+pq1CZFJ+Q9+fY++sThvPOqGFfbcYbU7L4SlHn/erkU55Xm5\n+1PWQkgEihgavtXtA4s/MLMBefqtGweQwtjc9ilr4nEX/zi8tMrp1qq0CIdA\ni1ldIe8URjF7l7u55igEJRBbHCfCAbAO/PWs8EmFY5SCQBtlQtqreeKyEdM2\no2qqt0bBF04x2zqtm+kXat8ZY0nD+tp9nnFNUYB+FHXP+Uc+xS79fnHgV2vT\nyi7bETqfvsa8IqY1rrocN+OZ8qp5c2vamjmMAJtBYBKlJAuBFy4VIjGLX9h7\nOM33txfodq55gqACd+w45+uaVxHmElt560P+MJ2usO1+6QsWA9H6MA5ehRDx\njBXHAS7NwwH7h0WMFTcfmPcc61x7z6G2BEy0XM7pUsFOMp/TQ9oHX7NPHwFO\n30F1li3nN/k74q4q/Qllw1BSmaXyIHvypfX3xedf/eW1eqaUmuSET53tItmm\nCd8YoqbmMTs+Gl8cDxBBbYjH09QgaP8+tBkJP4tDlqIXi+8WbriteyzgnplX\ns1EhD1QgoHdtzwUSIcLPHaDtktTUZZE+dhrIcf9fz2WwQcKND89cH7n+Zm9k\nNhiI\r\n=Lktk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.765caef18.0","@material/base":"6.0.0-canary.765caef18.0","@material/shape":"6.0.0-canary.765caef18.0","@material/theme":"6.0.0-canary.765caef18.0","@material/floating-label":"6.0.0-canary.765caef18.0","@material/feature-targeting":"6.0.0-canary.765caef18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.765caef18.0_1582306418644_0.40052980761014045","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/notched-outline","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.949562303.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"571f9a4f06b28691498be34ae5abc7b6921400fb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.949562303.0.tgz","fileCount":34,"integrity":"sha512-oWS9z6JJ8jru+7+4s9Vx850ddksOjCwVmGPVsoBwYxrkTqbbpceSXlkqUm0cn7itCZpgAPrGWsALfnyQb1Bk7g==","signatures":[{"sig":"MEYCIQCtY2+9RxjIaQaPov9c4B7UKIkpUNeK27xqAnaO3kj18gIhAMtojrFAfpAP4V8OPf+b1GmrNcyow3aFp9f3bXfYgnje","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD/KCRA9TVsSAnZWagAAAHIQAJOYTL6nO610Uf+Tx5yx\n6ZNB9DjFuiLCiTn8/eawDRTQmNAQMdqH0R5Z6zX0BtH76fnlx5jRJFCMlLvj\nrCE3kswVSu8DaZj9AFSPOKOoacQ0E62VmSLIWbBCyPyd86yKQeQ5yd7UD7pC\nhRMf1JbpGqLGjncuxTeEDDlDOZSIfAlxmklT+NgSCrHsVhYghT2u30qSp5ce\n/WtQXoB6ewrOrmETyQwrOy4MkhhOCxuoIOvoeHrlOSh+P2iYRMu819ePTRfA\nI5YadYxPg9Mtt4JpiGGGdujmeZ91Kz7jkojH+9jHhlPIEDeuTBPHHq+zlApV\nexw/dUyzp552uulYmvLda68Wsro9Y4Bp6Vvf+tbKd+zOveyewLm67pAGHpmt\nOocRH1BZMWv7reukZ5TCLjTwkGapBByVwqYRqNLoVlQCkpC/EAKpsNItJH2f\nK0kvZzY30ud7K+gs4ZjrGSZCc3svwZ5qKLIt0wFoWG8PB1YDheUeoNxfE+k1\nNhDINUJvXAU7WFYIFCzUw3V0f6UD2QavBCKrZ/RiqbqUaXKNdHBAsolVZNRD\nA+8WaIaWTvqBO4nLs2JQ7pDmCO7Fdkr9WNMTFWYkVwTN8yG/54mmxwMXWbAy\nSjqR+smYskK1sRPHNeRbWA6bC2N01b62ytPvdbxguJb+otVXGEyF6Bk9Qut0\n4Mod\r\n=fAnB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.949562303.0","@material/base":"6.0.0-canary.949562303.0","@material/shape":"6.0.0-canary.949562303.0","@material/theme":"6.0.0-canary.949562303.0","@material/floating-label":"6.0.0-canary.949562303.0","@material/feature-targeting":"6.0.0-canary.949562303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.949562303.0_1582317514413_0.378038043642392","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/notched-outline","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.7ec96974e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"501df41d5d462d8a9bcf3094318b9569c96dc8d3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.7ec96974e.0.tgz","fileCount":34,"integrity":"sha512-mrQk4FBz1KAg1Vo9lI3Esbk0CTT/Ijj15HoWHkmYUP8Yh6MbyJEfIwX8sfQkczxc2YNkIUJI5xHwVW3tcpFi6w==","signatures":[{"sig":"MEYCIQDIHd/UVcWHgYOqLJA5MmJUmDi1JE6XpWl6pPbd9Pvu0wIhAOLMRcQaDqtJ9oVHGpYy4UsGkHeHOkC717YuNbOWt5mF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBznCRA9TVsSAnZWagAAT3gP/1fWG7yAcUG9M2scmkaU\nXnWxNf2MGMzXdbj1VXRFtu7+evu4YiTlHsez5866/7Vhw35ohVGiw3UefXrT\nHRX+Ut3yRcUL5zdQWJp4XXhN9sHOZMV0AmvGXrwDrtX5QhCXY8Nh50hKH0u7\nAOms6tPHOg6tNam18aDnO7s/dtFypv66FZPDkMFFjRoFJ7+r8doAe/N+0+1g\nwKZOxuzTHRWzNXT45DEg9trYrsqIRqOzP5hwODnppdyMVpP8osITb2TaJvGD\nAnf5IjJxENE2z6qyZ/tV+iODQlteklfHui69hTd5zF+MsILqxaL6WrhwKv6K\n//HV/52AFrBYFNq13E9hCfeIGfYhj8igP8fjZtPLerH++yaKc2uihk29F+Iv\nLA4PFfOu2jkc84sbRfh5lrjQ1EYd/lHoU1kdYG3w/Jk6hCafZ4g/h2CYIL5n\nWCiIHYTlVczI6RG4KkjBHpwSWNDvT5R+douFTPvMg62JR7L3NbPUhGDIXZuq\nScohTPbHg3VxLyNxqvtXwTrbDUOW0cbD1FxIOtCouxPDT4994VydiSCZj68h\nBrvzdiXjEVMONHCFEVSPdLPKWy5vltgUXHX87oG1wvRwlxeYdleXZQjAVA1S\nEU9M6ulFXtdMAP1CUAISL9Bkb6uB/ia/fXTncF/EX9TyW0HBQDRRQrr/+olp\n8vFl\r\n=CRwd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.7ec96974e.0","@material/base":"6.0.0-canary.7ec96974e.0","@material/shape":"6.0.0-canary.7ec96974e.0","@material/theme":"6.0.0-canary.7ec96974e.0","@material/floating-label":"6.0.0-canary.7ec96974e.0","@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.7ec96974e.0_1582570726853_0.9419872358297932","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/notched-outline","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.265ecbad5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72ef4255ae7c8ecd20e0988d1a13cc92e50c5250","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.265ecbad5.0.tgz","fileCount":34,"integrity":"sha512-UPKfiZRhx9pIhUwyzl5HdmG2FfJBBvci6GkDzXGnqnOoLXJBqionso5FPBwMFgPeysNu/S47F1N1YzUYPWS3mQ==","signatures":[{"sig":"MEUCIQDFYfN1S6V4wu3dr8uVjsCG/NVG/+8R3PHtTYU0LDd+YwIgJgHLSNnnob6C/HriZ1rN4gwET5KL7oLCqju9ZOcf/gc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYsqCRA9TVsSAnZWagAAV10P/3BapflSTsa0r8Km0LPs\nILnHQcxr1nVXIp0S1P70rF7lpx0wtp95J3XRQnRo2riKrH45+X4ip3IBVL87\nN/KNnMWIg3aHCYo4P9KR/NUt2MkXqrpTxhQYq9D7blq7EJdQDe6uMaowDOBY\nnio/ChGg/N2fpHfkcPPrKy2CvNMgdMnG/ktMVjrBZOIL8bl03lRb1WG0EODw\ng8L7OND64A5Th/GztXZhsu+gKp6hCY0Devk1cDnJ3vdzWrHwvU+b0CIhvRFE\n5QPql9hANHNuLzzDWTk6jQWfdypTI36jmHgKCPh5h5b8LYA/UeeKJC54ctCF\nqJtObtfwAG031fj1XyvHc8HtHXIdQCC13cVpgrqWa1OFlQYF5qzCS4eIbdBt\nTw4XecTJG7EdClEoh2Jd34mtwz+Uu6lhOIPsWxrLy6lJ1atrXqnT6htWNinJ\nBrWvJo280XF+UqHm7K3P5SDksjtkVE7nmqW7MZ7WCWSMF6ThVvReG21dc0/F\n+trElc8wpW61JrpFv3f8xDyp7BKlZl4P/SJTMcqv5LU4CrR6xI/XOLn8cAQ5\nk8vkPvp1rnB7vcaYWgnPjRgdlwPeUe/kEHMqmid1NLxjqq08n5OfO6Rp2DgT\nA+uI+0uv14ZeniMhDrzo3ijIHslTNgmibMvOOCnTN76ZAZ43dTlZcH1jgxE7\nLAVE\r\n=oe4t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.265ecbad5.0","@material/base":"6.0.0-canary.265ecbad5.0","@material/shape":"6.0.0-canary.265ecbad5.0","@material/theme":"6.0.0-canary.265ecbad5.0","@material/floating-label":"6.0.0-canary.265ecbad5.0","@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.265ecbad5.0_1582664489731_0.7157468154339752","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/notched-outline","version":"5.1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@5.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ec97001ed6bbb66f04100b7745ae99d19a4d16e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.1.0.tgz","fileCount":33,"integrity":"sha512-mQ3NjJR1jLXnJi6jhs20ftTf0yU1gWpYlyx1GizU0f7pLEqcIrFnw6G+pavcnKqP+JXNkzAQeGbmZvYBQnxokA==","signatures":[{"sig":"MEQCIFJB5Opvue319oelfTKPDh2plQVpMLeCHfR8FO+OQKbCAiAA9YnXpDor0b8AOmb89FvroZfSzHumuye30eVE6psYRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPtCRA9TVsSAnZWagAA6VUP/3zqDImSFxYNw2clAbNM\nTsG/rMwBhRYGj8sA/gD+D18eWBo4V3G5d6dPLUWbQZkHP1tcw6YUT911hQK0\nGyt9brTE8UWxL2e8nUouYSpnxxTmADizyPHWLcQwABj5VjI9pf6eqcVOGxBK\nVF5UlqPEZelnEg5G/BWX18oRBnQSBOPXxmkxtPIPWAfcDkr5rVI8jzuMeVlU\nwXigCm2CPZds8xik9dW2EtNsVsrRrbXQTDqMSfOWzDqcz+BCZ9IoyaTozv30\nhfMyZLpu/jgS6W1x+n+ID9s8R2ByjOHbg4xemb6PhAf83Rzofdr8dcNV441s\nsrJkj5znzHdQ1p438XPPvG/228Ujm9YoIsAaWgmt8l3ne9p23L94jTUhdrzl\nAad0TMGj62ySWgQNEon++HJjiP9/c0XIKWhB5v8Mxdp8dawFIEfMbpgfFtAB\nkAbH5BFnoIHUBpIjFHjBCKYTwTKjjqEzzkUQAX6oM8QfHlw2z5w8N0qfaVPe\nExq5apUnl6kvDBQ/ApVK1KdIE9LzShH5Kma6hCiudaJodXd7GsqKFT2D960S\n6I8QjBLftn/R/HbcrluZo0binB+rt9d8TkAEL9CUKWmY+f5DWJvYADWwkonm\nYqHOZ79Udgc1gZ0i0hoDdi7ciyuAATR2/h+hM7tZ/R4WxuK9e1qR9d7COoR+\nMnC2\r\n=dq4a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^5.1.0","@material/base":"^5.1.0","@material/shape":"^5.1.0","@material/theme":"^5.1.0","@material/floating-label":"^5.1.0","@material/feature-targeting":"^5.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_5.1.0_1582666733306_0.3250076706961069","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/notched-outline","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.2cf87456f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10ecc18ae368666bd690ff37d0232e023a1876ee","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.2cf87456f.0.tgz","fileCount":34,"integrity":"sha512-2Yj27DxNwG7ENp59N6FEOjJ0H80DS0EDJcUDuBPQzGpAzyuA1dsW5E4NAGpRlheUJZVfKRrvnJV7sro4U9hREQ==","signatures":[{"sig":"MEQCIBmlCdi9TlHmqEbU1MxippVd6TZyowmUofiljLZEtx6JAiBozJ0ycjJ9XaGGAopK1SOnp0Yt1nR1BLzEPkpKcvwvkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZQSCRA9TVsSAnZWagAAJ/IQAJVuvxSTGWKxd9wCI5Rs\nmRE1venTQTMjuyybZANVjv3W3peEfsyvU3QX1c4kUSrcfQWXGxgbDihJ5AwL\n0wm+gg0Wi9thZHx8ffwJBmJVo12WwqNa2UoP4NwGFfPdHb3cwPfl+/OdkPtw\nC4/n5wFQgoEa0unYaHQPQDsWwDh+KDT3zcEMudyXPSlW6TRoVG6zouj7Jwq1\nve+qXz9ZAJKL0m8T54BVxnQCUNrF5ZhhBtjs1APNKB+v0XMaCDsTKuOYRoCV\n55UJ4LDZLWCEGVJCFMcOz0cSTBeL+k5mn0447OXEDZkxdHkphQpQ1TeaWa0N\nOENDXZs8RD1RI2ed1gkqUhPpSMZJevcugu/nD9/hIjrxbnx0nT7WhHn9Tm9S\nWI9FcxdXY5DYPZ/UHNAG2rBLciNzIGaPe5T2+aMiXna3RmHNduoV1gZDC8oq\nX3g0IVju6JQlhWi4WxFOpZBBJsPIqSDgFAeAGJ2O1GMc8WaSsgqUc+w1WG8g\n9ne68OKDX0zJojCf2IUxea4412gtXIUmwcB8TaKOp94+qvpJwOrK30plLU+L\nDgJzODt/ewzqYaYQVPVpO9ayqHntMe2WGN6JPdrhhv1hCvwHHfyF9tROqTu9\nzssKHxmlnsIeg/AMk0BjDRZSCBpY5VNXe37VD965g2zrbyizxBrCbCXU4Ize\nj9P6\r\n=6GlC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.2cf87456f.0","@material/base":"6.0.0-canary.2cf87456f.0","@material/shape":"6.0.0-canary.2cf87456f.0","@material/theme":"6.0.0-canary.2cf87456f.0","@material/floating-label":"6.0.0-canary.2cf87456f.0","@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.2cf87456f.0_1582666769803_0.23494178923477027","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/notched-outline","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.781434a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a5103c88657c74d3380e8d84e9ce2792119d03a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.781434a92.0.tgz","fileCount":34,"integrity":"sha512-Vm0C2Mv1Yg+rfpdTXZHLuJRUNKKmHU8jwwElR27kj6H1foJexcIK+IYTrgfAsVt67lQLmtHmj1AsyNPaIogOkw==","signatures":[{"sig":"MEUCIDptOPMGhicvMp1CuUY6pbzk2QvxYDHSQSO8ThmT0o40AiEAjo6cRIAQQdoHE5IXvELE4ArA6s3QIQpJu3xAariRNwM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa2tCRA9TVsSAnZWagAACB8P/0FO+mAdXSE9b1CiCqiH\nC7Als53RS4xN+ISZlFsWOUYs6pxg1Z4UFsbH1kzYcg8t2OIZkaDQVCg4mMQF\nBxuR+5Ci0rv4/cKJy3ZW0NKhLQS9ECV12fTKeR+Xo5LBikJay6Q6u+et55cr\nFNXPFR5QBOcPpbOunhrIEeF8xxEZWtymwMtLWCyXKTC09p9kSgMnK2mTVO0p\nPgqLv1qJoY3hJixqX3lfRpAVL29WbSS0vdzzb0ufXZTKYTdjxPMRujmVMT94\nS9N386T/1x/sF9m592wdVIxZEFUqmnUSxJAzoQz3FghezxWxQeTwrw7idnoA\nkzFk74ZXke6lMPhomF8pH0FF+IozunuB0IFC0gMAfJB6uKMQQKtEOGEqIUpz\nVjLlTDa098mTmR+WNlcaUT3KWdWqE7Xt3n1SvxGET8ihhM24fNARiycZNlYR\nRmVrlQM/8tx8u2DYK2bHyaNkX7wZUSlOBk3wv+kQhx0fNom62tso5pfSxNUH\nq8KzvtrYXoAwR4MwR+MxQW3WByVK3w4xle/J/Tpblx1pFfx4r+U9kGkw6WFX\n9hOfA4OaO0BHVi3o2yEVHyvn8FhctkGycO+RJ+SBR0jUH7Tz01yv4Ji/rCbI\noqSHCyAUBpehcO+VgM085B3XiWwLmBH4hSRdvJTUDCDE5IjPFG8c5buZ8tAh\nTllE\r\n=dxPd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.781434a92.0","@material/base":"6.0.0-canary.781434a92.0","@material/shape":"6.0.0-canary.781434a92.0","@material/theme":"6.0.0-canary.781434a92.0","@material/floating-label":"6.0.0-canary.781434a92.0","@material/feature-targeting":"6.0.0-canary.781434a92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.781434a92.0_1582673325154_0.22973525135299155","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/notched-outline","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.d6f60c98b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"313542d09939e8f5ba54a96757358030fff38536","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.d6f60c98b.0.tgz","fileCount":34,"integrity":"sha512-CurCTmL83CC9puHOqRbz7MXBNt20PBK/6FrHTa3Ei+XOC/rCi2cRcftnFngh3t5EVUqnATWNXR9g3RIhmW43gQ==","signatures":[{"sig":"MEYCIQC2FloFxs7GIPGt6WqGsUtDE3M+/QiUvYUHsPQs41+OcQIhALc/j3YL/WOfb2HO2oinTQjNHErxMsLtaq1sqSNm8CBm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY5+CRA9TVsSAnZWagAAsvsP/jgWfceQdMRulibO142L\nOemCJ0d/0RjRr+zkaMmFQJcUGQFFwG8xE3h0FCJj75tQdtr34d0T13MQrPF2\nfmtmmCTdZ5gfs/3kIFD/2ErV7kIx8qNw/XbmacgVJsFHF4VLw+vIUIFCbiCH\n9+li53EC8rHs/zCPkqGlZSMd7D2IAT1AjD3RB1KIoToMjJI9YWD3kVRsQNH1\nBsfsFzrIh+ANOh9qL+SOsH2SsXy4GG+a2laBNAAb/TRnEFc+wamxEzlz7LlU\nxxpcCGTPWhD2nYUIlNVahZBEgZqnwP+xVVOt1OjuXeH/AqCREnstiwYdUYwc\nB8xIo7ch7NRyKGws0SDmUQP1crQ/Hixg7X7DNj2RoAVhnOI7PTFKlB5upKk6\nmyOfsmQEwxtxi6ZDhma2D4+OUK3XxKg26MmEZfXJ8PQK3f5zmz3Z00OrhacB\nJC7TPUhcecLL5xaGK9DL081lbE4oWBS6/eeNApY0S5g5w2GrM9kJw51o9pgZ\nDDelhRnnp7U8NZQdm7Tl7Et9ZHwEeR9eJ1FzFxh/HNhsOrRpVtJw/sKRg9GO\nXpDF4s3x8pqPDiHaNvt+dkCxVrxPR++FcMntan69c91y4wZxt/dSobUr90r/\noB4GZIZ0HuIf9xhnK+TWXi4BAl+W/DMN3z9nUNCRKQKts2XFnFISiNGtROhL\n4dN0\r\n=af8G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.d6f60c98b.0","@material/base":"6.0.0-canary.d6f60c98b.0","@material/shape":"6.0.0-canary.d6f60c98b.0","@material/theme":"6.0.0-canary.d6f60c98b.0","@material/floating-label":"6.0.0-canary.d6f60c98b.0","@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.d6f60c98b.0_1582927485686_0.7752123030076725","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/notched-outline","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.69edc6e28.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cecd7c6c904847c66bd6e852bcb345c120ee1e90","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.69edc6e28.0.tgz","fileCount":34,"integrity":"sha512-noxV9Rx45eRSZXyCFk+Pc03cJf7PsL0Irjcf4JLIhlonQPkqslh7TnZY84nsETJyV7GCyFhzKZz90u+M81eRxQ==","signatures":[{"sig":"MEUCIQDtuT5sOJ/2paA8YGI9igjznybfpq0MJ/rF7khySiKxCAIgRl4YzTqs7ORAdw1p4DHo6GyGn0C1TaC0oHBlifPhS0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZBoCRA9TVsSAnZWagAAYVYP/1EfHoq7ssKuOAvvDso6\nD0ACgm/sfL0gHoqSRr65Ro6BmSX9NiO/a13ed9mJC5auf9CRKjFmw7utarsh\n+Rsfj6xMKCMQgNuJxcli0ejhVQjBeMznBshnQzlRWNKxrE/9CF6r1A1tL9qq\nB4rPNYlpiR0ZXpPVB2GmGlCs6pBe/2x6Q0w5p5SqPu1lWLjuOFiSqvgRvZfS\n5kp2gGFFANMMEmA8bN2EKqqz3rBSzvJ2YvYaODyOqtWJNYljSPN9mFJzt1RE\nbK6qpbRIltYZpprttSNDtx81i0ra9dZgEx+dSa1/Q8jLF40+LOqGTLD1Zcx/\nKjwqvp7qYurVEX+aHDvSuCfQGC7b5YWAKigSDdIltgh5/DER7UybGSQakHUl\naMS4vCqWf1hw0kLKCC1F4pbh3RHLb0qBJkHk2xRRjV8gOkgbHemZic2jKamp\n9HXvLe2ROakMJdlh7qF/0jxez4yaTdNgwtrQY/Oo6c/9sTpq4GaHT6i07F62\nn0a7+dvIYUF4kIMZl1z6WsyH8JFeGh+v+PXqVGFwEBZgmW0sN1/jzX8DsZRD\nFx3jahgt1IAnAcqxX9b/h14mLzH/2mruMmmlJzXhslp5WPVPJypnY9zSBCQx\niBSDQbTIPsioCIqSvNkxZaGPOTIolSQSxRqYWeIvt4YYgMuToKuje1m0it26\nZ9eD\r\n=FWR0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.69edc6e28.0","@material/base":"6.0.0-canary.69edc6e28.0","@material/shape":"6.0.0-canary.69edc6e28.0","@material/theme":"6.0.0-canary.69edc6e28.0","@material/floating-label":"6.0.0-canary.69edc6e28.0","@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.69edc6e28.0_1582927975651_0.5267807815097283","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/notched-outline","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.9372e4939.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4893c2063e8d3d41bdb73c41aaaeaf2da7791df0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.9372e4939.0.tgz","fileCount":34,"integrity":"sha512-9KYNIyOfmIEWP/whguAiBOAIhNLT5BPeamabqUR2UPkwTQGymU1SfaW8lJ/swglM5Sve2UPRPSO7Rb2BrWW5WA==","signatures":[{"sig":"MEYCIQDrRwaCjXDDC2pWMpKTR7rQomNLrsXqe5ZJXU0yQZJflgIhAMbSSUVO7mMedGj1AuGrPD7alf5dGxayy6/33M9bzKkN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqvYCRA9TVsSAnZWagAAPC8P/2FZak4XfcFlt0m7+O2I\nZzKjpGOu0ykyVIKQyFplVKXfA15cdZKkYBMT0VNZQqoWy7BR1njKKZ3AWsAs\nDcZsccosKCcV0lphai3C09hTGGgZM2X+Qqh9ZJihsRHdofmvE4/nxoRLo7El\n0MPDFnA8ykYvze8oh4rIbyZ0pCdvkAgqEEGyu4imltZev8mFjWqUNfqXCxO8\nK645Z8GYnAgaQL4xDX/x4suRnL4Mo8hKZUvZPty++uQ2XUBb/bQkb7PpgiYP\nxggdNUsh7rPtYNLXdF/l3V4B9anMtzmXfDHVdu4vgvgBXLDyAGeVe7qdao1d\n6MEJ6fohgiQxhfPucSTeM7ounpxFKDRliRdW37v/fFAlrfLGbFeWChoEzxHq\n9oTro2yiC1BArybWiINwcxN3qE3wMUp00/CQWiNvbTRGFdBnQctPHDw4ZDu9\ndr3W71+ddOBiPJp/XURll4V90/Iwkb6lrpmN6ELGZuKYUwfn3IX+y0tf6eyY\nl20OZOmZ894KQKehxrBTzw/cQFhfaIBut+ZbyMAUMWzVeGfabC3/nS+ewMgL\n3rTNmP9SYC2YIPRrdoTfM5MZnqjAOmk9qrDJ7cnciNLY7bcNfy6p2tFSj2OK\nmSPRKo3UIHzDmXQ8H2xHuE0ynBeS+XU926i97gxS09RzpxSzXue1j8M3bYg+\n0Cvo\r\n=NDZ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.9372e4939.0","@material/base":"6.0.0-canary.9372e4939.0","@material/shape":"6.0.0-canary.9372e4939.0","@material/theme":"6.0.0-canary.9372e4939.0","@material/floating-label":"6.0.0-canary.9372e4939.0","@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.9372e4939.0_1583262680162_0.2974070910172477","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/notched-outline","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.9cf5e9842.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1834dfcf3ad971d0d0c5afae86e6c4bde16b5a13","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.9cf5e9842.0.tgz","fileCount":34,"integrity":"sha512-TmH7PPeaUL1YadOoZe2P3jQT+keSy2AencUo5xQ5BLXpYrmsu1upBmWSjmL9nElIBAQSh86LWRkHqtzvm7p2XA==","signatures":[{"sig":"MEYCIQDiea29sItAnKIBCwOo67rXXCSlIMpucDjl+fDX5TtjgwIhAJjOrG9vsqt3xVBkGf7ZFPaFNOQa5bihZm6CFL+nu37V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXufbCRA9TVsSAnZWagAAcDUP/2fh5e3fPcnpej0bsUfd\n3//eWfkjjq9fVVj30n+4e4l3qyPWvKLXFNvMxYGMX66WqJS6nteMRXBLTOWy\nZHnYr1R3jlA/eRMeQm6LZIxuF6tczLmr3aUEQg53JkV3h3sn4AcmGbx/G3NY\nw9wqX2PRN7CSSxhsETxHP+0w38zaNWSBJEt4B/wtc1tTK3D7ewc+JiDW1wU7\nP1RAUn4clbmYHl5MXWoKVjhNukFwUjer5jy9UYuwJLgOyU6kQzY2r9un79np\no4aTsyF8YtRm6fOlKlBrQUJqyI6pnISneO2IEhhnFDAA2fYq5XU/t/VEBIOv\nr7yGugh27rxWXh4xwqIz2AUKl12qlP9XtdkpH1UYF0ReHPkklwA0eK9okxF5\nYcUK1zLmVzZDcxGV2JmKFZicTP31KcMNKaibV5BRvLcgSq6DrfezBNv77WXe\ntXFNzlvG8WTqFUMDlUq/7H5qs5jKrdPCuArOqdzfDI6SeNh7U2K2nTNoVLOb\neiuG8uc8inYU15yyeXWRCJ2wlDg7ZsIzfHnHOGEHiMA4+l3QrNL9qlYR/3cT\nZ7guiM4ejB0VwFPpv2sICocsnVyU4cEouq/OyLwVAkGO1Tbxcw30O1VDqmWn\nOvzmsjm4zKA9yAMW8n0XYc0HdAOds65ICal4ltnj1/mPP8X8TRLonTofM/ny\nkdKY\r\n=k2pw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.9cf5e9842.0","@material/base":"6.0.0-canary.9cf5e9842.0","@material/shape":"6.0.0-canary.9cf5e9842.0","@material/theme":"6.0.0-canary.9cf5e9842.0","@material/floating-label":"6.0.0-canary.9cf5e9842.0","@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.9cf5e9842.0_1583278042743_0.9211213077737899","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/notched-outline","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.3657f8863.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43ad997ae85d0960ae00b494a20ee6d63a1287d5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.3657f8863.0.tgz","fileCount":34,"integrity":"sha512-WNrAIKgwIhbnWKZClTUjGkSo1UaLvVg53s7G4dg37A19zMSzkTjJRa1u3oQHp4vZPmAuCriTuLcHzOIU7LiH7w==","signatures":[{"sig":"MEUCIGPUkWutbwoskXbFFn/mBc6MdxMgTPsybFcmU8kZTngOAiEAtdanxAVl8FXv7DVWc1AH6fZP6tHaTBWEJ6Ir7URvMOg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+kUCRA9TVsSAnZWagAAH40QAIQOThkKJ9NrQGDQ5Sgp\nVaPiKlsukzWcYrU4cOdcoJtXp3VwqXbW1PSrIytmrZXseYkKVVFnBFnHBUj7\n7quNKGDZTbWr79A3FJxxjR9pYxrVJ5R0Y9BaY+SrhxAlbuQ2+0iAZtsV+vcC\nntf1e4Swx2BrFzIR2m0wZAg94J1GAAj/yZpewuzRmkdneZyH0guh9rm/ggyW\nuA/0U50bEForqdZVoomyCVg8iFl5zciowrswTUyXR60lOOowjUNDaaIs2yXa\ntTydaSwZU8d2GRvwCMTOu5xfsjyELtqUaY3S+Nkcx6U2XtGzfXbIOm7r1bUQ\nq1QyoCB9lo85df5kTC8b3jBKWH70UdSQ/iVIfQkfcdlVex90epCYJLRoaf87\n1knYB0djFdpalXfrhkAulGt46RA5hzcQrxDpZ3fpTWqaR0vFfHqD8yceQB80\nNzVJEDTTOpRyG5+2RPpb4PzxaPOCECcwGuDuJv/A4iTiaBRqhTBWcKHO3YnR\n71Pvcs97kMx/zziezsdGDl0GWaIgM0pOlYDcmE9R6NqxsFG/AaBTVUaefLYv\n7X3KvOJrOYc5gnEp32jGCnvuQtYWOlNB+lhPM4l0DDJiDuBaFXLvMwBUe6Es\nQx9rgXKZJBzx0lg7iI93UOXyKJ5v0z6XLburGHgfDKgJqhPP/cXJL5NkMFMr\nJsoZ\r\n=e4R6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.3657f8863.0","@material/base":"6.0.0-canary.3657f8863.0","@material/shape":"6.0.0-canary.3657f8863.0","@material/theme":"6.0.0-canary.3657f8863.0","@material/floating-label":"6.0.0-canary.3657f8863.0","@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.3657f8863.0_1583343892332_0.11969140206574624","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/notched-outline","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.98b843417.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57a6356e0ccedefbc7fa040a01e39ff41299f2b2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.98b843417.0.tgz","fileCount":34,"integrity":"sha512-eDFK7KdAHKlEUfMxavYXZc3klNpbyXZUoQt/ThzEVzcYs8/OvB8q7vBVqW1tGIxpbdAvxeGDD/gYlUNx5RAlig==","signatures":[{"sig":"MEUCIG+CLXZS+VlneDAgxxBU93MSuMYBMI3ih0fPBHcheL43AiEA6PmAkR1lEWR47czm8jaEY8DFfWnJj60p3nKZZPxqKKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUWRCRA9TVsSAnZWagAAKKkP/AtMTs+ZuDM8xh6dJfzr\nl4s03IiOp6IgtwwBLS6Gk6P24quOqQLELXKxi44D8biMNj9DLR/AJcZt04UD\n1nhC+NvhNiOZfKtq+3cysL30i9KPCpf4U1AKUR2rTcyby5aixcJqmqWdAQkI\n8+aO/JPsICtknsBCvjsaRP/INPtTUfJxvXThXEu+fVhlkIHNPdqfk5VeW/tl\nIu74365s1Lw3mBReZpyLFjMO5j0Nk0oYT6IVyYYZigqDmYFAXOCJpmvo3mGz\n+nI0jVSdEnMe9ThHF9R2tdHvrA46AbYti8wvPVdnyudou5J/GfgIlI0mz9kq\nxKfDNbRP+Ji76hzdtpsa2w5mEiQ5eNS6E/4PyiNBiRPKPXzr9PyMbfxWFgkW\neg2kSALwP0LlNYTVO3Ov+nFCk54tHssQOqDCsvuCLZcyahr4E53+TZBF0AGw\neKSr4yuGpKe5ZDmonlWiLHaiItgA5H7auhZMzGro3QQLu29bba4b+MDcVyh/\n/a+9uBjcDkOVQnlZhPxukCI+lRZ0uK9HI41b5QvghQZ+aI8VqAEVy95Xrd9k\nIjD1cqbXOtrQZzJo5+YS/fBLdclMK6SsUXsl5gu3KKd+/PGAgn3Q+1kii96Y\ngWywjzwyVjTHIfyxkuRNEnNAiRkOSsBQVKCUPyEXoARmPI9q1fkCsjaeQNXP\nUAvq\r\n=cbqM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.98b843417.0","@material/base":"6.0.0-canary.98b843417.0","@material/shape":"6.0.0-canary.98b843417.0","@material/theme":"6.0.0-canary.98b843417.0","@material/floating-label":"6.0.0-canary.98b843417.0","@material/feature-targeting":"6.0.0-canary.98b843417.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.98b843417.0_1583433104875_0.38445028756306177","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/notched-outline","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.17b9699c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"484a93bc99e4f04afa7156d770fbc2622ad242e1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.17b9699c4.0.tgz","fileCount":34,"integrity":"sha512-6dWo7GjOtRKW2IfByiNU9l/MM3plpA4AYy/jtEQQ9T7u+Gz7glZPFwyveOrNqwOJwsWQDwsLYP6CGXwwD2Fu/w==","signatures":[{"sig":"MEYCIQDIHDWCIvXXo3TKnkb2jDklspGVFW6j26cYbC9lxgJwfQIhAJQu9Jp8VajiGvzmA4JhJIF6trhWdMbxZ/Zn+KNb0vJv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVGdCRA9TVsSAnZWagAA7+EP/jRok+3udXR+eAd/UL9J\nWiNhyHfUEMOZL/0YeJWgMCFzYD7QYET863HP4SvFZfr9tbZsFKA4vEgJfCkg\nsi6ZQos3pFWnHtrd3kfOoXK/e3KTXf3F/SnFtU4Ko/LGwUnX3Wc82aNdeMgv\nwX4/KZAIDP/vG2v56YH/DEfma/+vF/I2PfyVTdr4xBSD6jGycZ8i+Qhp1Zom\n6gP+tsoKBEjIYBWWVE3llFaTjnlVzVNTvc959l9Ky5NeRa3Ov8O6RMeDU1wO\nahem9BkhK1ulCt7xoJbwMRZY1PS1rmE3WXP+s5VklBJ4l/3ShVpd9pWLXG6R\nTWsSlXagDXRxsEygcjOkBQxUn/L6Zn6vO/lOwp+F0hjdwpKYtk5FOQDxVSkL\n2ck6N8kuNCnw8tpQjH5QtFzh1wCdcuy9+vRWNGgeiPc3CBoq/uXEhHNAcaLU\nyQhgyoTYEkceQVVM2TQwzDR/8g0B+5hhXpVXPXF+oPCbkonMNx6v95j+y95F\npWZFyKhTati9qkiSWpyfL1aBIfGgRFo4DYmpfI/lVMjEjWiS70Ih3VXh808R\nRn3CUwMb2nBc72OizTDLPFsXpP6hPYpFD5XVuDmQUrqfQa43q0qJSrVu6Ww6\nwtbfyQVOkhk6NEyhV2E5b2DEtvoXWYSDrx9Wtr1F2OYFXi+pOQvrlIA2Rqsp\nS+EK\r\n=qOqr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.17b9699c4.0","@material/base":"6.0.0-canary.17b9699c4.0","@material/shape":"6.0.0-canary.17b9699c4.0","@material/theme":"6.0.0-canary.17b9699c4.0","@material/floating-label":"6.0.0-canary.17b9699c4.0","@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.17b9699c4.0_1583436189226_0.19189764912023155","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/notched-outline","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.6ee035572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1aacf01bc8754319a3d3db773fc1786107b54dc9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.6ee035572.0.tgz","fileCount":34,"integrity":"sha512-CK5NRbkk9aJZGn8E2mjNrgZUsfOx1+Lmfahz7xTH+DrUfD8Z1xw/EnO7bnWVhOKvFmIN0oXeScmg1eIDyS3kfA==","signatures":[{"sig":"MEQCIEDXMgSVRBKzz9btUuavN/kY9CyJQaX7FfWR8GGWK3chAiA5agTCHvgN6dah2Icklzx5f5KAepyLtMPemvfrhwErUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnNBCRA9TVsSAnZWagAAfsAP/1J3BnKQgjQNaXx4OXUf\nme+o9k9m0attDNxkU/tCitFSnoCIQMsbxadlPx/4WMHcKv8EkLnISDX7iOlI\nWf2AAspzRGKVUEivG/eo8RNhGlQ/tU3NAuQG/D6m6pxnamil5JQQ53bi0t1Y\n7xJ+PRaZbLzgYaPB74ov9MZqHBzo9jhwoO31taRoHvVr860BJC5FQfqyvkov\nkQC/weNNS4I8c03DRLY3UrilNa1k/nvMN0Jt6vfBzN/IHx5e5o5iw4FsBzJI\nL2TuuTeeT6xY0XUUBOCiudM1WnefwRJRHYylIB3ULwAAhTJPB7M9C2deFjig\nv0Px4oqCoQBDtMgtQhHcYIcoGbts79kqn+Ca/suW81gIqWadZoTrBV/ymdw9\nB5tFb2fNIJCsmonX0hwQO9+PcckvPYK2p9ih523o222N3vUpB9bf7AfiahZD\n4tnDyjzwvByQdWx63q9w+Q75mjx6hDKcVVwQjlpEiwzTPAEy3s9zQfABuFVx\nP3ECzZ04jkuV5VZAxheZgMhiyW/zCbMzzqDOdyDqSBK+v8il1QexR+DAaY20\nfG9Q45VOJB8LLdvSOI1O4W1/FMouev2Gt6t/9NpP/caTxFi7HjZ2Z67Uw+Ut\nxrtoF/LICY9AUeJvQ5OfdbpBnuRaVeZSQP9hbJn9wMw278rPF54kCxD4us7S\nqFYi\r\n=ibuR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6ee035572.0","@material/base":"6.0.0-canary.6ee035572.0","@material/shape":"6.0.0-canary.6ee035572.0","@material/theme":"6.0.0-canary.6ee035572.0","@material/floating-label":"6.0.0-canary.6ee035572.0","@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.6ee035572.0_1583772480704_0.6833568541304407","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/notched-outline","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.bd33cb56b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7a27a0e86049fdf39f8d2ce8abedc55f86c8534","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.bd33cb56b.0.tgz","fileCount":34,"integrity":"sha512-1RNsA9g8/5rrVIiUX66BPx46ABEsmyFJ3AZSfHaKApwqmTpVsdibjM2hVfv/WTLDcV8pR82Re1AnwPyyeKBmXw==","signatures":[{"sig":"MEUCIBmEOc3MITEWJT3bfDJ+a1sKyyY3ZCBNGtZmh09GkiaNAiEA6iIp9ylwJVW1qishrZn1m1QwgP6vCxyG7/wgmtnltYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnt4CRA9TVsSAnZWagAAao8P/2mBL3DbUCXLOA3OsPBT\na0mXdTeqweP2tiWvy+5E4mGCtV+d1W8DLlM/BaiNhlsVv4Yut/4PQ+XfEYQt\nwgelrhEPcRLnfBGH9VHNdSptw2WLx6mV1uXSB3e5OIOspokG9Rw0If6Y6PVV\n+8+6vx9oAn3vDH6ldPNuitqYrXC33KC+nZI0xzD3PGwvJKgBRJ883cTP7O1R\nk4kHFVl0jbwmraUMLhscJnk5SnExuC7/ZATBIBJLe3iiXOozbsXeYSnPQLLY\n+X7+HUx5MgtxL7NfSKDtfD4zXMZFDdng1DMlh6pNaLcQ0Y0iLM74UMiHYXWO\nkXdUsq3Efavi3B8s10sjCxESBLg8smv40zIXZhXntwmnnhuXBxrzkxydqGKv\nEvDE11HqGoe2EKiWQZwe2ZTetiwx748GtYjHlRw0A83148eMGx3fWFaKFHXQ\nP/X+MESQ3hqcHVv40gHOV19IJcHpm3nZvLSkoTyxE9KgJZxW6Cyf+7XuQvrj\nOWGQXTOi7VzsC7dZnxCO2ExLy+LBq0emXzQX6J1mLe11AIZC5wTdUl1INnqT\ne3jmw6THBp4je6WoJ21PcwRglDyV8WuCF7ut2D8eMM782MC+Wf6RNfJpEaNg\nJoWeiDBRd2EQv63u2TX9Nu7fwjJeRsXk+qIUVdfm24cgpdE3KbgKRlVgA+mS\nqn4e\r\n=Jd7o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.bd33cb56b.0","@material/base":"6.0.0-canary.bd33cb56b.0","@material/shape":"6.0.0-canary.bd33cb56b.0","@material/theme":"6.0.0-canary.bd33cb56b.0","@material/floating-label":"6.0.0-canary.bd33cb56b.0","@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.bd33cb56b.0_1583774584341_0.13498778878137108","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/notched-outline","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.26c049afa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40757ab9d527657bb0344eeb9c6f0e931275b804","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.26c049afa.0.tgz","fileCount":34,"integrity":"sha512-1pswMAWye7Z+sI5JcRjGjg2+gyypdvLEDlKOv07uDeCCvIElFX6HZQgDnY7WSY44UkLBswB+9FVuq132yVh7wQ==","signatures":[{"sig":"MEYCIQC555DWv7dXohvMIFfyYhnh7b3iuqsP1TvEA3mA15OZggIhAPctF8szxe3ujovhbBOZzlToVze075tiOU6tBf6vqWXX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8hfCRA9TVsSAnZWagAAoDMP/0LQxeJXcKP/ejCXy1NJ\nwzf083q/LlClOV0dFCFyyypl0+S+7r3xydco4vlVvc2F9XOpXbMGjK6t9Xmu\nFiPZllkvgPjfcc6MRvJqXKdQXnp8we91nJIlCdKW5SHcKoaIczVd8Y0GOd/0\n2W5/+ryAyWs+IoGYrFRNl/zmbCaVEXEe6HCgIJaaeQyTBRKlQVwBxuD5ewd9\n1Br/6Ac8BCwJ4ctOy0poeqv/eenCSzCWphYGsuiVizKlBdow49j20t4iuab+\nMFgYWVe1URlGBR+zqWWO3e+HAipJYUiIaM7rVnjTD3Z4BBJRw0ojraPlDwY8\ntzuAL5FWYz3/cBZkIkrWhUTm+n+vJ5A7bVtXh9oEqICfiOTwtxI+oioQ4U3F\nJ9pDo38KpE3vhUW2NFAF4e8zwYvAbpCdAZHyRCUL29W5PatsXN7ezFze8oui\n5tTf5KR5UzMdnxlzM4fwQfOB8It6KhHyCw9LDhqEgMjjCfVyEU73A3ZrI9T0\nhzu7cbjJxTcoc09sEbgq3lDpK0yOaGRGg7LthvrY8zhWLCl/8Q7vI5YCw8TC\nypPl9SsCHPCenKUUOHo/sAC7q02odIiMLRIp4eBhCpPj1Lg2eW/eWjMW60gH\nmiWllRO0S18wOehGydHNjgtikXmf+Ghl5KYi07JNv4pUEuxpYRXclDyRNjY5\n5lkE\r\n=b3V5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.26c049afa.0","@material/base":"6.0.0-canary.26c049afa.0","@material/shape":"6.0.0-canary.26c049afa.0","@material/theme":"6.0.0-canary.26c049afa.0","@material/floating-label":"6.0.0-canary.26c049afa.0","@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.26c049afa.0_1583859806816_0.7362535256440095","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/notched-outline","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.1db5c9fc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ace1d7d34bf4e1ca2eed5c2e0d686162a45a9588","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":34,"integrity":"sha512-JOPJxJYbylcmrY/wJQ/4JxBb50KCY8gQCAOXN2putWcC7EnKreCgUj5HyzJqE2NYn/hfjqpp+8FJBXKQcFB4gA==","signatures":[{"sig":"MEYCIQD11h+DVefKKcuKToM6LubxDljL+ZCXE4NgAxcmj/l9YgIhAPDjBMjYVvLdwEAfH9aXA8sl4MofuBXbp+8qSMYKJ6jb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/qlCRA9TVsSAnZWagAACvMP/AmCokHYG5TrsBsG8Upx\n6+iK6c6q+KwSbjqcH6TrwX5hyTmQyVw31cb7n89KusF2KP33wRXxzFOx56WY\nkDNBYtDlX+O8H3iHdZ7L6ufitCOzOpTmkzvlTkaSmKLIcjbwPzT+Hm9iv8mv\n59CxVsio5ooeOUuDAWON9BjaJdrIO1tU2GL4PwJ1yzCesgsJiP0xYtkBIu/c\nHXaRLntmotCJqS3AYQFhc+knCqwnRDhrRgHbSnbOnaYCurO84wbE+GZJMMuG\n6K67zN0B4rlU0dXr9SFD66ABr3qGyr5Ig24fLVhpB+hmU8hAR2F91H5RzWae\njJhfw6meHNtKMenzt91+FWq3c+M0efzEfABr2fURwxVx2lbc39f1Zi2bUjrU\nl/TGrMUwkQ4W2WQT3P0O+nyRf2r/8N6DaFsK2KZQ6wzamm7plz6AegPBcs0y\nf+oY/Q0br2KXhIAZS1eP+8jmnZ/Ym+SqCjwJ05bQrqoaWsuavjbBpGC/pHMD\nCwZlFdAgZ3vrzBCaTyHkX7hocftHirZgzY+giEGsaMMiLSPcVzqdTDVMzAu4\nWiGZVMyuIQNzDb+mjBxhWT9wh4N9YsBh5BUKMhR2bttHz7v0E9uaH1ofnAEK\nsV6wvfutgt4XJktcp051UERZ3+eYx8PaKUpTqBjKrUs8y9QQGlzzErCKvcWe\n7zrl\r\n=EmoH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.1db5c9fc8.0","@material/base":"6.0.0-canary.1db5c9fc8.0","@material/shape":"6.0.0-canary.1db5c9fc8.0","@material/theme":"6.0.0-canary.1db5c9fc8.0","@material/floating-label":"6.0.0-canary.1db5c9fc8.0","@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.1db5c9fc8.0_1583872677104_0.2474101920210885","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/notched-outline","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.4971637f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cb0148a5d82e2ce7105fe3d7ad477645d7af0a7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.4971637f4.0.tgz","fileCount":34,"integrity":"sha512-S89d+aZo7wMTR4f121VeTyq0JdqzNFBGx5ghPLdVMX44A9qMx9dqQolPzhS7uL+5aaxp8v0bzPlGl1QTQnSRUg==","signatures":[{"sig":"MEQCIB+tDf2o4YJ5vRchvclw0N7mg7riiMr9h4pwYEkqFm8QAiAH9lj1+aUgIHQOaNdWPrEuXB4FSC2kGgS6cc29vuDMiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBvKCRA9TVsSAnZWagAABJkP/1S/qgQvvOaS8aGVE4Ft\nlllY2Va71kBB1oQPhKg94kN/2rZ+4mXMe7mfVl317cl5ZXkZhV3LF/S/LZQz\nV5rZCh3NL3ldX8obQtaWUcF1KrfhmGU123qcvfK5PsWXnIuN24Cbb8x7L//K\nK7JbLznPYtNdifb6kaTQh5PLPFRQ1dABOyh6kjJQjnPMz/kHqdgiN0bqYOCH\noFWESAUy7UmHVZRSXpoVO/iA7gHWE8WI33Hu+tCJLFDapI6ZeltopCKId4hT\n/4OLlBfg74REfdr/Nt7UeGiovYLkJPcRv5YUq1gCwY8K/YPxdVhuhQ6FHLHZ\nMQqWCywnz9BAEn9g+x+85C8W6XxuBp7A7wAWOrZDBhflWzkTewToetobQZva\n/gxqLSQSi8tmissp9jsJGifk05Zckrw2ksJ3Bd2SRKoxqPM20gh1y91o4aij\nI7geSS+Bc+2BD9LLFAjuIuRbVT88XuUNawl40ny7FM00MsYjMmrLyc9pvVyz\nX1+Eaix9PfU5+RDyMzGZjwhco3VHff8hvitBxxEwJriIPmi2oLy4MxrW79wl\nJGkvcgNkq26u1svJR08/hKLpmni2qWg4wc5/P4+7Rx7X2s0SaLM14CQ7vVa3\n9j9mrlEAkyKdOZCdboqN+y7WGluCgHdDKmNARyLOsel73hbIxp6z69W493p/\nwehf\r\n=4dHQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.4971637f4.0","@material/base":"6.0.0-canary.4971637f4.0","@material/shape":"6.0.0-canary.4971637f4.0","@material/theme":"6.0.0-canary.4971637f4.0","@material/floating-label":"6.0.0-canary.4971637f4.0","@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.4971637f4.0_1583881161674_0.1903724309886008","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/notched-outline","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.1ae8130ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56c5c44176d2e3b217dbce607978b2e38d5a473b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.1ae8130ce.0.tgz","fileCount":34,"integrity":"sha512-LhiQ5fj9RLSu84JeK+CBOP7L5W/s3wkJjrW6TyL0vu91RF96MoEM5H1RaMTn4JXAFI9JWf3KMBWuWpzLJtGeVw==","signatures":[{"sig":"MEUCIFPhD8t9njV+gzvPDMWK3nnuMFhNX3MdToLDSu9GIj6tAiEAs0psq4jA2xr+0X7nRiX7RIy0dVj3vyhiBWchIsrCVpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB1iCRA9TVsSAnZWagAAA9QP/RJDYyGzm5r2Osj+TWjS\nfZ9S0KvQPAsvW0z2xv3QcZCjjXSx86g8muzhMA5W6+HU0UsC0qckjyWE3T47\n1m3Eqnq8LqPc+/bAWcIh5A1zah4L710R9fK1C6hVo6l+eC3o2MUor/klapwm\nKL8FIw1hQacae4OKxQ2+zC4x09kahfd2hON/NLN6897zfYeXzjW3GcLF1/l/\nEbU7iMUOCxdKLSn5QoXfAXtPmilbdrYVUkXZ0DMYfYjHkDNMybnIPEVKj2Xl\nMT1pX6loF49FpsJvJ15B2U90Bmc2MquN41iO8dX97BdP6wHCyKEUD95c9IXM\nJ5k8mw1t4UPVe5DSbC14yDG+1/5HHkn8WZHtZFwhYtKY+H2irbdbYGXyZUGw\nUrzYJXWSgqUEjFOIXCw71qIiH4MmzpOZ1xkLAksIUMGWY1MarjARTmro7l+1\n4M19NtstsfgMDYaosPAlWDIEs1dPW4HzyHSXF0iUB3R034H8z/CccMqP+NIB\nwxUF0EZbNy05kspe9sCvTc+Gv78kvSLKUcOmvJIwGobswXezBddZev/Vz3Yb\nS2eMQgROCnge2UxCdmlYtoT8NFqyfctD8OZPL2S/WEHQzlDl6yNgZmPHJVve\nHBgGOIrVYu6rwZvaHYFOt1hLx7lWXFLV7hYTBeCw8aekIbKvY9FvZnDCc/bh\nLIS8\r\n=W6It\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.1ae8130ce.0","@material/base":"6.0.0-canary.1ae8130ce.0","@material/shape":"6.0.0-canary.1ae8130ce.0","@material/theme":"6.0.0-canary.1ae8130ce.0","@material/floating-label":"6.0.0-canary.1ae8130ce.0","@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.1ae8130ce.0_1583881569676_0.20054721710522183","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/notched-outline","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.8639c2690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"caa518de34b997dd101bdd2ba9f360073f63fd08","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.8639c2690.0.tgz","fileCount":34,"integrity":"sha512-pib6/zomZo7vBQW2A/o6F4Px1YR69ilImq/PbOrZYi0QZrbqgRdX8zCZSApfc71kLmgr8CP9vlcGZpG+nb/3kw==","signatures":[{"sig":"MEYCIQCOMxImY6fmbm6FTZ2kwdjO/5eEEpnYsJM2I0OAmUVoqgIhALM9Dn00VzvHoWJx4rzi8xKpLoeeKxaLe1/zqcr9fCR9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIZdCRA9TVsSAnZWagAA6h4QAI99EnF7d8r3XJl44oLg\n28LkEnl7px04l1Un9vwUpkrZVqSr3o9ezZmqhM4U4E/x+SUQuEZvO0cl3sp8\nT73MpWQiBmlJy8yzcTmKnCph3UHqxd1UzxCwLqvICoZsddDGeEQGlWulqTb2\n7Wh+Qj5ejZUK6S0kAr2g2rkDSfI4+Tx4YawyX5rQEqxNlcqlTjv59o7UF3uZ\nd3dSE5mz8FrFVVK/2mQA/0g5X2BkxSN4hfhlptIXFrvCL8lx51VRoe7leJG8\nM+A6KdvuRnOxs47rcLjOASr49RUujuoi82m8h3U7YVX9tPkbPSWSyBGfHSin\nqjIMaP6zT5qdfTrCRahlzBvjwnzX+j6iNAxVap5zq6inzkEM96OehT0DprZi\nraTGN/bKcXiOlEgWC0Z0qOIde3uMcwj2PwqHdlDfZlOu2ypSE0I+xiWFQDDV\njdiTl2eAxLUhora+eiQrD70AHkv/bWUDa+HcOX9TZebxKTmFgwQg8emQNhKf\nn6/hN8j5sAumn3ROLWgqgzb0uFOLiZmmkODDOgMJikJtOXiEjthRMDsdoOou\nrCePOEhjF4z4Qa9tz8EYeq+blc2oZ36qmjVquCoVkD9piKv83d67hyC+KySs\nzgEAM/en6ijszisKz0aGNRT52HhJUPpTXCqhSuNvFK7xW2FipdtnMbIWEad+\nKqke\r\n=prHc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.8639c2690.0","@material/base":"6.0.0-canary.8639c2690.0","@material/shape":"6.0.0-canary.8639c2690.0","@material/theme":"6.0.0-canary.8639c2690.0","@material/floating-label":"6.0.0-canary.8639c2690.0","@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.8639c2690.0_1583908444635_0.7957170117272789","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/notched-outline","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.d5808057f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b8b80a8f8f5c554c72aca519d5d04a7cd69aae2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.d5808057f.0.tgz","fileCount":34,"integrity":"sha512-XTbWcwE4pVsoqsBAR/dtet0XrK1/xMgPl7N39h8wfL5Dwsm4uNA7JVIRw35C1yk7INOFBD6QgmPkxiWIkrj7TQ==","signatures":[{"sig":"MEUCIQCf9IPpCkhaifeKFg3WxrbC05I2ZBW8u7GBQNK4EkH2DAIgPr30mNpnBk9w1Ez1xZA5hOsIMA6czz3EjsW00WYSdT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaREtCRA9TVsSAnZWagAA9wkQAI+LjvMI0bWG6q5UCPcs\nRoeSGSBBIg1iMF1pFB7/E48ykzBaTV5NemS5vn4eiW2V8AbJaPBXqUYgCpJL\nDf5wpvVIbJ8kXhrwv8+zbrrZM/SmT8XuAre52hNPpIy5ufQhcI+U55I3Q/fA\nv33yHNurz7YtUfT8czukOu2tOvtwidawKcjNdHWTdtOBfD/ak8d9OVv+8VIo\nwcTcmaub8mPS51ZaMU0SyVQbbiJLZSoasBiyV+Sjye5SKNQWG5CwDljrkdkH\nyRaTWlhJt9j/PznGL6A1jF6rdK8LYQV6UBGPMkUuOC8J2+zSuPbQImJ4k/Yd\nODmxzEh4SO4QB28vMAlXR5AjqQFBH/PlHmxbm8fMtlo98v9B+dJJaDLLm53q\nw/7RJdkPcttOfQFEPhNuvxrwpNGumw4EXpnRIA7OPSVwVfcCw09xB6IIaEPg\nO+fcxdHKGbv55i47Qt6csvLCFs1Fkf+L41hMxBDOkvE6bUjaXqfGuMyAKo/2\nyo5emwGjLLofG/gE4T9JsacVScpZPGGRLvluP0R11FP995uxbsLDXX5cjX31\nXC7IoUlKyPxyoMNbc4dpkQFH+Pk5q+c3887H0AtD2kHUxDigxWgujvioaDwf\nxfz8ELL/0m8MGlnozXRVB+m1qzWb5hcNPruWXAL51P0wkMzm4xrPmN1Xv9Lg\nd3hZ\r\n=sc9M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.d5808057f.0","@material/base":"6.0.0-canary.d5808057f.0","@material/shape":"6.0.0-canary.d5808057f.0","@material/theme":"6.0.0-canary.d5808057f.0","@material/floating-label":"6.0.0-canary.d5808057f.0","@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.d5808057f.0_1583943981551_0.6860205051331854","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/notched-outline","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.b3f58203d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18708a1c6f5b0ae1c6b37cf76c031fb8ebd1dcba","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.b3f58203d.0.tgz","fileCount":34,"integrity":"sha512-+dyo7xZpHpW8PdSP4H/F6aOqmsxQdo8B0UYUoXtVymm45KNswsSpKLxfJ9QYATfmazTWct6rbsHjFb70nH1bbw==","signatures":[{"sig":"MEQCIHKRiaf34nrzrDuObjWruxzI70u5qwNDrQXQh9Nwg107AiAgegg+t65a1nWmDWMYSjChCo9BRM/WOhkje02ZrZ6pgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT5KCRA9TVsSAnZWagAAIMoP/2dd50l+cPVjAJPLS1hT\nIH4LegaPtJiN4XQfHwQhRwlb6S5bc3KIFXG2MNmAX7nfT0mZrUvLGMjdQkVk\njC7oIBrho8poV3KreARDxb+WY204ecByt4pDOUFx5zbRxGBusSNWFx2FreQf\nGDM/IiFj3/HThSQcLv0IK5C756S50LzoGjDX6+kgXtU7RkaWGu563rwE2Swb\nnDSqSu8MFGbkXDG/9Trt67x6Jzlb58G5TbPIRX8h2ATHiM/piJFQKP9x6BiA\nwe+8eMP4Px9ERncVao39/HHOxsfDyEc+OkE6wqPMrVet+gV7FTyyb2cr++Tf\ncb6yVaKvdGeYJVGcwJ+XNNF6VK6vnEnsFQ9rJp6K4wmNn95pkDEFc3dJbNgT\n7p3KbpLMpAsW+1GD+7zSQ+uTGk7+2ke8Dh1pk30UR3IDn1RENJYUVSoyn1QD\n2+hWznf0/g9ziz3yGpMNxz5Bk5nss/vwe4lnuk88fAy+A1+iFHdfYhf9rzfa\noViiJmLA0fwVFijuchu58ICcnLs0cXCXUWcFu77AZJvlWLdlrcLMevzeGqrQ\neVOR0xTyCcIXQPK+mZ1SNrnWxXH1GI5sm9wyU8hxTG9TQC4QSq0BWw/Cg5k8\nnWQab5UkIRbB31qRt9VfM7jN3koDK6WiOmDk0uIAFm3qvaNRyofmZWndWU3Y\nie1V\r\n=Wp1E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.b3f58203d.0","@material/base":"6.0.0-canary.b3f58203d.0","@material/shape":"6.0.0-canary.b3f58203d.0","@material/theme":"6.0.0-canary.b3f58203d.0","@material/floating-label":"6.0.0-canary.b3f58203d.0","@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.b3f58203d.0_1583955530290_0.6661216212460743","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/notched-outline","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.bec065920.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd3616ee140d0f364aafb522f4ca32cdf2fb2cb9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.bec065920.0.tgz","fileCount":34,"integrity":"sha512-k7bxAuTDiY8qWISneAkRHdOJIrawEaV0OR3EBqAX0i6U8YBFOGVq/5MAHqitdt/qmdPgygUHaTPLeTiSgG2iLg==","signatures":[{"sig":"MEUCIQDfI4JWV52sVY7gC5fe5/XqbV/VGZ1KLDRrLoezGiZmVAIgNIEiwsChJCz7ZHkdKmOYFZm9SEulzy37emBDyfzTNIc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapmwCRA9TVsSAnZWagAAWdEQAKI1vK2bqCCOa53ef1vR\nQpIMBvXUH8bZnmYMY3pX4FsT7G4sByb0u1CqVDv+/BT7iHngm6Ga7oyZVbqv\nSK/Nxq6stUDWZEzIvrbWBOwMSy048aHVk5a/0YYTFpPi5ho+e/ZGP8VzKry0\nZANnT9OXGzfdoghtUWFW1QXOKSywrzgDk78TVyjF/SnZCtdh0TbNzQVz9IXZ\nCqL73OeFf11QzPbeuTE7DMmhv8YZvdxJkZ0Sc6/wPhTe085mD2M+VnjMo9iU\nThMzs8wBJmcKTFxDn3/p24uqA6SqaUoUzLjcwX0vEYRGGYGBBAleHPq8fczE\nZMjFMKv68GsP2JgAelarTJOytlb82LG6+ed3pJfhy8EkW4rWN/Y9hJH6qRPZ\nRgn4ObisUKNQtsgwxfrjTGAN2a+smyIZD+vKWhvsCWiX+5mcJ52MXEiN8FQw\n2K9vUZvcRMRBgfaD0L1/vEp7NSyI+4VJeDhwpPgLIVzXPgdlYYpTEl3zBD+s\nvb71nBoH7tvdgJxsH5Xq4sKWZk+/YNSF3vHibJMHdLD7xxfIXXlbr1iXoQy9\nh1njWRUzJHZdpYY+zYQaYmOsLz7IQffHHg1LkNWU544+QRZP7TpSr+xq95s5\nXE853vCiGkUnvR+I2ndVg3yLMCOS7UJWlguor40hj37Ta1EpRGo38w2fruEr\nMRuP\r\n=G9vc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.bec065920.0","@material/base":"6.0.0-canary.bec065920.0","@material/shape":"6.0.0-canary.bec065920.0","@material/theme":"6.0.0-canary.bec065920.0","@material/floating-label":"6.0.0-canary.bec065920.0","@material/feature-targeting":"6.0.0-canary.bec065920.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.bec065920.0_1584044464314_0.6792454145010911","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/notched-outline","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.776291ef0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f3fdece4486083b51a7e5ede1a46b245397f15a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.776291ef0.0.tgz","fileCount":34,"integrity":"sha512-X+pUvmQeI9KL8dnDnQj4/cjHx4nWVYO5TvPM40QzIXRg9xSZy66i83NQVnqFKPpdubexHtylDNwRm+b6XzxFWA==","signatures":[{"sig":"MEUCIQCLwY5roTt3VVWm/DBjebivILc+yBh50AUXLtsoYxGk7wIgBADdQpCTW9GlvSbKDLtMiY/UYcb/436vZWIiaqAYcY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSM1CRA9TVsSAnZWagAARToP/0qJLGMUdPU72RWVcLj2\nwa27JZbbqSZ+g0RtujJscb3C/bL3Xdzml5B+sjgvLrnVmsJDdSTUW+PElAYR\n46nOJVaFQrHSszaHu3e0zFmjzwk2xPnztixCwGYX4NbcZV+veUmipyeNcfMV\npARyuWiYCrhornHFrij6zfEFhoMV6cuqFme/4QA2TmbHkJ3+Iteh8i9XJ27O\nuzEUelxJ1gHmqOqxuFjQClg6Mg8QlbUQ0GSRy/376a7GJUGs9zuxpv74Kxyq\nd7kkHslD+R1mU2DFjzpOYcpeUiTCwhzczMH/vRMwfw6Qk41XHR5RW1XTgS01\nWzd11uJxKRKrbmwG4fV2P/Do2vpfVVziB6NzjOirTWAGAHDTIa39xbOphahr\nDzWITC01hjqawJ8a6u5NAkMQ6wp8pI5oBVQfVNci3CR7tWorttLWJtRDDbEa\nImMUCdUbFqUxCL0ZdjS+nnYNrLEf/rLAikfIX7qBxV0GXhJYsACBI9blhMvA\ntWBVCL2yiyA7sCJHS/HjlWZLlKESI0Ts089eKbciOYgysWW4Kxy/JtySCGtY\nOE3eC0Dc+Q5GC+nhsSqQAPqSsu7IDBuwFK5ZLmNwrd3nVslKivduKsZiKIJP\nP5JLiL+kZXi93/jMvAAqjdOOvpgwspbf0Nx1L5imf3lwmi2faMfYBoPapUeE\nifCq\r\n=wPIl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.776291ef0.0","@material/base":"6.0.0-canary.776291ef0.0","@material/shape":"6.0.0-canary.776291ef0.0","@material/theme":"6.0.0-canary.776291ef0.0","@material/floating-label":"6.0.0-canary.776291ef0.0","@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.776291ef0.0_1584472885412_0.9346349387899953","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/notched-outline","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.ece19f3dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e9cc2d365f47efed70fda18c96746000da67a18","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.ece19f3dd.0.tgz","fileCount":34,"integrity":"sha512-gOUSb0WMP+9oC88cM88RkK2zx9+/t3AG+SFSURUxC0wTQpUx6pv4HNxa4QIXipBWQTeKUCZKygdhmJVlb/fu2w==","signatures":[{"sig":"MEUCIFurrGZ+n7xqqm0NLfrx5sRnfJok9um49oFt7LWR2DPQAiEA1IDxSfGE3iNEK/B4gjEiyM6+jY8HK4u+saNrYZh00FQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUjUCRA9TVsSAnZWagAAmfwQAIUV4A5aiItoDY2W0P+t\nt/0xFoCMXlXy+x8dKQwCqdQdRkfI7p9u297WCjn9MCh1sCXNCoYRQnD4jeLt\ndMkyWCEXlDOZtm16krLz+kJuEOxD9LXNPkMGPbLloheKviZ7v1tHFOwnl97J\nixuoMwm3vZY+FWBfLDYACG0UJxtmbTDaYwXyaAFyjzlXmOqggOon1tEm/c76\nULzEnRbfx88ZCBvM50iYGgW6rkSN+HpCIeMAJZzvfn1HqqdfI4yxpBWAVREN\nPdy7vJ+Jd6gvpasOInfTcoWmtk5fUZrrFkuxFq7sfkenqLpphQLYj5x8ARST\nvGvNL6IjtBJgwFI3JTq7ypwKe767f1AsmUojLJaZ3bOuims+SMF4F9JNX7Fk\nKWjMBGLDLNflZLIMikPAqtgAsCf51aLKbKvZoTBUTymxKTxvA+UYY4zIia/n\nynHjMGD4bBsCjBirG17nZA/PMiQfl1VwbDpnGAA2qlE9gCipoqpQFyUN2eMT\nAckPP8McKpRUWF3sJ7IVT6ed3Mbcf3bdANSN0MB3kzKskre9LapS5ZjHDuLb\n8ZhEhIc7cp3Kn1N37BfBo+oU0S3b5WYkgHME1FCXqkb0YcRmvkTXT1VXUsq0\nDKZvhEFrs2W11lcjx3W4thDHRc+PHKSyMvnie+n61U4q5jCMSGfdznfikIyY\nkvLm\r\n=Llmj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.ece19f3dd.0","@material/base":"6.0.0-canary.ece19f3dd.0","@material/shape":"6.0.0-canary.ece19f3dd.0","@material/theme":"6.0.0-canary.ece19f3dd.0","@material/floating-label":"6.0.0-canary.ece19f3dd.0","@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.ece19f3dd.0_1584482515833_0.5404474667201151","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/notched-outline","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.4dc45af6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2b6194446e268b876c5fb00ed574806c89a1d4a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.4dc45af6c.0.tgz","fileCount":34,"integrity":"sha512-O1Xv/QdNetlmfgydrZ0U3HSQKMUC70Ih7gMnyTOHc+BxI77FYTeDhaPgJfntl3xNB/EPyRAVgSpMresMqihgiw==","signatures":[{"sig":"MEQCIDzupEEMuqtgsr51tI+swnxAnf4lKJXe4Doos8kCy30aAiBHjfs/y+mVkxX1qAcUmbTB2nWgRH4bI44qwXKA2mZ9Tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX37CRA9TVsSAnZWagAABpgP/R1dAT9RQ6spvyA83a6t\nqKLocHIqn9+byr53ufIQPZtDmhUWqYa8XmLE1FT93GLI9yqVruMntATlteni\n5zeq5WYQ8cpcHpJMCAmtUA06G5yd0FrYN6QAURINWlxOAtDqwUaPzKS3r7US\nCkbPxlWScPj1q2WVkneDymzxcEInyp+RHdAwO+N8pFnCAT74APwhderqxETM\nE95kdSx6Yi9IlnQM0NkhjsJmFIUj3Fj79OyThTdkmIOUqsHtAhlxXJ9oFpzY\ngK71O0PI1lLMq/QuMsuKZTYGE9K11MkjwjtJRTe89eFGzwBzg8nCqOuX7NiC\ntVN948Xnfr/CRQKQnr/RNrYLlhfVqEl8xOQ6j8iZkeJhT/ESJQ1NMvGtrUtK\n9pRnxFTysmCK5fxaNdKxN3EGptHOo2gUOcluUWrZacVx96agcnCPPrMuOKfh\nBdKKY+QyRei56l7dfVGlqrqLtrIH1+nMTaOClVY+qkcT2BTmizUoaDBNocrd\nKLxJSVnjGncj2maRm7wWrXsZC+V7FJ+hVqFGmn+aOWts2JmZO8P68dhef1CG\nLaVJ7yrHnTXRRvb7Ie1dNtCruoqhoxXcN75jQW3yYAaWWaH3glIhhjbPizDC\nK3UcQW2cSCNOP3mLFLkth7wQeVzK9PQuQa/lnJWKJKQRTFLuCnSSwvsX0FsC\nKOsF\r\n=i9IT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.4dc45af6c.0","@material/base":"6.0.0-canary.4dc45af6c.0","@material/shape":"6.0.0-canary.4dc45af6c.0","@material/theme":"6.0.0-canary.4dc45af6c.0","@material/floating-label":"6.0.0-canary.4dc45af6c.0","@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.4dc45af6c.0_1584496122760_0.04620448174628833","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/notched-outline","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.6b48781bf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e476e26691b81ee863cc28a29376b9955d4cb23","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.6b48781bf.0.tgz","fileCount":34,"integrity":"sha512-RB5yFBxo8C+SPzvFz05eiX4mWRcQeZU9VGtF6cAZX3sAcVV7E9lvknty2tMDBmQyYxS/kp68DCnPB38q2rPIxg==","signatures":[{"sig":"MEUCIQC3Fpm4zWXVyuOEuLrNu18tg86uNGoA5f97BcSU9g4bLwIgVs22j+4I8nb57xSA90R33hFWuFVYjn7jzXRcqtLkwOc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj/NCRA9TVsSAnZWagAA+1sP/1OkTOxBLl4yqn3Y2j3B\n94QbM1/VL/dtFHO3bh4slRxk2VRuIlyXJBATT3PWmtYmy1f8H8t0SpIvBNB3\n382c2KdQhaAqC/60GGqSBic6NPpIYKM2b5eWaY5YbPHU1sfx0mtFdEnpAaMF\nw32AkOIT5ssB+6UuO8dLCH+bm1fa8CYQ3LpmylTfCYGXhkME8vF4KY6KwjDV\nfwDkVMU5u+PqSIhLLbGwVSWx8sXBhMkJtQ8EQcKzGgkJgTmSLscGwpCnBeAD\nNcaI6Z5k42SllyclparjC7fqT792IlU6nM6saTvVrraD/I7+NXG5dAwmCKUz\ny8D9XGgpAgiu2O5TWtQuLericFSfQMN2hXExkfJvB2iP2Koqq2qwnXoy5Ojw\nwAFRz2U81z+7pRaScps2KRLU7s4KJNfvAl2/A3BpvL2zBOdMcHtMrohtOeRq\nJ+iyHrIGP8mR1ft7X598iydm6GAt3qrIBhJcoibtZ58Hdc648vDWM5GXY/9j\n+4cmER5o4w4kR/LU+udO7i4L87Kh/LKkPVAH+su121Ud+7CQE3W1MMmP/Gkv\nNQtFtVKIYftxOtgLCPR/IXM30DU3kagziSpdsIWvQg7Ifozx7GhgG5D19HmQ\nrHNlgJpS7P7xcn0eRuptUxd12HSZE4mzqX9nedtK/iDv1Socu+kK2/2fKeuX\ntUUn\r\n=rHf1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6b48781bf.0","@material/base":"6.0.0-canary.6b48781bf.0","@material/shape":"6.0.0-canary.6b48781bf.0","@material/theme":"6.0.0-canary.6b48781bf.0","@material/floating-label":"6.0.0-canary.6b48781bf.0","@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.6b48781bf.0_1584545740404_0.10828089189552004","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/notched-outline","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.a88c8e4dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4be0325e3ab7f2f508019c8b8d024962e44f8638","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":34,"integrity":"sha512-HjaMzXVSwgSQ/rNXKvXjCfjnSKiCudwnRuV3GkNzrOoQh1YVYcmAL/OZLHkWP1+8cksMLxpO/pOlAAkdfpkWQA==","signatures":[{"sig":"MEQCIDZk9awheVZAnisEeVEzHNNWKIAmhPJFswSN0y7Z6jegAiAFGJHhTw23isFmJLrwgRPZ2B4ymTkzVcRAlJMFSd4fiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec62kCRA9TVsSAnZWagAA9uUP/1H5Sd+KgiDu0+wuDzxW\n6Mf5KK3ugD+GEzYaT5xMmMqK0Onpze1rj3ILe1c1B3plDnMBkgxUvD6tGVJs\nhYGwxYAv8MgKgxgbCLZkMwNyj0pinOmPQcC0mDKi/lbLup0zOzOW9Kgl/BAx\nWMp6Hi1XOQL41MT/WMkQIUeXw9ZEswxPf4/1jj5y2TMnMGUoRJf2OZO6SNdg\n/6nxFjahMManRUM6aO+PJ/Sw7qMGH6gClPbYGUvwX1jrYoQorZGU/DQxM6Jr\nsaGpxOeY/1Pd0ey1pcAR2wJsot8yS+Btlvi3ns/KRth9fAEMneZnl950/cGX\npBLxjGdG5C7ACESKUuhuJJgz+FV7xOePixy4d2pB1WIb55SXIFnDnU3N2tsJ\nr/Rk5waCEIr982NURfGyp2AJ76ejUrFzerJ7UZkhM0U42fq7z1oUvpmof+1v\njwZyvNRSujDBwzZ3i+AH7+74kljFPz9gla8Y9lfKQI3+aHQRN8+WOj4xe3iM\n3A37eqcuVrEQIu93M394qjn0dg/Gxyq9xRZkMHAHm5dicAauEtFlHChOS6Ok\n2Pc+d4/06Hmm242eyIllpdN/bUHdL0N29TfaSfe4omtEw4BhScKI17BYKzdL\nn6cq6iuFT4Q3j8JXYIWA0OdTtGO86k/KSRPkkL3ymvnCIcglyxJm7SKMgO+k\ncG3l\r\n=FRbY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.a88c8e4dc.0","@material/base":"6.0.0-canary.a88c8e4dc.0","@material/shape":"6.0.0-canary.a88c8e4dc.0","@material/theme":"6.0.0-canary.a88c8e4dc.0","@material/floating-label":"6.0.0-canary.a88c8e4dc.0","@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.a88c8e4dc.0_1584639395581_0.724928128174354","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/notched-outline","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.cafe18860.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa45e11800b62d0de19d9638c05162edac44b9ee","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.cafe18860.0.tgz","fileCount":34,"integrity":"sha512-riOyoy+KdS8JKKo+FrnwUce9vSK1kWpDD9Aqt7vb++h/IJMEXYopm6zbd7rPKC4u+sUx0yFlT6Wwc7lJsEB7ew==","signatures":[{"sig":"MEYCIQDMEVuzzczkXCLpQrHay3+SumjPTZIuaa16SZWfGalX+QIhAPwANdze6JQ9/ufvr9ah7D2OBdwgTWnrrpS2kQUyR9jd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNkUCRA9TVsSAnZWagAAP3sQAJJeXDM+32OXF3V0ObbJ\nNCcrVLzqdsAy4C7UNQy2czLPbxn3APiFa3ZutiB/JnXAoJxKq4LQf81MJ5Xm\nZhzYFXK5nSiSHLOWeireQZU2ls9Z2U9xk3pHmFFffBdgJER2YYMB0uJlOXgU\nCDomzSGX1IOkdGtw2dMQ3ECyLRUS4u5hE2+FeqXXbDWtpTYA6cMxgwjVb0Nk\nL3q86nYWO5EgMpM3NtKBUTZeVvJ/9c7cYbUzpbDOjGvxHulF8DX6ccm1VSyz\n9rWD7y0AHcPcUS/02eE24vfKYnGt1O9xoxYbdZ5EAQGgyjQEevUuVVtB/44N\nbKKB6hI/MIcCW/MasO57AjBfM2xF6h1mF/O02P7XWfdl+cfqXigcCXwNewv2\n3yRq9xAm1x+WqlSNnpMw+vpAR1FASvmiWRo6E0VWYpAguRB+q7nfxnGF8Pjq\nPzHM3581fr7uvJpYePE98NYChpmwq/1BQllUTQfUFzQWs9JZtaOyaDrwegPO\nUIdaJUd3ABkYbu2ZGqNZM1uJCZg/co5L4RIYF8X/OOuUJJ5Utz1nOlYFVw0X\nQ3l7OlitpfXpvReu5trP/RwL5Nxnyx9M6vu0LbFUcVlO0J+kFNMU+F6bE/4A\nGbXhgxJgQcMJnKGRmIxasuIV0fPo/qF7eSDNdOCVf9hNcM9Fqx2a0R4A1pwj\npfH+\r\n=gHgs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.cafe18860.0","@material/base":"6.0.0-canary.cafe18860.0","@material/shape":"6.0.0-canary.cafe18860.0","@material/theme":"6.0.0-canary.cafe18860.0","@material/floating-label":"6.0.0-canary.cafe18860.0","@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.cafe18860.0_1584716052455_0.5003906825506692","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/notched-outline","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.35a32aaea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5bc9c3fb9c81f5cf0622867232ce65b9eee22aa","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.35a32aaea.0.tgz","fileCount":34,"integrity":"sha512-9xdyxREoaVywB1WqKx3vTmUBWgb3xQviOPmuYBXYDb9kPMuiX0IdpOYAMxaSaHWR/qtOmPR8CwWPZXuhqAgyMg==","signatures":[{"sig":"MEUCIEh/QgIg7qqPPBynD2Vv3PcIBGyAE8LTw5wQBNIbj9FiAiEAsdIzvEVqxVCtRttbSKqNhwFONMIeieW0jZCPbYj55WI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSC6CRA9TVsSAnZWagAAsloP/0LPaXmINT78UjaVoER+\n9f1hZlspD2m3SMjATdpvzC1mlhWteiUtwSpUVOr3UBbpLlQcr4xJnWmSZbPT\ne4jyKk+UU/mlQ1uQlpp80ZzLNz7bTGgl+wBcLrg5N9hNeIvNQfKJ4EZDZ0V7\nTeb/n7DSFvEAiSavdV8vkHHu5pbXm4hoRVhH0V3Zoyt5vpQTASau/xg/KNXg\nYMK8xp0DYMBYVuJSsqyubIpeLzarwSkGbwhn4fHTZN9+KXc1XmH+8qB6IAvr\neThSIJrXV7pQpeKQ0cUCvivzgqEPUbp4LAmgzxBVahu/Pk7kf3IGAQvM1rpg\n1tsRUQ4UIoZkD5x79yEwiLT74Lnjfqk5qLQxKYFuulj5HoKG5fJ68daxkgII\n1vdPe9SeiIs6Pg8LVtUuLnV0TEdn3SdrmNOpJmURUV4Fwtsqv5i8pso93emy\nc9BdFRUPWAN8wP0zkupTaS93or77agmoa0h+YWRJ88BUdIFz4VZ8pT0f1JLN\npQppy1EbRa+BKhsIKvaLmM1mRICcoyB6I/kJxMHPxWk09rt+bmBWIQpLkgZC\nOp6QBDcyEzSl7N3630cC6ktPGrA7yWbe8GxKxbVMongMXVsUyNSKwIGpU8Jl\nS+D8gDGQ26DgJDP+UIkw6OElC7mDWEHdleF88Y2xUzOV7Hr8fTLKDy7vhLfU\naPWJ\r\n=ARpR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.35a32aaea.0","@material/base":"6.0.0-canary.35a32aaea.0","@material/shape":"6.0.0-canary.35a32aaea.0","@material/theme":"6.0.0-canary.35a32aaea.0","@material/floating-label":"6.0.0-canary.35a32aaea.0","@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.35a32aaea.0_1584734394021_0.8164470882280419","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/notched-outline","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.e75deb854.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"176d24a75a3c7f6b0523bbb273a6198cf22bf334","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.e75deb854.0.tgz","fileCount":34,"integrity":"sha512-tPTDIuPN8rINq7JkV1LDj7ZkRHbm0splvfN4Z4Z8yjoKAm1S1D1ZecUznMJifRpuUymBqdOMJR9tn+ouxa0G1g==","signatures":[{"sig":"MEQCIAQXHvPhi2icgRENfCDApn7DWZNAtT/qtdwKVKhcSTeOAiBkwq77mhkccD9HLv7/B/St+EoNuEjLPr4jd4ZbURlXGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUCgCRA9TVsSAnZWagAA0UQP/iW0Hg4ieRaYzxL5iWAn\nHQRCrynv7NP6v0VSylAarLeGGbUHRqTf3xc02B/8j3nnQu92d7Kl2pwRvZDi\n2DUuTC6yceDi/vGDZCIL4gKAoMl29U5fB7k5hVxl1y2AzPDECbYwNinQvp5+\neHMApVDh+HffMxlZMoKBZLXatqWXuxMLP3qRM5nKukMwDNJ5DZzNjXNSFTih\n+GRDZbXAnOdNHUOYmnPFJujZUjsGixJGSinUrOSTYJRt7RTaoNTRcIrQdurG\n2VPIzBxo2rTNPtyPQIZqIGLKyQEm8lHU7cFY3XXHvSKjWZsjQdJhTSRno2nK\nN2jVG5QW9XX29s9utEV2zQwFi+zJI7F5cvoVD60xXLwcikelp+eRDTGvVzi2\ny9IFRGYXh7SZ1ju+IqYRW2DmETW4pTDwenHL3wAIyFUJs7cSKYGQY0BReCG0\nvO0QXM/+Mh5+zfIjw5zkPi68iYyh3i7B3nTTEl4ByXNm6X2+owjkov+BihgA\nkV4Ikf9Ka6zgWOER25hkqDsmQu2MJMMy6Evu8ZsGv7kOZIxU4lQmdcF1fKdY\n6NeqiT2sL/kefZDYIeKm41nPlmZx4AiKmT81ajflzMi7N8DKQxZEE3a1l/mZ\nlnBfVQ4eaiFtfpAB40segpcWTBXZ0Dq8bupUHhYhzNRTxBEEOvUbC1KPDr+H\ny9r4\r\n=NqMG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.e75deb854.0","@material/base":"6.0.0-canary.e75deb854.0","@material/shape":"6.0.0-canary.e75deb854.0","@material/theme":"6.0.0-canary.e75deb854.0","@material/floating-label":"6.0.0-canary.e75deb854.0","@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.e75deb854.0_1584742560181_0.9476179576552084","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/notched-outline","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.2cc6966f6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11e55f3476421eeb4a122c7a425fc916e537c1d8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.2cc6966f6.0.tgz","fileCount":34,"integrity":"sha512-jP2kTdVUNcTBYwPnMuUmsifrsRn/d8XT94pf3uTYIyKg96TKsWZ1vuZIF8nxgvUJezfexx0kFqDKwcbX9vo2OA==","signatures":[{"sig":"MEUCIDjuIxt8zXcNxm4Repu9WUTrZgcrI22TJH8moJwyXVBxAiEA1u3JJo/CSTxCKd5NIzDKLJzQMb2EguOhUrO1EutCmi0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelUICRA9TVsSAnZWagAAxbMP/i+klqNNPGG3b+SVS8y+\nRYQz2OHZ6agBfjWyBAkplSueorV60C2LvXFd8fU3HGoOKK20LJvomSUoNJnT\n1VTTbJceySivNKntzE+0tS1iRxJaZ8pr1oqCniRDYqxqoCwFqZjEX7sUirUL\nRbDbUinffMKYUlSoXCpga86iRK1pWk3jnLRy4uSYvoTKAgrsAX0NKwnqIscy\n2Jg0EwniwwhIWRIanxPYbPVA4U81x/QAdzQj5Xk+rwCnSt1lCKdd//PYz9h/\na50PXRQvewZH/MsJ+PKHja4YgMP8a/N4G9i97Y3lETLijDfAIY6AkOutO4S2\nPhKMecMumU4AM0Sqp0VNkPnuSPXtLNYDJIhIbjLnnejDR7ZSGnI6Sn7z/GM3\nkVfu6HBwk5hyB+d8jlH9KD80bUTfosxBJzleOfEYP4nDmULexf4QxIz4BD0k\n8sB6tOXJSXDQY09e5uIHfN4e/M+NHJsi8FPtSjLulAiphfbXXq7WiTQyoU64\nYSGQkwM48FUMYGiLiHsVSHZaQrR73AI+8xE7KILqDL7+vytC6QES5YZkjPEP\n03DLADXSISKAA90vJuFUgH1IaZRLUAlSh22coQUkoROITZUUj5YuZaSfUycU\ncs1uw1ILUUWY7sFuxokt0C2xKg7fuQ9JFsif9o/0qlZig4JW3pzDbUVUQ1Xy\nilwN\r\n=J/DK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.2cc6966f6.0","@material/base":"6.0.0-canary.2cc6966f6.0","@material/shape":"6.0.0-canary.2cc6966f6.0","@material/theme":"6.0.0-canary.2cc6966f6.0","@material/floating-label":"6.0.0-canary.2cc6966f6.0","@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.2cc6966f6.0_1585075464561_0.9737130277657142","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/notched-outline","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.8707953b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3a07d42b1e6cfd071b1119c79302f628452ba1e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.8707953b6.0.tgz","fileCount":34,"integrity":"sha512-07FFVA3Aqovcm9+bpu4O7LCdPcpQUgyJxfQYZDaVrHty9Fd6pZLrMhQ0tzqEv+4aLShMqTmx01rNGfnQeyxO4w==","signatures":[{"sig":"MEUCIHoBX/lb7smWAL+q5lMfBwf8nnO+OteemfxAn11lBM3jAiEA58QHnAqeoxo8BlebLUEZDeDTws1miC/WXO0NBFhvs6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelXhCRA9TVsSAnZWagAA79QP/jpOHEIUtNJYODCuPcp2\ninxkI4PiCgj8hFW+1JnWZlrk6uq4zH3X86mt+GXbXW+3zjCRRWTC1hAm8uJB\ndDvsU6F39lsYvgX0Sp3OAntkoBskRtu0hQ01J2xK7uNgzsCmVWXBQZM2jUWT\nEtZ0bZsmDqoVIo4aSJRVCG8LgbQrxrbUjIuyShZaV2q63bJ4N7D6sx2rEASa\n7oKae2iGfkiElJXSF23BM6oTHs7Mj3ijVBIoypvCc0Pb7lagabC0oaMQkbJM\nZPDMAtekkWy8WRT4rxwcQa4YIU+/TE2HuAOkZ7y1bNeu9jGBc4j5RUUC0Sl0\n62up+bRFzwWqU7elnI3Pr3Dorf2S2Qm/lvwjzfRk8f0RK5hCfew6niiu8wud\nHHtu9mXvuOrKveu7ZnCTaVOqsBuU+e1migWUdRvuJMiIpxIWqsUqm87rsFNT\nWjO0PXTPDBU5FVbEwTkebau7rwB2APjm8gw3NfS6C0UHjWMp/NwTTJJiYiPF\nYkDjj7a35CmqEVRe+6JiOXrgwpSc0O9jj4YvTIJ+SgClpPm5GAk6xNsLTnZe\nOt+ewJmlO9qdH/X1Dp/XMOczY8wvalkeq3tBklOCmQR1H7pjY636kwbJk5U2\nXlIdFmPGlsVMXRKuFN+hKHN9x92damjR7qsEAPD/2ONnl76B434CqVc+7iFr\nIPBL\r\n=z6Uc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.8707953b6.0","@material/base":"6.0.0-canary.8707953b6.0","@material/shape":"6.0.0-canary.8707953b6.0","@material/theme":"6.0.0-canary.8707953b6.0","@material/floating-label":"6.0.0-canary.8707953b6.0","@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.8707953b6.0_1585075681066_0.35278688121697366","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/notched-outline","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.10af6cf39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f7efed96ea3e84ee91deeb70065fbf9876a8f0e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.10af6cf39.0.tgz","fileCount":34,"integrity":"sha512-6+zB1gSLpa2SPD5qmloaqsTTAcJ7TjVvX+Nwq35iOXcL3pejbGHrsw4UUfwnMfQkcykFJVW4fEY3Q01hCQVFEQ==","signatures":[{"sig":"MEUCIQDlRq0jE6POPfmbIVnFEnL8kPZOETYQoTbSNsY41FV/5wIgGv4C+p+FiIY44i35uV7liVEVkj5KY+wIZJjFEIlVg7s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6CcCRA9TVsSAnZWagAAoXsQAJ80xNhFcTN5lKSRqWK8\nOo3u0WFRFn+8tran6uJmBr3+H9wKRiUFajHumrLRtv7v9yYFp5iFDAonyYxY\nHIoMNkyot7btOod3+fzhlPHhQiZyOqP8T5/2oeGmqFzhwPz8Exiq63hGRJ4G\nG/v7LOjLbbFb+/0sG94XeHSSQBfHKgfv1DF8ns7bQU5wNTQg4TawGYXfDrdt\noNTsMoZO5RgJBdCbUMtKrQ0en/hA02jldXOFvHT0ibsgVd5nuIbuGyKfa9Ts\noyQYBVw8Cr5RxVzV3C7jn6noCVZkzN/anOetCBBbttaVigZyaGFVx7V1VP1L\n6dxjuVU2wbE6D7id1mtHPqCSTB1DIeOMZQjV03UL/Q+r1McQYhsGBZU3/TUl\nWkXM6ugC0nhx+RFdiK6ZBklJoiQOwmpFRJ8NOKK+zJdeb2MA9dD/Q7/IOzPp\n7nvsXBA/wm59FIyj3Hqr48ztKWMoWCIKch9fuu6yaWXamHSTLG2hWobswdZ9\n8p3LyjIPzsBVZk2Ph0ltu8VDARR3+X1PnkwigPG4t4otK5eTymD+uEvvYVvE\nkAmUy30CYze4IPDXPHdZA1yPplmuTjFak0vKy/IaaBa3rdsfkguo5gOtJ+FM\nVXCuJTFAwNIj0sEjs4z3+7jeg+b7Ul0Kfium/Ae7CYBxPU4zIzCVoe7jeDCP\nU0qj\r\n=G+FJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.10af6cf39.0","@material/base":"6.0.0-canary.10af6cf39.0","@material/shape":"6.0.0-canary.10af6cf39.0","@material/theme":"6.0.0-canary.10af6cf39.0","@material/floating-label":"6.0.0-canary.10af6cf39.0","@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.10af6cf39.0_1585160347980_0.3329293630752119","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/notched-outline","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.7d8f9c8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"210520804432aa8cbd779701db81f660ee6cfb4b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":34,"integrity":"sha512-ds8IiJA+SgQiPVJQR6o9C/QgT+/MIbmrSNRN9gV7ufLByrIqHRqE3clf/qR+6Dz+tNWTQ0i2iZkwxh3iEwITYg==","signatures":[{"sig":"MEUCIQDfakZrTrKh/BSiolk/KWa5W0zB/m4HBku5m3JQMAI6FwIgVhh+s57jg7m/kiQZv144x7PTvlF+1LiZYTRtNLG0xiU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkB5CRA9TVsSAnZWagAA3CQP/1t/i7lSWMSA66L9kM/v\nJF/1cp1fAFQsDDXJ9/JjmcL4LLSvVh9QgfgpVHUWSRKez0fcLD0kilEO8fPZ\nftttYfdzI/KdUKNK0dD0HORuQpgdhGXVdnYvApsf1aMc3VTlAROkio9afqNU\nLtuph8yE+DG59P29kXx6XFoW0xLDSWvGtt7bOtGcBRlUvM5+9AX/6bFlsabj\nlcDemS8gPhEiKq49ZKg3rk24pUZtpi5UAyk6IesHe3QVGxytcowbiXxvMyON\nX/TchEZ7o7t03LOnA/jXckP/0bWqlrnauZNTZn+5MUF3TQznblaPodMZWxw2\nRfX2ahUdLmoUJhCoDIL+kOi1wr+1913BFRDnEThzr3xfoabTCDvXOem8rqux\nDM/dDFuBinjHeAkXOkDkJfdvI/5QoORY3Lw5fCFR+E/otTu07Zi4UleY4v3e\n64l9qztDZ3YodPvWTN0/wuMjuoON1rNWhIeBGkaMWoV7sbsOZaVa4ANm6H0B\nDW5QOHoZY0uU/zw/3gfgea14JVrip0wI91SAKGzOFz37K/F1dagBPNHEeFMH\nQZ9pZdd3Lw+J67g2BrtQWFbe3L0fzou4oc8SHPF/peUJLBjK9dUpcWdbrWRK\n869/+P4SKXJsRUObPhJDYfMkaKvDZJq7dkyzBWBM0XDo8qjNdOGQdGAOLsEi\nO0kL\r\n=AZs1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.7d8f9c8d7.0","@material/base":"6.0.0-canary.7d8f9c8d7.0","@material/shape":"6.0.0-canary.7d8f9c8d7.0","@material/theme":"6.0.0-canary.7d8f9c8d7.0","@material/floating-label":"6.0.0-canary.7d8f9c8d7.0","@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.7d8f9c8d7.0_1585332344714_0.5796773722609878","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/notched-outline","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.d6315efe2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23a1c0976bef4630469686f9863287d7a6e386c0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.d6315efe2.0.tgz","fileCount":34,"integrity":"sha512-Jx6uV1QKuoEHi/77CSJCfxJ69FBN/OeLgOILykGi4BYn2Mcz2OLcWz/AeQkVeMT1vWjMqV5ztEYYJpNJlANs8Q==","signatures":[{"sig":"MEUCIAueLwpEJd7pMVGzpwrRf9trStMXea2Jb7Gir015q2cVAiEA+AduIh4gaFGu2EromVWCKwhRZCzKS+QbXSNo9HqhYw0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflqZCRA9TVsSAnZWagAAwZMP/iwnGgz5dQtPhXqmZDQ7\nf314qsIIlFG8sp73X/zA8Rb8vigtlCZPpjKhhLqyA128ozzpMXxkLToYI6yh\nGNujONf+EQ+8kU4nD2CMAFkKmmG/Oj71uidVkaBH1WowwkzOwc+FuxJt3NyA\nYkmUgtmsqIrb5LG+qYRF6suxNmdF21GlfDhkFAscMfSo0P2wdb20akpntTeT\nYYAz2o3bYw0zPJ5tJm5o33PI4unwmT4l4TI/AxcaftSFfrGZWJ/ACvIdF0R+\nhgo2H0HQo6b8TA2HVMaNn4+cDf93fqWAfO8oEuMB1r+SNhgoj/uIFBFunyEX\nS5xW/NYOE8NtYI4ImkRc76ChXkvvO99M8ouePl6Zbx6oSjuiUjxm26fV8wfY\nX4d8J57LB6I7X7DBmR7j0TveVaX1orOU7kqhds6M8riGoWWm+blKs79He+cF\njHEiGEfivbwVhpqOGwMpYr6f7EVAbqoUJHJEwBS4YRvwXqBDcDuhqBIAzpuA\nnkQoAGJs6vHSm87QkBYg27xWCEk9fNkEin4si63lXq54+bZfYvNBkites0n+\npHk+pxpoedc84VE4TyR4k1OaFa5awg+y07dV/fsZJogkNVPQhILVtc2lYd8N\nXmeDFl5So7PsBquUa2g3DWSEPrMEoQNfnJIKb68H7Bh8yl5cMeGbzSP3hZsD\nNmI9\r\n=mHO2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.d6315efe2.0","@material/base":"6.0.0-canary.d6315efe2.0","@material/shape":"6.0.0-canary.d6315efe2.0","@material/theme":"6.0.0-canary.d6315efe2.0","@material/floating-label":"6.0.0-canary.d6315efe2.0","@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.d6315efe2.0_1585339032913_0.4016163048365873","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/notched-outline","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.a3016368d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b92ac887caf47d2d5ebab1d77948bda11a5b3b0d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.a3016368d.0.tgz","fileCount":34,"integrity":"sha512-S3c15MTdw2/hNOuV/N2mU9fapT43dWLV3s+VpIwDHDhNS56dI6aWN+A2lIVxCBeJzMCxQUN5/bhAO4EfEezjwA==","signatures":[{"sig":"MEUCIQD5CXWAqwJpj2CjkO5TBE8JBgupWM7LXNEnlAngPu0eLwIgQ2NBvCEYHAV9lreezSDdAqglyZvt8XkvTzdJIuhwApg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm4QCRA9TVsSAnZWagAAfzAP/RsNyIgwjPoVEH1M2fgn\nv+IHtizRXXCoJC9J8yCJNw+H5b6gAJEGAMHb0Axk0Wj7UQ2WamL/V8LBO0ud\nNXeTtB+Q2E4IbVWTFqUPZu7WX/P3i5sIdKUpAmZHNvU4Cu00enQVZkkWfCju\nYJvRWFcBixDGuoS2xbc1gkMcKAeVltYeo/tJn8LcF3jMrS5AasObpVTThMen\nqj4q1bBuj6vXrvkP9Z0AbOBJHyCIi2zTz8Gys5/ow7aJkvYI38L60ajCqSDf\noT47QLVhum+jEscmyq1pG4P4iIjDs917mPL7Sxjznl/CH00MvEoeKlrw8gVL\nqnhVYxZTOFaRIaVpf9wn5lq1WpBUFKj/o+j8tkx+PgIDO5rpPldFFGS3kNvQ\noo//fi5VAtFQiw/EgJ4fSaEheh2fHJb5MqG009n57LCxSOEJJn7kPYB7ZDLw\nMYNEPavSIaBb/54rYa8rR+8oNM77Wp3dn/pYQVU2+l4IosvbN3o7e4Rqt+N7\ngzL2jTYEDBd5h9k2JYmqg79cEOiHmeO5LsB+B4JPInGgr759s1DYHm//va7g\nDKmzUf5EX/etfE8yWBaDNsMDgtK0AcrJJ05WtP1aGHMyo+iYMy1eE/sJLU6j\nibQGPnWKLV0Ie6InGaP0Flp4Shhx6DI7S4Opmqpuox7r0IEdpI8hpeg0mAZF\nV5d+\r\n=TUYz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.a3016368d.0","@material/base":"6.0.0-canary.a3016368d.0","@material/shape":"6.0.0-canary.a3016368d.0","@material/theme":"6.0.0-canary.a3016368d.0","@material/floating-label":"6.0.0-canary.a3016368d.0","@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.a3016368d.0_1585344015943_0.13943390277648415","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/notched-outline","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.4b45b6620.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdd3774d245755a450ff64708b1cc8734f142ba2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.4b45b6620.0.tgz","fileCount":34,"integrity":"sha512-LXaVAf2D+sIMbBy6LgySbplJPHDMN8PunY8VP8bxMAv+8E54FAso8mHX3bzFgusq0egAL9rhpdKD1PkrOhk+fQ==","signatures":[{"sig":"MEYCIQDigLSUeo6SMvBO1Z1ZG3OlEiPPWbnXtz1DsF6pDnI1OAIhAIppn05sBwEu9TIQIne9kQt3RdomzVVVl9girdqt+764","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2hSCRA9TVsSAnZWagAAKGkQAIk2qSAoqBxyvlj/XQ5N\nzsVLt8C6CqraWFWRWRURGvx+f4gGW8VEqEAe4LAeWUBA6S/r4mrDz4djXEsN\nSLsD+N4YEyhAMzvC2Bsom5X1LsPUctsCM6nCa9OokP6LzvdZsN7Ewr8aEq65\n9o4RikToQGkj8nQe7DA9NMeSCUi9YBVguy+SDJ9bU31Iia1D4904lLHp0LNF\nR9XTzpBx3HBsUJOT4xrn6VV3xGicoydd0oDzysMVNR1FBoqY7djnhgnNEqrx\nbDD1qAzE0KlOvnpq7n7tAXxbPFopgTReb8XyBpgwd1xxBcdE3Zz9cdN1CKPW\nVlgdhmPP/eZhTJiI/Axm434aioOG0gxpjK+yddCFhyUvshiSHGcOdaDrjOy+\nzVt3xWLenHSy77r5qdfThIbC4G43Z7HE7g0ezCQRDU1XrXNbNS2iw+6mUliT\nq6i6LpD/KFCVi7UDUd9qUVNT7kK+YDBJ5MrSYtHlViLeU8s+agkAsdIkB6Be\nc/WTl9u2FYhmHMgXYbb1W09MKQcMcr04eC8VNURLMMntL1EHS+Cok+y1/WJU\nYaEueCyoBYoAOKJnh2uaG28NPXziG6dkaDK2IQgDRw0aibOn4grRBwo1U3uJ\nLi63Xn0g46q4oEFDAwwAQdlyqg8xvMwDjpKZB48xVeChkD6untvvRNA+1UfE\njR/V\r\n=BVGI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.4b45b6620.0","@material/base":"6.0.0-canary.4b45b6620.0","@material/shape":"6.0.0-canary.4b45b6620.0","@material/theme":"6.0.0-canary.4b45b6620.0","@material/floating-label":"6.0.0-canary.4b45b6620.0","@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.4b45b6620.0_1585670226355_0.020648535765999787","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/notched-outline","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.e84b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1bf1976043baea6a49a560d8fc6b402dbcb2af1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.e84b9c8.0.tgz","fileCount":34,"integrity":"sha512-CEVsqlZAkI8ug2B/HFEDeRCsCbBee15gyWq2Qu6urMWDYFkY3ROp43NdJOaFeHoxaAiMa4PKWzsMeU7U8j4U1w==","signatures":[{"sig":"MEQCIG7gReVKHQmuL3TLnbXrr2n8j2fFCbLLFyNFeiNwZvCIAiASONBIEXTp73xhmk0BUNvqzCNQGFGgPco/v5EXezn0DA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMfRCRA9TVsSAnZWagAAmN4QAJWgtQUQKaIOMG+dtZeQ\nne8w7f3aonjENXYfFzNmHhNix/zpfsp8HBEEAEd5DVTyH4iU64VudHwOc4yg\nUSdOg4bdFaJ9cDVYKNO0/vli8UZtG3mBozNRe+sgLDTwydsHLf6hAKG+8PCd\naqOS7D6nFLRIehL69ikYG3/jIju4wbTLmqq2ZqvbDQfaSGzUFDBoXQ+nFnJG\nzEBZs8SEf/CMouij7gKid8c6mMQcKXiUQVeEi4LB17wh6WwuEFLSrkOjk/ca\nFF5FR3yqtZsFF7kzp10EnL3EZl6DV0Vc+y+zDc6f3V8oUg0VoEhyrfAPA6P9\nBQPP+5+ZsDMX+KkfiDJUctjRgjxX9jfw4uAhQGfY/3b9YQCofJ/iHp+LW9JF\nwq25mFml+v1lcHJg9v5wHJsZIMxonhbmI/f1/SdUVQnQqFL0+4i6jEfau3xc\nuRA6UkP6wOzhl87sWMn4fuMwDL0hM22Xg9EVFjAY18S8wwglLTk31AP2xmZu\n/0Plbn3jwFbM/2VF6s5fLI/nOM9PdXPDSVfpcEbLJUWoQsCMTgzyPnhNSiTk\nWu2a+3L3Qw46KdCxeSn07n5pEsCKKuU0IVypJt+co1iL1c8IWxdKdjjRcw+p\nroBW39FMf4FPjCgUlZuzpzCVLZFdcXtwsqdN485kliJCAdIFb7OH41Nea6jf\nn3Yu\r\n=lemf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.e84b9c8.0","@material/base":"6.0.0-canary.e84b9c8.0","@material/shape":"6.0.0-canary.e84b9c8.0","@material/theme":"6.0.0-canary.e84b9c8.0","@material/floating-label":"6.0.0-canary.e84b9c8.0","@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.e84b9c8.0_1585760208656_0.9358527619119625","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/notched-outline","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.e33c49e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12787438c78f82f9f7c471d92034208d551997d3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.e33c49e.0.tgz","fileCount":34,"integrity":"sha512-KNDuBHq1uBiaSq8DUnxISHkfByGX7URnP4Vk8srijRcovGXcAkU5nML6AqCuBz0COouumDYgloLspZD/hhFJ7A==","signatures":[{"sig":"MEQCIC5SUfGfAPwifi6sUJ8kjlLwFx8pZIjVcEgm2NBqXONdAiBMwLxH69WGh8iIZW/FBibD9t1/ZXQjNNiopjgdf6l4+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS1sCRA9TVsSAnZWagAABL4P/RrnTSDu8eQpG8InCrRZ\n+K7Nf12gKdVLN8FbrUX2OtS5cvETHJO+6j9XMgSIXC7r0qoIcm932qhXfada\nGLRUiyT7z5ztxBa6MJBZblV1JlSaawTvjJ4oyVTd01nrLzgqNIuj+BuuWkWC\nVCJ/pWtxOTfSfre0JkeAnMEbrC/NrgL5TXbYPz0YLowM2g/EdlnwUKNJqu9g\ndyRJLiSJKUVRXgyzqC+ZKSYeX+KDeEQKKLlCr5vjtzPT1B+nMiM0ZRTko7m7\nsIuPLmzjSV+AxNG2FtHgS+5gDKHq1DIvFKxYcQTEqQ7UbG1zBTkNnVQGzbUd\n2zIRw/rYqnLWW5wPhJYfD3DClLUgxW2Xmt0ZQkTUC5aPjDeYzxaOtLXS7g+U\nKL1MNXw1Ogff128ognREwam46wEW8NLh/fnBbS3/DZe53gFPMzYokHOB1GA9\nANcncw6gNTF7mo9SveOo6onduGZfD2bmAu7L61WqUT6/lusMkBAO5jonsn2M\nOI1j8ldommetGtCcd1Gs/6X4UjzWZKtuwwsF6tb4CDjxYVwlomNcvrk+s/Iq\n437FhwgDWfA5y+oIuZpUVLf9QhJId8SOOdfGUuVLRR1qzO56cXxXecSQ8S1f\neh5sDxdPjWPs3eoz8J66J/eDUXJsdxgXJ6Z4B/4YG8UEs6mP6otp2NaZGkcE\nLh+V\r\n=cIyt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.e33c49e.0","@material/base":"6.0.0-canary.e33c49e.0","@material/shape":"6.0.0-canary.e33c49e.0","@material/theme":"6.0.0-canary.e33c49e.0","@material/floating-label":"6.0.0-canary.e33c49e.0","@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.e33c49e.0_1585786219830_0.6370227172512402","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/notched-outline","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.f1f8e60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fa29ba32ba72e4d23af00247e926180882fcddf","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.f1f8e60.0.tgz","fileCount":34,"integrity":"sha512-OSzjmp/toYPJipHc3k0ZvS/3kts1v8x+x1B8X7346dhTETGgpwObSo+Ho2RJ3r8OFdxVZNUC9GW7z+F7iuuPHg==","signatures":[{"sig":"MEYCIQDbl/JFbcUNvJ1cxj37JXNNnyXnotuNgiXFWmp5SC2nIQIhAINFdDKgCKTQZO7yayH76LKjkDeOop2eqMZdKIJjHIkH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjmqCRA9TVsSAnZWagAA+iEP/1Go9gx7gDJt/hc6TJ80\nCvNKRUmfoDD9hY4bhk/jNdLNJyi7WhGcg4IkVIz5okZCRIYGsc3B4fMQFTE2\nH8h+KlR67+rk6RaHGFZTf8kxjNVItB7be25oxv9xoWJ40N4H9tQC18FCAks7\niBgJ8c7M2R0SxDfHjnG+Nvtu2HZqUR1iGphse1R4JOQoz1JSF5rLlCr8cEi/\nWp7TK24lClivikbmWvf5H+IlfqFgihShd7S+mJqT+DvF+ysZvu7B0CPk35P1\noo+z8CGYN7mfmxPVjdHaS3gBpORtI01PkyUsUKljv7sbs7pGxWIa4EEmGENw\nNm/ZGpMvK+lSco3aNl41kUSsmKEfjgSPl84RFU56EqI477RsXE06/PdRVC9h\nW9iECKeJXReDtOLRKUBNBpGgy8xyrevJAQB2BIcInXaOzW+yoiPoY1Z4eq1f\ntwEzTBbPKTbKSGsTpxF609cAe125aByzj0z/MdXgXOfvAR7m/hGdrG8j3tiI\nNlMQGxc/OFcC+G+BkhFjQvJvXqEfLvLoDh4i933t0YWtU73ixcoJxAg+OzsV\nMSD9dZfPRGSRfzYJH8+TQ7u3gir09kEmeXhtNmm6Ar9j5Ih0F0UUha+SypUl\nyCtb+cI59Ta5/FvUKNPSOtvCXsjJPVFfXzvHwUMDg4ummqsSblnXI0Tpw7s8\naafc\r\n=zOSL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.f1f8e60.0","@material/base":"6.0.0-canary.f1f8e60.0","@material/shape":"6.0.0-canary.f1f8e60.0","@material/theme":"6.0.0-canary.f1f8e60.0","@material/floating-label":"6.0.0-canary.f1f8e60.0","@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.f1f8e60.0_1585854889645_0.4807521420667391","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/notched-outline","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.1e17c49b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"711c0f20228b551ae00b767743e8664155c389d7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.1e17c49b3.0.tgz","fileCount":34,"integrity":"sha512-L56xgY2uVNlx/ar+MFxuU51hKH2eeWFKZl5bH87O0IjBANjouhU0p5inTHORHbNm9moJKs1BRe9hIHQvUGv7LA==","signatures":[{"sig":"MEYCIQCQldFvlF91CSyrfvdmgVMCASYscH44boWCwlagzGQc7QIhALz25OnMU5UWucoUMhCowcbDpPTlxzrLGeAeLbNIZOb/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3rFCRA9TVsSAnZWagAA7Q8P/jtEhx4XVO+xMmfKOt3N\nrGCj23jv80faWHk0Gn+r3qHiKsFpb4Oz0FsOXL7KKUOFHSjN2fA2KenQbrjZ\n6AAIi/pEe2WlynKy5QBRPPKlCfi5OrngecZlTVrGn4FcxA4kKS/g5S3u+DkC\nNEYk/XVThh4jTe7PaOq1rYlgs0CDZsRLSrKxHEKDHdb9laJ4V0KE9lWss+hy\n9a28JSMNzTqAqQKssVY6JJqg0a4foVQr79TAROjGX11ledgdIVNCl7lI9IU6\n2+RlzJZf20/Sk1Nvqn885qhX3EgJoesAJl5ts1i+EMBw8FA7ZqSknu/V9uME\nOv6KGNoVbPwoYQkIoZrSLqePL1XskAv8RxxLCcY59yl3Jzvb5HurCK15lYpL\npjqJBxOC9D94FfNfq4wu9vOQKyf50uEl53DYh6I56TuW9qfc9B8of6Jv0o2X\n3mje+SHiOa4Byznc7WZgqIcxCz2mSyPx0yJhPX6Nq6Q2WkJ/fNxBQskOn+RG\ngDgmIXCTD3ZFx2OvxIF1Gin/I5Yr6cn5grD+mAiw6WhwRfwtivoNWEOtgxoa\njeLh4a4xpXYhV4f56ahePQjJfKTyFyyl5/WsXAlV97KAcotapyk92uRxquKX\n2y3hDTwuPOkrn9IIktALj1bbXjpfud31GD4yemdR8opdoQyG5jxW2GMKxdss\nJvLp\r\n=nCye\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.1e17c49b3.0","@material/base":"6.0.0-canary.1e17c49b3.0","@material/shape":"6.0.0-canary.1e17c49b3.0","@material/theme":"6.0.0-canary.1e17c49b3.0","@material/floating-label":"6.0.0-canary.1e17c49b3.0","@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.1e17c49b3.0_1585937092831_0.8834547533060999","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/notched-outline","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.6a40ef217.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c5b273502004a692f9fdbfa210dba90cdc7aa1b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.6a40ef217.0.tgz","fileCount":34,"integrity":"sha512-CP7m6G3d6wCyMVkIk+E7FhazMGHIGzb2PiGrBAsmH7wi7zviPT0/k0MWoESVBWM3brrFay4TwbBHrc7kp4uQlA==","signatures":[{"sig":"MEUCIQD6sth59TkNZ8EaI7yKPKWzox0T1E6hCSKvr2PvrIgcTQIgbF1d8eXosOYkQAdu4qejcMLrzrP/Wvd8pVxzOvBGL3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh42sCRA9TVsSAnZWagAAmsIP/25uI0/UynkeyMv0dvwt\n5nqN5cw+td4Buf9yYGBq8BJIF2aLXeJUVIjeymuGoUKQe6iJ6B4ghzRON6+t\nGA2NLFAAyvPnY0EblcLwisHon5RuTsJU2oow5fexeK+7DiiduzY4m1rftDgq\n5vOIGDb0/1hiYrMlAZ6+uPBQ3y51u8mxmD1/J8nIyF1V836E99L+TwDOxMng\n69KVLxY6mu+0iu+BXe63YXEsoA85xmJplRxGf00pa03tJLGj/Lf8vRfsI9QN\nl12r7nbF9T5ru/+wuH32bEDyGh6aoI5ESqWeCw9mWpNScS/qKwjrq9T0zRai\nbzqgOfENBIN9ezp7gJZ2pmAMTHN4srrGyYDfCKo0/wru8bdSyuYEIzg5Y0sV\n9/qTgVtAa3ZnWzR2c1wk03jjN8c8CnaoaBfqakoJxoqgZkLZKjlOKO0o9dL4\nMjBNCCG5y0NeqMk13eR359QEh7IJ7YiUqyoAdzY1mA+WM/iVlKPvh8WpE3sW\nEYQjB6v/zmY5mhIlTXfTSNB90FMOosVSD1ta1Lo2OsXGg6mFs8ZgQr+T6kzY\nHko8hfwb40OUAVHzWzHvxOiDQWP15FTUbge4GHWSEtYiWOu5M96j2eUPToTW\nKX/pVttpEsV5B5oMqfunqIGxLW/tRsyoFLYgq/Rq7eDaGqT0w5t7+L4y02xq\nPE7y\r\n=s6PM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6a40ef217.0","@material/base":"6.0.0-canary.6a40ef217.0","@material/shape":"6.0.0-canary.6a40ef217.0","@material/theme":"6.0.0-canary.6a40ef217.0","@material/floating-label":"6.0.0-canary.6a40ef217.0","@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.6a40ef217.0_1585941931929_0.6713410844119159","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/notched-outline","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.5f24faacb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91c699df001b194a5fd027cc234cbc1e43d8a32c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.5f24faacb.0.tgz","fileCount":34,"integrity":"sha512-SftRbWUu3W6PJmnQfcZIGzZGm3RnIE0PeztA2Rau0F81LBqBIsK5/1oXFtrR/xeUYa9iNsaTeholOJNz6mAo7Q==","signatures":[{"sig":"MEUCIQCx7w8eB+R9pudG0KI4C595Yf1fyIAO3N0xnohHz+gEmQIgdahphhuwOXQ7bxX4FAlhbxJBE9G9+gFtyUquAPtdCdo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje/ACRA9TVsSAnZWagAAoHQP/3GFiwp43F8LtaGb9UYz\nO0vljkJ7IWBe/h5hfOd9jSXk4oWbI3WCyKmeKKosrUNNjxEEII9R+g6eBnN/\nYD/zp9aq/qEGnsUDGg4D2BcCWYxBMZqYY1VsPdxd4ZOmq/BuhHKiPH10Gr6U\nasZ4pubnTwidYX5GfW+vxRpOdTHTb8qWxvc/vIiCTtkq3w9X14z3XUMTZPjB\nxqlySxbjujgF+zS0ClKxsBUvaqc1+V0RAIrVgHFIUgnRv+LH0SazZfPkOSzv\nfU/PvlF40Ndns5qjQboGMA8DwvEQKsFaZ7ANIco/J0Yswh2164MBNRIVyo7m\n0zDxEa1YYgNJz/F3ja+qBzyKOTmLcaudEBQF9wiO6dUemUit/GNKSkGqDGk8\nsulu5GX3Sj6+CBQHp2jkAEnb6ffeb6x+VBLQLYEBT81wtm2WEeMz8Dw+u57t\nI3r194ZilmpD5mACyuQDTcevNHvtwtkhxwEwEKAtiYTOHzlhdPuo26fQ/qK6\nI8trp2uLJhea8e6KbAosxTz9g5K6EdGxm5asxaMCUUg+xxwj8KfcyVv3Z6Jd\n1rY0+CEO3OPouJ9JrReB4XaKfQJNTp7bwFdPklw1+qwXlmSAcoADOtRUAuHa\naIxMa74ooXlXP/8EPXtwTJxT74YpvNu8M+kH3+ho2W7D8Ej5OhQRmKKZlM9O\nHeec\r\n=Dvqe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.5f24faacb.0","@material/base":"6.0.0-canary.5f24faacb.0","@material/shape":"6.0.0-canary.5f24faacb.0","@material/theme":"6.0.0-canary.5f24faacb.0","@material/floating-label":"6.0.0-canary.5f24faacb.0","@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.5f24faacb.0_1586360255655_0.19954373826428973","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/notched-outline","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.82fa986b9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c580132b11a300187ebdf28aca238fb350dd7bd8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.82fa986b9.0.tgz","fileCount":34,"integrity":"sha512-hwP81Ioa2XVRzl8guj5ePdTax6Ya39E8MrZRBgvTkxTSkeVySZUlNFonxQobdLDHr+QIkqsNL3fdegQiSKBWXA==","signatures":[{"sig":"MEYCIQC0hq0WKNIWrLEsnIo2tos/SJ4AS/FjjmW0p29c2zmWpAIhAJQqvuCb619ELem2NTXovMTK+kC9yWMdjJ71lllU180O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfDsCRA9TVsSAnZWagAAWp4QAJnLaUVftmCBU3zL+/jf\n9rtJIbLqn8+tvVkcZmCpf28VUy3tGzMu5Q0Luq01ppPm8iyLhHRUqUsSoBmt\n2Atb9PEXtqC/yiqAU8RLWCwVl3hP/7NuFwtXqQ57zaSdacZvLpPwm5mWvH6m\nSlva851qfiwNanVFoKj761TgUuL7Vc2kgNxH/04x5W56xHEv/TKPiZuvxA3K\nPKzN70tuapZ4CQyP03msPSPfgDGcp8AEyXmzlBYxzQhLlV2RK4KAuuqHTxgd\neNdTx3qd/6PO2PI57ggIU9cb99ccbKAQdwSmMGqYn0QGZl3QSGt+089180GL\n6aCmJKW/NRpnGzb/spizLUMT3zWAnxOxu47tpN9Anu+YIbqFKu5b8OrQTSq1\nfpzTeAeWLx95hrzKEZW/jykG5XklspBXENmYvKvx8ssVfTpaJZA2Sg1uFebI\nCMMlWqI6wq6JLccNSs/cvott/oj9plfe0G0IMwRItTAefqIGcxOiMfD0MBiw\nLc2+/HPjZMcu3/fqZzRE8KuHe0ZhWyLm/pl/4ryntl0Ip0LXxU3c9Rw+Z43F\nggr8bTK7XsJ2VWfOlU/SleFfT9GURY3oB5tbgbM9DdZuZgIaKOu8onSwtvL5\nE96AHLLoVmhJHQFQml4XN19gcvn+9EInFggPe1UxEV/IbcB2qmU6ff5luCPV\neaNT\r\n=ReBQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.82fa986b9.0","@material/base":"6.0.0-canary.82fa986b9.0","@material/shape":"6.0.0-canary.82fa986b9.0","@material/theme":"6.0.0-canary.82fa986b9.0","@material/floating-label":"6.0.0-canary.82fa986b9.0","@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.82fa986b9.0_1586360556537_0.22676497568285559","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/notched-outline","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.9930d9cc5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"895a5eaaf255329a0d340a1291a01c86e97362d8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.9930d9cc5.0.tgz","fileCount":34,"integrity":"sha512-dn6OrD7Euq8QLrY0bha3VBl+ztsbzZwU2hfe5+1oq+w8b2yb3KeScFQrtCOKcssPaWky9Eg3SkFBBZtHp3YZ4Q==","signatures":[{"sig":"MEUCIQC4Fg7mbfcYNARxF4LbioKUG5RQRiMVeszZ5XuvupSCWgIgMtMC/zKdLP3HYgG0YWL7+PSevIzysmwPV+vDpwIcwpo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejib9CRA9TVsSAnZWagAAs6MQAJPU37idYEctNkfEZwpa\nocp0MqFl3EzIVT5ird39IQsLuQk+aDPxc0BcS8IJqbfcmUxlBLQhfkxMr4XV\nEXhwwTst7sr4ZNDaqPjY1epWj9hc7wNoPn6ga52PhlW3nNFTZQdbRvfX/BYB\nGZ3cJafg40SIcFuuaFe3syNN+3X8IVhUu2uNQZdI+GTF38Zddgl54m8Nms0P\nHeeQ/zt5F1WXiJkundLuhcNgFDoazpFwGjO2kkdUS3jGN86dQWNRQoo0eURa\nrQosZUCIzXNgZGJSYnQK6jzDY0fmQuWI7g+onTykxpae01Az/vcr1Jyy7ouF\nwPTrrvaVVXaKUNE428f7SatVDAZAiR1y1AzCvg0mOlRtrwqHnO4ivvtAuDY/\nKed5JToHyD908cXdKVjmVdhm5i489qpx5r0igoP2Glu2dNFzJOrg6o0oLiNX\nneT/Ekkfv4/5/gTTejzm+TP6Bu0D/istYUbh/d4bLnF0JtQVoDWj4BNUGgDW\njgw69+PF2F+1WCUKxsg0v0aPC2F2UOq/PrM/6yS9l2hFBCqA6BGuahf1WIum\nDSx/EyBuFdMY6S79I780lue0G4551jvHBVP72T4Ejf3srLxsKAk97M6+C99K\nSVnAkZdYGecLmZKe9DbO/x964KUvYlu3hFSb2VsuCzhjkg4qtHVvRrUwKAjz\ntoCz\r\n=vdWn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.9930d9cc5.0","@material/base":"6.0.0-canary.9930d9cc5.0","@material/shape":"6.0.0-canary.9930d9cc5.0","@material/theme":"6.0.0-canary.9930d9cc5.0","@material/floating-label":"6.0.0-canary.9930d9cc5.0","@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.9930d9cc5.0_1586374397066_0.4399946423027823","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/notched-outline","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.6601d24af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4dffd1fd56faf851c478d0ede61f6113b9124e6e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.6601d24af.0.tgz","fileCount":34,"integrity":"sha512-dcikQneF3EUQ7gHMh0QtQWPehYfdgCeoRcFuz6VVNSRl18emRxcuiWSHodWdWZnkgy8/aMjGA9zngDuPUwczHw==","signatures":[{"sig":"MEUCIEUrjCh1bybWOnLqP4CpYIWO/mRvDzAnIZx5LcQ2uXV3AiEA05Op7F1P3c+Db1aLffkOlTAITlaCVco7mAzG4FytI4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmyyCRA9TVsSAnZWagAA8mMQAJV81QvmeRXJ+uNT1GO/\nuq/B2D6I6mxnECNloGHT0dgJEe7ffJRwtwKyMracxQGb6P3r7f81cPYiiocO\nHqHjoSE+GNXFSQWpW7Et/1DqGXTMoFkqCG8hBeWuJMpThj4JzAt+WBrhpfuf\nHLJ0envQy3E2u59Q9kI6Ovwo/g4/mqs3T4liY/IQ7jF5Az0AH+HOKIdm/gJy\n7FZABRBZqJdpoY6MhZsYIDRchQ7V6tjIwlntdHsMknex5UmqHqS/D/2KrZXv\nriEkripwTlE7sd9DmcEV02At+/OdX72GR5uMTwx6QgrBFUdh0IDIFb/BybKQ\nTQreMK93698i9xzXflq5E2m7vWNHWOAkCUx/YyLZ0hPiTiXrV/JmkGQJppSR\nwR/QPvNvsTQPFF7zBsWKVy3qaL3MoVU41H+3vRmD770YRLD+rheYXBUGpZui\nnN//v6B5IYGq4kwGCChXjhmfDq0kPPQyM106crBPJd0yxgA2I17xG1FZIiau\n7SEWxQrH5WppCj5ayI6jVmQVtr0rDGzTomusxzNZhZ1aEZfnQSPQ/WG6aTt5\n0zIWKV2zVM/mBWoyZjBAeVjjN24CHF+q78KYGIXfGucjiB2bl5I7Cxvw2V82\nI9aCKbQpMhWbUoS9RvP8WQwzogkJPsMlFDmv7dyNd135NU61odPpX6zSHhAE\nEVN2\r\n=+kIs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6601d24af.0","@material/base":"6.0.0-canary.6601d24af.0","@material/shape":"6.0.0-canary.6601d24af.0","@material/theme":"6.0.0-canary.6601d24af.0","@material/floating-label":"6.0.0-canary.6601d24af.0","@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.6601d24af.0_1586392242395_0.21600934254188875","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/notched-outline","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.05f5e1583.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a65beb50fef4194e5837021f92d27064f3e94884","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.05f5e1583.0.tgz","fileCount":34,"integrity":"sha512-dd55kqK5N2MkM6lsZj5yOfn6fyRsQgSpi4TmbyTztPfvcxftZ9SyopcsJYbNUVhK2ioX8zEQ8viYka/ApEDzRg==","signatures":[{"sig":"MEUCIQCaeJ9yjJN7o3NYgKOn+8kTv04v9fjnXwAkntuPvXC4ZwIgLKBBR7nLHmQEo0QWKFAdsZOGZ4QDfFMz60PbgjdkWVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnDGCRA9TVsSAnZWagAAwxcP+gOZFUoy/urIlVOTYHMc\np9X/+KgtQMuqwY0b5zFfHk4v3RlWUlNFEZWjzMOEcuw7r1VGkMIlOnePdD2j\ndCboi35uLSS/N3Jmf1+w/ppQFlG0J8Ef54MdgXZHgiJojUKrX+2J5vpLJrCJ\nhPlTWCntahm99SIGDbM/Z5h2HyH7549aTyQvjcTMTYa6/9QmFkSj4soEcde6\nW3c835zU/LmQNOvmiFYdcVg9yxaVILJ/kWBrDygAwup1/XYfuF5pnOVjvMMu\nhvJM6muLQxBkv++GZZfIqccwKMWQg6u9mmZshhkpSj3UUTxZqLdxqadajAiy\nhYOVkjzFs71KQIc5MTJfc6og+FmiFjNEbGWg6HsjrKkcVyjsGejYpcZJi6H6\nMqkJ+9B0x61t2aJH94pFbx/wsG2d03gdZdjQo1fF4Z/lgypnJl718hqAYy81\n7zbyV4TO8Z7GZbsIH7NaF1m8Tj0QrYiA6TAZTPppkRmIaE5c1KyFUZos2vpn\nO1LR36ELt/CHPwu10C4bQ9G06kNgT8e2LzLbsC8L3Qes4H6K7Oyg8FgLFs8R\ngRes44101G7RwYh9nlAyb2EvR7khyBQp9fCudWXWg9ky8iSbR8oF/hw4fkPU\nTzzMvYcHXFvwEFUZ+XGTsORmSy++HyidBoJSWz8N0np1oB2vb1qkethPOoSa\nuyVn\r\n=C3nH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.05f5e1583.0","@material/base":"6.0.0-canary.05f5e1583.0","@material/shape":"6.0.0-canary.05f5e1583.0","@material/theme":"6.0.0-canary.05f5e1583.0","@material/floating-label":"6.0.0-canary.05f5e1583.0","@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.05f5e1583.0_1586393286000_0.28005575398730587","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/notched-outline","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.bce00e186.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ff5f52f76b6f409de2b075bdcdc9d97278f5b20","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.bce00e186.0.tgz","fileCount":34,"integrity":"sha512-zTQd83r1jcCT2J1Dp9nI7SZ1eX7s86DUdvDRxTbBrk95SIKz0Z6tx2k0YbXNNeUZznB/K81UDNYcUupgd6yz8Q==","signatures":[{"sig":"MEUCIQCHzmDbBwqn7DziVkdg1RsgZ//y9D3OKvjcSoJk5LXxsAIgGi/j69+U6HcbR2ay4kcvsvvzk8v5T/qAH7zqUxBHAzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz4NCRA9TVsSAnZWagAAdb0QAJikNREfYqultbgXTHq4\nTzYBzA06AymEsXL76IOOc2o/N/JL4a2WxYCw704bRrn8DURE3mUe2ThVGsMR\nyp4MT95xVAXZXLrAXe4NouPBZzPkCcub4DzFke+UAGKzRoPcTA60c5Bs5IIB\nuTfaXZtLf0mDsB7r9tRkwpK2EJXM0NlnJ9h6ZiFUZbo4Nlv08K/1d79FWLzz\nmS+H9Z98THqMUeSPoSKgV8NUk3WJTwWiOqRxNdUdyaFGp3M1U7d6SHtZF4fN\n+XwM6J+Blx/uK4+1HPlvArmfGZxnaBssY3i1NGqiDrviK6JgEDQ197xxQKLf\nVAUukrImI96+3mW0YUP/AQXiyp/UyUf0jcOtPPMUEdPiR8cekdIJvS87/Zkx\nh03LANucoJWm1CPqsoS6AgZDXySEEEEAVz+tyL3ZucGh9sgQFAqvxr3tf7Kd\nJsM6hp0/kQSYAuqIrxScvL0PQvNdzwn2HuxeJnVJRDR3yU9bZA5X4Yzuoz7B\nudjzObe1Ae6h8NZO0+gFEpY3KOAW/TYkWTZcaLrQeyrAj5Z7iLSb3xknTcgK\nMCtwUqpxoZ8tVOdFLkiHBwexpk+j18PewNPg3RsaSQvbIsf4HPa4OVsq3laT\nWWuRlrAL5tbBoxc0xIc2ILbi25tdPBFDkvq56334JGC7MjzcEa6F3uBLEzBC\ne6Ff\r\n=zPqZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.bce00e186.0","@material/base":"6.0.0-canary.bce00e186.0","@material/shape":"6.0.0-canary.bce00e186.0","@material/theme":"6.0.0-canary.bce00e186.0","@material/floating-label":"6.0.0-canary.bce00e186.0","@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.bce00e186.0_1586445837144_0.024294990435932196","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/notched-outline","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.927fa902c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b1a75d21a2b434947ebc7aea6419b132e279239","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.927fa902c.0.tgz","fileCount":34,"integrity":"sha512-5Bf1j4B7yl/CopwLGKkuBBUWkEw0yrgJjDPT2jByuR8DOZKJQVajS7amYcbTlvOqHHjulqpF0tv3BL27+RCCsA==","signatures":[{"sig":"MEUCIDBEt1u5GdOSsboacQaxw4YDOcVGBLmNoFRfAoDEDZ6CAiEAggckSvNH5BXSQV96bEUpJuyCREOLMA4hNMJ3FySkuT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej225CRA9TVsSAnZWagAAMaAP/2jWeLvgyJZIwkY5Wp6o\nn5uMxSvKcAhyXvT6zZIKFdPtT37LiUKDSl57G2pFA7Ec+I2WfPZxNH0EPMFh\ngXA16Rk6nF+etpv6OZlztsJ9UPvTQx06kgeoYtFgzVcsEE6ZoHUASGkCUiac\nQp/4XTl0jFdqBk1h9UC/jwJ4W7VO4ViBdW34NHn21hdLjXaS+Iny0pROUFJt\nSAwpvDp6IEeYmxnXsAwKRLzuBpB2ZD8phsA7nFJ37qH+cPTElWbFLjkKpXRY\nGcwfFdNvb1KBL6uDl+oQXZTtWIi5qZlAoOdhf8Mhzy0HWdwEAsQYG8tAdIXE\nZGGkhcsmX8e3lLvcPOguDRwsQO1FjK3UC7LduG6gWulSP9Pdzes+0+phlfOt\nr3MtadL7+mFVdsBJi05IEE1bHL3Xj51hhETkx/FzkGm8qMA0JXp6kP37WLiY\nmpWd3tdVmKgh/XhCaPdLzyX9LKqbxQLpCQCUHNfHvk6+KNEHKBttyfxg4hmC\nXoU4zaIETHtCjBJ/EJaMgvU1de7r4Lsp2zVuugHnX1P+KTHr1hzYY72LaoDc\nlt8tU4iEpNZedtnoNKJqd2y6wJvpRyUbxKLFelGLZg3UPuuz1zc+2VSIfQYV\njJKNjG9toyfG1VX+viXY4JwCLtQ3BGE8lv6s/GYWqc9xD7DzzpQV5SE+NQHf\nV3YU\r\n=L/AS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.927fa902c.0","@material/base":"6.0.0-canary.927fa902c.0","@material/shape":"6.0.0-canary.927fa902c.0","@material/theme":"6.0.0-canary.927fa902c.0","@material/floating-label":"6.0.0-canary.927fa902c.0","@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.927fa902c.0_1586458040862_0.9566353180848641","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/notched-outline","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.eb28b6ecc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a99dd56103effb6638f7dda0ce679d03825c79f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":34,"integrity":"sha512-uzT0OxEOpkMoY9ZIn2XnU9PqQJCyT9Y1GHR+8/kkOkHYo3wd2HufXt60ZoeZxFGQlOkscxYgKWGOZyds8n4+RQ==","signatures":[{"sig":"MEUCIHIPu8xDMkD6NkhwIDQ12EV8aeHY65ypM40sU/9C6V2NAiEAw70spwnWceX4PHV1mLFW7lS6N9dHun4luHlM+UiiKHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMmxCRA9TVsSAnZWagAA47gP/imoj0DWN8kCcA2yxAGF\nyFiZh0BlVAmmQWmtRNQd88BB2Wde7a8j1phq1+/ok0SV40MJCpzPOY8fE5Rh\n8NKRWNDZNjWzmsOKIhc2Ks4BCwLngkiS+amN9+vKeycr+/T+7z54Qhqsdiik\nzMBehI19iNPxnKBy3ZINq98wDT9lg4kXF0VjQxDhtaTEHqLggNPmX5ueKDhw\n8z3ePl4fF3et9v9+Q1dtlk6q49OwlCYjCKm7FyU7w1b2bNSLzEbuKLNOjV+/\nqpsmdG3dd3/o4Uom/wnXbTluKwcGsWlSCDe/3olbuJHTgD6XyWG0czrP70z/\n4vwJ8Xr/rEWCmmVz1xa5sPaJ98sbKKIwkKruewlaWOxXEQTYEEN0hmnD9BlU\nFkPLn57mP2qcqzQjjIzvA2501x0Zg8sAd9BiiYZBBwZyxhTzB7KXnYnmsJht\nIzUWREVMSP6Xz3C8zYfC7u+ijPMKUWY69JK4KCDxYiTvNbUN9V1YOgq8/6fE\nxz3CTq+z7Cb2STiE2W/2nFqn/7TF8nlrETSYrSnCdHfiuuumDxYYln99Nhxv\n+PMSm0JoFceXdrv31r3+Jeio50qcIY9kT8BrurLlAig5yK96T5e4MdvG0f61\nbN+WLtikiylgCvBneRSxuAn3/7B+cN4IkJ6EJFcs1o/J0XAF1mg6VPUaAGdd\nwdNi\r\n=P4It\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.eb28b6ecc.0","@material/base":"6.0.0-canary.eb28b6ecc.0","@material/shape":"6.0.0-canary.eb28b6ecc.0","@material/theme":"6.0.0-canary.eb28b6ecc.0","@material/floating-label":"6.0.0-canary.eb28b6ecc.0","@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.eb28b6ecc.0_1586547120762_0.9446426269251893","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/notched-outline","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.816a43b42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f507f66bfba60488858499789084ec652412f603","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.816a43b42.0.tgz","fileCount":34,"integrity":"sha512-segV5tPMPZYWyiUhi8CVGF6JPj1ryKHFxm9U+klLrG63UAkoP1shhiE9iUwVcXanWQhxiuTSqETAEpK4MSz6dA==","signatures":[{"sig":"MEYCIQDmlRZnSA6mRo+T/zDhRYwEnr6q3mG2kI8cSgUzz+AwygIhAIdlpSe5jA0PFZN7fRPAnCoWNdJcfcS1Xczx13IcKRBV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNzMCRA9TVsSAnZWagAAVI8P/1Q+rVuhz0PL43RKRhKr\n8UEfqd7Ef6y1YS690iyWAORBirOxTT2cPlgJHmuwxua714DjZrTMFxuu85hM\nfG9tiUY9ivIK+A1iTEMnuj2OxPS7cXjzB6tnHpFrCDBRzByIrwraVua/g/PF\nxbMiJbFZPeF+TGHLB7JmVJ9+w+D+oadvzPe6PGIWCIYFmEwBip4F6SiSgRHF\nboZ9W7qtZW2u9K0jLiMfD1DOLi4siLGPVAAAmFDJxaWiOmbwsmtQbNrYrrpv\nBy5KKpH0cGQ6q/EAqtX2A8yA8XlkPYZTrexH7eXwXXcAXKwtxK1q54lga6Xz\n5r8KrV80kr/2RhrWAtqUg4WmLNJVpy4CbUnD11jAfagCcQ4CyoiQ+a2Nzro2\n980C5en6Kdd1iLR+m0lV39QdlxfUoqrt5jlyVFTMEzFCbA4j74/DRfPL7CYA\nVLudB4PHSFnIv9LO17PCOGvGsMdbtaxG5gcgwv/w3GwcXi5ugfD0hUP3jvmY\nMNKgdDOD+MdeWh/SKeSjgleaF86vnMIxjZSBt0wsImrIPOcvQx3arhVqXBGB\nXQJ4XWYFqEKxTmpklrLgl3OUMbhAGvym84VAge5g7EZMrAj+PHeko8Cib42N\nOvW86CzWXTXfKQF0Vxe8MBAs0+l5HUNFltNIE9aZCnGbqshSQppvN5/vnhy+\nOSw0\r\n=R+tz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.816a43b42.0","@material/base":"6.0.0-canary.816a43b42.0","@material/shape":"6.0.0-canary.816a43b42.0","@material/theme":"6.0.0-canary.816a43b42.0","@material/floating-label":"6.0.0-canary.816a43b42.0","@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.816a43b42.0_1586552012287_0.046325697285748646","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/notched-outline","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.008c4d319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dbea2753dda77407e57b38aa24e359d9162f6cd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.008c4d319.0.tgz","fileCount":34,"integrity":"sha512-W3UyLtP1c2o2bUx6iX/y0SfCSBFXKeHF3aIZx1MOpjDPRXVFF6QeMPTK2tNJLH3rP51fkXBRpPYF7jtTnI18Jg==","signatures":[{"sig":"MEYCIQDAlz3GrRBduz/0KnBL9XQMcqIa4ZBKhOAN0/Fx5pDepAIhAL40tQaZDEEDpXrstOqXvVj5db+oFyZvXU//tNFPsUaC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJSxCRA9TVsSAnZWagAAD1kP/REEFKPh5yIhkOzLYzjO\n3HhCxeN0moo8JBdM2UtmI3QUOvpnpkx1lrkapX72T5gsfZZ/46u5XwYYGyEc\nlfClwhu59uZtVOTkEHqhxxh8VQdzOFvUfUKUA1xyRHT4Wkk9r39Kn7ZIYG+0\nJiWCIMXxxf0jx1mGIV/BqMwt4LrKlBCvU7mtbcX/OkN1YGOU5b+mFAh3N46x\nCyOIARZWSvfFgTuGucII9/Bs/fd1lEdalwgjSNIuDzfmfVvRDMeBOuZb4zfP\nZHPgFiR06UyAXg9sIMi+CaVjjiiS+k6DsQ+nhIL+QvJuDCHXP9aLT66xlavr\n6aibpcsSLAlMXS2tns5E9U0llka2h9CNoZG7tcyHW+y45+W4Ja9BH/23Vnx6\nQytbF0mRhUdr0Tq+xejhv7RCMrUEZ3Y+5zuQqZ5Gf03LrtuvrBRaR3bb0sn3\nwKetSpXCCzE8QVRc1fa9F78vHOLpPJjFkhFpDydwL2xEiUYzzxoBLp6/+QjB\nUe1OrrBOOuCatZDoHwR97/Ip59XSG44cIHzbiUpbNE7AFTe2LcQQ0Te2wUjx\nBbcP82/jToTEDXQ+VoQPm8wz/5wXBEkqSKqfVIdKL1hEtDheS8JzhzPFr0M6\nNM5dZDyX2TEnK8cY/FWwxTiZJlM1AAzlTgvpQuS6u1k8KqFpblxZhUh/cHFW\n1YYh\r\n=v2i9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.008c4d319.0","@material/base":"6.0.0-canary.008c4d319.0","@material/shape":"6.0.0-canary.008c4d319.0","@material/theme":"6.0.0-canary.008c4d319.0","@material/floating-label":"6.0.0-canary.008c4d319.0","@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.008c4d319.0_1586795697182_0.5090182918166852","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/notched-outline","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.cbb3f28ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68e23230ba009a7f8b8044a5fa4e481585c14d2b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":34,"integrity":"sha512-9f/6B1FxDqKpSAuAPwigcggVpRb/5JnztPzjvK5Oo3HWIkT38ac7kO4DYy+qUjZMw7s9qO+O7S1t/D2wC0yHRw==","signatures":[{"sig":"MEQCIFwnxGOouRCSfDwUP1Ydjd6z8o9QCTMLY4dwtCJi9t83AiBM9rfbfMzdgVYOZ1sTQodtpHH3q1Ztd2B9crJYbPXASA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUTpCRA9TVsSAnZWagAAt6gP/Ruo0zEHLW6Xw6wCtNG1\nJQZcOuTK5cMXLsXF7b8kLy8NM8SttHlyqUlsMaJ2sufEqUDXGZgHgOkXAlNH\n6RiDdO9GFLKqpIpRczgf2H4i4jnCCBXS0YVKwjxR1WyL5qu1bAzSYMs8joMM\nT0YjeFsHD4lH6+v+hil7HBbj51OyjaXULKdjTFpRxrmWB/Vjy4l30/3+t5jY\na2Id93hKupkS2kaiWiEHL/+bzZM7PxLbs+AyuoYeDlvmpX5FdRnRMOZ2lxLv\nj1e1Y7zntHrfdlQuCknJB65xFTCJBsmu2B7oFbdO3cTo8H8/PCGMt/y6uWPJ\nogU+LTtysm6FtR4tWWk1F0Gi1UOPiImoCmoSONyvtJcr39NWXLx2006o0grt\nrNM9GO2abVQDKdBaSdT7qfqkoKZFB5sYIAKz4q/wdjQwKVeIh/wJZAciistc\ngdcflIxAdHX3HzCO9etD/RHPPsMyiFgUR3Wvjwo8GmZH8mLbe9n0hAHHtZZx\npcwBAXlgwQrmYincX937xgBrJly3zXqs9V5uDAXEoQD6LaNlUN8JqNwEkcOO\nWeH/LGmt9LgGj/FdImkirz2MVyUTIMiVGzmG/IEX3+VXZpZjpvL3HQGdQ5Q6\nqU/F0ERUJYIK4Ispl2lTrJGDQOol1bZuSlSFcLkqX6d+JeaB/oFVx/pzUhRq\nkl4l\r\n=Hof7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.cbb3f28ca.0","@material/base":"6.0.0-canary.cbb3f28ca.0","@material/shape":"6.0.0-canary.cbb3f28ca.0","@material/theme":"6.0.0-canary.cbb3f28ca.0","@material/floating-label":"6.0.0-canary.cbb3f28ca.0","@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.cbb3f28ca.0_1586840809205_0.2576059984801722","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/notched-outline","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.f172b0f90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b3914abdcf4dbcc773a9ec57a3a2ab8e6609518","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.f172b0f90.0.tgz","fileCount":34,"integrity":"sha512-TWT6iRvfct9kpXkbmChJEtcv+gpKjP7RU9nPpZ39uRn+zvm9kJk2IeOHvC+12dW+uJNtj7p/2WCTao5QL18+fw==","signatures":[{"sig":"MEQCICci2iAZwo3OXFNXrMAozFwD0r7NkpwWJBgyx2ecH+NVAiAKxbwT7KFerYeEemuAgWkZaZfngJkMudKR0KLI37/GWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkMOCRA9TVsSAnZWagAAIcUP/1gPXTMQMdrrpXiYCFuc\nbWmi2EieG9Hr+0jNWYPOyHdGIgXE4Q/T/QPXHub6mkTVEA8YC8u5OtARrAA+\nCf7B3VvzAj8t8Pdq76xqmWwP7EfmuJeFmceeKk4iABMto1HQQL04eVDsKuNf\n1Fa+vkZKcpsbeBr4+mTrYbcgUsVZEi7ooo/VJZIg3n9iUn1n5mx2ffNt1pBH\noIlQ6mp/H9Ygk5Crm/4XdjUHBkQfATk7o1R8kUUDzGAjVmMy4vQcPFkXcJak\nk3ayHmAXFcXpd0Dnd52EZS45YRzTaxC84/yFTiuOMZG4tq8eEs58aUG0oZNn\nV4QvraVQmCOjmW7PAWeVN69UiPQ+ipXMhz83uqgGZMmZ8yt0VY5d5W+UQ+S1\n73jRds5q/0qksdGF8NKnLaRMlTvLNRCcLG9sYGL+M7dFcUex+Rohzz5NDEFo\nfbnafHc9MK8ZvGpYWG43lioIaVcS5wbkbHNmFlNL0bWKcsjdyQ3AEv3M4q58\nUnQoJDYbSJ2bMBLXyTV9BjpmbK18ncL+XOEZhqgjy4KPcI9CVFx2QaR3nls4\n/BeU2qi/HI4TBZf7fb/1vRUYLW+9dZipPdwkNkcQhR8K/6feWXDJr4PVJIPv\nfZ6SXRZcz4WW20NHhfpq/PTb6W7Uc8iOKJgUM/35aO0auZHo2X7iZ4ywmJoO\nPWGg\r\n=UBIv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.f172b0f90.0","@material/base":"6.0.0-canary.f172b0f90.0","@material/shape":"6.0.0-canary.f172b0f90.0","@material/theme":"6.0.0-canary.f172b0f90.0","@material/floating-label":"6.0.0-canary.f172b0f90.0","@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.f172b0f90.0_1586905870310_0.33180645757875826","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/notched-outline","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.c02642273.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bba10ece633fb1b92101bf3a7a233b8b7206753","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.c02642273.0.tgz","fileCount":34,"integrity":"sha512-xOoJV+Q7Tc3n6GVZJskuk5WYpfdKwhrw0kQDZiatJmsnqY1ERzFgJgT1BvvD84wfDy0Pb7cA45DM2jF1oB8oWg==","signatures":[{"sig":"MEYCIQDT/S/lDzRyBrR5O7VWrBmFYFTwLghF+FQ5CQI94PgbMgIhANL5m9/LTplIEq9TPwjK1IRVZAD7VHBxDXkz36ndMK53","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzPMCRA9TVsSAnZWagAAZWcP/2N6Cn/C4ylj66T+g+cR\neM1B/GJWymgdKOtlh/j5RL4k2NAa2SaefV521c3sbZOOggm5C+BTcdqVcdJb\nFGlVr+8hAhFY/Sa8VH9MDWU2l/ijb90IMSwUBdd9sq9TwFG3t0Iw15atuNKV\nqCouaWiAnnnjyYrCBWdfeviMy3bUrA6O69cg/X3Va8yed+Hz3uIYzMbhuMuP\nssLHERTO9QU6rytXYYkFfWRTOP4+UPihWgdcKmDevPtSqKQu/U6eww+kit7U\n1IOnuO/izMyY+pXQ9HdfNPPUPqyrfh0I1/D8P/py8P3o4knmKOsD+ui+6k41\ntgXr5yL3+FiN9u2a/3qL1qIY6hlGt8LXHSqrsLAnb2E3ac+ufqHRu4k9MQJN\nyfzVA4GXO1pE6KNrhC7CU5rYC/J5nDKn1QfvoC6z0p/CMBwjS0CIBZe+N2qz\nZImquwxY/Bf6pTg8UjtJE4hnhDA8DrQSDbfIbi644G77NdsAkfWwY5SvhitW\nBs74zP+rgxc1CeqzZrypQIZNfG0ZpSwGftMEirjN1dDKvgtCw4UF+wH0XNOt\n62Y8PeqL+BsnqTJ3M8k98ej8jlIKGmIfabWigrYsJDtfCYT7EZ6CxAoIdvF2\n91+ufIDlP12pcLV9HHjvpG5WxXC6vnFlfn25g36Rpzh1px3rCR5A0paCdQzD\nxNb4\r\n=yOqY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.c02642273.0","@material/base":"6.0.0-canary.c02642273.0","@material/shape":"6.0.0-canary.c02642273.0","@material/theme":"6.0.0-canary.c02642273.0","@material/floating-label":"6.0.0-canary.c02642273.0","@material/feature-targeting":"6.0.0-canary.c02642273.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.c02642273.0_1586967499936_0.07012598571103767","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/notched-outline","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.8a299b568.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b17ea4371ef1c6121b133dd6bff92a73cd701fb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.8a299b568.0.tgz","fileCount":34,"integrity":"sha512-wK7HJVR2DCNyrYfRrpm2aRaL22oNXAs1AvF6dd741NS6CbHBzIyRZfJuXSTzuCuyaopG/j7drxET1mDmL0pOng==","signatures":[{"sig":"MEUCIQDKqbp9fpGWPCftdWUT0P5+pOwGuLGdKWtMFVD+rVRELAIgJjD5mkeBp8WOMVn4fMYIBbdiDUFZ4FZqsdT/IbFSNLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel445CRA9TVsSAnZWagAAPMYP/0sDRR4XDWKEKbwBz3zC\n39O1ad1SRg77DLzrX1bBudZawf9D/K8inguuyuag4z1uvL1WqB8rZN9ofzmg\nXXkWWEWt13dHMM5RNBJ/SxJSf1OGDZYH7MCyBJCjPQpM7hjagnFmV1UMr93b\nHdY/cqGKWvPBZz9narwSG+Y/Rxnb26Tai5YB9UZbZAVvR9hruquwlVvKaXlo\ncfw7CS5BK3PLSww2/uJPDb7ycD2Sg/ygCQHRCcFI7uqEwCycrLbX3aL+oc5C\nIP1xVnPoltcszqfYI7So5c+pb75iN/0YPYqJc7/LccjrcKGQYHUYSalhiOxH\nDmQTVZ8KImIWmLFSmX/AEyO/ubXv/qOaOKYdifoyjFCEZB3nMdy+LvmOn6pH\nfWjBiGwE4fswzfaK1R3MQT2UfmGNwRuhqFLG8UQ6MxC+Ha72fUlXK5L/bheG\n/am/0PeUr0EVLakz10okwDO9raSvcA8h4JBsM82NdnZ5CJc0ITR1OykpAtb9\n2e+n8A0zaKXMUib531z/W7C0avlblXeYRTwPvASCVhCT0egbWj/3plsLfPj2\ncIS+oMM85F+rn6B1ONL0y2ntBYp62nV5Vwo53krvOsNUYSW3uub5wgbynE4X\nsRfv8+i1XK1xX8r08Q3ocyIx/93raHczN5L7HWPqOPGkuvLFgmjke8hC3+1j\nYTvA\r\n=90KN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.8a299b568.0","@material/base":"6.0.0-canary.8a299b568.0","@material/shape":"6.0.0-canary.8a299b568.0","@material/theme":"6.0.0-canary.8a299b568.0","@material/floating-label":"6.0.0-canary.8a299b568.0","@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.8a299b568.0_1586990648526_0.7691444032449779","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/notched-outline","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.490fbdc09.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58941448962f9cf9c29c93bde72f84d51b6b8847","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.490fbdc09.0.tgz","fileCount":34,"integrity":"sha512-+34xHEZBwvtm3s6Qy2sdaDPAbfPjEkS8kg8KRbHTeHsHjYRD0PFrW6/iBV/PmTQsO4N+PWPVJkHtqWF+uMyevA==","signatures":[{"sig":"MEYCIQCRXhHX7SJtDc4DF5KEfB2L3HBbfHh2seR87L15cnUqqgIhAIIkHNXK7JmqBRz0vpoo08uonwajmCxMXEuh8VtcFhfB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/SBCRA9TVsSAnZWagAAVaQQAKM0UMglUilsDQqZ2kP8\nNqyfMTIX72MhKKDIhApGhXHJFMTU4TPdtcGNq7+V+PtIxEC0TiZxlz7HVDZb\nkEIVT9k1SrzY+5atEs6AVsAQFkjPsSn+6EuMJ/oz194pCu2rmtmWLf3SE9gG\nFnc8uoGeEt345rwlCCutwuNMRvGgQjcuKbJMzMVKT7BPo91japyCiZA52/Ah\ntWi4+ZFOUE/thPBYh6ZAKbXm+CFdXGLT1LKjcyTroVdV57J7RPGfo/DCg9a1\nJfxg2DBUANGscx0rAiVYApkebTvm24+VlKCVza6IrhHPdMYwTP9q5m43RDkN\nYtnmFLe3zF30I1USAKjyZS3Uv4FEDrdwKsKswkbujHrhfAt+WRv3FvoKP0hS\nLv1VGgssLc5KIQvJsNWhyU+kxQixPfMyqisD4BW44rjo5gh67an2fOfkJrb5\nZq41cLx8qQsuhL6zELPI++CpK4799vRIuquT7xIMadZaDh6680TPOvB3rZy5\nQxDxYJ7mAEX6z3Wqtj82WdNcClICw1xQE+S468AmK5+lqD+gq/nIwEZ+7GZn\nxRwGlkqFL2qcPwEDyL1SzfOxDPdsxiM7UKeI7/Q+oQCUZvzuDnMp9lTD0GcI\nLAm+bH6YQNtYSqQXvaQibdBPcH9AQV6QNA8SiJsin3IZkQNJjPqO05n0lRSm\n9jaA\r\n=fJ1n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"20bba7dcc3290528bf225184ac976a3b486ccc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.490fbdc09.0","@material/base":"6.0.0-canary.490fbdc09.0","@material/shape":"6.0.0-canary.490fbdc09.0","@material/theme":"6.0.0-canary.490fbdc09.0","@material/floating-label":"6.0.0-canary.490fbdc09.0","@material/feature-targeting":"6.0.0-canary.490fbdc09.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.490fbdc09.0_1587016832533_0.6449483799121076","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/notched-outline","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.f838c6e55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebaf6fb9d345ce88a1c7a169a571f4e0863fa3c1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.f838c6e55.0.tgz","fileCount":34,"integrity":"sha512-5adogl5CQstfIhmgIvqxzO2xOaA1I9lqbCYZEQH9J2xqUmoT5T+kyJYTkWEIaspdIrtPkoNYiZbY8xbgKNA2tQ==","signatures":[{"sig":"MEYCIQCg31PI1lAUuqJyjagHXpI8FiLKWsUIXSgfuFdDgbp+2wIhALpOAStfwstKLLajEmUMpVg83furL83VYcVbjpPqOvgx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGtgCRA9TVsSAnZWagAA/DYP/jIf8FoMZs8TKFOBqw4r\ni7tDx7MgNkMABITMGhh1ebDKgcO6gWWMjn6Mm6YVYasgQebtmyFHQbngQaZe\n60s5loX85X+xiK9YP6fc3RJwjCQVk7YoQTN1b54cZoOJr1O0aXUZ4aQ6ZqCq\nRFntrzkKDhKIsr6uqQwdvPjxjHmSObDVRzY+fBAUoKod8x7wZbI71SJa5IMK\n+/3mnHscYyH3cN/dlrfeF+eSqm/aeBnG+OSlrI56bKbdZIsINYDzy0d6kUDz\nH5aXgioIV/wU9zVr9X2h1OMmr0dLBm+2ojmR7O88WzIl3GDAVMtqzcGX3YR8\nP0Nshp12Qx0xWIYpte+YpO7xAH+SD1xrXl6yyIJ4McnOhkQU2mFxFMb4ex41\nM3zFok3PYFFi3md7hsIccWUhVtYehSpYTDNhOTdNpuQnHHUCWXvbr1wua+KJ\nbTd6BDC/5tZIOGFR1CGEB23kwWi0buymxNmjtZYjeEPv17CI99Z+FIFWGuZd\nfdAn7srKvPKOPZcxM+1wzlURSok5WimO9QWgvUUkyR7fq4vv/RDKoRVuSbJD\nauZ822YL6H7OeXJqFkpQLR6Pthm+pp0YZsZiWHdabI+C65U2Pjl0FnMq0AZ4\n+WmYnW+fPRroNUof7qDf84BLsh/niBKWYMD6H2Nx+mtY2K5g2uQe4f2TSW2W\n2HSq\r\n=LKie\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4088837a2a2d0b4af544090557a8266202e13a8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.f838c6e55.0","@material/base":"6.0.0-canary.f838c6e55.0","@material/shape":"6.0.0-canary.f838c6e55.0","@material/theme":"6.0.0-canary.f838c6e55.0","@material/floating-label":"6.0.0-canary.f838c6e55.0","@material/feature-targeting":"6.0.0-canary.f838c6e55.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.f838c6e55.0_1587047263692_0.8387703095997221","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/notched-outline","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.ce6cb7024.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a2326572649cc43d96f768ffe6c322251f5294d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.ce6cb7024.0.tgz","fileCount":34,"integrity":"sha512-+PrOhw65I1ArIrrGcnJ/zRIHGJTO9qxP6Jm/w9ZnhA8sQ6liUbAol70A5+DtcZKJy+2Lc7RjXpOtf70Nhqi/Rw==","signatures":[{"sig":"MEYCIQD/pohLXObbJCQCP84WfBKYYDBerYf98vgptId2pS4MjAIhAJSspVfMT9oKfqoP4RDkFLIXmEPteOwNSFQ7B82HSXuB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJPDCRA9TVsSAnZWagAAiTIP/2H2hWojOWB6ZJQ5AA2C\nCIEECS/rdD3euz4ZHSfNq/bjkG4jMZbZyeihiuA1kSACgz680fE95Ze3l8+O\nwN31D8u7J7ep41BKmwDMYsqeykqSCeN+BkUMzF+5vyXjp6CpkG7kSBUCOCgZ\nBKdfjH7AEPeZ9MoLZA/mj/a+M0lETJ6yAT8048Zukommf+SgpjlL3r7Gxnr/\n51AtWYizIKdNfVqzpmfJk2zKQBFeI0POyHQbwBps/QKyHlavr+lUW+d4OCxz\nDJknSRkpquCrBksuJPIYosrG/7rQOEmCHVD2U0XQTgtL4DNQ5a+XRxOqoRMC\nzmjNZVo+2dvjE4WbzoQmQ7o2K9zt3BnR8zwLJRaPDEBwXLuEtYZhqm5T9rdt\no0jkIxfQafmxGfx35+xho0kTmGelYsdt+EjrhlZl0KggLi6eslerBzGy0Rh1\nDhjwf6HkOGYbTDB2RiESlU6+VIEc24zz0JRfcuMCN41vEk4Kzm5ifOtO8+VK\nI1AyB8aOq+4C5m3/ARy/Ah/PW0qkpDM7fo4b/iW4gySxOBfoXnPy/njewJk8\nkctUySl9dG6p7nSC38wBV66ZRZsbS7+4XziXtA1C1FLG/zXxJNOW1RhoN4sk\n8H7C9GZ7vEJEb5NdFXCfAr4fQTPt0rRrBfwtxUGHxl4Y6vuJ6XCsFjezcuoG\nvfEU\r\n=JblB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"50c11d42dccdf93592bf97e9211f34d95983996a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.ce6cb7024.0","@material/base":"6.0.0-canary.ce6cb7024.0","@material/shape":"6.0.0-canary.ce6cb7024.0","@material/theme":"6.0.0-canary.ce6cb7024.0","@material/floating-label":"6.0.0-canary.ce6cb7024.0","@material/feature-targeting":"6.0.0-canary.ce6cb7024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.ce6cb7024.0_1587057603105_0.7247604490981965","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/notched-outline","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.0ab62a65b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2515dfc5fa9a90fd8e1004abdcc6fa5693101846","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.0ab62a65b.0.tgz","fileCount":34,"integrity":"sha512-WXIrEPdj/oMMXDVCukSVrEi9VxH5eujDRdbKqkH01j42Kiv9v/iull9R30vhHx++9OByxK/DGROopt7yjvbnxw==","signatures":[{"sig":"MEUCIBCRgFcT+gtX40TYojXdlK3joJAsx8gsvMhCVC9gz25LAiEAuUdPqVyYBKeK2XOBHtdntpZ9LzbB/HIXzPyjvj710eE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKoZCRA9TVsSAnZWagAAo1sP/RxfeCxuu030AUNJScQ5\n1wiltX9lBoMkehecJMMm0hgDGnpp3FI+1FSWL4FOeWw0xm0k6IFpQ8el/SIt\nEtpB+f8465bpVc/jE/fallda9T/HdA+12z9z+RHEtNV7QXsday6RVh1BsPDo\n75/7l7mSPETWIEKcgrDGC2Tw5kCd/sulaylZ5cMqkVpgn+4dAdUzYyThew1Y\naaWxNKKWAhMnLqtuB12X7TwaYNP86h5Mv5s5ln1Xx5UUXHEOr1B647hZp8a/\nYMBBZ9pDGtMF1ERK7wsuSrGQavBSySO+eAQyF/9lt/o6SRv/OPYtPAYUINBX\ncSWe5CjntCwneq5U2ZZFU6Svry23ii+Boy2yILwe219QfmgI3Y5K4dNWgGpP\nJDHUF53TAN6trW0SpQG5dJoTde3YsQyf6Gw322UdGfcfYgNNpZ5BTDYYSkBT\nPMCsdAFsxLZpCOlBxVj5Y7JlXMq4iEO9CXS/nLaB4nI4eQ3/EDDTOD88a9AI\nRYGW7r0QR2eNX0p4HzInXHEe74XqUpDv11O8zEfMeJW2rIcyIf60Swl+FZql\nk0Po7t4BrEpdwawPrOUoEUjp6rgGay80m1uqEQcayMfNKEwI8Wcepp0ZjyI1\n31mImgm2g9fBsS2xA5BN7Iw88eCyS46zNenT98/1eEiHHDhBm+fMi+Qz6VFN\n7lZZ\r\n=lOxB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f8890ca1119e1fc3b197f172b8273c05b5fba35d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.0ab62a65b.0","@material/base":"6.0.0-canary.0ab62a65b.0","@material/shape":"6.0.0-canary.0ab62a65b.0","@material/theme":"6.0.0-canary.0ab62a65b.0","@material/floating-label":"6.0.0-canary.0ab62a65b.0","@material/feature-targeting":"6.0.0-canary.0ab62a65b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.0ab62a65b.0_1587063320861_0.6691900817438323","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/notched-outline","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.ca61b656f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8c4e57d8db3ecc4be85cac8aee15a1fe70ebb49","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.ca61b656f.0.tgz","fileCount":34,"integrity":"sha512-saBzkh4ACkRM+D993UfLBPCS53/j8W55ULks2RbfHLLibyjv8Bw11TEo50+9OyrpBzi/hl6ev+oU+q3c4nsB6Q==","signatures":[{"sig":"MEYCIQDFHlYdZbS4FEXD1AhB/1xeLdyF6dlssKNdifViIIpuzQIhANC2al0lrR/6iiC/uTnORRPMxo3P8Qk/UdYCQWeeT8xk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLl4CRA9TVsSAnZWagAAZUUP/AjqTF91JkyJMLk7rrUK\nDOCEZ0UtkTarAYJhLBumNVUXmzlvn+95MUXeyarp7wjmB34ygZjBCgIebp9F\nJJHzffFKozVhBFnAaTnEzsca310tyTHsj3CeqTy84KbJNVvj4rRJ4CiATp4m\nYFNtNco/YWRkz4OPg9cG4k5IVr5RfUP24rjg92u6Z36vEPOPv5Ac0hpMkOz/\nJK0SoTgnbxfUDfsoGA2ANDTWtIODR2JX53cNw89Lxr/Cjowy+G2X3PKuxE2n\ny/r9Ptudzr8MzeSbd6+5HiPwm+4aR2TFFzWXIKOUbMn+2sHLFOg1JvWrQZ5a\nmhiu0PdkPB2M4lAQuhgVPWBtn6FAX2F/EDV5OWschwL1BHTQcTuhprBVaoaw\n3Ve+nzFmchYBza8AvfKWebdJJfJ2ZWtvCy9Pg879LsX01xVz5nTA1LbYzKVv\ndZzkW/bFx1Xa0wR8IeAEPAoyjIoBX4uevMiyui2GpQs6XfpDPIjb2m52m7x+\n9v+r3dfQSfzDqINQ4XAaXo3SgJ+SfI4XGB4vCvXrh8fbcMak9EYcCugy2fw/\nVmhdtBD9ArNOsNuhbqois/xTlHEiQKhqma5+z4hmhrkQLYSHEcaqFEvpCEjx\n2j2MWiXH7GWkn6G6W/cJabdhi35DBJqxSCLBUy92BbihwKTz3gNi2IHDs8D3\n/MJU\r\n=r2Ni\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"967c93bd4843f43b3821bebc6113ab9c73533ac0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.ca61b656f.0","@material/base":"6.0.0-canary.ca61b656f.0","@material/shape":"6.0.0-canary.ca61b656f.0","@material/theme":"6.0.0-canary.ca61b656f.0","@material/floating-label":"6.0.0-canary.ca61b656f.0","@material/feature-targeting":"6.0.0-canary.ca61b656f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.ca61b656f.0_1587067256423_0.7543203207044455","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/notched-outline","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.45a6615e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cdb3ebd2c38965f42f5f4bce7d7a73c2f073394","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.45a6615e3.0.tgz","fileCount":34,"integrity":"sha512-2UaodQbOSckgdqPe8VZkOlWwFaT8Xt/ANwH6aQMaFZ69PJogtWsnLMiBglhrY9fY0bCXl4Mw9ixOOd5h9ypGZQ==","signatures":[{"sig":"MEQCIDE3/ZEdYcxFoWI4So96LdcSo6sBzfoSiVjux0G3qD5NAiATBEUKVEkiy/ltfEi4HtQxV7otvQevfau+FT/hQnX93w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMEoCRA9TVsSAnZWagAA3HAQAKUndpg5Zf5x2WzlgFio\novUm/usjii+wR1VXm3DqbmGtZFsdnJ9DR9wAtZRgPbzsSTQ6ri8uAi2XT8dV\nghhy2TuRDeu8peH9K8mjfWv6czWOFo7eusvsJYYar5bmEghQnAk4P95oKrot\nALtC0soQFPjv7e4MlSLhHntWxvTbdMLMORbeFzneBPUfVkwJgXcTGCfTin/S\nuq/V0zFRpPdqlSR6JDy0SlesEoTEzgknI7E7/UWjUm+BvCjbr1U4Yc36EAve\nPeohyDoKxo74FFqw5YiV2F2dE91+dtTSip2P811c2buXpIK5FjLYJMDxF7Fl\nTn3vUEouCJwuOk7zWvLAag1XeUrldE/YgyBYTwAPzLk6LPlyJrtnDupNxKR/\nyfgzArpXcBoDBgAiJmLg5NdMitPA6L5KBkDWK9uJvfqySREIb3LwGUdB7Mh+\nsINbSfupFM1Z+6Z2rdNSV+1MI78bHABS0l1JJa3c+gFatY6qYAV1UcCgcc95\nPDHYnjB5YtCoMI2NINjwtGlMkBlJJ++01/fmRjki1xubpOxOfpaZmZs37CoJ\nOswkDScPf67MjVULpOABJ0v8qhbRTG2tmVkbQovdj7Lrvj7WroFMxN9WD9iS\nBgOUqAbW6yUfse4QbIOAwsiVQVFF/zU0rUkb0Fk/CoyjxDUuws+dzwz3gnBQ\ny3Ay\r\n=wcrl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0ad3ae693731b43b2c055b2fd649a42e03abd2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.45a6615e3.0","@material/base":"6.0.0-canary.45a6615e3.0","@material/shape":"6.0.0-canary.45a6615e3.0","@material/theme":"6.0.0-canary.45a6615e3.0","@material/floating-label":"6.0.0-canary.45a6615e3.0","@material/feature-targeting":"6.0.0-canary.45a6615e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.45a6615e3.0_1587069224048_0.548360427918821","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/notched-outline","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.4b04cdb0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b2dc9665bf37e74dbb2b4b1afe2ebf7023034c6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":34,"integrity":"sha512-fsVoyyqL+vvaBQ+NXVBjLV2oe62tV7Ww3W2O5A27xFlfsGcEIM7HzG2O7VMqpkGaChD46dwKtBgtSGMquDm4yw==","signatures":[{"sig":"MEQCIHNeQmBOJAVDrrSUpl7lxN81cVHytgk3rYem+0nH40LLAiBYemCjJCH7N9xNIOyAsaX5Trxz8mDzbklMSQkWTqmFwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemep0CRA9TVsSAnZWagAAwGMP/3Gnx/LFT99MNQpiFDV8\npzbARdWjF2Deyw+IW/DQGO29m0Wn7nzkXQ76AuHnmmGl75UA2uLT1HYp4dnI\nmuMDkegqsC/pZS19gXRsqrdDsR2PaUStxu9027riAb4KlmYZtknZwzHw1tX4\n0AMBRhM1uo2c6SGg/ARfyowR6D0dk6Fh2fsQiwW6+cuABVSkgM0djVLo2TuY\ndeDDMrTC3G5gzwbV/V9+N7LRTdnIez9qxtEpbfDv0FLAxArohKKwQpccdZF5\nHzC+VeVfn6M1E9sWNfUHv81wF5duaJGgTTBxrp9BxhouC7uH4YYtSHePdjPo\ncCEnl9FsJrVfjKbi38iinqlTfoNvAhIY55fJfCv4DqznKANHfU9+EpIvaRwr\nqh8LIJzW+g1S8CHX5DWYdUh84UoKeB1RukHsUI9qAtlNpPRS/r33zWWSbxht\nPDZ2BMUXROClEnjvr00CgyX1RIhlAHMBp6xeWafwE1ioSg1z160WnXx9tevt\n+OYgj4ZFys545VfjQa4oE018rff3B1DTwNPz7rDmaAF1XeuUhkBFouV0d90M\n/QPwIM1BqgiV98tK09HqJ7EEjXNt72U3zx8QVJl1lwNIzaggyLq31xsRdGiq\ns53yLhZyu2AdkrD0palkfATQ4IQceMvO/J6FbZF+VS9sTMMFaOBJW0LUEu4m\ntnx7\r\n=nIsq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bedcd48d2eb94c37211fc93847852f5261655559","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.4b04cdb0f.0","@material/base":"6.0.0-canary.4b04cdb0f.0","@material/shape":"6.0.0-canary.4b04cdb0f.0","@material/theme":"6.0.0-canary.4b04cdb0f.0","@material/floating-label":"6.0.0-canary.4b04cdb0f.0","@material/feature-targeting":"6.0.0-canary.4b04cdb0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.4b04cdb0f.0_1587145331906_0.12705874753793145","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/notched-outline","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.b273afa93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ab0a74a31b1abc4db06d99fa109cc85c3e8f058","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.b273afa93.0.tgz","fileCount":34,"integrity":"sha512-wKgdFMoHuoVPjNzcFyOd0SJ0pypFoueMlZ2rxGA0l87NhFXMN3LZm45TWc0L6JJiokV8VxOt+16H1q8dAtPJ3Q==","signatures":[{"sig":"MEUCIHIpU4bzzbmblbvNo3zpGSl3MVqDnOoD/x8nSz161HaKAiEA+QENsFbS8kKOi3HXkhT8liltvFOXbL+iZlz4fCe0lQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjXRCRA9TVsSAnZWagAAdPIP/2eySiMuWoRwoJ/ZOoI7\nQaNnoPg1DCBcCosJkA6Ezz5JIunOr56U4US8oRUe1Njc8kzmTuxwbAXWsH4j\n1wo/jMvPTZyI7sdUNkB3JhYOGxzKKgWC9/9qL/f7QvCmxwiQev1PBatHMr8p\n+yxwsSZrfukg68gvxPJXYPt+E3t0kE/W0svhC1jPXoYG++HsYDaHJ0BOsQJ6\n7SEpgoF+mI4dI0Z9PI4cYCP4y4VfK8Bdx3rLxTAOHPkt3ygcxPwAaf0y/U8J\ni8ji+CupwtL22Wv1F+n7syXe4U9Ixn5jarJxIY8Up7imRZzo7TUhrK5dmUoo\nqXi9QBZe7BiK5LzEAR9ipbPwUHMQtuqCd83FBvVV0HOpVx01urO12ZgZZtgp\nU7MEN0pA4nIdb2liHk4wHoF/rzptIikZUsQM3K3kI0Z/kscAlOo9ShkLHeGD\ny4VbCgA3R8AdhSpKsszLFmA5Lgzk2jN2wbZ0VnYmL3N46lDA/59STGpZ8ptV\nJqxbyzhiORWWaFZToBwO2uz+hwtGgUq6I7+r3kfyOH7V+fUB1KnEL0rZUvsD\ncn/fc5az2DO0e68lLPkamxXqnL4GOlSKW8gw5qZfUQWp42/5GnosdvlvRNIw\nyTlmO/TkJ5oGYN7imPCUC7Oa3Z/vlx5L/7bt0KkEM5osrAWALYggpShOrCkg\nXW6m\r\n=AYmB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"446d7bb0e65fdc3259b7b9025c6c058731ff02c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.b273afa93.0","@material/base":"6.0.0-canary.b273afa93.0","@material/shape":"6.0.0-canary.b273afa93.0","@material/theme":"6.0.0-canary.b273afa93.0","@material/floating-label":"6.0.0-canary.b273afa93.0","@material/feature-targeting":"6.0.0-canary.b273afa93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.b273afa93.0_1587164625076_0.8837980495322599","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/notched-outline","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.b70bc601e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4eec011b964b4b3f76e360f849ba48aab6e4585","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.b70bc601e.0.tgz","fileCount":34,"integrity":"sha512-jen9CL0IzOAZ5KRoSj7Os2e15OdXTPyubEIEploz3zXnW5m/renanAXkoA54fJmE3TJ5zBrduxF1coPrU2rO0g==","signatures":[{"sig":"MEYCIQDVkeFmEngAQmQAiFFLxbl0h6FfcCD5LNowBkvVFLXPBAIhAJWzoIEnE9ECUqIGaGMCwTipV/o1rHNdOIJQb1YAswj6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjosCRA9TVsSAnZWagAA/H0P/iGoluk9eCLddPyGpuhI\nBH748dC4l2wETCMNfl379+KjYlkT+1JPdur34Ic4SuhB6e37CUQQu4EyGUyv\nyTNeft0aZdj7bTkSefLcv63qc98k6sqrCY02gG5T1fMcZi/mO3v3x88i6k09\nkFFtE5EL5k1g8yYlC1rWSng89rYYCn3LXiLVU9YT7zKgtQNLjgD4aw+OFzHc\nZjNGUZ6Sb+wUZr6RzTCdXU0am8HpyOekG9qQFPG5vPWSCaxHou0Puk1i/KoZ\nSjCDnPr96WCXE4Hus88lLTx+Mf4vzBwLSCiMwUGwfKbKQbdPeZS4n1L5KCbp\n56x2QpZQWucURIYIphvutNe/oCaqqLfXj12e8sL1nwTHOlC+jCqRBhGO+4vi\nWtq5MrcrVEMEIN9Uz0kp+7VF/BtTH86a1dFFUY/5/xQug4Ug7acqHPjjkw67\nFlkaW0sMwSWv6iX3jLn1rIz3ZwRHwJER5LnLoRgMaWDSG+nmU9o4eiPML+Dy\nFgia+3E90Vp2QT+n9aY8LUZzsCcvgxTE4MttHETIgePlT0/r5UkpmVzh6NSd\ngxWBSgomsCpMpRo6ASmOs+J6EWkW/rguvIMYIT32wjkEvd3O8/G8QbO4iLmn\nJldGdxdERqXIj7EBk+qeugYmzimBOJeo3LEQH8t4Aur/p0bCRoIo/KFmi/2V\ndBhk\r\n=IDaB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"90c3468e59a65aab424bb59d4e91a4d522fca3d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.b70bc601e.0","@material/base":"6.0.0-canary.b70bc601e.0","@material/shape":"6.0.0-canary.b70bc601e.0","@material/theme":"6.0.0-canary.b70bc601e.0","@material/floating-label":"6.0.0-canary.b70bc601e.0","@material/feature-targeting":"6.0.0-canary.b70bc601e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.b70bc601e.0_1587165740158_0.7406665859519705","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/notched-outline","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.c4b4bba96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29c2f484569eb50b796765dfb71494fa44768e1b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.c4b4bba96.0.tgz","fileCount":34,"integrity":"sha512-uqBCvpSE4WqeLlV6BaBV/+Wtw80zwiyuV/LpHfoupbB440+aClPjZpTzQJydclZqZnVrZUN2z+DxRdqY3jmPrQ==","signatures":[{"sig":"MEUCIF30BgAx1i5O9HkD+4GkZbHYoraEuE7J6FET+Zmf9a6MAiEAlKJl2WHmKgro8TeKq4Ht5TeieGWv5lAphnoHUccNK7M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkdoCRA9TVsSAnZWagAAML4P/2/qzybOQ3GAA4BtdXGV\nH52QoE3myEo2fO4AL1zO8u6Jf5M4Q2ZzxfZbRl/g3cZZ3jVDvToWToqJiHbH\nK84KvpTmC66ebIwbhQkqNpmT2dgEdHgfVybIBE1qnOScYx2j5N2J+3LHC5iP\nqpmlmvBp/62rdGBUJlH5WdnB42Oy8fxFcJr3RnQ+tgBwWeERCPDUCFmYuo0x\n+zYCgf50NVHdzOtop/ODA7W8XsVcePr/Gx+p5/Vo5WutAUn9oHl85kczsUte\n34IcL29IakElQSX2ruzep1ohGe3YaVGbZZ+NrVc8eYMA2/pot/9u+G4Tz0Wy\nlIF/hTpQ0mXaTZkUrWe50iPj6vvAWsq5xdWhvI/QVhkq6UV3eUvhcWvvrCa6\nTsPJjZStzD7xYA9Dfxt19bhrX02TVM0UWO+BnYk7R283JO39itwl4+PUFNjm\nLJawYoB8pRA+F3pwiZPeH4Lw1k4E4tqdhByG8eERQq8cPToZXR9a3tmUW1f5\ncmKD/bb33YRwsKa58j1MH27ZJNvBIoQoWpvuwudy82RX7lJ6tFzVT00x8hnM\niFFf16iB8+PKkNjgkbvncuLk3Y7mVvwvoC5M7tiKZAovT4EKB64QLuHf41Xh\nGmObZMNJEmngLLgM0I5ibaUIWblW/jjAS93Od+fViUD6YiVlcRMtx0ESDDcw\nWSyi\r\n=OtSD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ee02a718dbd2e86f9ea056b6199c1664c5abe70c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.c4b4bba96.0","@material/base":"6.0.0-canary.c4b4bba96.0","@material/shape":"6.0.0-canary.c4b4bba96.0","@material/theme":"6.0.0-canary.c4b4bba96.0","@material/floating-label":"6.0.0-canary.c4b4bba96.0","@material/feature-targeting":"6.0.0-canary.c4b4bba96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.c4b4bba96.0_1587169128232_0.6685739766490317","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/notched-outline","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.6c1ebc721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bb854c25298135886321fe79eb02c5d4615580e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.6c1ebc721.0.tgz","fileCount":34,"integrity":"sha512-wyZj35BPWn456pvaQ8D4+ABjEOzqZgpujU7rPn6wFFrJUdGwaOBVTC3Mklj5THP4tw8KItIP3OYCTmYRhPmkdg==","signatures":[{"sig":"MEUCIQCFEZAU8Q57XCeRnJmUA9n1ui7NvBiA4c9+kwVJcJSd/gIgV4OWm7RtcC36O+e1Q3ls+eSfJcLy7fl2Iy/8IMkPHb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf8UCRA9TVsSAnZWagAA+uwP/RbPM29oxrvR1c8SM1NI\nZ2/SzsZ5moCjwrx4ihltVZrdSOx1F+KBjwb43J0/mgk0Q3UQ72w1GsCaWqFn\nyUKFo7UkyRCIGXun7alOfXbhIFu3rAJgUap47etiF3S1jAwh9lUMBB9RNCcX\nb56iYvMG0MvMrqLoRgpf6zWBF5NlhS/9WFivxpgddygCvRek1oqs4mvyUxxU\nJgX+EkVNgMCesG/YU1mdtkcMnUVcCxBIczKjLJPeD0nStw/wqguA3zj0HLce\npzmtILVV9nTjbijbZzH2/vtFdX/3RPEqf+RtaQFau/VELQMvO+jIIx2idQ74\n2xpJhPq+mPi/9qB/Sju6bGnRE6odfX9/7kB1jKfiuBd73BP/iqN3BCC2YjLD\nDT1+8XP022lIkZ8+SwLOK+8oBEWTNUAxhhFul4ZcSEUgA+LovmQQqzW2AH4Q\n/rWjsQwuMQOLjwAEHJ/A3ZJQM2t9jADBM1uq+8yTT1AWIMVgObL0Ed8qnTNj\nT0VWrmFnMjKi2omkSe7ddpTI+AW6EBtzVTV6EUFRwMpCFb58lOce5fpIUBBo\n0zaKrzNtwwfwp40QXHOf/VODBETjRdySSpHbsenc8D6aNNVhrWZVANQmG+0Q\nIr6P14VjWMaADKYDxcZyVKPzurSmQQkX7mhxA2O7vzRoPypBaNvrweuO2s5x\nfka/\r\n=pcqj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b1a71b1e525edb460d6fa48e392b09267db9d2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6c1ebc721.0","@material/base":"6.0.0-canary.6c1ebc721.0","@material/shape":"6.0.0-canary.6c1ebc721.0","@material/theme":"6.0.0-canary.6c1ebc721.0","@material/floating-label":"6.0.0-canary.6c1ebc721.0","@material/feature-targeting":"6.0.0-canary.6c1ebc721.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.6c1ebc721.0_1587412756272_0.797549029992779","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/notched-outline","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.9cff4318f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59df94048e6ce2fd5aac43db5ab3e0092dfd5abe","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.9cff4318f.0.tgz","fileCount":34,"integrity":"sha512-xh+0nNe/sgidHFPBcKT3sP4fsPVV6fHaIeBYSn+V1evlOTEPzvWaHbAZxvHTbeyUeoLos19SeHk2X8vm4AeTig==","signatures":[{"sig":"MEUCIBUYzCz+wI1C1poeNnW0k6ezFWrFr00uUgJFY/uOlqSgAiEA1J3RiI4sgcVckbDrcpY6EAX/E/9i9sieAnOOltlFoOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengyXCRA9TVsSAnZWagAAMGwP/i0p6MgMB+/KGBhgAzHv\nRRpDh557rF/hS+QSDVxarLCt0s6mZ1drmOP4A7ikF1srUT5TiMyiUiemnLe8\n3qtqoi5kcZEiYSEzQtfRdmZe6OrB50+/FWOVX4hXro8vrP9ho3POm64h+4yp\nvLdNfP4efESFSiKVmLfrEueNZ8z8/ODKmrpw9StSZTgfpTUti8HS5NN2bfuL\nXhsnFPUqtA4G5wWwFW2+XdR5Ez2SDogkWUho+tYu+g6kcWwkny6YSWq+J+Bn\nfkoNsRm5CAnmIHUMLWfa4ceYnECaLLvoVuD/snmu8YiSQ1v8/133w20gpxGz\nrj5QzlVr4t5Qio/mh0p0t83mIwDFvPu8axyN95LhgfdgL3NPOgORjLA4I19j\n66pDW6SjYh/CmKPWcdUE5LjDCKTBohSAl3Yf5mHkHASPOil6UZN+Rh+hldsb\nerTQdfvXVHoZAZAvHTKzmRbp1FI9zwEWClq4gAmakK4PH74dUZXmHfokzXAu\nmZ7kfrRRqLe3z/YlYdLfN+uLtoiXrSOAvbNsragWG70GMUiXIKX9ytPV8mPO\nkNPQSbSiWfjZCk88xBGGJRrJ94zVOXhsGpNGld+ktF7SgK2f2K9TAZNsdHMs\nM1iOzowdEPejbSulZv9qblbX41Em2ZWfxIVVWBhflvhXXa0hlSwM0z1Wd+9l\nddlS\r\n=KilW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0ff1f177754c259b5b0021494616e96f7b6e0d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.9cff4318f.0","@material/base":"6.0.0-canary.9cff4318f.0","@material/shape":"6.0.0-canary.9cff4318f.0","@material/theme":"6.0.0-canary.9cff4318f.0","@material/floating-label":"6.0.0-canary.9cff4318f.0","@material/feature-targeting":"6.0.0-canary.9cff4318f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.9cff4318f.0_1587416215016_0.5886407852434288","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/notched-outline","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.7b4482402.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fba7b245a0ad436062625a3aae1055acf839298b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.7b4482402.0.tgz","fileCount":34,"integrity":"sha512-IASAMwjbOwrSdzeuI9FTYOAwaMeedu6zvb/ZxRUKFgkiNn0y34gcP90gbUt1Zr2YFczMW9m+utpPG6PtHezARg==","signatures":[{"sig":"MEYCIQDWDTyZzHM70RX5t4V4Ay6lhvRPOPWOuE1w38n32Gl7UQIhANiYjW+NbwnodsyAAbfGRGmEgplfH73QzlNJ7PBogaCi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniBXCRA9TVsSAnZWagAADJEP/jv5eogJmSKAni/sqeie\nZCw+knAPWPSdjVxyWYbr/Ly2Ka/nLyY15jXJgoAgVFKqub4QGC605iSgXRjo\niAOa2N59J0+ulcAcvJRFnQyyq62sQ+3HLJ4RcuccfIbH8UCEKSEswUKQGNPu\nzvLvzD8El03DaquIZI1zeQmMs0sOzeQC/VhICKuWLya7KB7NnsiSIYbCQhcA\nt3G3iCbPS5Ja0xzOu3w1rXDWkpvg53z0s95QJcmN6ZeSEnDTcQEFwZXupphM\nhJr3R9+nPp1L5al92xlFv0yclIkkZYgw4NLMX7KQdhi5Wj/SJrKSObUYJJ4P\ndeIouB2JUmeqoVRq1Qtc723f2oSo0o2dSfzM+0an1WOwUHqw+U6ho6ytlkvg\nVk9M8HIoaFaLb4iWlDew4/Sq0qu6yhUnl+7kR0hDCfEFixPHIlvUeLPomQNf\n2M/pe5bi7nIty/z8x12Ubdt0sTxfbzq7t/IIGbRqEgxJ5pETtqjzKqunr3hD\nYCkMXhDOK46Yc3oqWyNtSZV399qnpH1JGxAo3ncHps62UckE0U9ptS6AjcNq\nRRZ+DFtStPUR4F8SAudGFC5/BEqk3jxTrBLdKnFhUfOVJ7OF6suZZntxpk7S\n9O56bLS79iCxhsc3LR6uthZagm5EO3gJQdGFZ1eE6cShbAKK68gvxOfRfyOL\ncVhH\r\n=5Edi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c25f7586d29e2c5a6d3c289197d47b826d499cdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.7b4482402.0","@material/base":"6.0.0-canary.7b4482402.0","@material/shape":"6.0.0-canary.7b4482402.0","@material/theme":"6.0.0-canary.7b4482402.0","@material/floating-label":"6.0.0-canary.7b4482402.0","@material/feature-targeting":"6.0.0-canary.7b4482402.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.7b4482402.0_1587421271152_0.2870730785748514","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/notched-outline","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.deda86d8c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3471c3cff4ab0e7ce2b83bde9db917548653cae5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.deda86d8c.0.tgz","fileCount":34,"integrity":"sha512-7/y0cQbTWYrfK/FsOWcAvBa5ZUpl09VdTFDCBzTWxRLH+whL/iDWwyWbGFK+YHNYYGD5KlJorPdTa6Xc+3383A==","signatures":[{"sig":"MEQCIDoxEgMFEb+pgCW58/r++JEDieftUBHmpQECsDHZl6yfAiAv6I1yK1ixEMNwAG5YDjkyUR8UmcPPj6b+AQzYqH9fEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenklICRA9TVsSAnZWagAA7psP+gPpFinvTHSakPz7FEuT\nzAKAoKMG63Cuz4WUMtnDL2TvPi28jiItwsq66VIZ01heIhQDycmKJrhvmlYO\n8H4QUEzlmz6i0W6WnJwbDvenPRqh47Fu1q3TPBueyiHcIEyq7+WMkwIx61bu\n7zCiCL5ge1L59ojnKtIyze0O8MOFqpiiw9Err4D2owmbFyBKYZsXohwJy6Sw\nDdvW9V241Lye5niXQESrbKWCEIymxdrJxpqGENjrZYwOpt5rcM0/zO4XB9cA\nqskLO5oNONCtU/SVsIHod7Aodf0g5GnV+ir9U27bRnkEBgKXatXeAuYMDkJV\nfdE5dt6VQKPEWz4Sh78KkNOCSfZeiYpyTDLiYdWbJbFSpo44yhUSqs21saVr\nFf5g5fC6/v1CJIFHqPHk9sMpdKn71YSWU2aikw6VHkZtWAyCItyexaRtlXjk\n8a/atLhQgjynLgT/MuoyQwz/wI1UHPy1+vUGuSnasH9I633jetOEU2IKYjOX\nM+B2J56ZxRDEMtZ4f5cDYs3wJ+xYSc7U0nYk+Gc8dGdW/z7dlHd1CMR/Q7Nl\nIibCxnE3errJnzKdxf6U/z7h5Y3o3kYDDtU42v1/ipvy6K+d1POCQIgjJwzk\nVYpVkRRH8Sg72uuHfaBLSyjuCYhYy48nmISXQVg/i7kUxMLce3zqO70biLQ8\n4uXP\r\n=GaZG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7bea6ac56136246274e77c281cf8c66e2ef3e6ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.deda86d8c.0","@material/base":"6.0.0-canary.deda86d8c.0","@material/shape":"6.0.0-canary.deda86d8c.0","@material/theme":"6.0.0-canary.deda86d8c.0","@material/floating-label":"6.0.0-canary.deda86d8c.0","@material/feature-targeting":"6.0.0-canary.deda86d8c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.deda86d8c.0_1587431751911_0.6388451192337108","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/notched-outline","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.d10412cb2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72d6b5f08c17d2ecb74cc20c9608463aeb9bd35a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.d10412cb2.0.tgz","fileCount":34,"integrity":"sha512-zqV8aanx/hcXRVESm5krHH3a1S09MQqWZ7K75eGu3mGu3tOHO4KPhOrfyEq3mOp32FVB8tOoByih+uILMxJFnQ==","signatures":[{"sig":"MEYCIQDKV59oCYdlnlzr5ShlOYU8k7bQvKdxDS3zi6R1jJXkPAIhAKvGpDVjxj/pqjdLi6QIyIACJwnJDrDvZrqT/w5wBNcT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzksCRA9TVsSAnZWagAAszYP+wQfh/Gb4TymsAP32Xe6\n1IoUFnCB4DgoaTYOStPAXZRPkkhi/LfBf0gekKm6NxJ5vrctF5zKruYdCGOV\nicYomdiIQOB5zbf/2ARkPeQC3jgQlHAZcRJORxPs0eMa8z6opVACDpb0zNvT\nMfvaV75nyFYXS+MU9a9E9YvmWJGhD/2arUSSrW6PqBGgtvubGz0rY4vhYLz5\n94UOL/1dskCGkCOS+KgGNAweuY3FlxZKhPG8Kp8YNqz30+MmIr1Bwy65kAZD\n6BJx/lAFFnOpfpDLQMvvV+4DCA+l8D2s4Em7vpipLH9iifInPuBFcjhcKGtw\nnP5ShV75D9ERtCEtGa5H4aI8pf9mrjVT5dudggCylyj4YxwDwpCsLsthwCqS\nCC9lDTPatkmfHMJtDAcptf4Fa+RsTe7j6k+otENCXKrNeETfocCekk0jc0v/\n7hQw+xHcx/XttSvOzwohSH69i5aojM4/aiPOsUDiauFPhuzfx7lTXVKfMB7d\n4T6RHmn2EBJ72BhqKwjf1OMjNUaU42+vUScl/Z9tR7Ecc0F4xIRhgycY4vBi\nYTlfmDu2j7+UfYQgXQNUZwOVvMBiBwmNn2fTybGdqxEkNfVdGysX8DBVA+PU\nij82XanR9vZC1NN/9Y0e9+vGkUP7tztHmLMqsShAhBmJTGlqOUdXkLSTaykD\ntWcE\r\n=OVZB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a2946b5762e597bce2d8e4e72f321bf4934e4543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.d10412cb2.0","@material/base":"6.0.0-canary.d10412cb2.0","@material/shape":"6.0.0-canary.d10412cb2.0","@material/theme":"6.0.0-canary.d10412cb2.0","@material/floating-label":"6.0.0-canary.d10412cb2.0","@material/feature-targeting":"6.0.0-canary.d10412cb2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.d10412cb2.0_1587493164184_0.971645786397217","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/notched-outline","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.c141801d5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a7ec2cc7e573c357d07a90d35ef47a4d985d457","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.c141801d5.0.tgz","fileCount":34,"integrity":"sha512-XZci1VpynWlroX28Lm0yax1G2KK89n9t8yiqYPvdpi5OCGiR0mD9hoq0YD339jM63qkaeQWdmEoHVCFysyKhqA==","signatures":[{"sig":"MEUCIQC0E1esu2Ye48TiaOtv/FLfnA0dFjbfrJmqDixe33CfHgIgNuZxU2EIHmyxuGCkSAJak0zTooEaB0uJtVz+0bUOn+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0zLCRA9TVsSAnZWagAA+YgP/0LtQZJAiPxQcRWPFgOF\n/AowBzdpOGiHi5Kp4eiPbnFjoQ/CTxqUcWgOa3Dj12o2ZKYf/FHCr2KCgbeu\nHNQUSQEseNCdpl0V5LWc2HNl+sL6mDGE/jQSwTo3PkSvgEzVVGtNPJA5SzZF\nNAJbcRjOrdKDLP6nv6DyGQkNuoiUgMfh9SUGHBPSu7NPobmHPgOZ/hbfVrep\nLcVBgDqbLXnZVXKzYrL198wYNk5z+DKO5Zl2axWwBOKVYrJTcLsmZeFeJa/q\nfestrqHXbkzpBlbUVyl8FAG59xAc5WDG3Ua0pmbMC0P8HdCEQfETUbNIuw34\n+8IBJVWE4eXUK7tDQaN3tIeNvnJl5MKlf/+Kkg9wZ3K8lIqRLKbedN1taCBa\nI/R4D5bFQJaycDmD19icbYrHXFOg4cgZa5sAqhRFz17HkpHo0Iha368jnz2w\nyUvwedBrJ9DoEpADUkjBwrg7Kkfq5x70DRpNQCZMMASI9Qo6LXW+c7HwuxM8\n2nN/09jXVk/t1GRsK7WmejDlR6R57CkpVGDoRoh+4gDgE2GDQsejFFTsqCuX\niFT8XM4Rd1zANUq8COdvauKOjfsrdqUqBFu+Ttm7jtfccI9/P64O/QDPDSQE\nz6UqiedF6Lz4BR7Y7RdljJ18f76PL2kb3OcYwF/ZyK//JIP22Xx3QL8SrEQ8\nDD4u\r\n=csbX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d026173e9bf7440b69f1e3e7e4c1bd60dc5ce6b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.c141801d5.0","@material/base":"6.0.0-canary.c141801d5.0","@material/shape":"6.0.0-canary.c141801d5.0","@material/theme":"6.0.0-canary.c141801d5.0","@material/floating-label":"6.0.0-canary.c141801d5.0","@material/feature-targeting":"6.0.0-canary.c141801d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.c141801d5.0_1587498187145_0.6754050736101462","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/notched-outline","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0-canary.28d10a96e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"272af540cfb267be0cc33d17820cf75732781fad","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0-canary.28d10a96e.0.tgz","fileCount":34,"integrity":"sha512-EbwB6nq/H+SsuVLHe37csSamvztfv+PYFowqhEbzAsHfekgJpJVC4BG3kanZozxOapvxlveehLjv1st4E50Y7Q==","signatures":[{"sig":"MEUCIQDZlXDzrf57kpJXv2KETpY60qqKC74/Hb1pJMfTfnsLsgIgPR1Z+Dmt19NE6Ru0NPn9eprhrfZFPd78vmQtvDJJQv0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMBNCRA9TVsSAnZWagAApEQP/2xcOTm07TEGVE+X5PKU\nWnj66dJDg1FADuGzH4SDAjCN5KB3x+IOx0pLvc7jDxZdWMAwC1bGqhkMlYnL\nb6zZf7Fxy9GZqejOqO0nuJUUTP+8hacYJCDCD10Rwy4XobWElstU9e+Wv4r4\nJBOa5SYt1j/9/5rWu4omNGCyJYkuj4kxK38yQnLCGKgHDq330W+FiC7BigzZ\nthtqn81lI9GjFpfIS0qC1eNd9Io32EwQX5W6n8rxfc7VuRp0RXDwZpquPJgR\n+m+IH3x14BDxZ+m9NaQswrYTRmKYhwEf/laBXVZG4Qh27hA9x2YhEFxgM+Y1\nSagc3Vq9LoPzt1tGPC7aa/qSNw+66dH/419eUiFKBtGRidkPvo1yFHnZYWQZ\nBWulc6fjW18qwwi94mYpMmQpyxXgxmYUD4UBQ+CK/FxwEl2DHTGYAOWISiud\nng/6CY0gj24N2VmDHvTEuxbKoDrddqSF2IXAOZPJNrqI6v6U2a/Pu/2ti4wT\nrYpmcHx8iX6qRwJ+61uwFSWyGb0uM40NNgrV86Q/pvm09XuO/U9kzRpJNnVO\nNwTvLhNVf6feZMH/rX6GCfY11amPBQywCp4CsczCH9PRPgVPIyEG5v2bLUwt\nQOBVmhqZLtJIaJP5FA+OvllWBByw7jTrjX7H6wcqK1+EPjGFMzqxrYkhEjnZ\nZ19p\r\n=7V5Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"20feb77e4dc8d7c73f3549e0dfea4b381106b061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.28d10a96e.0","@material/base":"6.0.0-canary.28d10a96e.0","@material/shape":"6.0.0-canary.28d10a96e.0","@material/theme":"6.0.0-canary.28d10a96e.0","@material/floating-label":"6.0.0-canary.28d10a96e.0","@material/feature-targeting":"6.0.0-canary.28d10a96e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0-canary.28d10a96e.0_1587593292593_0.5502777865978423","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/notched-outline","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.8540808be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e512cc50325272d1f975750bf6ecc74b475819cc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.8540808be.0.tgz","fileCount":34,"integrity":"sha512-FaZquCrOIxloCH7kOMiB+Wi7eWow5lkR8OwlHTI8F0Tg6qrrOUYes4X3x3emuBJVyWV7fDGrRJsXzGNXkFoB5A==","signatures":[{"sig":"MEYCIQCWJLXU7jSUU2wMjC8GQhEoLVx/QkYKJORie4XaeAF3agIhAJVcQyBjNpbp/msvsI9teJfT0G/J7UiZkRMJra+d0BWA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/pCRA9TVsSAnZWagAAvCsQAJq/MfHo8DSrIQBzttH4\ncDbSHZ4KC+nHANwqUDAMisqdSASjWQmJr8iES7uRHaZlspoG47IvWRFEdyXb\nWqEdtQE3ehwDNKaMRvicNiWoepbfzGA92nIump5t6HUa3hGHC9QUFQBXxxl0\n3YFyO3XIa6qp1yHNTVB5u5s++84FRjJ9Fm32Z5ncmb3I7hHz1dv+P6q/xE8N\n+Sgk9yaSsI9zxN9Ur1KG8rjjb6dPM5mSHNciLxj14ewRHimPZOGew4NLwBVM\nHQlgq+OjG+qoWCuuYcRBTPHYKFMxVi+YyLi19Ik23jxoOXNOvOkhH+KMpNly\ncX8yS07AtjhHm/q5cT8Gtsvu0E2ov8xqbyomR0jyfz4GV2qV79AePC4e+Zrg\nLL5UMaRmHofd7uhRN/3T8m/JP9oQFfvQfYT/fRY1/Akm7PsI4mBFVsaot+c4\n2AwaxTuKpDH2rxIcshClqyXoRJlqAE3oLJs2GhYcNbGr/YR9TSI8gIXJFFu6\nLXVLgOxgMQr+zBuMhdVpGYCQg/mh6IF2dBxXn+qvitsBbk9u/UCP75zqPJod\nR6eZuwYSiPkhfOknANK2HaUSbnnNxCTM38DA4ofywd5qmCrRxZ7syzXSYWwl\nIFEBHvwkfQoRZxwGNZnd8jIR5IEg1faNmDhQmp4g/Xgll2LNgPEdjiskENit\n8cGi\r\n=iSyg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a99320a8e5b4b718dbbcaeee1ec4fc8feb72b592","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8540808be.0","@material/base":"7.0.0-canary.8540808be.0","@material/shape":"7.0.0-canary.8540808be.0","@material/theme":"7.0.0-canary.8540808be.0","@material/floating-label":"7.0.0-canary.8540808be.0","@material/feature-targeting":"7.0.0-canary.8540808be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.8540808be.0_1587662824905_0.36705346795321847","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/notched-outline","version":"6.0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@6.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64e05872b0c7af7572474380a821c3341ce53fee","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-6.0.0.tgz","fileCount":33,"integrity":"sha512-fSn/3rQblUmFny3qeCnWgXkQyV+nfpuXmPhf41cjUlu28TnTKA2YayL+vg8Ebi97l6osAFaT/1dEaebvpwebaQ==","signatures":[{"sig":"MEQCIBhCfQ7cc05/0BnM8xVrXBpqxcpAmPFb8byCs7oJYdwwAiB1+PFgYGylJk3Errnmyw/qxGQychbLqGV7jsKBDdpIWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodAMCRA9TVsSAnZWagAANfcQAIwnRhSUYtV1TpfoWl8q\nyiiqtEThbjW+0hV5uOBFSPXFbTNExf3HV7wkbtI84UDi/6uKz1bQ11kfo+OF\nuR/lc4gl6dFgTxuecPmRWvOPd09+PiaydlpVntt5PysGZZqRmxfZdkvSBTHt\nzfXG2zkb4V9MeV/zu7jyEeCAPBm0zXx4HPnNNcVIXfETWpy926/orpKnkY4Y\nHj4L9VLle+Uo1gtzKNww0ZrMmGX2bon0DCkORTU4Kq/9lO3DdQZoN7Nqjnul\ntFXivlOQZrUpAYcIbO7mNezz4oZmrESGge/1zIbuKo/xUz6LfU6Bg/A+vdEL\n41ZYG3rkZbokEci/PVpovXDIcoGbJghQU0q1GFvsHnpw/W3LCMvQ1JNHzBf6\nDgYbxMnEeDKajtK3EgXrX0wHPrXVfZbcl6W+iaf8d8AzzC4WCG6BAthTW8L6\nOf02rFZkICq6ZoppY9YM16TaLPkzWj97FNW3rgdGUwsazk9+sjwpcxlwfSnI\nCNBNkkrOn/B9tlvfCn6GBo2fBeeechiyQCL6FNXgELWMuzwqh2SKfej57/VO\ncITnN0M+U4AxdSjlvYueLuE1ENRDN9FeoBk+QmkNfoawAE1PdDM6kAFXkUtu\nIkntjv+6QZ3dAcWuPsmvrrINllaKVmv7YOaJVjU1+DtuBcX/+9mMk6n5iSDX\n3ug9\r\n=gyV+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","gitHead":"8540808be4296e60f1c1d3a637413e433ca7efaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"^6.0.0","@material/base":"^6.0.0","@material/shape":"^6.0.0","@material/theme":"^6.0.0","@material/floating-label":"^6.0.0","@material/feature-targeting":"^6.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_6.0.0_1587662859920_0.6685067140391883","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/notched-outline","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.2673adb74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c141f3f308d3e328fce0c091498f9c661d251d8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.2673adb74.0.tgz","fileCount":34,"integrity":"sha512-g5Q/mdPwRuQyuOxXymJuat9WHFWUz0FuOfSk0WxsqUanX7kPLmuBhjhIE1qSryMWfQioBL73bpFQp3mCD6u+tg==","signatures":[{"sig":"MEUCIBRTfC0gbE7nRXEOiqao0ZX3SGleaSdWUWHD9PMPzRNZAiEA0MzWw/qlKdBS0XalV3nbUavaBKr/F/93ozOmB5FcqxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohrNCRA9TVsSAnZWagAAVOQP/0gozYxLm73AOh3Chhkt\nN8bBNuj9W8QPBLaw68Do2OJ7Q0VQOI+N/6FZieeKZsSiYLPzS7jXTvR/jeBj\ntbqfBnOFBMhDeQpMj8E4ZZSn1n1DDZM7jNeXrahA5BK/3cp57B/gKhvUob3r\nypPfL2S4VNtMEKmxC1MxBLxk7MmwriTx+tdlQDTLBk4XXnIpGhwiyDmtuYrH\n9lFuxIh9LVBt9usVpEO+DRyX6r7eS3gkmAe2PkSQM/TIbD8bPVvalKsTwwje\nTPSwd4rZaQd+3oR8DUpM5Q/XESQyR2Wjelg1x2LQvRuKklJubiIoDf8I6pdo\nBYwnZhMroINLILfRd9NZwZEMoXopMm/U+VNDaCva1E3joccwOETzilbbVTCi\nrtIRVQLNs0kXEXiUtBXOQU6bNpRXF7MbbP7NoPOzpUirPUtLqG4IVwzsgZv1\nPF31PabJzNZzdNnx/KPZdHwf6U+xu/Fpr1y2ite/n/e3vd9MWyiJ45kANbJT\nXDv5kg2T4fMGYQI6BFgcaPympg4RyWJVd22rytWbYBXY7OgV8H2ifuc+n7Ty\nxjPWMT2nmiQ/YdixdHI1e339DADSRhKl7g37StSRiWDKour0qqEkdKZCmeri\n91D5udjuCL2FaM/cE5xiBJ8SEpMAjFUVaUsUOTxMEPPVS9rogTw2ppCmIluo\nOfoP\r\n=IWe2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9cedd1d83d1c7d125a3ed38281072b6e50b57e9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2673adb74.0","@material/base":"7.0.0-canary.2673adb74.0","@material/shape":"7.0.0-canary.2673adb74.0","@material/theme":"7.0.0-canary.2673adb74.0","@material/floating-label":"7.0.0-canary.2673adb74.0","@material/feature-targeting":"7.0.0-canary.2673adb74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.2673adb74.0_1587681997270_0.5666050891112735","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/notched-outline","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.b10d0d7f1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33df32f5cb32f7dd6012cab2177440466421247e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":34,"integrity":"sha512-OWD2M8mAj6uljb23rx2I0PfHtqMXBUbvB1DsQYikg7FeK8r2jWeYWEb+6LtvHMhHw0+SS/0NiEyns9lzpw8lYA==","signatures":[{"sig":"MEUCIHY0XliTIwAamLo/oDEjh5WLYpS14vFQnQQHL877Xt0RAiEA2Msenb8wEXaWnBxnj3CjGaNBqJR1G7DK5RRphVmusK0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojEtCRA9TVsSAnZWagAAOBUQAJCP6AZ20U6lWS2egdxi\n+8fPGsBBjBrQqCS0U0fqHRUziTvDDuR+9yOFugCo50bZ9DOCSvSTDgY/HRQp\nee6B4A0ettrxg5WPYCbzV2sgZ0p/0YLsoxsulu+t7mHd+MO3WNkqRIi1G7Js\nVrtJFSKv7Pk0hgHTgmsz/2ssnIWmOt0DbXE7XSkLqXq+5HjjTO7qnvy9GFK8\nbXP1pQ+ATGnCPACgDd6ETNHTeVSPdz6YfDPzbX3hhOYDEKsovhEKG7YfIdos\nWhDVHvJGU5THRC4ip+KWqhMOJEgiK8klbbwAtwDz9Q9cwCADtMsAeBvlsh42\n0BN+FH51kQcuuxGFbux0iHNfz0KqhPr5TwqmfONdLvtggMhuyOmnmBVo5Kcf\nT9euIWw7I87qx0Sr3IQ5UCXYbwDq+UuE8ofY5Liy2HwtE3KN5iaNIIyIBQb+\nNglPpHhSbv27H1V7Z3vCDJ63Flq2rJ+WVo5SI8n1VvqQKBjM9UVdk3R5NJp7\nCfuCTB2PTV6oLEFaSwoDnOKIpv2XeCOyFZJGOblbm8fSYSp2Htm7PcNbcZhI\nZFbdhMJgOOU6YMBHvzAsBNZFGoQ/slOp6pdlJGeHvC1XALVovCidaOJZOB7S\nE33Bn8ta/smgyxCemnn3brIt6CFLPcp91LSRaj6sxhC1xT5gs0juCKZ2aYD1\nSV75\r\n=nCLE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"83fc566b3c065e01bf601ac65cd6d17b634b7872","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b10d0d7f1.0","@material/base":"7.0.0-canary.b10d0d7f1.0","@material/shape":"7.0.0-canary.b10d0d7f1.0","@material/theme":"7.0.0-canary.b10d0d7f1.0","@material/floating-label":"7.0.0-canary.b10d0d7f1.0","@material/feature-targeting":"7.0.0-canary.b10d0d7f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.b10d0d7f1.0_1587687724635_0.26920043336819455","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/notched-outline","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.3bd8c1bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9f28655701ded24b9c26083b66b8f44194f7803","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":34,"integrity":"sha512-ToG2oPqchACi3+gMBQwn/fA9+aQt4Wglyb/yHfGRzgf59ja9T6Md3hkbMUVXYv4NKv169Qs5UxRBgxOUNNKbSw==","signatures":[{"sig":"MEUCIQCLkzEKVRpNVLz8WpBmUfbySUxloj9piJf8gp5maS6ZoQIgUBzs/SUbj+Mts6dyFUwGL6nWLbtOCDAd9c+XmMyoKV8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1TuCRA9TVsSAnZWagAAVy8P/0hqqc6mTXrtn+oFwllb\nj5udPIbGOaxbYyxemMi5E5XeOw3zAcX3MY06wjYRoauh77Vdm7Zy5hFWnMz+\n9rwUfYErtN1s7AKtICnHa58iW4Q4cQMOQ4EAhXv8vPeCblsFe5NkPuMr/7GJ\nJoXLfBFNu8UYSahNgBv2zAVkCZ/fbww1w2uPgBqD+InZNgCVJPTtW/AEfCi+\naO6kCuVFPuA1zZV2XI808lJbvPirTjS2Miw4uLYL2n64t/8Z3CN1GBEjbd2b\nPz7qI6rwsY0leYQq9OCvnpjjx5PtUp9AlyJ8/fdofIdP36Ak/UYsEvqLP/Zo\nfmWfRU4rseTWx+FfzYrGSfnfk1UIipBnq9pHpAHbFVUyXGkvYgOouuzMeFUT\nMQXp5cFpVPjW4QQENx8wVcjiEXwexcMo/cL0D6qNEjt91JeJ2Qu8Hv3BBQKG\ncTxJIw0QBvYe+eUYUDSgMaTlS7TCbvsch8VcWV5lMVoBqCfFTUeUvcx4v1gQ\nSHZ7pbU+3Gdnsl03tyrn/7HZQcHWIuvOoVOnBqc6g0Yq3YjUolIZ8s08SpZu\nplYrP8sMZQ/5gwwlrM35i6HVBnFEMr2QLd5o9t5TmxKlbzIikCZi/DFw64Sr\nfDZOzucEQGdWywVN/SR8/ZrINMVMSjdIDWh7VT2rPUbRqIlh9LJEuaE+j7+f\nTEKK\r\n=oAcw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c6f324d1b107431694d9112a3e94b90e82718ccb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3bd8c1bac.0","@material/base":"7.0.0-canary.3bd8c1bac.0","@material/shape":"7.0.0-canary.3bd8c1bac.0","@material/theme":"7.0.0-canary.3bd8c1bac.0","@material/floating-label":"7.0.0-canary.3bd8c1bac.0","@material/feature-targeting":"7.0.0-canary.3bd8c1bac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.3bd8c1bac.0_1587762414522_0.15738121585647358","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/notched-outline","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.b83c8dc22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37bbd1f3d7a16827fb7440e4ecf53474c580723a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.b83c8dc22.0.tgz","fileCount":34,"integrity":"sha512-WHfeKBoB+G4XeQoR+7vd57DpMz8M4+TVwOmD3j8JDNIo/ROLuq2uimTB1+QGWqEY2k78dP2YDKxV0clwMIxSYA==","signatures":[{"sig":"MEUCIQDSkWT4VXz3PdLKroMfx2X0YMdhLQhyWgC6JJE3EPR9mAIgFXwjPKlkgHx3k5kWOitsIFS5XRB5A+fjANYteknAKKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1fsCRA9TVsSAnZWagAA/yEP+QHqSJd5ShJBDPJDicgR\nT55ny0J+GXae0RuUxYe8sXcPEh9Xg4Mf8E4MvBuE2EA9VX755A1JvnHeRpu4\nODDCDs3INSo3+SqmGn3PBVZXV97z3WMQ56WsdnEFEcVTzTa8wvSYPRfBxsQO\n7a0F3tSGJxbBxIzFCOKsCCW30foTi3ujcxHqpVqJbiJ2DqiMEdTQo0Inkxau\nf8Irmji5nWTCHP6cKI/139kchI4dNJTfRcLvIuwvcjVbbye77ZOaNWGUn9zv\no4bWjSwYrmjEoTtVs0AQgZOPXdHfy6q2SNEbANStp0fuTAmnS5X52qNbnaan\nieja28BfTaUFfgpPXnvdq+4og6aBacwQk1X5+2w5Haw40MqzFh25w2Orxcua\nl7D9+aP83nDkoZjBDF1AxrpPyVxeawRf1JNSiBY/p7fEC+VD8CUZdhrnjuRn\nbdy49pQNY7C5o4esNfFZjMBrB6fc2P18B9KgrVWEH/KUGzOhXVV1WnbiuYEI\nJj4j+bFt68tg7LG+33/M0CoicAmOVRgr+cpAzx0WUaSiBJ3lHs2CqSC5i8O4\n7p7guhL+4oiIvJGjIJOFWNIMbxXxzZRgW59XVuR1qJe1/nVoYAw6byn+ffxy\nZzvKJHCRRuUsu6oj4xXV8LLkL1cWfAZ2DfgwgQYcvFnUFRg1iYtkD03ptgQC\no1cX\r\n=ANFD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"92cfe3e927d76c82fa2d8a864bb852b8d19f30e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b83c8dc22.0","@material/base":"7.0.0-canary.b83c8dc22.0","@material/shape":"7.0.0-canary.b83c8dc22.0","@material/theme":"7.0.0-canary.b83c8dc22.0","@material/floating-label":"7.0.0-canary.b83c8dc22.0","@material/feature-targeting":"7.0.0-canary.b83c8dc22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.b83c8dc22.0_1587763180261_0.3481759105621598","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/notched-outline","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.1b3dd846d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2b592713abbc4c2a436ae2da4706a4deff9cc22","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.1b3dd846d.0.tgz","fileCount":34,"integrity":"sha512-8X4HEZVq2eCPWDS3VIQnl0LR/5NhhYbI6fDz1UU+OexYOl+SDX+mgKPdZ2VmXRAeb3nuvtOgTBRJShe+c5E/Hg==","signatures":[{"sig":"MEYCIQC9X+s6rOzAvdDADe8vIeBnRjOvdXerIUV9P0/xe++bEAIhAPDGsZpimS4mzjzJsrHLFNg+GGko5QmZwspUZndcBAcM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4f9CRA9TVsSAnZWagAAym4P/3Xn/PYfL9VthlgufT7v\nilwGPUT/Fxzdyyd2W5XYwTVJZS4GEuHj0EGXFmD7O8D/wbnkPbicsNsD43b0\najcpnU65ny6X3WiJaYNi6AwWY+vqpQf/u1ohV408BbGTiVHuxWQhFQ3LYdL9\n1wxYUmB4OfUOMC5llVnPJWt/2arbmK96+CHPWg8qPsotYfR7P/tcvXKgpbNK\n1bXqtC+TMdksQZuUTB+xhgeoMYgHl46acexLvtEpgX1Qxa5jK3CIIEAb18jm\nZsiXuIFeSRPz/Iq0V7xH47Bj9H3tcF1nf0OGeiiBLKqgR3K29hiFcs2c2jHw\n6LP3YizPE2TW74gY2xLOW3739/zDvbVmfQLyn5vPaYjRvWI/njCtfwR0mIlp\nmqDoJl+0xsaXYxEKHwsXJjb5YKGC2IOUsJGtDgsPzYStXo+MCjbHfJJDGEiU\noQi+Ki5RgQcN0TTIhI4XOdJtXSgyblcM8qI+YJV3tr5iAOdEBIKAjyW39mzw\nFo+JXwNiP0vmyd7Ps0tC28pP2sA03g1BkCuGhFseUl565Ccp5God1WCBWAOf\n3NbiHQEXy+BIfQchgWK2/Z7Q5BzLE01xvXFZPzq+D9L0nx5w6o8Qg6kqBOkD\nI7QhhZ7dd+6VjIT+rBrei+c69PlXLnIyRVrV8STXcQdxCPfYvl7F8d4G5FUK\n2gHW\r\n=eNUx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"370fec5aeb98791d923dc357e46611e61cf6eb0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.1b3dd846d.0","@material/base":"7.0.0-canary.1b3dd846d.0","@material/shape":"7.0.0-canary.1b3dd846d.0","@material/theme":"7.0.0-canary.1b3dd846d.0","@material/floating-label":"7.0.0-canary.1b3dd846d.0","@material/feature-targeting":"7.0.0-canary.1b3dd846d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.1b3dd846d.0_1587775484778_0.15284990522438457","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/notched-outline","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.29debfea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ed2dbe39ed2305715ba2b11fea662db601c8105","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.29debfea7.0.tgz","fileCount":34,"integrity":"sha512-VCeh5xz7TxQDK2yuSGJTfa30Lkac5yPBy0UUio+jKl1ZE92HRKKBW1wvTe9Rf8RDwdhJrZZe3IuPA/iZEMkN6Q==","signatures":[{"sig":"MEQCIHvFHxlCwNVNL4xGVF/gdxuvxKMBcVhqgdidf7MbLRsDAiB+EYFshsA+5ZWrf4gPX1pSS6btuObwcs9zB4GtvBfLzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptELCRA9TVsSAnZWagAAjVAQAJC460K3RgvrfAMnWLnl\n1Qw2Qet1PLm/xkeqUh+tLVoWMdsxkRLTSLbx4gxWkC+/9AXLwGhIQWTZb8dX\n8ifIpZI8KOJT+Wte5/sk0r6PpjRAys9v8HSAUtZ75BoiSxWyZBqc/WOb2MW2\nlr3KjgvHXo8dvnARXK70MA1e6rxCsaNsHPwv4hdllLsa2ldK4BrAt6ZZAcp8\n5QKxuTAbq4Eu0dSR2wVnD1Rj8qEMZQgLPYEiZwn4qNex14UBFkT/tlfZqgQ5\nXPU5gqcr9gISDzRUITzBHS5sRwZRlV3ZLs5Og/8WWdoGi+7R5P/dsU+BadtL\ngmd1G3aJ+IIsFvoFyqtFYCbJtOved0Rh10cpDxugObL6/8VPUCwLubwpajV3\n0qEqDTHU6CO7gZRwUZ+zCUUS/1CsO1WSvvwx3HmJwhYIHsKA5VHcTcrNmuYG\n2x3A5Na0IoXDJnF3pBQ6yuACDamMdTtHOKxBoJvwF06CNl+posFfPCaiHGBj\nhgfSYdJqKrXPE8S2Xq9Etm/7uXNS6oSF8B7pSVip+k+d6mIqbPse3FGqP1lR\ne3QSDVUShaeSvPHT2d2QN16MIi38V80g4LtGbISEDe/jHEDXeJ7Nhmq+I134\nVzpQtLpmcBjkmXDe0eCOCr5DKYcLSGyNnK2ZMQz/0CpR2SKYAFMJ0UW5lDff\nBHsc\r\n=rR1H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f121c350e2a52fc59191d5e843358aa3e3926ca2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.29debfea7.0","@material/base":"7.0.0-canary.29debfea7.0","@material/shape":"7.0.0-canary.29debfea7.0","@material/theme":"7.0.0-canary.29debfea7.0","@material/floating-label":"7.0.0-canary.29debfea7.0","@material/feature-targeting":"7.0.0-canary.29debfea7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.29debfea7.0_1587990794625_0.11572402532309756","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/notched-outline","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.28d32f8e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e019ef969129d1ce39c0a598d46800c4a083c14","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.28d32f8e0.0.tgz","fileCount":34,"integrity":"sha512-73cMjq4OKSbmmt3JF9ksmg9E78m9g6+g3vYRHZWi2RpxH6yitwGycdchqPz7XGqyLkhvZe+fPsOmfSNvzjpDdQ==","signatures":[{"sig":"MEQCICUMWjmMiSJ34fcNAYA9GVMZD6GBPsGvgSejQ+U30/utAiALSnDQWMhOX3pA6SEXcrni32gA+9ki+jsARO6RYyk/iQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepudOCRA9TVsSAnZWagAAO9wP/1H1WJ/7ehfSrfRkrA0L\nU3W/KytzsRNN7MeLdEZE8XBhtH37HWKdsN8pUA5exmaYRR3Aw0tniMnx3sbh\nC1kpTKKnnyWXNaQcajpTg/Gch6e4zoYz6j/bvM7QWcrhPPQ8zAopBTeu0G2P\nkD2b0qz0pp/GQmWD+gQrwd+Wjrq9l3CAEpBDL5VTpU/BKLetsOCVc1I1qJKe\n1fJdFzSxUjKFSonuBd+KZ4SYQQjJ3OqZU4D6tpEtFdoMHyfGoQoR5w7+jrdD\nPgLEHx5gQ1qdIGrKg7ZjWuYTLRcobWtXPqfxPDGEOTz/RV43BPYZUzAu3Atk\nIes7ZwIT+iYN2sUHPq9vgX9JUUdYgR2y2rLiLrX2X8Vj7aD+0PFROfIQM6tv\nIaetDXKBAnfTcf3VB17SVOjA89VXbFpc4kH1PGEa81WRnTe0/zUvjfUsg1CW\nq2/ujL6n+AJK2YRg/Oru7O68mQKcpvLCbBxF2pqwvpegCyug756nkdv8nP8F\nKi4MEJIGcxkU0TwjVM8aPOjvQDSw1GAei89KUwdZLQo5vJQ6zMOP20VKneKt\n8ybkxzEdTqmxJDFkRnGieeNJ/sYRQN4m0nkHLF8TwwsFi5O6rO6P8qRrsqXr\n++RqJFQInU44UcM0xwqFPNMcO9i3uNs1HwqC3HrlWgqNlFPyFEIPzfmpdzRP\nJdFm\r\n=59NK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5e2a5c88bb5127200d9f70d65964a419ffe2b123","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.28d32f8e0.0","@material/base":"7.0.0-canary.28d32f8e0.0","@material/shape":"7.0.0-canary.28d32f8e0.0","@material/theme":"7.0.0-canary.28d32f8e0.0","@material/floating-label":"7.0.0-canary.28d32f8e0.0","@material/feature-targeting":"7.0.0-canary.28d32f8e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.28d32f8e0.0_1587996494489_0.11841011333093276","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/notched-outline","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.af71cfdd6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ea9b9d90451184b07b35e143e2fed4f94ca2bcc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.af71cfdd6.0.tgz","fileCount":34,"integrity":"sha512-PLgEoQiLcOWYb5l9USBmp84EyGHJzY8LZnBdP46OE+hujX/3pvSKWM3+a2dnJHGBCuPPee5W3eBuzExQF+IN9g==","signatures":[{"sig":"MEUCIB+s5VU26IzQIVg/3hs9sTTlLPnd9f2rJshGuKL0DZECAiEA9DrVSuT3mRGl/2S6KuqVamOThr6Yut1PQ7KluFV4xwE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLm5CRA9TVsSAnZWagAAlysP/R7gkjK+B1nxqVsjznSO\nNJYac0kp1MnGixeRPUOizhhRKA0Bwbg44wh1v30/PPn73hNyZFpJZsjc2xfL\nt0Z4eJ32noAV68pBs2TQiRMkVu9YMUtOM10U3+kYN91F2vL74CpmfKNsSCZG\nhn1z0mSKJGlpKymLBWd0hq9j0MagTvtcxseZz0/v4vAS4ia0B43Hj4l5gjaD\n4AniwNLFsfqP6sO5njpZWkIsqNwvhKq4PkUzQUyn0+54m+MTiX7sILd2dzJF\nbK8Q/VVXdcy8ez7wM+dwJybG1LcNUi7c5EHtEZ5qhm9vC3Dxw4xIksyUDzXC\nqyeT8ELWPE7uhYVgf+FH/BzFvhoL0n9qLWBMl32mUafDkF2cFIggVXLH5IsT\nFdb/EICLTBaTY+Txs/0LKtg8HWdtFn52Xj2uVrebNCCdr1c6KWTmCtozNQDr\nBwO/iN84DL4A2tLq+sTb/uygmKSJrHGnQ/mKvRmKeee8/Doia78qJEaa692H\ntpIb6PHJPMHwveSG62NZEexuSN2SFePBCrAfxBOOYurrbD+CQlYpdzNIZakw\nwerlIihi5YYNt8X43uSOfDk0pdCLY9A0RbMt6KW5SHsIowtsVtcwzTf9/t6P\nIv8JM1IqK/TQaqQM5OtpxANoSKt87ozeP15Hm8hT8tOwZ2O+aGCaCcFS9Ls2\n+Ift\r\n=lVF7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8ab654dfd65440046211cfc73468f20a57d7fb4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.af71cfdd6.0","@material/base":"7.0.0-canary.af71cfdd6.0","@material/shape":"7.0.0-canary.af71cfdd6.0","@material/theme":"7.0.0-canary.af71cfdd6.0","@material/floating-label":"7.0.0-canary.af71cfdd6.0","@material/feature-targeting":"7.0.0-canary.af71cfdd6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.af71cfdd6.0_1588115896527_0.13364984186658457","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/notched-outline","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.99d2fc961.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0737affc3f597f746f0f081b36a76eff85b22c87","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.99d2fc961.0.tgz","fileCount":34,"integrity":"sha512-OiiMcYLle2Q5XtvkqVTWiPqusKOd7yNv6KrEXZVOFhs2+31tAWTpXM+unEorTa3TvPelFBP3/ZDLsGBWaDGbJw==","signatures":[{"sig":"MEQCICaAZJNodRrOE5jv7FmsqL4vWL5kdHGiqwInTNi+MgAtAiAuuCl7iXPtBx+rjhrArocrA7bZxZZcPWZ8cuLSENYfoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVqrCRA9TVsSAnZWagAAwwoP/R5WQG3bJ9/mvo4zChuj\n4UIjNXmtEphXEboxOU/rjApL3XjCn+8TBJOIwe5durbgh1H/J6lISKaS+i6/\nDur0LNEvPpMW2898L88btH48aS1IYkpiZuo4oc0+loVku0Q3WOrJnBNdYmRr\nimygCIraCJhWMDoB2SiiT4FscwVHYW1Ja8jbni07/ZJNBNW105QUb9EOVM9K\nQCKSUF5tIqQd61bBw6KP2usqe6NjDLGZL3kfWuWkL1QP1hbq8xnuEVejGcQw\nUY299nqNoLbKVtkhby+DuyUjdgtcGRANpW+Tvbd9Qcmx/fp5hyY+RuEwvdkZ\n90FnPHoRHMG12RNxyVU7OqS1VpRmuk8vkHr/mplmIeTyea9AJdOWJTE6r3Fc\nb1dNuz4X3FUuSKVyHSZu1GL4zU8UDD/IgrWeqqXwRf2a7lHQ+6SmpSCDEIIh\nXoflhzHtEA8tBk9ubFFagXG8EA08ZEI9HJfrUE6Nn1Iqr4oSnqKdvzhWLn6B\n4bMHrW2i8epZufvCkWJY3+ojtbA572YlDOR6u0+ReDCpJdRQJKrZowXFPkea\nPVq+whSpaB0AanFMWlxXf32w2uRsGhLwvhI0C+gSj9V7MyrTnH+ZVdL94t7z\nDa2kXN+EmAw+fofhbhZb5XvDw3JTd4WFpzErGQIn9zMRe8uO2UKIeD6/ycfk\nDsjv\r\n=i79i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9b1ef36f20c436f96aa47dc90c983832edc5985c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.99d2fc961.0","@material/base":"7.0.0-canary.99d2fc961.0","@material/shape":"7.0.0-canary.99d2fc961.0","@material/theme":"7.0.0-canary.99d2fc961.0","@material/floating-label":"7.0.0-canary.99d2fc961.0","@material/feature-targeting":"7.0.0-canary.99d2fc961.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.99d2fc961.0_1588157098581_0.12980224959391573","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/notched-outline","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.0e052b24f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ca667d2e437a5acdac1207901a2eccda4388b36","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.0e052b24f.0.tgz","fileCount":34,"integrity":"sha512-pUF1xAxBMJxqL5Ts3CIHpe/Y/7NjAvnyBzyy+ErnhC5fEFXReLxJ+Upy72RJNy/NcBf53DIo/sIf+i7F+E8qhA==","signatures":[{"sig":"MEUCIQDyWe6O95EBVYUPRmfvLo+A1bh8XlQLlPOGPmq8GAC8RAIgdR4yD9H0CQo1iemE/xiCMG1tEku81UvMHRT93kQULtw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqio5CRA9TVsSAnZWagAAwfYQAIC7PRJFG3nr02nFhLef\nJA8lGdNoAjn6JmvWRrFNTWjyxFslto/q83vXW4o1Jd9VPsHBiyjM2THp8gg5\nEbLJDpQj4VQ0P2kzaapWIGliVr5ftL6NcWHD1JlpZXyTVqOq3u8bJESoQkmz\nU4dl02nILKph7+dMFPBX6o1BFheQquAFx94aC5W162RLhbOcdwqvj610awEk\nuebFE9UUeC3mKCItbgORIk0hL4ZQLZMHNbwV4ABIrrzX5+sWFqwXbV6H+sON\nNMc3ldaE6m6Rn+Q1j+mogkxFqVP+8XoT5/TrDUqyBu6wet39wXdTOjdIF2Fx\nPD2aGHc94x295C58LuNb++gViTc3Xw9T9q40z9Hyz/KZFUwCwSZnYPituStl\nnuW6bx1mUIMQ9gHKN6oyT+HRTUiftwUpGdAgzmg+74EDkWB61PAP5QbcMAOY\nrCwzNUg/rkG1Fn0AZwruG0ABONdzGNcFw/iNzCSrlFnhbxnbdOfd448RRYSw\n7cr1Fkwm6MOY4qCtR7Mopy/8nWaw4fvnxd37abeQ0rplb3GTzLhap2A4iPvr\nu843C8WldpIC+Y//WAWJXSMHu2z0FC/02ejI3nuBgB3okh9MAmvWJ7JJWi3y\nm4cAPBFbAaYbZNvEvDyK/Y/31V9aEYcSLOTyE5p6X8w/Pf/+eVc563gar4YJ\nAWQf\r\n=Pti6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"69929564b970323734d16e9588636ff8a645f2ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0e052b24f.0","@material/base":"7.0.0-canary.0e052b24f.0","@material/shape":"7.0.0-canary.0e052b24f.0","@material/theme":"7.0.0-canary.0e052b24f.0","@material/floating-label":"7.0.0-canary.0e052b24f.0","@material/feature-targeting":"7.0.0-canary.0e052b24f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.0e052b24f.0_1588210233400_0.23229446394627784","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/notched-outline","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.ff4bc632a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d54e4bcfe3b162c527a466d8e2af6922f20832e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.ff4bc632a.0.tgz","fileCount":34,"integrity":"sha512-2ByaK0sCpfCtyrkeC5tCdLq8qS1XlNxkENMJ2gSsAetwhhDPjeeXN/K1HypNQfwyWPtw4Gkih5IohCsisvpntQ==","signatures":[{"sig":"MEUCIENa0ZnyVBbFXnOOrAuDEWhQMKdsbAQuqAmrjSXd2zGIAiEAyYNoBnjwyjGqEKSvcikB73Y+ekPu0C8C8W+HQ2rcnIM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqoxACRA9TVsSAnZWagAAOT0P/jiSsLOqTP7+u6rX3mED\nb8FFnZrlrYH29CNpMMcI8Hl9qhIPa6WXUpX6Oe+C9R1bH9DJoPIiqAxIxk8u\nVybDw7BMbICrqmasWVeejrozkuYEijOjynDpPnfYoREYw9Sl46T3hG0Xzdl2\nXIlsNDxp8c596rkIh5PO4VU2GiOGouWmxkLD3rcXqmVfFCeGmSFheVLjPIZA\n27cyKEqyEZu/xOEtdUE+Ldv6Z/lM0NHLFSZ+KcCNq62E+IETXjgVMrzGmWSB\nHrLQysdewAN7ikfnJAbpW6gKY/n2hG0VKcPB7AbEJgEUBUc9kMbOsqGeCL7y\nWq80mPI94AxItPxlKj8nw6l1hgBz80ID7R+a+2Eo7pdeSGgltw1gA8eMNpLa\nO5mnzEVISyv5tlwkNYfl+AnNAt5qwepaSweacVaUeIm06Pvgtb9D7Jyc3edE\nsW+DaFf4y6YEa3Z9qUMkYbcWYi9gLVoESmgvILYkvnK+zdA0ZCVhcQODPGW3\nPTQ7nToDIeXKO6M/dK+r/CiSQLqpdyLUGlb/m9GDaXfMp8M78PpGE78Nqez+\ntvq9czTBVpjQ9jNTbgkwmnPhNYgRZoJF15zCDZy0vF4dat15qAzXtEdNHFqR\nQo0xAzaogT2Joa8Et7vt0QNKGf62RbFXFxy2dnQZScVFDE3ArrxJ7KIarWl6\nOtLn\r\n=Iqu7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bf4456b9aa6b24c3dd166ee7bbf96a700054183e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ff4bc632a.0","@material/base":"7.0.0-canary.ff4bc632a.0","@material/shape":"7.0.0-canary.ff4bc632a.0","@material/theme":"7.0.0-canary.ff4bc632a.0","@material/floating-label":"7.0.0-canary.ff4bc632a.0","@material/feature-targeting":"7.0.0-canary.ff4bc632a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.ff4bc632a.0_1588235327762_0.607822316797423","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/notched-outline","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.b0f83d2fd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"668650da24f2d958945cfab0f1914f5362f9ce9d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":34,"integrity":"sha512-8YEzDAQeZAF0qn2mUZMrsnC5kJdmuFXMWVxxBtN9w3TvfNOkU6CnbMuB6ASirV2GPTZZmAY9PTcOrZudrT3TPQ==","signatures":[{"sig":"MEQCIHJkbQoiKEdkgGa1BUQ8x4bWCXY8BEm9ZN4zNrXVP8fbAiBM5CDAYr18UzUnREo/YE/uz20MuG0AEFBJSbE1J4YBBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequHUCRA9TVsSAnZWagAAyCMP/RCaSWN3q+zCHdujygz1\nRb9axEDIgAzERGfHtKiBBsRpecM1qrE2Prfe9zNpS+OWv0k7X7jFonpE3M1o\nSkOkdapBA4saOvdzXW/bExMbySi+AGQ6ST0229WgmhYV2rBhWGqK7EgGMyzU\ny5OSJv6AdEg0TWUMogbPS37Cepx3pTmSjANThPaYKJh4Q/tdamwxLxwXtg/s\n8wkttqpJ5O0w7nwyKiP4WGSbe3ac4H9JrE5sVATbT9WUo9CyBLe+4A4lCFky\nRhZmAcbg8zOF0hSfUJgN8D8X0dnILj7Sv8OHOQIJs+rI1TdHQz5ipx7cHbX7\nC9x9OOf9kve3l3ziBH08xOQ52YamLB9WK6aeOeAOSl/yrtV7GjR56k6dhWlw\nAFVoyFba8YQsxJf88+7M++buHwTBB0Pvz9jdGKB+i10UlHMCgssvWxT6AgDk\n6VuwS1RYk9P8B7ar/h8CcUf7AOrzn9RQagbCsMU6n3n4LxKJR3pvemJSQnD+\n1ch3e35L8m31UgifVWwOSb1d999uRrozLi7W5sW6i8x+GImDMeGJWrUlbCN9\nJJkod01t0MWPN/EBmVYZgk0K2bSNaRG999M3YenOMAax3YBC8qAu9Cq0TXg4\n4dwds7bUiDnNrAyBTpkwPoeTGzwV2U1V+U3ZuXvDe6PAMRX6j8toGkqs6f4A\nkkPX\r\n=1O7s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a1500073e25d06ecb6fe752169f836de2cc6ba13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b0f83d2fd.0","@material/base":"7.0.0-canary.b0f83d2fd.0","@material/shape":"7.0.0-canary.b0f83d2fd.0","@material/theme":"7.0.0-canary.b0f83d2fd.0","@material/floating-label":"7.0.0-canary.b0f83d2fd.0","@material/feature-targeting":"7.0.0-canary.b0f83d2fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.b0f83d2fd.0_1588257235584_0.6705425156523714","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/notched-outline","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.e59906a57.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f671879cca47f7247cd6e570361a68340a558e7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.e59906a57.0.tgz","fileCount":34,"integrity":"sha512-Daz82xrjUZzN069nl3FBTDUzTQcDlLNk6xNAh+J93YUFXEhutQv6+R8ARNMrWlufVEGeM8XZTgXDBmvfl85a+Q==","signatures":[{"sig":"MEYCIQCz/V1IySU32JDD8ZfcKw8oTUy15VmBLxRFPhuBxbLobwIhAL1u/AB8kQyaxzMa2JLCYLgNZOMyNi8BmZBKzksWtSMJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerEOHCRA9TVsSAnZWagAAObAP/RcyIsVMpJoFjIGldztt\nwNyctoQ2VZFDO4IVWOmixE9HahIMLtRRzlkg6U8F3Sy+jPRKzkbfeTAFxK48\nDZK5HmryZLp3Q+RoLsvvEXfQdzzTQh7hTkpr5GKvll+ok8CrEG+Bor51D6Ma\nyzNTS6UkkmqEjgjHdSAJGhXfqkRqUTE1XP0n8zTdA/VCv5h9bw3uYuppVJZf\nyqDLKYzbwLRW70BwYP0yqqC4AgCA0aL+IUItGGWpjXCUXv42cByPvUPoM7pP\nfoFk7mgOMsG0lfL1D1EmQO1Jhx5ECFQEnl/kv/GNwnTXZVJRnXq5RrQwgw59\nu7jO/CFSSuPaMjLp9jRG4Ayiq0tx7J6+s6wSlmL8b+aAeRRDgBLA3Icn4hW7\nYGa/4Vig3JqauozJj11d+JinFNAvb6LnT2jwfPRF1YVdqvNNTx3yhVFjF5Rt\nZRyjl841gX8xKpml8CoYuZPpcKgL7uYIpfopmeois9nFefjwGNrgWFTOFV/L\nDd8j27I0tqYRxlW+RR6DftwB+YTapubk2RIV3QTbPidvOop3f0A3k1GUzSdV\nELAww+zmg8vj5w9hVrybgwhSvKnTG2TuLkPybP9AHdC13en60uCgTIwIs/kW\nDdDqkd2cOxTUYxdCKRR3OQqkZVnxvuIAwCuf+0YbX3TbGu4vKWtqGxGO9c7N\nqwEz\r\n=O2/w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fc7a5c94d345c5fcd76d4957427c551ed759a1f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.e59906a57.0","@material/base":"7.0.0-canary.e59906a57.0","@material/shape":"7.0.0-canary.e59906a57.0","@material/theme":"7.0.0-canary.e59906a57.0","@material/floating-label":"7.0.0-canary.e59906a57.0","@material/feature-targeting":"7.0.0-canary.e59906a57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.e59906a57.0_1588347782300_0.32439209693775517","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/notched-outline","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.c02712b59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d176c8dff3ec8e87092956b86cef643477c09b76","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.c02712b59.0.tgz","fileCount":34,"integrity":"sha512-blvYhlcrRMcCnsYrv9WfPevITtnqDIQmTExsNxGQWdY6bX3mlemfAZlv3z5h5/ul+HDFtBmG8Tos0t06448lZQ==","signatures":[{"sig":"MEUCIQCGsQmrA3VgajGNBGLmjURSWmEi0RixzLozRsk78tXl/wIgBCTZwIOqB1hjAPFVcAjw0BY0P12vfUqtljdHJKoz0q4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGnkCRA9TVsSAnZWagAArG4P/if3dJ7PlUfhjjFnCBQQ\nZQgLJE6GLgAoXpsl5wJAqFcrJK121Dnmkhukt4UbnHTJSnwGnZzUmFHfdwxm\nzIyZIrC7NPXckie5AhWoJyuqVAXf+oUpN8jU6N1Wmdlnac1LL4jgY2q/aUWs\n/QncDcQETQdJ6XWVmXQjnOTvSuC5Hu0LbIC1KGj6JIqHXHs8xkB+c/qRnYG+\n2UA17Eik4b+cKea9UKbSfn0tW+d5NJKYxggjgEgYT3ROc5eocjNinUflUhyd\nJcoq/Q6bpNotfTOWky2Namo48ps4Elmm7oMhIcMBeInv7iy8S+m+hGphG+w/\nt4IBAwk6rStSZtm1Q1zqG1Q1uZGmVoR5TcYEOCehTgrQFeGUOoSyE1AakOqD\ndW/2KK0HaoAexlOHySHg5qLm9w4QKH0vLz4RlGfbLYXIwsjROJbnrMNX6aef\nwRCRSkG6uk+xJh8/zmL6bo8+l1ZRyRTzVQq4DMq22ZuV+ZdgMlXnlrRzX9NQ\nQjNSS/arj6nIM3B53VeVQZWkrxgqSuxzFTGSaMkbV8ezokglLQ5niscbHeLq\nhzdqZ/hF9qTxHcQ0IF7t6onQ/JLcEdNyg7zDv+WjMM7hO/w4iFWEFdGdf8hB\nitbLxUsraLYQObn/X70SlTiu+Y+ARqvFkzXZb3YSCTi42tQ+f8s05lCXCtnt\nqDT4\r\n=7WRY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ed5da0cff8ae5197cbaf84af0bc924c207d3998f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c02712b59.0","@material/base":"7.0.0-canary.c02712b59.0","@material/shape":"7.0.0-canary.c02712b59.0","@material/theme":"7.0.0-canary.c02712b59.0","@material/floating-label":"7.0.0-canary.c02712b59.0","@material/feature-targeting":"7.0.0-canary.c02712b59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.c02712b59.0_1588357604168_0.16774607168631128","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/notched-outline","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.15d65448e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"833b0e341177338e4b87f17a3c1d48af673faed7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.15d65448e.0.tgz","fileCount":34,"integrity":"sha512-I9P/G6eHXXPUHadQLlewTVfaoHmHkYcqmvmzNil9yd9s9VexxuHgRtFT4qjfA+Ph2rmPSEWw2Vs8SCKi87fu6w==","signatures":[{"sig":"MEQCICHHJeLOw5itoGgFIaM8xOVYzNlGj0FyJnWnp2MJLsu2AiBFTRtwcii3xSVmnIw5cSbl1TSawQy8ndoKON4FBRrsew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHc5CRA9TVsSAnZWagAArgoP/iVqd0r3Y6yxKZwqicvd\nwRysrgys756Ob92Zsgwy237cOJmxJnbcWmU4kvCjR+aiQXHPii97MF1T9YsN\n2p2ulYi8GuL9RzmIkCE6DsobI6uLTHYS4NP9APxQv/ecYhhZ7OzWewegH/8e\nBUBwav62rblPkFx1gMxpiP9rH6kgeYi+lwxCkybC800ijdrUTRLO20ab1Ilz\nrc+4lCVJpjIJ3B1A+T5rl2PyvDojEQZQk0GNlcTnnAwprfpUI3FFeNJwyiof\nIB3R091LaIS9n6fUL5t61fzjOZBiCaaLT4ZZU17rLYEKxZey1fav8Xak3D/5\ni1I8iDaNwd9CNW0Q072jdSR26lHW18Zo6GmKeJwsLOhdhjlawbMNmBYYBdGT\nxY/4p53gYkLFPd8VowQFar/2e4I03Vb2Q5VPMptumo0eA1JHVZfSdP3U2b9K\ndMEgMuFxBoDwlbf9+6v8phgybkg6OOLucuAW6Arrfi4anHcNSKiOoCn5GjsW\nyVf8tlv6QiiDrDue9wfIeKW7IiCnmHY0yaLuj60L2ozsqCVD9vYsnIK6rBHt\nE8gmJWWxKgUYXyMCZJmFEVsf3UB82t6EMg0zIzv1pERSuEiuKB79AEGHJx8m\nXqvq1FA0yRt+RZplwnCW7Izfkdc5qPBWGU5vFosWfpuhHUqQcTP8qJ3yz+DQ\nEL/g\r\n=vzSz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b2e16d6a45e857fdec3838c3c09ee0a1c61d1858","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.15d65448e.0","@material/base":"7.0.0-canary.15d65448e.0","@material/shape":"7.0.0-canary.15d65448e.0","@material/theme":"7.0.0-canary.15d65448e.0","@material/floating-label":"7.0.0-canary.15d65448e.0","@material/feature-targeting":"7.0.0-canary.15d65448e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.15d65448e.0_1588361017158_0.8891740764604621","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/notched-outline","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.142b1549e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08822bbb9daed3c6256e3a79e16d194a920e16da","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.142b1549e.0.tgz","fileCount":34,"integrity":"sha512-Vm9HqnxPnF5uKtq3fbVO9Cktxk0VxXtKuNu4mbbZYnZSg5xq0Tqa6rh0bDZT2OIh2t3rzgSMoB30BHgkYh7FmA==","signatures":[{"sig":"MEUCIQCAJEPBFiU2ox5ZRT7l+wRmqIIi8iedLrHZS71+Ju4UiwIgRU3UaxymvgSWyPDj5x6QrQzJcS5vzce3nuYcLrtS6rs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKR5CRA9TVsSAnZWagAAZoAP/1F38mqLa1fOvqRF5Qi5\nfBogHiMKgJP+fXCIaqYdc5PjltO/OkSksm3YQYN8/Z09Se8vK8MgB9X1bCT0\nJ58ZUIa/wIIDLf+Je6UV0gaejPT1skBwE1pzi4YI4eJBTPJTBkAgrW5omR/B\n+wLtVTU9yz3SeEJEWV8VL34R4XTVqN5ld0nyLUrm69jQ2ikB0W7Mj1Z1dGIz\nPJYTBN9+TENbqiM2EE58TUVK3jTeldukT9aT2wfVC3rAopRPE9XL/RQRqpCe\nNVR73EbIfjumBWB7vuhj6aQp1aTLhBUOLESiH0skATmNGhyw3f/Pi9sblccb\nbTJjd21ZJhTRmNIEvjpTmdwitMkkfmUOwxHKbdWBLtran33sa/HXzVEe9zzo\npB2gxiVe9c3Hj37pEogPN+xi4OSMDb7hDqYnF4ruKB/FXJ+YNDD20w9axSSo\nl/h3MyNw+ceM6iwRNTy+PPel5ZmDYa5s4hzNSJjkFtEJ+tjOlqZX5KqgKY93\nOsdHEN5qL1VK3ZwQRCIl4XDqHsUU6U2z+v8f6IOnO5rxBKL2J1JKQR6yJ51f\njwAjIPD/DVf+lJYrxcJyUoQLkScVXqqab1oCQdL2iw5n7L3D+D669U8mAE3H\nAj0VhXhX/zX6YZkYcM2DTp/OF+zQ2Og8OYoSX8GAQudWVc635XGIDEwt35lp\nI7F4\r\n=+kYQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c43c6e2e74a4352aad7225952aeb9e7154d35751","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.142b1549e.0","@material/base":"7.0.0-canary.142b1549e.0","@material/shape":"7.0.0-canary.142b1549e.0","@material/theme":"7.0.0-canary.142b1549e.0","@material/floating-label":"7.0.0-canary.142b1549e.0","@material/feature-targeting":"7.0.0-canary.142b1549e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.142b1549e.0_1588372601387_0.6892442828259997","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/notched-outline","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.524b7b812.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e61e24071a54f3dea0099fb3229312ae3ddb8887","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.524b7b812.0.tgz","fileCount":34,"integrity":"sha512-QnyjZxOk/lt/TOJ0plxvgCkk42KNDWKAXT/DtAc3tNsHVECbkR53sBT/vUJfcebQoZZqvEWSiyQcJqPYi0V6Aw==","signatures":[{"sig":"MEYCIQDrxCScRNsjC1vt53+PabHJo8K1dWI//g3PNsAmBVcoLQIhAIzEE61idi4j3CNfw3i0OA8vKrpCLuQ7p43sLGv3o6vI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery4YCRA9TVsSAnZWagAAHBkQAJqqkgaFEcc4chOhL+ju\nLQmzvqYnAxUPh6h+z9cnN8yu61urU3QnGeET6JQu271/X/r6TT/Q19QLWt9x\nj+jsemSxBSHl9FbLNJCEWloJnfKse887NKgdr6gmRPiI9+MDd/mtKo80JKII\nxJ3CS2mtzBTqQYyceYBLuj/7n80dp5r7LCG+yofkdJMLGanChUtEGp1ZrA4p\ntCQIH+C5wLFePYrRUj2n/iNJajkyvS39ag53BOW/DWfSJ1iDy4MoHiMWQRH/\nqW1OACXtzKv2YFOzntDEmuyiFf+G+XJ01R6zqr1XkN2+coGXmICID3403222\na5N1XmNOcM+beg8CbVk5pt+Kyh7/Um4Lf6u+1BONE6HBz8qVS75A1IIyvK+9\n+VqpxiFfFpon4wkArvrBf9g3xhIHqfPso8EJuYgR4kgZSetQ2eT06o8hBBw3\n5gSX/0rGzh3YTy1/eMXYy4HrhdmdTEn9XnIy2cnzteGmgiBnA9bsbEhjTMHi\nYXw5QaK8/KNrdaP7VCWSBqmMnC6wXhdgckf3a7Y13p1UNXHwrKMZD5UCeizf\nxijlRfUaW9x/cfpgN0I8o+meIedY4pgClwB3yP4CgadTcbbnGutdd6A+vROH\nPt0QAmALauZuvkeH7IfjkQ7jBDdKImL+63seMoyhMB5th2Urnvsdlo+9Tg+P\nq/W+\r\n=r9tS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"82ab8bbdd2373b285c315177e7054a727b38f4a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.524b7b812.0","@material/base":"7.0.0-canary.524b7b812.0","@material/shape":"7.0.0-canary.524b7b812.0","@material/theme":"7.0.0-canary.524b7b812.0","@material/floating-label":"7.0.0-canary.524b7b812.0","@material/feature-targeting":"7.0.0-canary.524b7b812.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.524b7b812.0_1588538904153_0.41048279876543226","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/notched-outline","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.bd8ca9678.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9422a09b426ebf25296ac068d73cccea69b9097e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.bd8ca9678.0.tgz","fileCount":34,"integrity":"sha512-w/+80HJa2YQYUvdlaqGw/5qAGkK3NW1JYQDj8r+XaxxNs2QgFs6xk1ON8XhzdTpcY44war1xkDKIYX72Qd5Xcg==","signatures":[{"sig":"MEYCIQCakhfWNPk3l8E8QmLnV0uKheB9RSc8KrEmw8k1U2iD2wIhAMz5yV9t5ZYMZoQfrMrVN0Do62DQkOvRDZ3l738qDliz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE6/CRA9TVsSAnZWagAAeAwP/2g620lEfyj6YTgdB0uo\nf7Tg0r6ZoKcG8KjMG7R8QCREgszGJeYg8fL0z8YE9Seov7VqJOJ8RhqDE7wo\nSU9Ng1N6iRXcHoAbSGqdrJ9/Myb+7uw+wqNk7Cx7CzROBE4UecrPBmvpUI/s\nsx1Om7XNWuiAZ8Ndhge7guGDNEMo32njeQHe2nLU3pOudTJeIfOn8RpRmFS6\nxaRyrAaSEz9RxoUcvWGH7ZKd7OScD0wBof4EktcullEI34tlcQC3gruz4MSd\nvol5eqFLWF3TpqQAoNlKvk5THY5FNiSeOJjUfafZW6HKPo8RPOth1WOLlY/J\nK5nZ35VQHiDejxPhDV/cB0IsUpWsPG82B0qVqfYDuJCEkuGFKrU2bUnAVV/s\n9fWSQsfgtDfwZ5h2+h8kEsVaao68w3HxvnelJfIVtYlzkhF+EyR7428aCG/E\n5LM7/Nx8wgprtrNfRLL97zsLs8MZ2JSpvN18n1/Kdn4eMQ2opjfVmB1v+zuv\nxAf1uuVyg+OtUXPl0pHrcFrBX0T91QWXibhs5ma0qZ8xElnE0b4N0KZh1jBZ\nT8PTwmryneVSt95CkfB5uB+FJaWJPjvQcJSioLDXPQOstsCjb273fiw1b3aD\nKAmQO9o4axAxW+l6MuKajW8PE1SgnN33xrZ9q3yV9x5ERbYfAszE6b4rFnI3\nml31\r\n=drm/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d21e98ae16f9c893bf27272d187617574615c417","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bd8ca9678.0","@material/base":"7.0.0-canary.bd8ca9678.0","@material/shape":"7.0.0-canary.bd8ca9678.0","@material/theme":"7.0.0-canary.bd8ca9678.0","@material/floating-label":"7.0.0-canary.bd8ca9678.0","@material/feature-targeting":"7.0.0-canary.bd8ca9678.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.bd8ca9678.0_1588612799557_0.7593133739530138","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/notched-outline","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.2553e86fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b97a7336bec6e3b0bf20cded93d3a5697d12fa5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.2553e86fe.0.tgz","fileCount":34,"integrity":"sha512-PMU8QcoeJBzt9RDEUZQT5JKZeaFPIdCCqBuoDcPQxDYERN8H9PooEAja4KFEzdv/8RUdQlpq4A3LC+bY2XPQeQ==","signatures":[{"sig":"MEUCIGkUQU24qvbhmdyiP3afwD3ezg8MKRRo+4+qh84EcrrOAiEAsY5s7n3/yjrWj1gFgL/5GlncBnDbpm5CZw8B/Uu0Vik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFGICRA9TVsSAnZWagAA2agP/1YU5g+SttVEmR6M04P2\nJN39Kn0E7M6sIHTm2HgmNBGScDWZhH3eGSb+FpHYShxyhrY90tPopdkWzG00\npxpYhnkvDSAi7rG/W7MNmArKJgZON23FtjQK05oGH33xGTIWFjO542GfrLli\ncum/IQH5WV/LL0vZ8p24d0BjavN7nK0yxnL8ODdy4uQJlj5Qd67DrSXqHIkw\nRnbtJVkAfXUXx0vvcJSq27zGrledTgryZqgvNWesNmzrrGT/nZVbOoNcU++A\nlBr+O1oJ3abjSk6Ffw2/8wqpLQfLfNLOf6bbzuWj2/d6ew2rDqV7Xt1dorno\nNXIk/rvwTrRhL6quwkzA6VTKj5TfsC3s2RCvjsFJZMJnOfIS7hX6PRWwi3GI\nvNLWld0uejM/bmKe1qJcR2OUKtvaloEXvIEx/aS/m9CtB1ZUa6BOcoH1xAX/\nfjmmL4VUafo/e9nD2iApykb9WCinzdV8uJffmRGUbXTqPrnaVGLPhDSlIIyh\n+Njy0L4NWl2hSXJBOaOp15xChPqx/1TYy6xFxGOexFlsmbrk1AI9k52DfZG5\nQxCiQV8LdJYp2v0Yc3GHdKPuJUaPLa2VrA2y2fa1EJc8b7SX4+SB20Kpkwfo\nhQopjwqg8I+6ulyMfXUjFFrmO4zr4RjoowSZDuXFsUuzokQ88Z8MsKy5IcK3\nJu0r\r\n=j/IB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9fa3a214bf3d70eb6522a1f75e622d936e7c0273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2553e86fe.0","@material/base":"7.0.0-canary.2553e86fe.0","@material/shape":"7.0.0-canary.2553e86fe.0","@material/theme":"7.0.0-canary.2553e86fe.0","@material/floating-label":"7.0.0-canary.2553e86fe.0","@material/feature-targeting":"7.0.0-canary.2553e86fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.2553e86fe.0_1588613512393_0.4577435942367507","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/notched-outline","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.03dec929e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60e7304169044405c903d46667a3ec2718cdd87d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.03dec929e.0.tgz","fileCount":34,"integrity":"sha512-mqOxfV4MhrSYgviPXnss0IfvC3RHEgBpVNY4te0NOspE1QdX6f/tFMiBOMYz7sQlzpp6L6TbZfGBAmNnm2k5xA==","signatures":[{"sig":"MEYCIQCzNjIXsOF4VsPQiv2/lDUvi+lSbDkUT6h5JMjZWSYSbQIhAIkd10IbStGCpFmbHtruxG6sfVEE3DMtvxszW+t1OsL6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKakCRA9TVsSAnZWagAAkycP/2Ym7IRn4/hUTvsUlJtw\nu+uHK43QpUSdhqPq3LkAAIXUxtLqt46fPaoXT12Ynv0XD2WeG3YgPl8Rdl9A\n499OJrAjj4Bt+adjj0fZn2MdKCb6G5lH0CLPPtKX8CrRG66hX1PDHNWlM8Zm\nw1HzhIOALkEUFKQS+sKoMcSJirrvbHoN+h09tuWH643gEIsE4yDgFP6gZhe0\nbj5x9Bf0+djiO0pwg25PMom4w5baz5WE3I82xvhOVfqTHLhnTsrshksrxT/p\nuBwhl90CDqSXVzxwjMgHsicU2pCLKSYBhX0YyiRBhkBZKt8MzF4CUlvLc4Av\nE9j9qkweWg18ACd/GKOyT86wC//T631LUqWNB0MWlvnaWqfbLjuFB2jtQ9GE\nQKKUSpb3JVx10oknG9U1IV5pRX1PIQwucBFJgQu+Wa/daWqxzTUQYF4yR1DK\nXTjb8jv6LaWUVpW+k9Jz1rcjyXEjonHdiRvypyJ6kCDxBo5uOjA4oZ+6Cn9U\nmw3GPqcpZJmt1C9NtVYZPeu/pugAa/biJ5b9PKLkoL3ESUYzSI7eT6yfMV+j\nMOPQvl5NEweE5ifMqJsWZA8jE/rGuO3glUxIYncv2L4i2+mOFjr8660L+YIL\nm43WhoH/0npOw+LMCLaJ9oOKmWkrCsGUA/t/45/5TO9JORmipNQ5ZeGm5AJw\n1fIW\r\n=PO/H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"976244ee82fa3e080e074d9aa9a254e6428c90f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.03dec929e.0","@material/base":"7.0.0-canary.03dec929e.0","@material/shape":"7.0.0-canary.03dec929e.0","@material/theme":"7.0.0-canary.03dec929e.0","@material/floating-label":"7.0.0-canary.03dec929e.0","@material/feature-targeting":"7.0.0-canary.03dec929e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.03dec929e.0_1588635299708_0.32011559224423514","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/notched-outline","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.d92d8c93e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22aa3f27db5a6ace3ef9e0df32418f4325a73193","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.d92d8c93e.0.tgz","fileCount":34,"integrity":"sha512-/SA0gd/P4wlUpW6owAbotXfY+zKaznJXQhvn1LllXahL6txxpSZ0fIuIncSym0HTowR8oGtKk5lnkFcG+BAOgQ==","signatures":[{"sig":"MEQCIEtwfd2+tRD4VPlREPt7Y4SsTZta/AhT29YAkHhZxVVQAiBViyg6SoIKL/5pkR+EiRluTXuSK9GTXPzLUwATKaYlGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZueCRA9TVsSAnZWagAAUcAQAJtiWXk2T+To0tyYYmE3\nLVBmHjomRBFYU7l7JWaDjYKlgAIlFmeAkLPzWH6nOrR36v1aFM1pqpLj/EgF\nXZAVtQDhunc5Aci0LLDSaWEWMgxwPs0CFfJaHTvObE0BOzBVZW/T66i//XqJ\n+/S+/KN/1a5s+giy/m8kJyiuM6OAy60I89vGORlAsRhl8vaJhvj+/jwmTiYa\nmrclvDJkoxTK6fdXfEUTKIuLzuAEZ9JciuEWIeR3S52aw8DKUbZrXZf8ijUg\nm9fjQZX7/7FjIiCpzcLog6bYUzMmbDjFN4UMlCCKQuRHLN6nt4BNZhTx4ZOP\nd7QThKD2YfsN9q2puuPX+f1gHrTPiGAfNva4NPy6Hhio0rmvSEyd5bJweWJK\nGRC6r8GXZnFt1ARvEINQZb6DoxVqYskcle6Uyaruzyyf5OuYYxH3hkXVLHgb\nC5br+wNVaGrFIk7mbE4z9TGRn4OOBJZzSq8nN3YoKfMpa/qkhQe9fi8vGTUW\nT87mOJAk+/iUflTc/VXJAtNaGLVCWzwi1Z3UDDosLv9nvIWydOHMG0cwEGJA\n5z4S0elFETZz9LfNdUVwAqWyeiXi2BGVydLvOVkAZsn+orr1De8VOyJJkZuJ\nPRrhBHcf1tZXKhpuhA9VxdhGMFFkMD8lHA7C5TBp/4ZPPRrQ1cRSaaEbw2sW\n/Los\r\n=yh31\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0781b5a0f14ce17201271abfff044630d170700d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d92d8c93e.0","@material/base":"7.0.0-canary.d92d8c93e.0","@material/shape":"7.0.0-canary.d92d8c93e.0","@material/theme":"7.0.0-canary.d92d8c93e.0","@material/floating-label":"7.0.0-canary.d92d8c93e.0","@material/feature-targeting":"7.0.0-canary.d92d8c93e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.d92d8c93e.0_1588698013884_0.6356564258044837","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/notched-outline","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.09f591967.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93321aedce470569463fd8557448ae5c225208f3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.09f591967.0.tgz","fileCount":34,"integrity":"sha512-+6uGhnfWQqxlBIM+8uwti1Vk6uqIFv/7Vj1ZfeeNhkssc60oin4W5pR8AFXzmABKGvWNfAXYqBRpPcohDWHjvw==","signatures":[{"sig":"MEYCIQDZkQVb9vdUoPmIgZwpOUKx52mUvyA5nTufJtc8Z/57GgIhAPaDSk3IKA9jT4XFAUG+WBBCRyMQ2fT5mhMfHG1QQw1y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdUSCRA9TVsSAnZWagAAwxkP/0DbnpUfJnl/8Yy5Vq/U\nvln9h6zkjCKH58XI/HFpi8ubiXkBmL/SWkK1Cyaysm3gwk0KkU33YVwM64Iq\nYAFfe13B76ZIjFr/kSoQHiwfm3pmShLZq23UP/If0nDjW4A++ngSLmlRxF1N\nX8RO0bORkrxEg3I36Z9NvAasIoUuoNuBzt2/kgDzLMXP+IfwgfSr2AGFLo1s\nJU5kuwnEtGvm7VUpnF7Fwz0cO0flRk0f5j1sYmCqKrFVgBJXf8WG7viV200g\nL1HTRw72VSly6TQevje/1swifL4z9ed7TMTQBhLwmqsju0u9fq8a213RgVuA\nHKCthqrup7pDnl/NRusm69i34qCsnfbJsADB/OTFJCYdHtxnlyvILcpgfmN4\noHgK2Vl7OylBcAB6FKTdgbns1LYpgrkq3GY8fU0XamY78VTPVM4zX7IwofRU\ncirZkN0B/oSDuUpnEK4L8N4KcnDqXU2J/gu7dB7SGZzsSZ2fHeB+jKs+Eg4D\nO732zxwOJCN6AXwxLjkaJ7PrErVb0XORxafqhJ+jD1acBrH1Qu+ufOy9WqmP\n+BZxKQM3TbNSM3ZgikeiPfz6ajeKtNoJkC6RAD/bfEoPFjAwTZDz0LqQLSBm\nqioXsM1L9kH0LT9PlJM4XBMvdYeta8ydbGWQ0YT5+C7FPP4HW4ZmUPxNs3W0\nBg/O\r\n=en9H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b1c5f494b8c0fe5f6f9710e50d51e2736a01b227","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.09f591967.0","@material/base":"7.0.0-canary.09f591967.0","@material/shape":"7.0.0-canary.09f591967.0","@material/theme":"7.0.0-canary.09f591967.0","@material/floating-label":"7.0.0-canary.09f591967.0","@material/feature-targeting":"7.0.0-canary.09f591967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.09f591967.0_1588712722374_0.239785471752747","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/notched-outline","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.3846ce311.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d588838d7ced0a6bcf5cc3057b0f8571a535364","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.3846ce311.0.tgz","fileCount":34,"integrity":"sha512-fSUtQXp6iJx8CFEy9MMFhQrxKozeCYz3kFQ7+m1D7s9EIa5yraLDp10Jz1O+u3HkR99BTcDlH6QhDXkzFvIkww==","signatures":[{"sig":"MEUCIE046BI9i1OemyoBVJrx0i1xx4GUxZ5I4IZ1xqBXkZu7AiEAxV6WUWXbr40krFLTJAt4WG005l0z5/ga9cPMekVvo5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessVWCRA9TVsSAnZWagAA3lcP/2p4aDH3nDgTpVmGn0ub\n10/GpA9vtP1AXAgpQkobLbPP4y56ZSk6gwu7Da3Cd5YKlGzsye+EM/DV6YX4\n3SQtjT/GyXndfDpd/eQ1dIf+5sjaTLj9+7FYWbiPTMPrWOZe2N1KlrZh3xSr\n0tHSoEH3R9Ax5oQskvdWLquIizP0GDk4/z6Ggw2BnxIN9RM65RN7XJlv2VjQ\n1tHvAlJTJMyNi1IxnQaMA5tw0G1IV9oeGqgfcLIEoJT8JzljJk+AynzTf17H\nIozX/tbhR6T8OuuPx2pQG+uD5+702fG2TvQWCXDnZ1Uqiz37o11hhgKjWI5D\nuVY+kSF0dBxLMQQZM6d24RYENNlMtH+HESmWBVwRs6YJZZHt/Fa0Wxm8oMEr\nyBYuHDbG0uZdZbJXKZs6RlEzRixfM02kN+EYlhTc2BOklrw4a2040ZSSMen5\nYliKNX8CNlQgu6tCWut+l5WPOMYXygSSvZHKjYyAyjhm5i7srfChZtdKjaEU\nfTrNTKC2q/3t486NrzCGr5EM3bcsWFRuPceZzPztXXWkDI2O8bEfeHFtwFEO\nqULQz1Bd3iIzmP6bdfWNAU46uV6wa3HWDVfCqlb903zi9FuLc6MUIdR5qSyD\nLchusjljGjg9Qo/ovQg3hGhLf9hR7bML4SIKJxQZpYQwnsCOc1TihyOfHn33\ntpAF\r\n=uI2f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"80b3806d13f75bd5b77443c9e504fd6468a5820b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3846ce311.0","@material/base":"7.0.0-canary.3846ce311.0","@material/shape":"7.0.0-canary.3846ce311.0","@material/theme":"7.0.0-canary.3846ce311.0","@material/floating-label":"7.0.0-canary.3846ce311.0","@material/feature-targeting":"7.0.0-canary.3846ce311.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.3846ce311.0_1588774229688_0.6431617787499564","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/notched-outline","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.ed7f32463.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b6217860c1f6a1e46643a1fb8f4d03578dd75e5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.ed7f32463.0.tgz","fileCount":34,"integrity":"sha512-MuvD++zy7VjXCB4R+Pe2A+QTsAeoURs2n1eHRyeWDOVwWbVDnVxexjY8ePgFWfpU+hh62Nb9OwCu0/aqEPDAxA==","signatures":[{"sig":"MEYCIQCihGagB18bpdvD7T03I4T76sVkpw9sj6L/pI1Lep0CEgIhAPRyUxYhs2XzXVJXQlzHW+6YHSZULUGBHanqEae/MLaf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuEMCRA9TVsSAnZWagAATeUP+QA97S2hrzwH4AYosjWv\njvDoqrw76HPLuWgbZPkAO1H14QIbMZorPAZbQqil+1qiZkzG48jU1BQLzTxy\nr2MmVmTJDl6CdA8qRmCPbOMwh2/UmkCAn4Er12hSb3LnEMN5fKXKuGmV0yWt\nfLnREKcOPefEZB6UlWVMKgRVXnOoi4eCH7X4wE1BQpLgslT8SjAcEORRW2VE\nYHmPblkMGS26epoZMrhELNa3L8F4cOvXb566Of6+BYsMiYfLLQ2JpVZMjYGt\nqAk5PJc11isAqxhVW/q7+4KcBW/cZckuMs/hAPJa6l5dzNJy/VW65PBxfcTn\nnw8MjOHCRO5aMEDfdEbF8mxlw9H5GdZLjc/88n8+A8iQZOoqOWSB/vyJPw7K\nBCvuonVeiPTNFpA6T2Bkv0+mjt+6Mxb0u2Slv4W2Cw+AZ27QpycHrWm42gBt\nBSo45MOMCXTvblRKWzJM7FywFAJ4WK8s9b3BGvOXiMKrpe1FUyhy4qi4zn4g\nt4+y4GBxjbLQm+chtA+V7evLQBDAY7EAXv7AgSd84ZAuJs8m8iyIb3IKoWeK\nBToaHikTQuGSOgrbjK/4N9ezCdmCpaH2OgfsVCexCLPSJUgWpXLpkkDlG1SK\nt5ZLkdogL5ojgzNVADbqsbztUDUJjtDGeEq87o4+X3j8Ylw0S3Jt1GONZEIe\nX2eM\r\n=+nTA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"84dc461d7b4d6f61ef286fa2ade4f3d05018af62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ed7f32463.0","@material/base":"7.0.0-canary.ed7f32463.0","@material/shape":"7.0.0-canary.ed7f32463.0","@material/theme":"7.0.0-canary.ed7f32463.0","@material/floating-label":"7.0.0-canary.ed7f32463.0","@material/feature-targeting":"7.0.0-canary.ed7f32463.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.ed7f32463.0_1588781324337_0.03758248460185687","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/notched-outline","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.8135cc085.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a1028dbe5fa370e63cf99b42270d6e9f7a6179f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.8135cc085.0.tgz","fileCount":34,"integrity":"sha512-Wuy0pwdk6katACN+WyhsBv6IHpSq114u8gQQc2+aS74ZQCO4GF83N2TUp4sbCikIBXVocoeM0O8GdGtopoFuPA==","signatures":[{"sig":"MEQCIDws/CglgHfYMroapQsdlLGSW0eglJdLu8ZWZHBHCmwFAiBEN/SJI0d6Rm4/wSnThSq+ic/wngz2S4xBC/kAbclkDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxZRCRA9TVsSAnZWagAAapQP/36K0oqdFpZe6V8oBi0o\nDTloY4mn2JpH29Y7MAbYKqHrkJJvIWyV2Gs2dXBTeJEboPASdrniqtFMGY0U\niVf0ZvthYByc/NWwQIYmu8UO4YnNrddAyGQ1GmD8E5Ndo2/troLaPkDC9Wfn\nxLd3LRWfTFMXCMKGobrbhN2aVuAUwa8q0zdhKHh6m3ASbbB+xYZQ0veyxh5Y\n9exMB8uMPaLUFJ0hemYhIW18/CoKpuJ4ztjS9gu5K43r1FPxUKEXtaR1ULQc\n6xjujr9TJMLEaDdwlV1J7D1iA36Fsom2XSEsq1SEmvqbbuT1kkqtOTNsgk+N\nCOjPrUw9lSTc9sR9RmSF60j47FELsz4r6dyOyKQkiKlIkOgejvSeBAaQnCDt\nR6rTlvmFVBAS9lMJKNVXVTITJwwtca3TRDoz47nphZB56glX4ADxEAxBpKsD\nLvIGFxd3+JqkzwBroqWfJP06Ss8SbPktPxsdHPDe7VuLPZU8LXzOaoIhiJEE\nk3fBZNofexQnLtwprsKZqA2j1D97N0KWNZWHSgKCyb9hNEmF6Mw9Vb2sUssp\nshKJaL7ajzKSdljzH39XGRUmGNQUXK6aM+JBk9JQxwNtE3yLcb2IBmbu5a6J\nA/O0R9Qj4UxZmeCmcDVI1OYtNRTSxydYGU+NVe8eVo9dxTXHWMuwaqBolqCD\n/b6p\r\n=21uc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"56422959574aba25d1461d4e7ebd168437ebf9a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8135cc085.0","@material/base":"7.0.0-canary.8135cc085.0","@material/shape":"7.0.0-canary.8135cc085.0","@material/theme":"7.0.0-canary.8135cc085.0","@material/floating-label":"7.0.0-canary.8135cc085.0","@material/feature-targeting":"7.0.0-canary.8135cc085.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.8135cc085.0_1588794961317_0.908560212542199","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/notched-outline","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.deb212de4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a282cf829dcce09f0376b955ecbc794340933a9f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.deb212de4.0.tgz","fileCount":34,"integrity":"sha512-YOxxMdRk3R3W7r+2pbBufFR6/X29SSNUKNBbWHTZVhZP9SpVA9zlynZK9xIQZhpvRwK8fi4egd7JJPcaim/LsQ==","signatures":[{"sig":"MEUCIQCX/qHLT6qBSVBEPnaDg/NuB5WpgbyF03mlYKtQMd9QRwIgcMaZ8MX2csBQIMS7iBmGeDIUyAiJPZxIzwiN2KvsjkQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszf5CRA9TVsSAnZWagAA6WMP/0blDbTNaCns9qH63vrh\nEwiiGRRwSjpnEKCv2i48AJs28woOBUG4hQmXbfsBCG4rGYcsTpQ647aSSvUz\n8nLqpgg3W2bVPtAV4WfxCYMHMAnJUp1rvqfsXSOZucI8XvTuLLT2EvC9k6KK\noJ1xcu7W8ip86qCMI+UImvBAvbjt1H9oh1jTnuWM0grRCcpfGqTsipCPegfp\n9gLR+vFFOfT99nN1rI5+Ir1/uOHj7ruZnT2wdXbLst3L23CsoCuNUcR2N3yc\n9/P7KQJ2UaC8hQOtVvj81ku9mV0VhZHVwr6DqviMmeLYkv9NX13OK0sZy84t\nwMQlWFjCwUSRxYrxUFq+6cIbz9sXYjpn8Xq+GG9PKfwv93LzJN5R+m5i1OlB\nYQe0ZHFkP7qYw2uwYyyOLQQCOsHJw4+gQjkMQ7/VCo92BJL1gudNv1ze6t+P\np9BiCseyENvjKs3nyIFbKp3K0LnvjPsq+9msgL39uZxZA3H1eEkqVGxjDAbt\n+huiUO2A230yObYrj7M6lv5KlRiyQb4hTd0lHGX/lLB5ceHviPVO5mN2KV5g\n0bN8knH3ehWCuoAdRjj56k5eXet4tuRfmpmqEaVLU/kiwBXJlIx7v4dVFpCG\nVFg+527ALImWlloJnLvjYB8j93kCicFbS24HhPR1d3zTlcJI06EitxWzPLUm\nVeEK\r\n=a/L1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fe9c146f82589e5f1c471dbb4986ed6b3a7caf54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.deb212de4.0","@material/base":"7.0.0-canary.deb212de4.0","@material/shape":"7.0.0-canary.deb212de4.0","@material/theme":"7.0.0-canary.deb212de4.0","@material/floating-label":"7.0.0-canary.deb212de4.0","@material/feature-targeting":"7.0.0-canary.deb212de4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.deb212de4.0_1588803576586_0.9541525102979291","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/notched-outline","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.f83e00898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ee8d31bba03aa0dbf7cb5551518aedbdb69d368","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.f83e00898.0.tgz","fileCount":34,"integrity":"sha512-RB6ri1e6e00YeVOdgCz+TpOhHR+jsjwx6aUm+4g1y23qTCMvkd5M3/9blFVOxjZXyPoSChtMlgRYmFb8mlDSYg==","signatures":[{"sig":"MEQCIEOm95rfejYT1pHTvH8FA2eIjRT6qFTxigA5DIcG0qJqAiA2nampRjxFUMrI+89ibGwzRUR4Yuk+KDvrqSfXVehkkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDxLCRA9TVsSAnZWagAA+iwP+QGnpcHOB7HeM65V3NqN\nRhgV8sy9l9uInarCwBPU4fKcdTA7F5qD46Ifgk1jU4uRIESw7jFuW3VzC78T\n/yk0Oi9sGtQxORtoR5e7ivIDGWR31gRyX85CsPao2Y9oaIp5R2y54BP8IKvV\nFmSe/76Wh6Rk0ix/x9eZWRMNDvhR1X7+BLdOl+rd8/euGOfdhc0XS8J26ZJf\nJUxXtlmX377gnUQbzhiAKezy/RvrpZnKIHy9EovnrmNVS241m7QZ4mI01+rb\nK/URxNx+TeYrK44xnqEuFgQupU95BWZ/BkbjRCaCOgzPIHLbalOxDJ/oqI4+\nsDUbVsX8fJ6+BxjijAJFq8dT7msO4KGnB7QguQ23W0xSqxBNjllBiHzunfNv\nYRj5iVJft6j1EagzX9XLqJLwkN2f3ckx4TEsuZNvEqiLISUrKI204nYQOTU3\n0hga2YneArcaySyVuwHiI1bIvI8jaSXLb+NQdeXkqfc3sfNOIPcHZg9dYRQ0\nm5ArBQmxTF+O6yIdx0bZ68NbI7lB5Tw0o9NyfvvXndjxuQpjk19VGA0fdtZA\nUrnRsZ65rMuDk9sCUBMfpfGR11rbrD7I1E/phUVWBBRREU46fGj6jEsNq52C\nCMbbx0Q9npx0ACjL0YSEijzXNnVngssdLZ8P96KV+8AlrAaP+wRluGPAkKpi\nVOc7\r\n=yLBf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"02060afc2f5dcb762e9083970f865f1c714a38f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.f83e00898.0","@material/base":"7.0.0-canary.f83e00898.0","@material/shape":"7.0.0-canary.f83e00898.0","@material/theme":"7.0.0-canary.f83e00898.0","@material/floating-label":"7.0.0-canary.f83e00898.0","@material/feature-targeting":"7.0.0-canary.f83e00898.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.f83e00898.0_1588870218538_0.14191743978470495","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/notched-outline","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.047e6b337.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88eae0e47ad1614a54349d7fc16ee9fb92bc9257","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.047e6b337.0.tgz","fileCount":34,"integrity":"sha512-2zzVcI/bA5X2wygTFDDiqI2bap5nHwuw2iKA1VsLxLroYMxnELSmrEV2FsMpDDtylUn6JpenoFF1+w6P7aofnQ==","signatures":[{"sig":"MEYCIQDVkvXrCu51aXitoQL+0+fIai0e4i44AB2YBhvswHafTQIhAIcfFm+8qYYsJcOag8ihiAE4vvYNKczvkNQ9Ig40wBaq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetadXCRA9TVsSAnZWagAACw8P/0etWukbrMr+H9wk9zqH\nc8LVGXAenqgl2J75SnSp5Z1V9O1kIMg/KReXvMjcEQJMFZSdWT+l0Ox5kl6F\nKN727TkajnaY/dk65uUnw2bnvLuAz13fb91K7BPyXH3QrhH7bsZJ33Eke+1f\n6tytS1FoxJHWrGJ/+i7xGSanb6IOZVRPd4d2zsI4YVHNEDcIaXoqJ3j/BVoZ\nUmzZ3RvQKVBzMHZ+bLjzZeuAdbs/Os9yQ2XQtKbVYaPjJEUb3iVohQcvA+aa\nyCVuEJiaXuwpR8IISQCBjvno+QKhxh8l8jRFYv+Yr52bV8X2vSb/3YDCGJzo\n8aOLlwp8p1z8YNWMMsnNO492/W6NsBKSLbjB8+cKgc4ZknwMiDbefTPvMLuV\nF5xSzKHBL1xbMhTMjDtw7RT68Yo/mwu4XxnQnUYeDG4KvjRdRiZOkkNSEZGp\nR7DjnpEdYlqGTWF4Rf55f+v77kzU4fUsOzk5GAr4Ll1bvbQJ15uu2nrEhRjj\ngWniUcLtwyKS8p2Krsxj+t7wvpgb4RwLGC7d8POWE6GI5ZsIfT/Q5BcMdRi7\n3wikRlQDvJql6Oq/foGm2A9y0r9snaSatVzBQdhkrLvb1ovqZ8YDvXwudhLU\n3XQwJsrrqpBIKVCMLGjr/MpTQdJ1FwUTrBrVaEVnZ7PuNQy6oRJ5zVj0pfIn\n8wG2\r\n=3jVS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2be3b5993e14d0bddf55fdb157837e5593ca217a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.047e6b337.0","@material/base":"7.0.0-canary.047e6b337.0","@material/shape":"7.0.0-canary.047e6b337.0","@material/theme":"7.0.0-canary.047e6b337.0","@material/floating-label":"7.0.0-canary.047e6b337.0","@material/feature-targeting":"7.0.0-canary.047e6b337.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.047e6b337.0_1588963158560_0.7276832631092434","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/notched-outline","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.119e21426.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09506cb3b4bad8388f5dbb88a4e5ca19bc9b506f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.119e21426.0.tgz","fileCount":34,"integrity":"sha512-Bgc9dNYQER28Q67UEcSbXQrGxdMXcdYRRlNTzKm+e7gTvHX0O62DUtFhjQ+7fidOzrdHejq6c+ott7lvdAoC1g==","signatures":[{"sig":"MEQCIA4SPeWpOFvDyrqSJyFlJe2urAw8j8q/yXCTV27JlOHeAiA19tPV70c7gkaaznJOEVRGzN7kxDA/HEX+er234pxksQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb+wCRA9TVsSAnZWagAA7QgP/i1z2y9JUucgWg6Chzmj\nDC4y3RYT7jmWlQm4klFBGZ5ZHE5pN9Hp4v5jUOxOGlIyPQ+UnuPt1KvN/zS0\ndtJXOsSwAqzrx1yPqE8Ec0i6eLw97KYxLyw6cWm5Sj3TrVOqi0gzYmuG6hY0\nm+RwwHGSzUbi3YfZr65ncgggDhhILoVz1ZM7F1k/IX6xFHKOICRbMLbnDYk5\nHbuBnZnqrQAiVOQ6owLB57UrOBefuMhubyrT16PmGKBaP/3Bm++x1mn7ZKAg\n9jxf8PyCGEAHer9gEPc9nUhdCSuFuyWHbQmLlRfoLO1zzwvcFbDhQj5q0EJI\nKICTBcBZNeL8M72TWF6Q5i4KCnREYN3cmBZyhlucisacoJaWQx0EgHQ6eNMT\na2jhcPMGYPXK+OOJBndSzjmkRHBnqrc0p09l0G/F0Aeyecx9qawqwqDHxxjj\nneo3hg7cQKzAMRpN9frIrfxdLDjcX3DGnTFiJMrZo11RCf6qGwWBxvqwrwZZ\nbixVIBvc2JeQEqziX+A0ePCueHuuxDA/pBOEY/0+8vM6lEvA5ujlVvzyoPAk\n98b4womvG79zohVdpJHUKGUoSkmtqmEAWK+gIzswAyHeiKwia6ZaSJOd0fcu\n+ZAs5SgQqPlTVguVtxPZMT+vvjrrvzihAa+ysKXAqS3RfZobwAmD+95Rtu8J\nwZAe\r\n=it0T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"693ba4159b1a25af6955ffb1ce0555d7a989aba9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.119e21426.0","@material/base":"7.0.0-canary.119e21426.0","@material/shape":"7.0.0-canary.119e21426.0","@material/theme":"7.0.0-canary.119e21426.0","@material/floating-label":"7.0.0-canary.119e21426.0","@material/feature-targeting":"7.0.0-canary.119e21426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.119e21426.0_1588969391956_0.9785546433575785","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/notched-outline","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.2f052d824.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8da5b0495c695921af629355de2f7928d9cfd905","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.2f052d824.0.tgz","fileCount":34,"integrity":"sha512-BTjcqLRd+s8Mqymgv2c36VUpyVpgUSLVM1s4YPgAfomax5qZy2ePfsaf/tXqJYb4ubBp7f75ebbNSujaTlyByQ==","signatures":[{"sig":"MEUCIQCOIiG+0V+Tnu6aUenM5/awhYybTEw7+jBHn/KICIDvGQIga8Tdr97cjiEKc21bw4c3MTOGvIrahdSURbSS9HIGYAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcpGCRA9TVsSAnZWagAAHkgQAJ2WsX6MsJrIp37nRrFj\nsW6TBMpkgkkkgoONyG+CvFKqHuUUksC8GOldbr0WuqSZV4MWMrLD4AUG36hV\nfvmzlViOjiTKxtQ0YTT3pOuHFtsZhRv0l8wWC9A/PYeV3Q28TIWGpWs9n+LR\n1YcB2ixoklomOc9m7dCD6gGOTAgqH9uXFiZKYhjA9dEDco0rz1Ml420M1jqt\nOsXXQCCQsmaoZzC6k8HxRCj5AgQiiSflJFD3wzGZF9+0b7JVEh3QACdsuptM\ndbbyq+6wbwyb3fnvDNyyhGQxlWY4oVKwb7Jt5UY/6PpUUwfXa8ApTdNaJajV\nLnV2PYd/8CLqg+n3SPz7Pl/axngcupRk4YvSqllIdCuSOnPN9+WiiaK+znoN\nOvtEKYyaEY8rEgSoeHfRYodAriQUQ7hs5FtDJtoTkCph/4OQ+9PkeUYPEYc6\n4touFi4KMgkd/9y4s6YFZBTG5cfWY8aDXS9x5Awv/jjcbfatt9Oc3f02wZIg\nH6Bv7+Mk7PkfDVS4Jhmrgzu17GyQpoPiLMQH5jS2H43pYu81KG49X7wz4bdZ\ne+JaTaaS8kET3YTAlXgUOhsBPj6lqlbmQd0jPpzOQqCWGIu5OqRo0Al3HpcJ\nvOc09NSfW9GAOh1qUWHEXGXF/It3JA5GSv8DMKfiubND1ykQE9Aoo2J4WL6u\nfNwH\r\n=eakY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e3bfb78e98db35607ba75f333490d9693f14e844","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2f052d824.0","@material/base":"7.0.0-canary.2f052d824.0","@material/shape":"7.0.0-canary.2f052d824.0","@material/theme":"7.0.0-canary.2f052d824.0","@material/floating-label":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.2f052d824.0_1588972102428_0.3873563931908557","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/notched-outline","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.e84444387.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d120244ddd6b1391a631993db16fe8105c2dc5b3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.e84444387.0.tgz","fileCount":34,"integrity":"sha512-RyDa/j7dR19ZymGTvaVq2iEKfZeG99zY9+y2UWRMRM0+WCHqbM5x0XGF8FBiecNtQ/S0Bt5GnJATONu37Mw0Zg==","signatures":[{"sig":"MEQCIGKeD69h7fp39q3+bgRdREIwMjKZYfMg0J1rKGNoqGB6AiBaXowiOO0ONmpwbqN/w0H/QRmdmIDWMyxfgbHPO/gW4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc/rCRA9TVsSAnZWagAAe8kQAJwzy/TLFuZ9GO7ZFM1m\nO20lJJze7ZDhhnQpVbUgKhbna9+PqJA7FGUrccVllppPgoWO4doGsMm+vNWB\nrGDY1MGyauPT/qyiRAv9OpDtL3U1yZ2ma7EneM9NsY6gp45egYs1K9jVfzq2\nPQKQR7CVLgkmad+PNKRu0639hMSzFVy7XZIBf5W0u9SUsm2dxSGRnZ63M/bq\nFS9drVbJUNmewQvckWx5AsQFJ2uT32qVWaIhSWOsMSn4uGDKErzNPRn5f3+y\nWv1Hsm0Pd5PVxQrbhLm4rkVUCiSnBvCp5MEz6OEJGuROVFxEYBDDKPhMZFcf\nU81I8UxYJ5oL5QpzagJjzAJdjlW9H6IYfH1zBHcErreEfXo0GOgwkgcQAer5\nCN7NwkOhaKrzYiTQm0ME9SgaT8cQuVkvTh4PfLhNS8TWWWVd84hJS22132ja\ncx3kk770x/6hQgR2jYYm8nPJzAMosRFJEtH5QruIAxDTfgqWw3NXfATr9bNd\nLnSz5Fu48oUY5Cwn9VURCZlrUgPlXvLiBPqug0CEeMGSkQCnSzfgCDEFC+Zj\nYEHuZoHHK529hBtIbDZMNnmsCOmVj+96m8aXiX1XZrQFx3PudIqj6BZRUC5b\nkJWzZ3hl/OyJMhS/6swIMgsrQHdauBXDi45dW9vwzY3GuIue5R4LjTk/rI8A\njRlI\r\n=NFa/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"35f59683bcff8d7b2e79ea4f582488d0d86b0b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.e84444387.0","@material/base":"7.0.0-canary.e84444387.0","@material/shape":"7.0.0-canary.e84444387.0","@material/theme":"7.0.0-canary.e84444387.0","@material/floating-label":"7.0.0-canary.e84444387.0","@material/feature-targeting":"7.0.0-canary.e84444387.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.e84444387.0_1588973546900_0.4631312938278165","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/notched-outline","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.893eb1876.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78fe9ac9719885d3525d20a195c3043b8bc63178","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.893eb1876.0.tgz","fileCount":34,"integrity":"sha512-DD5I3lgn/D7eBBDewHVV9RVAGR6/0yyRXx1lCpK2Ko1cCmulMYSKY7OUXw6Q2e1n1K9xT6rt2+T9/9JmHPl+Aw==","signatures":[{"sig":"MEQCIHtW6wR/bw9N6MXOYJU+hTfsaCsXiN3wIGSYAfqQ9nROAiBaGSd/IO1rWrQVqjaHEs1o25U7YCceXPE37tnGFdG0gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV2wCRA9TVsSAnZWagAAgIsQAJ+SATI1YWS2ZjSVzj1i\naNSiPB0rKXOVU4dTGJiaQtzifm/xlAEtirJr3d6YIdoLsFmBGmsp32dChBdw\nTDXA3a0IP+toy0xgt89v4GPcaCBQ6zlHvUVgaaN5PwKwesEmEKQwYlhXSlyz\nkqIZKxIc0OpX/un6AaFkvHBJmXSZArAekH0AcHjvzZX85ThQgkMBqaja/UoK\nOe1IgBZs5rzxvrltR2pJWmd9oCZkMnnS1yiBLcIJfLcMxhSepqcU9wGux14I\ng3lj1yS+JaqYNYXNTbEBjSi8vuS0gNLzuUI5u7gZ5LiKfhRweNRb0gENFFdK\nifzadvNDiNEQSbb8mERU6eA4WyLbNIOVpvyKvfnQIZ/EkIEqxi6ZLwkcoXB2\n3TiPkQM/DPOEY9JwGNHjJiW7pFKnDIgiR7rsLWFX3LTruXaAy5GE65oCPiee\nM0aveiyIOm002VbL2I42pHNO94Ao/IJS8k8UsRaztJfKxDWZZJaAU8Ti3cqB\n1XxcP0L6drtanDWjfDAGSpdpBna8MAt6AusOk+nQzr52B7CkQd91zpxADWUs\np1mVkqk0D4xH5GVx1kYPkPrJaq82iQMj7i/bsA0LOiBQXRQurh4cpuBW32lp\nMtwoTYDPUMp7I4vebB3+w81/OhXUrUvY/F5XU7CLPAWxSHdmkeEypCjA1NnT\nDLdC\r\n=I4In\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4bf9fb733753ef4cba5683a95a2f2a71a743a68e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.893eb1876.0","@material/base":"7.0.0-canary.893eb1876.0","@material/shape":"7.0.0-canary.893eb1876.0","@material/theme":"7.0.0-canary.893eb1876.0","@material/floating-label":"7.0.0-canary.893eb1876.0","@material/feature-targeting":"7.0.0-canary.893eb1876.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.893eb1876.0_1589206447728_0.46511738274089365","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/notched-outline","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.a5aeb3001.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9adfc4518f83e16080fc9f0ef87b34af86c1e6ca","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.a5aeb3001.0.tgz","fileCount":34,"integrity":"sha512-LesVxHhRUwLipNUCvtft8F6QRsUvbfQedMuhoXVlx309BieZCx7kLlp/u+Qh0PExZgc6uo3/ElKJyvd09aK3Pw==","signatures":[{"sig":"MEYCIQCnBHkBVDWdkfBlNUywd1OWKiFyjmKp0iSJd7TVLbvXJwIhAN4I/htadLe4cI2QH7mfi/VpPAZFRgUo8qDNZ42BQ7sh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWF8CRA9TVsSAnZWagAATpIP/iB1PMeE/bK22RAbLbFJ\nbl2Bi5pX/ySFYL0099q7wcx1slZsDAK1RluOpLsEr9ep+Cjt5w8b0p+1dL6N\nAGLW3bjNHTezI2M7dsXkLbPc2JfrErZ2m9OMYUUQNGKZ5y406IP+L/fJd6cu\nY1GbZA5yGbtdgSUtG3HTn9IA1ALn4neNf0Amf7vyCfisDiNIrW059IRrunlN\n3wfKDQxFU8s8sK6SYKonOJtUp9hH00vCgdCgnKYIqRGoWq8QN0ByyQHcORk6\n6tKsQbrGgSdarkAARCPyEVtuHMdd83Q8j8NXbrNzXQ5WORZ5k8uIMbSDbIDe\n+AVfk5nYHvlvStN9wModx875Urg6TrcEPNHEGOnnAcFz0R2v3/kgWX3KsjO9\nnybFFEBELy+HaVQa2NUmMpn5hRTGuqXaA0JLTMvuzGX7K2GJeOkxP8CBCVjw\nuYRq6R3dSdKobt8jLwdWGBsGTIVxoarM6x5Wx4qvbvCFbXoTexgcin2Y/QtR\ndQjgKQ38XQL8OL+E4e97SwhsM/Ia8aAT+FuK327nJrRztViwNjov2slXGPiX\nXx4IO1hNLNCPZmARKPtz+v9OjMAQ9ANZ6UflsF6+pQBjZ8PvAXmu2frzbfj+\nuYIJ6AiC7RuP2QHq66Kud6gROCJlhu+y0YvAxcOcPGi/zavEpX2Ysz7U/0b3\ny/7T\r\n=WWVM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"01ce640dffe32b7838dec108ffb4d0c40d3e7bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a5aeb3001.0","@material/base":"7.0.0-canary.a5aeb3001.0","@material/shape":"7.0.0-canary.a5aeb3001.0","@material/theme":"7.0.0-canary.a5aeb3001.0","@material/floating-label":"7.0.0-canary.a5aeb3001.0","@material/feature-targeting":"7.0.0-canary.a5aeb3001.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.a5aeb3001.0_1589207419821_0.16487415398711036","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/notched-outline","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.610c68d97.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c715437aecdee7f58f357d905aacd8032b8f9437","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.610c68d97.0.tgz","fileCount":34,"integrity":"sha512-t+fawjOb7wpIpOlvxlPdxJ63D11qA7ls1qiVjlOzSJ29gKFk7ulOZrBj5u9I0LEz5DOFItTUvzfOmY7u40ateQ==","signatures":[{"sig":"MEUCIBfiZSM9NnI1UZF3dl2FzvzwJVFvvGmfsDvQ+InHI3EyAiEA9cKj/s3jMVTuXDZ7XpVpyHFITLje/UeLrrH8vHW7XzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuaiQCRA9TVsSAnZWagAAFicP/0vSHWCMZ5FfIN6y94f9\nkV2oU1KeEgfl8v2kt3lnhOLdm/bn/JImBcjOEiabrI7vTZWd+2XM1HLc9eCB\nTDvGSD9ozajk+Vys/3zYWJ/iIQ8Sw5zUaZNrJs5JgTGkDbj7M+/bzhovC4dQ\nZG/Z2KZ0J2PndZ7+OfqcTsmqDfFWt7BWgewhUlXtE+f4J2RNvMbb+6V0sMZO\nwGj5bFe7LrhAlX3LrukV0TGKZYSItbjO3U9aiRdaBL8SWiv52YhdRfffhcAH\noLkfSz5pScP3MqgEiykOpCSCvWzlI0eV8ORzOFM5lZ79OBgyKfJ/ISiAivH/\nhnP+PChLpwLJzyqmzYVichdI1Eh7hexj26Prw1rpWTLpfhLRy6kXsUe7lBU1\ndad6s20qef9g19/7yBSqSHp+N36ITj0z/wY36pkXxU5/M9teGwpWRop/ulKc\nok5rz40L3BS79SIWqvV/kp65GheXpdrzTxVofF3ZdaskxSUOGbDCoAzfrijI\nVbVqyj8KevgYJaaWfEDwkR6zdoDh2HGDZNg08qxhRQDp4bELRrhZDVztlXkE\nWvIcs41hmUDHp4xivUPeWTgK0fn0/dw5wxU1HdjoaKl5CtIXhMW1VXmhrMkJ\nv/SI1fwmHsw6o8w4HgLj4cfV8sHfg26RiSuCO5MrHAYFbNwkxm9lkkkoFFgz\nWO8o\r\n=ReyA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ac4b0339093446110cc551732ef34ba30b4f4a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.610c68d97.0","@material/base":"7.0.0-canary.610c68d97.0","@material/shape":"7.0.0-canary.610c68d97.0","@material/theme":"7.0.0-canary.610c68d97.0","@material/floating-label":"7.0.0-canary.610c68d97.0","@material/feature-targeting":"7.0.0-canary.610c68d97.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.610c68d97.0_1589225615677_0.1992088254234008","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/notched-outline","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.ed52af767.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae1f99e38fceb26ab442e1903fd713b8a70b991a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.ed52af767.0.tgz","fileCount":34,"integrity":"sha512-KmLoL2xGCBLNClsqTTwPstSo+DyCwxkaQryquDmrONuDybfIX3IQU5p7L8I/h6cyhEnvorLbH9gv370oBIPJsw==","signatures":[{"sig":"MEYCIQCA33pEqrBckO/9kERRKAFyAlZGeqySvcRdO1AZYZwcUAIhAOYey4qjhakE6so34yKKlxfnY3ySmA4Z0/5MxG0OYuAC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubVaCRA9TVsSAnZWagAAwQIQAJohgdnKFU4suSGTAuDJ\nPFGOn1cpIQCj03JWxTA+JJnFd0FqIBymx4uoO/W6Q63+07qAJLtfu7ONPPQY\nkW005f7bGv6KXaJylmR4i1meNGZBCSD+In/HT7h4YCIRp+cOBv9lIiVDkMpO\nvFNNQzZFsDcEWMQ6/YNobINF52YbouSO0UtMoKCVXqxVvRrt5OSlG3vsHadk\nD7DDueS6hHjh1/lJC3VH/XmJWxS94GKtMGzylnkOij1ieOpGKDFjA/azSMe8\n82c/WVqhBS3ixUSaUQZxFftLQCn60hGQC2RXbOVBAlYWBzwpwdPyQdfb6+SP\nA9h80UCWmnaRGRGr8m8ntILioCQ33hP/1BbGlQeFGRLcTZU2IIVobPHHxZEi\ns3NP5mN4l4KsIpziyMu/KhhHUMLlG9lkUnu3bxW60+8m54y4xOkHMvOaWCyM\nyTNGiWIEPtGrck9hvGem/BhAPbADn+wL1KJNtAOPfXodkOI3cgAivBnFKPGY\na0bGXyuXfxq0YtvM1tyF3w1M2uvcyAJZmwrHix4Do5SkLl1qd681NzKqCJNN\n2vSH7N+6npmb1a/1ZSqxkgmGSRDzH3VX6aFk8oyrp2q0JpDOsAIRWzh9y6kK\n+NBlxb0ZSRfbiUO38n2jcApHLQFBkEDj/KpDpJbI8w8rVqoMGEYdSq5k7SWX\nh7Ce\r\n=9Jbf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"06b24ff740d1a29e8764ec98f735b6fef77dc5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ed52af767.0","@material/base":"7.0.0-canary.ed52af767.0","@material/shape":"7.0.0-canary.ed52af767.0","@material/theme":"7.0.0-canary.ed52af767.0","@material/floating-label":"7.0.0-canary.ed52af767.0","@material/feature-targeting":"7.0.0-canary.ed52af767.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.ed52af767.0_1589228890175_0.970015414272388","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/notched-outline","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.058cfd23c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7ba633cd3166f5ec3f0ef285ce54d383a860a7e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.058cfd23c.0.tgz","fileCount":34,"integrity":"sha512-bJ68ROK//GgYTpo3DFY/EzjooKzBCNPKAAhP72rHrRKqZo7ca4ar3DC5Gv5bYfX0DPwqCitEOHSF39DMjdDtRw==","signatures":[{"sig":"MEUCIQCOeDwKU/7DfcsTsc/eea3mAuBJMn+ySf1ddbHhMDVRrwIgVYCfNnj1n98ljgBoMpgE4QVpcIhiw7FX9lx7z52aAlA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucLmCRA9TVsSAnZWagAAl08P/iZTrcvowAKjwDZQ4b5l\npm6/0K7XuIfoq0fi6kyerd+gmQbYLoqEbuPw/vupEfyG1jid1K2+vZ7ghEVi\nkx77BVOjH/jMBMUJp45rOaKpvK+3jrHmKztPqwncNGKaI7nAIfbr86joida/\naOc8u0/R3l8OsAeR/h/c20JJaVrQLObNo1DChVE9KANL1cWFoBw+nwBJbGBo\nXJ6Q0MSAiqZYKaSVR1FRxvCcOMb8Ar5T8DD0vVmEKeOe4EvU377YIULgACKi\nKrcc1GaOuxIbeCF8NClFk232j7M8TfD5CKTiz6U09ens7gBtbwBmK4h9Voe9\n0Nb9UgFWXcukvEpsTuTZzlMVEmNx+k0NHxJEfHBmIg/2Rnh3SbMlopKDVBFt\nY+hwdtwj6V9V+T7er5opeVsoG3P802SJAs+U6jkya9iYi5cDwdsXKozzUIAi\n3dXggYx9FuyDH0AOwuKpPesw2gRUwaD5Ts2L3mVssvm0bFf11PZ9izRQLl3d\nw7+CItOwkR/ya64pAcQtyPg8Krhu7dAiOv841+KUjxdDiyBf9EL7J9ud5v4U\nEnAhQbrMzdkeFmw/CHcX4tSwqijqRGqG/6GowykN2zk43LPlW1Hoqdy7eHUI\nK0DodRDfvEvIvKNdZHU/XQnUs5RUTpbOWpt1wEwhhWfAFRn6/d0v55qAuz8R\nWGBd\r\n=5Ya0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e012af26b00c720a751210639bef8379d1085234","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.058cfd23c.0","@material/base":"7.0.0-canary.058cfd23c.0","@material/shape":"7.0.0-canary.058cfd23c.0","@material/theme":"7.0.0-canary.058cfd23c.0","@material/floating-label":"7.0.0-canary.058cfd23c.0","@material/feature-targeting":"7.0.0-canary.058cfd23c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.058cfd23c.0_1589232357660_0.8675380566194495","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/notched-outline","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.0a371b4fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81b8ef55db2fbd25963d9b736ad6f9f0e4faff6a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.0a371b4fe.0.tgz","fileCount":34,"integrity":"sha512-j74yUFuP1q53ZL7bKrLyfQWv65bl5A20x4P/uSc2jM4inK744f5iDJckKUvhic6VOVLLD4lngt/K0tzBako5lA==","signatures":[{"sig":"MEYCIQC1QI9tL51ABAbmXte38AEVnniPaOvQI1DphAsHLfXYagIhAJBRdv8tfhBqs/xcnPS4Yw21aiDK6WQh7ax/u0uXmymc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy71CRA9TVsSAnZWagAAjPEP/3PpVu2fFHd7DOn5Onx2\nZio7S/U+H1gxpftRKRTzedzkXaK4v5Nqt8GrufdUOuqTW2KqpEKsgUfXu9tS\n3bjmd09L4sPDgRdCgXzf+mlxnsdm90dDlqIBE4gmg3qi+QUWmnc88hVChxfM\nncj4yEU3cgoXAKVjLgzS+728v2kRq6pOx+8kjxtupullPQDHsXL9HMHRWetM\naUr8VDWu9KTxv3Bq7obLCPAwIvONA3pFy5/r3TjjseFCBZLEtGrDUrFT2Ub6\ngWevcqUyedpKX7W1KyiP0I5Fijg9uijaz+TbiNmszwQ+AMh/3Ev2Wis0VPmJ\nSoRdDf0XOP0vW00fm65irRqoWM6HC12aifYKn4X2I+95+Cix3aVQq1F0KxiY\n7AWxpsHoKT5876p7ahMqhKlUj9TaKxtdEXqytSfkaiCsW+il+0JdUQqC2xVc\nu3+7xykn76RJd8SySG2+v5kCYSgxDovBZR7gL0xJ/MYsZTP6c0cfpOidLhPs\nJFsHaKsJQSSknsW0YjDvGml1SIc8NlrZYEb6iKVsX8vOUGzIEcTz+D6VNvap\nwMBqPm6Gc055OK1tq/2TgX0PgGe2Y6pMjMqhkGvYQhF/8mKn9S4eIBGtS5zL\nW8McAtpJ7sO4mSREcloNOvqgonMg4/NN+CVejGv3boGY6M/BwSWcWgbzZwEk\nOxs6\r\n=l7lI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c3c5efa159a3a5dd1da72a8e4e94015fb7984f7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0a371b4fe.0","@material/base":"7.0.0-canary.0a371b4fe.0","@material/shape":"7.0.0-canary.0a371b4fe.0","@material/theme":"7.0.0-canary.0a371b4fe.0","@material/floating-label":"7.0.0-canary.0a371b4fe.0","@material/feature-targeting":"7.0.0-canary.0a371b4fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.0a371b4fe.0_1589325556854_0.21756335055730247","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/notched-outline","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.2139200b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f96d085ca13155e05f962278cc0ac531a6fcb599","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.2139200b3.0.tgz","fileCount":34,"integrity":"sha512-lh/h78dIXVnhihHkzUGuSl+4TODBuAhdOos6jha/JavocZfmeD2PUoJPVoVJ8H3vEepvE4YZaWzllNsr6bLLdw==","signatures":[{"sig":"MEUCIQDT1zwgS7hujXqi2plhEA+tjHnKqr/0mqd1r0kB0YuLXwIgB9v2phrCVr5aJPwT4pwvf/n3uybmmLb/jr6JVmh40qg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAixCRA9TVsSAnZWagAAp5oQAItiIIJZS4IExmPsX56k\nREp9JbsNmWbHoglfjXpRJoa2H9LHBidugT+/5pYC7OubastE48xysXTTBbJk\nTibwgncBXjRY8MYJQQEJVho8dqp9PQbUtlqGdrbcAoLRzal8kEOSCf9Br31w\nWxHFixA4NUN8SmBV0dWVp9pIzECK/DH7eWgI4kbTf3rdPBifpGF9ny1QmZ1u\nsbZkpD6Z5Qn/MpBqp0OeVEdxT1cK5OgUitmDNr+SOW+bhYujb3oiN20OxYU8\nGuvFUcIAMjloh11l4dTNg3fPP19zg6BOIgEwKQq2Ts//bdbAnt2tGEq7hnjO\n/91QRbkUgVr2/J+jLbgYqL/V4A/j1eTTBfT0P+bNAYVXIk7aGUgaTy0+bZYM\n4F1MIG8LG90KoCDqdfZqTCDllYXGqSqZdaf9roaT5OyjTj3Q8wo/tfzrSlRi\nSsAQGvhMKSjM9wg0NB4t7Gy+AIhko7unRNk4o7aQL7Y+S/S6aT16MG54EHEQ\nIHPqp3aJe37Q8o+RHq9F/eRbi4IuKH/BBzAIR5vDp373fLucgPbvx0siYx8M\nxc/jfBJDK12iwSdABFF6+pQ3PDqkYpuEPxoAfDlc0m1KMXNTB/shETNQ/caY\nrNiD6lR5UK2Zrxw2M0TzYqGkih0+FpMExA8sF3jwm8VDLSujTUWdIlluy+Tf\nbYM7\r\n=dONz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"42c214d2b2b544f76002d71be276eb747a69d9d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2139200b3.0","@material/base":"7.0.0-canary.2139200b3.0","@material/shape":"7.0.0-canary.2139200b3.0","@material/theme":"7.0.0-canary.2139200b3.0","@material/floating-label":"7.0.0-canary.2139200b3.0","@material/feature-targeting":"7.0.0-canary.2139200b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.2139200b3.0_1589381296563_0.5683466978055001","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/notched-outline","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.744d751a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"783989879b98a09add268dd5661c5fe801e5351b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.744d751a0.0.tgz","fileCount":34,"integrity":"sha512-JgnXpxtn0wKpg2lWaQYG/5hVjV1c59IebsN+YM+fohK3V9RkC5HsrjHZ1aSj3G7cUcpmWvB9moybRDt5FfR7UA==","signatures":[{"sig":"MEUCIQD/k2tNh/gbY2LiiPj266COi1qqXDxsiRXtE5l7SNMbSgIgcrSD/FGwMoUm0E9kCPPp0q8hCn7WQfay4PpShWPm/vY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMx+CRA9TVsSAnZWagAAKpwP/ioow+aI7a1KlItVidjI\n+pSSE/43TADka5wm4NrlnyEx2OVd+4DW2aymbMAAJYcqhSsVTyh7hw92PCuM\nSRAhOPuqLb9o7QLQkKicJm2jiEeUl/nNOp9zgqaLFQBvvDiC1G1WHUcG3LbZ\niVMqKyuUBB7FsAmWy6Z2ZDlD6ZuJ449EtNywfEDRAkSvsS1YTmvk1AURl20f\n4K1yAAlraOBErTOnIxV6po4dWHTShFoOCx9LSqHLZnKJOx0uPe/2keaP+uPI\n6q1nrKp2SJrOaDBlYKAUVvRm6tMrdmXWHs1hnI3zveYKVYRwwo5HFJqrPH74\n+5YK3WEvT6eCg+Hotpg5Wf9MtfPXO9aze+hjkfbYIkE7g16ZRXntDGHDLQAO\nTMBiH1J+Z/sLuDMdvoOtfiSIrYyvPA4QgiUW3ejnCCRpxnq13rGgq0i39TcA\n4lfP1DW6l/2fR8eKwFY0QUDGd+8rv+izOjhHXFujlxUssqGOJcyeHdBhywbY\n78lHDh0UVeTUmvQ6GaMr5UKvxswOV9sAtHIMG3cPxIIYs2U3E8BqqSCUayee\n2rOwC4XMQ9aiNO+669+HXRAGTQ1P88QutHSiTSToxqKIkIVfkO3J4iVAvOJJ\nrS0XCnUCgFHPl+Bq6CAVmXvKhdJWiYwUOLtKPMth73efNZjMi0oK8OQp8KXc\nDhEo\r\n=3jSy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"afc5bacf5330bcdbe874e652a8d6df5e4a35e7c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.744d751a0.0","@material/base":"7.0.0-canary.744d751a0.0","@material/shape":"7.0.0-canary.744d751a0.0","@material/theme":"7.0.0-canary.744d751a0.0","@material/floating-label":"7.0.0-canary.744d751a0.0","@material/feature-targeting":"7.0.0-canary.744d751a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.744d751a0.0_1589431421703_0.7815568835679481","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/notched-outline","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.ad0c0c103.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9badaa5e2649b3d5895df782c8813c2c25f1b005","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.ad0c0c103.0.tgz","fileCount":34,"integrity":"sha512-1EV3Ard08LKvETixt7ryTwZO8Icw8Sdz0fbwtPeP5ekgkavTPKX5XkzOCEwiLHeFke5n/bApmxUormSG/W2Fmw==","signatures":[{"sig":"MEUCIGnM5CRZpo8s0a1aDrUVqnvLab5/L2hHFcDTEtentdwoAiEAwKXiAqKhxz+45YnC+ue4Sq4VAHFkVJdizpf20PmvewI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVs1CRA9TVsSAnZWagAAZSQP/2CXXB4sxr+KpIg9mlzv\nQLeYtPy6ggH0m5UiLfTZhe//nxJwA3rI8tnmVR5LjGbXFUlIpfNel/d6hwGt\nqR3SNgah74XAgG6Pyh86cCuqCDR6jcFB4y0T/AX0ietS/HS9OKeLeoYOdZPs\nv1cTqGBLkqaU5gAvc0RpabGgrG8hRyYfhQrC5QybhHtCbwotSDRtaItBBlTN\nwT2cbm+RbUAwQfTgSTfdwhYqhWOS6zAi6mXHKBc3Xx0Ae9ug5GmXk+f/QiFN\nsbEf3Oxn/gUkyQ0eEaGxxEwrP4XzHXYoLgzn9/nYt2UliRR7P7Kjp27S/BAm\nyOScBmtWhLqRcY+0VNdlqB8G1U+cwAUCVLO1jzFzuEslfB/JOmbwjJs/JkXL\niX3Q9gJNEWAiuw0Yzr5iBYpnJWca6EbVAHcwP2hUQmlRBRTzfrdBLeobljvt\nywD1PwyaP1bBiZSNhVrry9MJYf/O4+MIm6eaaZ7jcR9NUefWrnnz5Vg388mi\nJ42l9mFI9BRQr7RAOYUff2powV6fzNRburget5mhvdZFwaXrb2UxC2oIU6FI\nafJKQqqgNjIMuD3IlCc6lhZCM7USaNhTMDkdl2QIEPdaB2SRUnUNJhvsyq8b\nB5zWYfufprieNi0ozR8QorPHxjXYyWf6D5MWChYXNEyNXQTW53jxr6JZ5LHq\nggAs\r\n=ycl0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"76a0fe161f579d30f0d739918fe09f5f4eef04c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ad0c0c103.0","@material/base":"7.0.0-canary.ad0c0c103.0","@material/shape":"7.0.0-canary.ad0c0c103.0","@material/theme":"7.0.0-canary.ad0c0c103.0","@material/floating-label":"7.0.0-canary.ad0c0c103.0","@material/feature-targeting":"7.0.0-canary.ad0c0c103.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.ad0c0c103.0_1589467951554_0.694845597619633","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/notched-outline","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.fd8f8f2b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"178c635cacc6f5c3b8e83e3464e1e8c2b8795b58","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":34,"integrity":"sha512-uAZLr0g3CQs9sHiihuXhd3BdyGKIaGGYDDjA4CiRRxxFbT+GIaV4KfOPnrkXlwZvRB2jpN6OCmHpXJJiO7vEsw==","signatures":[{"sig":"MEYCIQCZ6kQ1dCy/wSJl4mnwspaxsyAEMHwMnuHLxJBwMypJkwIhAILU3p6C4oB+OHPWuYZ9cGYeGXyDXsFwCtC1vx6ZKqI8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsvaCRA9TVsSAnZWagAAlTsQAJGtzqHoZobXHnv/wlWC\n4Cw9DEj2x8NISxZuIqCq5reDd/Tjch0nztPi2kq/VSaDGbqeHUln6XRk+MW9\ny5sLv6RMSTeyFSGeO8tsZB/yXgZ2QYdjpX7Dl1YvUBamo8g/Huz8VMaep9Pw\n1b4BzEGBKtXYJcYjTMh78RqKZ7WeeHo5yMXb3K3iRfNk/NWYEJF5ORtKzPnI\n9XDP967bEs8iR3dHPELDQxPKjIs1wuB+98+Ga8Nuk85cLXblqqzuJx9xux2m\nJUM37zMKKvryLLvOiCg2NLUWUIZF8jO1IqwYNZDxLHXFiV5+d8/VHVGpiN+t\nZXBNccHQW4ESVpCREOI67Pj7x82XOa1MjAq7ZiAW0JH4Zymlum/SBww7cF4Z\nqZP8LjcwMDeiL9WNnkzfMpmiqK7edJf2lryE6kknxNmokuXNc7u5zhMKiL6a\n7ZGxhrsVMTF3UvMzMOWX4O6oU9V2F96fJ9eIe8ZT12kJ52HeTXKAo7kOlf45\n1vawTJ5t/BZuyKnM8pHSgqLSmx1kUZjnJ7ApE3EAoEIiq0MCnNX4VaSrwXaf\nSsWsov3E4/7AGT+cdwYQTjZ2ZUYUzGHo4ViqHb8NYrVqMscw8YM+7Z5BGDJs\nPsfK8OTXMWUumMgXNdcTT7jmFTPKDFectTcxgxzCMpmI+Zi91I7XB0n67og+\nCZNz\r\n=Btgb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"30fbf3d1582cc530b978714ab043f92bea7c4b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.fd8f8f2b7.0","@material/base":"7.0.0-canary.fd8f8f2b7.0","@material/shape":"7.0.0-canary.fd8f8f2b7.0","@material/theme":"7.0.0-canary.fd8f8f2b7.0","@material/floating-label":"7.0.0-canary.fd8f8f2b7.0","@material/feature-targeting":"7.0.0-canary.fd8f8f2b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.fd8f8f2b7.0_1589824474230_0.5488294511510516","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/notched-outline","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.730920fbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8a5ef536d90e1f9a13bffea1d795a2fb261bb0b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.730920fbb.0.tgz","fileCount":34,"integrity":"sha512-VOlEn7MhHvm7PZ8VvxhM+OZ58GPUZWMGViDkXABgWDzjAeMW1EhOrPO1KzlxSe2ox4WDMpH9QnQlMxvByQtUZA==","signatures":[{"sig":"MEUCIHHu4SJYLFEC2pRh4/RMzHxDh485zPpxudGbm2ICGNsGAiEA6Vd9izvDQ0/2EKJcdWD2Csnav4aG9olfFtpXzzf/PLw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuXJCRA9TVsSAnZWagAAZBYP/jDnHE/mn0uFSynkeMvf\nWtoUTjgCWg17nL5ou+ALgTdC9OvNj+itInF5YOwvkjt5ffhliPQ1I421466O\n3LLzozhDkSZ5D5BDyCfuigNHzAoIyW/KoDDcNQw9Nzgc0csIJsNJaxpU+jz3\n2qmCDBEdIp2jDrWXsc+TFNuNpz5kUoHLvkWNt8EZbAxqlONm/bH5qXZ/37rY\nbQaINRgdXGKnDB4lZEjp8Ac+Dudg0myNvHsIQ/1DO+eS1+Psxe9x160A3L9z\nEV3QOhSny2uugk2aWS1Ww/vgX9h20aTYK9HQcytERwQUvGdQB3212HEMzxZY\ndfo2wiALbthVtbE/+D5BHX/gCwkbOZwyL99OllbLTaKL3CgDExOEkp5QwQZ+\nr1W9F8AGOvmF0gSjmcP2x7wlT2dj/h5v7p1x+mOzlGLhAgIi2jAeKOqqzcK0\neYmXNwLTRfpYJfKZhUYtdALsPFLkJTny2r3MPepxZb56nbNHj62hAl+DtFPE\nzK+pAuE7h/RMeAyuQllPXAS2r51wk0RLIPM8W8g09TaXMhfzq6dNEDByhtlc\nAu+RzIXhIxc0fE5T4fiO0/IQNmHor6bPL6bvtvs6ND70T1l6vGWY//iKcby+\n8nGrh02b7w71xSaUmvu04WE+DpBD1glWQ+w4rFF2DVrum2rn61uecsAi2V2x\nxC1l\r\n=Rsf/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1acee01a3bcc1944050bcc6a38a1846c507db43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.730920fbb.0","@material/base":"7.0.0-canary.730920fbb.0","@material/shape":"7.0.0-canary.730920fbb.0","@material/theme":"7.0.0-canary.730920fbb.0","@material/floating-label":"7.0.0-canary.730920fbb.0","@material/feature-targeting":"7.0.0-canary.730920fbb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.730920fbb.0_1589831112677_0.9169432291236106","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/notched-outline","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.bcdad99bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd5c81e798ac0f2d11851988359a5b60c09d73dd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.bcdad99bb.0.tgz","fileCount":34,"integrity":"sha512-2VaBDtZaoNOCP2z++mTir+1XXBxKnJfWb+Iah/zSsYjdWDRdYOboBuP2krQpB5NYCsM0t6hFcra/fRrsMW55RQ==","signatures":[{"sig":"MEQCID5Vd/X9xJdD2/O11UCHLVGARsE/r37TuJCeIMaiSSiEAiA+l+qpdwizxO6eZVYKgXVvkw4A9UJbQn5FiadJhjikog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1AhCRA9TVsSAnZWagAAmHgP/AmdPHaGOCk1kYMkwg9Q\nGvQT4McIr/BpTc/5ayzR6H05pXn9VSg+WrAaWvjCWR4fNDvOo7zXr9BDsoyT\nq0OQXRvxn4F8v0yTYoQSUHn9SIFQL0hcDzoiUlk+PeaIqAmoi8ap2pQ43u2F\nhZ0wuRKHXAs+bA9//tGm6B1vO5MICl5uxGdN1nOTdp2924U8Zk4dwm5N/Xqw\nhbRmSxPJfNJJAPtkE7RlPcFQnoAdS+MIGUNsyHd3zOGgLAVYSkcy0t1ICyxi\nHQ8qKzxcd77ftwr0V4eDq0Jt7VZfGpzAy72tPCh/Tlqxk3oCtU5DvQKgZE/l\nZMYB0vex3AZf84PvdN82uIHOWLY5/lRybzjeYwbQy2PGybolzSxNB0/ElmPU\n8E0qMLl9Wphf/CrgXT6g+cEN6xa/8AfH51Izg0gmgNHoqlDU+9Fp7WvihJTv\n4VZoHAzx2kANkSRrHf595qeAIFhcnuWv65cIUT44l8yo9tkXBm05No1Ffhit\nqwGJ46icdi3xHOp91l0JD4qlObOO14xzfgJmYZ5FjXB4B7nUV82B3ne5tPx1\nR2yPyynGXb4ETgx7G19UnnPGqTHFCxkWHAcXnw0rIqhxfe4zt8YLJp7SWyAA\nqQIwnk1bJRyrjfU0uvlcbjPfFK3aHc6IqHGaAF9WsgB2JqeO8yD3t/o++GbP\nNBqt\r\n=O+IA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"33c3545075b4fec07083bb484fdd7245d0b243a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bcdad99bb.0","@material/base":"7.0.0-canary.bcdad99bb.0","@material/shape":"7.0.0-canary.bcdad99bb.0","@material/theme":"7.0.0-canary.bcdad99bb.0","@material/floating-label":"7.0.0-canary.bcdad99bb.0","@material/feature-targeting":"7.0.0-canary.bcdad99bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.bcdad99bb.0_1589858336958_0.537366276927711","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/notched-outline","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.4497b86ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4f71e5fc15f2077c43900f9d57a1ebbed74435d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.4497b86ed.0.tgz","fileCount":34,"integrity":"sha512-KFDkilzBhTxaQPVFXFXaPzuGwOr+qIcTvgQrigo7Yq38ALLOhJdEupsgPAhoEBUBISUGxikrDqZc017Pq70SiA==","signatures":[{"sig":"MEUCIQD/qAHlsrnL5LTr0ub4pzsYgUYfMnjWj2SGXWxS56pZgAIgfriIKguMDXclIBkvGyLy+vDOJ8Bxz9nmUQgN1uF0dwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1fLCRA9TVsSAnZWagAAVSQQAKC9/MsT1yh+qL4+hnot\nowIxdcx905QEolgJJxOdZkFQm30pkZSdzFzGt/XF3qpjJ0QeZm4XdoMKN5gP\nWJxgRHUuTr9PLPIvi0UgmMGsiltJ/iE1dFX5waF2h/xryqBzSfdWd/BXn9sU\n7FrOCNDd3fllGX6nw0xzmWq+VPl1jb/0HJZ0CRXkA8i/Yi2V83ACWx16mRGy\n5wbcrHkQeAzUJIAiCm1MpcpdATnIHg+FdU4CbdinavhJMgAQgofgnGev2tgo\nLGVebPotRGW0biyVWom9o/pNW68UDBUFe8wU3ne5isjlQcI0cAhVUsGPY0zw\nq/rqcAryBs/hwkiuxdQoFpVlaqiiS7CNFiEv53CMvrfeu9s5G3giDaPASx8K\nn8psDjB/kNJYPCpZibvWJ+xS9ulZpYZySnkRyV+apJ83MFOjmkuiy1Pkb2ai\n3GPItbMT6+ovpSyWS5p8PkVEr3KtpMGoTPyzgi92AuGZW5vzECyp6SkFlJyA\n9hFy0f1Mgz+Rdr4byhpUBvdAQBOA9kR08ibxadyj+Qfc9/WuXNBe25rd2nl1\nVUJwFkA3F0lqVPbAqLiSOMFY0cTAvee5x9MWnV+pOQ9ZP4qmuuXX6hDM9wWc\n1Uy8wDW1ZeKNIoJSCd9dLDrF+732d8f3ueD9rPK3QayXXb/BXDGry+/QcGK5\noO+e\r\n=cu3g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7ffe8b9fd24f52b80e2fa6a7007881da7c29f885","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4497b86ed.0","@material/base":"7.0.0-canary.4497b86ed.0","@material/shape":"7.0.0-canary.4497b86ed.0","@material/theme":"7.0.0-canary.4497b86ed.0","@material/floating-label":"7.0.0-canary.4497b86ed.0","@material/feature-targeting":"7.0.0-canary.4497b86ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.4497b86ed.0_1589860298798_0.4844646626297828","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/notched-outline","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.2e60575da.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bba4b8dbdcad053c6b2deb32bea19abdb71e59f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.2e60575da.0.tgz","fileCount":34,"integrity":"sha512-n4/3xSya9o38JlgexSQRsMCx+PBXNe36o/5sh3loCeTzE9WgZHrShTbBrM4FGc+TQjC0LVsALmR9lBdf8/eGvw==","signatures":[{"sig":"MEYCIQDmUKrvFrvfg8Ia7oxVBQRa4AvRE6snGXK94aguKXQBYwIhAKxpfQeWthAOtImIkkXTx4E43dWvq86nmrQSKR/uBA3a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexATrCRA9TVsSAnZWagAA20oP/jV/KdP/tFEiVCQ8oR5V\ng7NRwuLdwEOLLsrTZDY8R+YTZY7W8g0jNvhMYmuEaVdr9K/MvWuPE3OUFO7o\nOOsJHbdlcV9wS35s2Y4Makg3uA4gZXLtpeeM7Hqt6npkQot5TVInOkpcoArA\nNAaGZn2c25Cn7E11cR0kq+ZkdvkB3qgjVZizlCw0ZkxqwKdIwcmI9/iYoYKH\ndw7JeslrkvIQNSpanWQE0GIgvIGpNSVxETiRpYGZQVnhQmGggsqhmjA8Ib9U\n+lcI8nKhlKVRAAkbvE4W22CfqVp8I7/wgGl3ji01vx8i4S3FaQKpTdxaaslk\n5GFGCQBSMpDs1N0+Oa8owJIU8jxt55KjA8k7Bw5GUA9VbDIeq2KNyecdK3PU\nD/v9rU/p6NgDtAhJBUGoXxH3FdKu48vaqo1afdkILtYnVNQo8NabcfI3HS7z\ngdiM5/TfA0D3WDp4kJrj2tk0Y6Wk0W5xDLNNExac10dKufZu88OIpTC9wiPz\np4ac3s9qrUXs8eUgkzsQWYsv7+IAkXfjng0FmrihbYJvfzQ/f3AmUhcydM+e\ngWSoxrnUNi+629jaK4k27xlG5RogPFN/TDJARRBwrfVDG2VOvXHFBlQ1OeFa\niVT3gTfZrzLBKp2/PFcPtQtwBmCjAMbCaQcHqLPdcdvTogXvncobUn4LM5SA\nEWpf\r\n=mtLp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a4b6f1d5a01445ae9c14845614630907beaad190","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2e60575da.0","@material/base":"7.0.0-canary.2e60575da.0","@material/shape":"7.0.0-canary.2e60575da.0","@material/theme":"7.0.0-canary.2e60575da.0","@material/floating-label":"7.0.0-canary.2e60575da.0","@material/feature-targeting":"7.0.0-canary.2e60575da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.2e60575da.0_1589904618672_0.7717787582373259","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/notched-outline","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.e3eacefcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e88dad7d10e65a767fec21aa40e1b7e5afa218b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.e3eacefcc.0.tgz","fileCount":34,"integrity":"sha512-afyyHvlY2iIgiITzp2pHA631Htzc9XFB3Eb/TFjkvzP4kCBiPJgTUFQs0YB4UAg0b7sqAJD2ln51W0Ep5P22UQ==","signatures":[{"sig":"MEYCIQDug1t6zUd77vtl3YZIBAmhiL9xeZX7M5XmLWA/h0fi1QIhAKd8DvrH+6jUC4f1tW7qWWtHh/mMuBsgMNNMk8cAB05J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBm+CRA9TVsSAnZWagAAj0gQAIcLhlICv7/X6rKksnp0\n8bPvZOkYORu2vQ2SU/nrXBy3noxhzkTgSI3NfRE8EAapgUjHPV929Ol8OxPt\nmsDgi5LuFxMlQ3UkopYGafZfWGLBzU+juvs4GYunWMYr5S+ls+WkDU0T/Rdt\nfJYd4KGgPTHgk94xygLn/ze+RKHBD8Kjw9EXOAaMqXeLAQ3Smq7zLkQFI1tH\n98o/pDuFzjY1v6cVw0A/SRvuj3o4LAe5wUC7h2EhADRxgYmoHGrzbQkiIt/x\nKmx4EpVclW/HW1PHgYW6pSe6o9HoDKZWB3RgdjqDQabTq3TQ2bjDnph0WLkb\nlQa7LurEW7V7jYixAL8wIVoozIh9dGPq98BQ1FSUu6fwDK2Vwivozf5wKVQh\n+m6k295ikcQ3OJb9aWdKb2aqEY69K1zYPfHIhr2RtbY8/KDM3HKs3QmFOU8M\nvQ1rGHQSrupJSOo1Dw3PueftBMoD4ofsj30ivjOGmOfuqZvWLCNwtw/67acb\nOMSOdCcUl+z+PgzSZulYrMbIXmRMLMhWxl1U3kGHXpSh0vTypuK7wgkA3Ikn\nAhzW2EvvJw53uxIUnSijXJErofxf9IQ6NC72TYzwRQs8+zo30h6FkxsJJfuv\nRJlVir1AWlSxxmOcEYm5lvXq4mXZ/9MkbcGUmXsSWzr8LmCxQNaMmqGosUzy\nWKeP\r\n=t69D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a80846c07f1b98212ba692bf027c2003093d0180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.e3eacefcc.0","@material/base":"7.0.0-canary.e3eacefcc.0","@material/shape":"7.0.0-canary.e3eacefcc.0","@material/theme":"7.0.0-canary.e3eacefcc.0","@material/floating-label":"7.0.0-canary.e3eacefcc.0","@material/feature-targeting":"7.0.0-canary.e3eacefcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.e3eacefcc.0_1589909949912_0.7898596318199556","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/notched-outline","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.b065a4d2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"816f79e8d3330420b6b9c7ab119b3280e08037ea","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.b065a4d2b.0.tgz","fileCount":34,"integrity":"sha512-aLW7qwCFww8Rezk8eEJ1vShTZQT/9z701n7lS0s+XPH/sb0piETsjSBmH38TJZyTA/DKZFmtPvBZJRX1C7fJXA==","signatures":[{"sig":"MEYCIQDjPXx2e0z6XKW+uCsz+kMnzL8a1mf2LVWCTR0kdSUmuAIhAKVOBsj/WW1KS52MbjDeA0fCLRQTKx1DaD5dx4ZRAzAH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUDKCRA9TVsSAnZWagAAbyUP/0E/dXlIwlA8tep2rLPl\nB3dTN7FGH5xWPitdBc4oE9qWRmDLc6yKe3FpLsNkrqbHzEAXz08y26YP7pA1\nOScQIxKgduTmijcM/nuvxKls6ZCdToHgMRXhQOKjsvkSab+oMxHPSn8Vutc+\n9mzJxhchgVifiCaM7Wi2lEwkdECbqGZS08A9kicHW5r1VYrq8KEg29Y23f2H\nOow7wPY+8JgLV36Or9xFEL0EYfrDLp4Evsuh55yGwZiSVcWK9vB4c/AQDgAI\n+EAigsbItHxeIDii3C+2wExlgGm53gFvg7tQ8JALek/pSbVTHVzzxxays5ZS\nOrqYasW8VrnFUrPf0ODfWSWz1UTg9bjPX58sjleZ5flPbJxsT1iHdkZ3M8x+\nFI9Ry1F2Bk/ucz+w3UdxDz6YDuBVv774c9ARJmjVmtpD1YqhMxH0hqFYa6AC\naoRRoATuNuGP+VQfua9J12CyGMLNPC575MgjbO1QquqVc1hLuZyVVfAFJ9z3\nwrZ2Y2sF2j3NvEbt6QW0W7mTPUh5fiqb9r4NaMbDY9LwYb4LurqVDyVpNDcx\ndYiMCpNa1gRMBvrnPO8LilAbAL4GONEdEdMtUca7JJVHXAUoVVyJEUz8Hoah\nDcHb4RxR4ygVMycxiifFWOAyw10a/4slGNYd+8dYdgY/yyJEZevrnmZu3Kzm\neY+7\r\n=EEkX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7de80cb2ccfd67196d7be3fd614cebb9cd73499f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b065a4d2b.0","@material/base":"7.0.0-canary.b065a4d2b.0","@material/shape":"7.0.0-canary.b065a4d2b.0","@material/theme":"7.0.0-canary.b065a4d2b.0","@material/floating-label":"7.0.0-canary.b065a4d2b.0","@material/feature-targeting":"7.0.0-canary.b065a4d2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.b065a4d2b.0_1589985482158_0.5913614294882603","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/notched-outline","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.4ebce8d78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3b86eb08d4bd9c241f4394398def01a5b4e7080","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.4ebce8d78.0.tgz","fileCount":34,"integrity":"sha512-QZjlyqL39RAKj2XnD9PqENOixdmHgtx1TI91m7RA1qga3pnQDDrjP5bLDH014ssDh+XnHgHLVjIw8m96AZ5GMQ==","signatures":[{"sig":"MEQCIDulLMAnOpGCVHTEI0T3YaP4uQWe5UY6lLqFxmsVd88qAiAHyHKhEIyhTvAhBua80oT25lBmI/srtHNyjhI5O6NETA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZhRCRA9TVsSAnZWagAA1KMQAJXq9QfGfjsDp20F09Jx\n5j0aUAg60b1eD79JKOYgi/WYcIEo6uLqxqjnD+RlqrHXp2oKlP20FHXiSJYw\nQXj2PNAinirAOJOBkhEC44tJGiyJKUegURND8jTd0DgCnmdQvKXwyxmtA/Op\nI297j/tNQBLRur2qGLDyuVJMEM2/HYNxK7AaQ+0cJ2KBKSRacBan7gIM403W\nFPdzqAOQv53WFgotIA+H1hUcCO8bIwduDMafo2dF0zWcfDxEbZi9kQ43GG80\nIYupRoswEVMYH4gA8bQuyjWkPhLfU3SUQn3Gn7GZp63bc7ASVY+7vTh91pzd\nmVBHP5P2ZTBRThHl/2FfRI7mKFmVz3470F/zqSViC+BcvloLEqQMryLbJQxH\nns14Hi2C3U3oZ8iypSBBxr7WmJlKA1ACq2p21O7j6QkiRIIWyRI5RxDmfXh4\np9+H1PDY+cFYKn4c7hokDl2TxC9fuiQgGK2/CY+lgO2awtAPpnyFKsuWnXKH\nIFcji5ObvbsqwPZuZ9JXowUJVPv7Rv9rZQIv54y5oqib9Mz7U0nRZqMBJEce\nw+mxuwpMukjIFTw1KkdBB8qb251pUPFUXX+/HMt+TyAi7s8hnv29k73NXacd\nTgzxUUm2t+dUOtoPX9ryant7atUeAK+Vf4R18FoXydaM8ifkYFm2SPnmLcxZ\ndVa+\r\n=a2OD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d7cc6c4aec24377070d4417765fa102dcd7c7e0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4ebce8d78.0","@material/base":"7.0.0-canary.4ebce8d78.0","@material/shape":"7.0.0-canary.4ebce8d78.0","@material/theme":"7.0.0-canary.4ebce8d78.0","@material/floating-label":"7.0.0-canary.4ebce8d78.0","@material/feature-targeting":"7.0.0-canary.4ebce8d78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.4ebce8d78.0_1590007888991_0.12861553200552867","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/notched-outline","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.b0fdca492.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"155de637a79b58a9027b4de537f5526a290902fe","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.b0fdca492.0.tgz","fileCount":34,"integrity":"sha512-9OUr0jQN4+ukmc1qdFG9GPT9q+0USc4yU3QZ0LYt4Jf3pJBBl5W5M8ilOZJWMBh8pLOASHMd3yVKYKDJLNEQIw==","signatures":[{"sig":"MEUCIQCddCPFxEuKEttVd4veskvagXg5oWQXtwzKfuoCkDm/zAIgGjnFOBV8SJZGOzDBNZABUNWVqVkiLlkqAvLzrtHfVH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbdKCRA9TVsSAnZWagAAWD8QAJZr9B6gjSge6wfevz46\nL8Y34dZ7dLVyCt4nk2K/0p+CEfr8wL4SCSj0fqLzUA7AxcUAtggffSqnq5rF\npKfRpHZM+PPMasV/mnIl6XfHPbJ/hqxNo8IGXIFmBQUsO9xxSKM34xrPm6P2\n9uJuXZ9loGyop8R8NfKWog8NTzfTi6svTVIeVPnRSdSy3gNxflsVaW8rEc9R\nUFVrb4jWtgmTKLf3mi0zpxpU3c0mcegT8rZ2As0qQlhX1xhCc6HJatu8rk2o\nU9Ox8xc9B85XanuyJVg95c1OKOzY2aZEeTJ9IjEJuAtz+JtsMwoTDF6hL+jD\nFvtLBeCwKuWI5zWaAbupQnNddHwwm9Zy0e3lqF+B9clltbWiy7tpuNmcOvAc\n8A+5OCe3hpxkfd2qSd8M3GiKxayqJ+XJlGaaONHUdbvlAAapdf1ZtQi1BSzF\n4B4yO0lRaN6pGfxIqhpfvlvlomvkxolxEoKyU91xZmhHKNVNmS+RSBWxUTkf\n9J9Uva5jw4nfg9PkgLpWoaT5wNR1AOlAUkfPs8jtMlh670si7ACbCuGslox1\naZr/II5D3Zy0r9Xdd/+uqvKQOKkwpMxWpWeyMLim3Cjvuy+MSeJ3GLU5Co/8\nErjTyAXWBQkoK/HgG/9Mjk4CxFWH5H3VXQx7yqu+nQCRvauPmU2nxzBgze5P\nPJ/t\r\n=yIar\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"590e5f052548986555dab713a1bcd253b6dcd01a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b0fdca492.0","@material/base":"7.0.0-canary.b0fdca492.0","@material/shape":"7.0.0-canary.b0fdca492.0","@material/theme":"7.0.0-canary.b0fdca492.0","@material/floating-label":"7.0.0-canary.b0fdca492.0","@material/feature-targeting":"7.0.0-canary.b0fdca492.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.b0fdca492.0_1590015817746_0.6636713300037544","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/notched-outline","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.c67667e8e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37990285adcb49f4a5b5501acd7ae6e8108ddef4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.c67667e8e.0.tgz","fileCount":34,"integrity":"sha512-moIPcmHAkiaLlrFU13t1cUk59lirvXLSjRFI+BxifLUrpdwp2JFASfpaiB6XKfdCSUsI3PDsmMbf8y9sXET0ag==","signatures":[{"sig":"MEYCIQCJ28E0d/2JxisxYRqWBxqhkUF1bGk4KyT0nTapEI/AQQIhAJ3/1K/bmZbO+OIOAlf3Er67oi5mx0DR3Wd9+OoSDswR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoyVCRA9TVsSAnZWagAA/TYP/jH2gN5MVIa3wdHdlU0/\n9hE4iE1OVFB+Yjoh19lFCwdGcuGqeICvtB4IzYaT4QTaSYKD67scDjfRB8ep\nn3vy/PZFpdYZKtnfBfy1uXc8NmiipPZBMytGZx+shIlbq/fvZoK2cmvs2C1/\nfBl8j2TLxKFAOE96VQAcJfhTggtYArWcrlpAn9SFhSpbWBKG6lSMInv4bQAT\nQ3XQhoIXLDRmIelLH2UlnVKys+Ol54A94IojxGQmXHp63yJI0T3gGiFm3KSL\n76Tim0woQhxk2I7kEiELKZkfObawpuHJ3n063Ax8v/HSj/1IRQhdeb8ZwpoZ\nSJ+rLyvc9CqH71lv4No/+y5JpqsgI81dpwW2akGdzkOy6yF68/ZMc8IPWFtw\nK1ZjrcRH0/RU5dxy1ciTN82xHq+ObcwTI+R9UfvLMaN6pITN6l5E52MV1QiN\nLWPY6lcKQiuyvNFqOgnZVQuKGyzOdZhba3dJGguJeOBZOQiGAW/vM1J3bJok\nqyEmBri5iB28O301HvhgmdF8+Gf4uy3NyIUlzgA+dz7KOBD81mu6E9Z3WGfP\nsTfjhN5rV0jR8XGGesX4PV0eOEMreSydNyiSBLXqEsvHM8lXwmi0SgRpa+BI\nxKSLhYnVmLkoWfsNcc4uKvXdtzqKFeGo1T5hB+EIunCTvf12mT6+su62q6+N\nC4kv\r\n=Tbr9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"405f1e85ef85a7cfb12bdcba9816d716433463d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c67667e8e.0","@material/base":"7.0.0-canary.c67667e8e.0","@material/shape":"7.0.0-canary.c67667e8e.0","@material/theme":"7.0.0-canary.c67667e8e.0","@material/floating-label":"7.0.0-canary.c67667e8e.0","@material/feature-targeting":"7.0.0-canary.c67667e8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.c67667e8e.0_1590070420996_0.02138241630843951","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/notched-outline","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.62b5f37db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"383ffb3591f64ba37968ed328f2bd94596e881ba","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.62b5f37db.0.tgz","fileCount":34,"integrity":"sha512-mnzFS4/eyyWwQ/FccRnucNo5AZVH/lxdqSVguEhWXZ3I30R4LnIUiTy83uCovH/VIs6FHDFI997NshVpnfWEyw==","signatures":[{"sig":"MEYCIQD7wdyYri8wXth7oLyEsd6Y3Q4hpsQVqo6s2mibgffG1wIhAJKnQ1tbJDkkVWhkXvcoJZeon/6oQ3cUZappvpEgGJcx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq9fCRA9TVsSAnZWagAAeuEP/3HTRgHM3pyLCAkta6R6\nZ+jU9TuGIBR9goT0n7KhMPvJWWmjnqM81VRVfci0PgBMwyqcoFLlEvdCIJ19\nOTDXB7shCIpOToTLH9auZdd+wuTELH8qjCfk8UZtuw/ghK+NjAnarnTSDWiA\nxBuo2paeEw2LuhSoGbYaAvQ37gcnbvn/gJX9hYxiSU5Y/LC18n5neMkwLpma\nJUEYmVfeMK+QKz1Lyg118EP3SuhC/YQbgp/GSp1BrUmICJGdzjiLqGODIANa\nnwu66x7AE57Ofj6hE4RYR6eTM+Ed3yFkyX9dpAnfTVRrieNtgNTWl95Nkpms\n2WHOGJBNc9To0Q+D1Gf6HgpQH2Y+mw7xydNlSqUKYtRrStShWlKCT+crGGx8\nERENDnyRVg5qsDuakYimYyXRAqqFMKR87NsoqR2XWuDcbRxipHb4scCNWDSY\nbZOaeFOXC5XVN1t4Y7s1VQ4adtUaMfMqFYhyPFqVnMX2P2vuC8OgdDqDLcqd\nlnW4vQ6qhB7xx/z6tWPiu/VtEjfgODJyDueIwfzjvjxN+PLo12pXaIFp8Vyv\np9IUZ5UQfyh7CbnBsRRm7tswlmxiLkGLnmJsm9NKHUlkuJVXOP86ThfLUbiF\nOLXG8uOT6ONMq6xEzCA9mvucE4sjL4fAfbtA8YUZfU+ZgF7TwoGVAYU8evjC\ntxWh\r\n=+giT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"62c869c9d490fcd3f25cd87f251a83b273e32736","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.62b5f37db.0","@material/base":"7.0.0-canary.62b5f37db.0","@material/shape":"7.0.0-canary.62b5f37db.0","@material/theme":"7.0.0-canary.62b5f37db.0","@material/floating-label":"7.0.0-canary.62b5f37db.0","@material/feature-targeting":"7.0.0-canary.62b5f37db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.62b5f37db.0_1590079327445_0.08589429055091724","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/notched-outline","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.2e218dbf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8430f1d1cbdfbf7fc19c154b2087485cfd2a43ef","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.2e218dbf8.0.tgz","fileCount":34,"integrity":"sha512-MOW7Tu+da2DlxI/pLezT2IO9lFF73e7idzGCq8OphfqlZcUzM7zbLFuUFByuqxlPWlX4NosPMCrox0fHGZmiJw==","signatures":[{"sig":"MEYCIQDNUMTC4mTjrydWC7x4JrLTroUK1jqYPQEbFyo5YZupkAIhAOjeIzYiGHv8wXKd+qXOk+Y+GfdA/j0dQMyD8XfXMhZo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrRDCRA9TVsSAnZWagAAww4P/3iGd0nY12sKEkVofE48\nCJxObVzQpR9qWIHFzRnJzAiwyx0LVebssrVk5bKrR49nvv+lgi03miGJgI18\nfT8jBQ/mCLg2aMx3ve83bAXhB8mebHS1NHqTVp0+CIZiUEUEsomfjQyOBLtr\ntWwf0S0hOoxUJtjUQvQXML7YLIJV3UwEVOyOfvnlhu+WQoTmApXC5NqFMkyQ\nrNXJOMg4MHwiYthRjiGnt0hB5Rdnx5N8jLEIfeXBd/DcKVCN4UsuD/jZ5aql\nC8XRk0bgPmOzVTl58TYjSmcpN4lF8LsDQqM9PV1ZahM19KViezPQarcIDmC7\nrZ9bBJwfGXXB2ig5gZpSlDGEUC2ysxM19eI+o/3VY/jsu7Rg/04wNQa6T8Ms\nP6EZTfaccXouB/KbjxZ1bWIsfKDHqMIZ8FJRnsLid1UjrhTPJQdxGwlhADux\nPNS1/MUziIfnJdAvE3kPXTam6T6AKu/O89HzNwuODyZ9rF/DbYWi6k2WMp6l\nVItqLgWNF1rl61AyRhKUnXV1++Xjmj1mD8hfQqx/s9ZdSZ+U9vBLS6SvIaCK\njz0wOgvNuRBXml0Oq1bFu2ZiMNB89+uBKFCz/HTHGUVCQDBjJp1wKTEo0q83\nm8/fiwVllSHSZ3m0xz2CONuPBZASto1oE+8f1087FhNwbHDHgEEWdvbtrpe9\nyoOc\r\n=2eEY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f9b76f9144a233e7569877ab8f0dbbb1be555055","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2e218dbf8.0","@material/base":"7.0.0-canary.2e218dbf8.0","@material/shape":"7.0.0-canary.2e218dbf8.0","@material/theme":"7.0.0-canary.2e218dbf8.0","@material/floating-label":"7.0.0-canary.2e218dbf8.0","@material/feature-targeting":"7.0.0-canary.2e218dbf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.2e218dbf8.0_1590080579022_0.5326141451941517","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/notched-outline","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.7fd792bb9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ac78e93dea380b08f0cd2e9e99a4b280bdecb28","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.7fd792bb9.0.tgz","fileCount":34,"integrity":"sha512-5GVbPwAZ3cP3tSW2XcjDNom9v9l50Ni95Ve7dJWrk+MRbo+/iTfDMIUZj/Y++aa+60IN2vk1MKYPAc5LfikTFA==","signatures":[{"sig":"MEUCID8gUVsDmARF7hskW+hZEIERO3KYtnUryYbFh6TwrhseAiEAtAd55V4nGw2msnrZeJv+qsDIGRoMmbd89dlAfIvSAFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrcGCRA9TVsSAnZWagAAgX4P/jHCKKpSFgaZ6PsVNeIB\nRn2k4WE7dAB+QmW8Aw9eF6zH3m2iBfMo6hmlcHtgBSF4Sn0gmvAQmn5bXrSZ\nj7/nFEuocfB2/qxjqSCeqW+9VqmgLZFtkohsD1HHMKGBHKEA19o0GQCgwZIw\ncxS6iWBIkbYb7SvXWSl5oOT3w0ZRtRT3dFYrB8xwv6v7iyj8dUsLQB8wTO+s\nkiBIEtlOteEIAgXQYNFMea4al5h3dw34COPOEo4McHQ3X5fWOwrbOwyHzoSJ\ncAjN8Q+LdaEFtePteHydmjRI2vDzZp8RysndrJZPYyVYZ0exdkgJesvT1FXR\nfYOv7PcYkYlUWmTkLh4DGv78TFBCk7qeF4tr/vMs007xBQ91NCIBpd89TW9U\npESDMoIRjkHUnq0lNjG0qAojjTG1mVQr6xNvqphYLDNltonwmoW0d3qd2Oes\nGJorfzq7V5qjIB2oQrc2esnakVGXJZTp5ZGnPqrtoyTwHgvEFu92CYAAeflm\nqqVEDe1Y5KxroGKenKmt5J0HVG59e+l14OExP0r8KFLZ4RZRkXqFf0KcesCq\nNbSAsCMGAU3kLOPH2tv4VeECT0BC1DOHRela/IVL+vgtPkpGxVNeiXTuDD1t\nWsvSncQMz0WxztkK5XAwHZosxUiMDrAcyKx9JeOx0vEvGTfKcTlfn7wsJcuc\nb9wK\r\n=1nXf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d5ce4b5e7914675090d101b10f10374783326ede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.7fd792bb9.0","@material/base":"7.0.0-canary.7fd792bb9.0","@material/shape":"7.0.0-canary.7fd792bb9.0","@material/theme":"7.0.0-canary.7fd792bb9.0","@material/floating-label":"7.0.0-canary.7fd792bb9.0","@material/feature-targeting":"7.0.0-canary.7fd792bb9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.7fd792bb9.0_1590081285810_0.012487247448966121","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/notched-outline","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.a66493cd8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac31c44edb6c131a9bee7d48784517d96e9191e6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.a66493cd8.0.tgz","fileCount":34,"integrity":"sha512-ztz9siQitXvcllvtF9cVyQfDMxokQYSMlTmBI+bxoiUYzdUJ5ZrRC9r8TG+XxmOf67MGnJpqSHbmYiH4Xb+rxQ==","signatures":[{"sig":"MEYCIQDopHRxyRi4fmdSzEEVZrX1BcZUndCcByAsIpnRz4LMewIhAIK5o7CEEWL1Fi72iU/6Q4pODiGhH8VKiH3OKtVZZvTt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrgJCRA9TVsSAnZWagAANfkP/jz5YZ6kFW2MhEdccdE3\nlntFlw0482kirnd+Xux7RkW/x3eDAbocauuht8Wc1Sxg7YCQBZylpD7+w+nV\ngfFGWn/sXzzUftFCzQOCof9ZVhrzo0NA+Q0pWVqnogG+tMpyEj6diIxBELn4\nL++CUFWfBklpPETEQwLBXSF3fcXvWQV3HsmcRTLqakIU9llubu9OUMFLC99v\nGYKNDNKy49+s/g8zgkpYAP3qJTKPcqmblhTg5MerRUdACfvPg3OmWWWbse0P\nNNSFRu0LYKpc8fnUAnd3lw0LnmSelQO7BA7SJz3exN8fLfnsSZ4Ds3Ny2gN3\n1h4CGam8IwmZE+4VK3XeC+BoIR0+iDvONtxTFEYlRuCg7pzcoDnG2V2gcGLR\nCRVz6f27hBYV3oVfsOo6HxcJyb6FmH0FogEouGdke0x87kFq0MlSQ4gxubWP\nPsnbj8Jo0HbNVkk84sGLGkT/R93RWFXp1sG+upKrpmMKK5IHwa1jyUXRz9WX\nHG19dz63pJT8h6lED8Dr/fa1qmVDTokdo04Avsp7/tP1bd5MJffvoWOHB/Pv\nEzWrtv06pmVtFPQTwdddjghKc8H6HnD8phRvF/quPPzf7a3z2IETJm5Nhjb4\n7yErz8vJEdQl7L9SmiCMGCXMVG2CPBnJhAFXEuKRVrxX01fq0d+Gv7bmFfMj\nK9n4\r\n=WDZM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a14e3cae1fdb42680777a9a6b5706060924d68b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a66493cd8.0","@material/base":"7.0.0-canary.a66493cd8.0","@material/shape":"7.0.0-canary.a66493cd8.0","@material/theme":"7.0.0-canary.a66493cd8.0","@material/floating-label":"7.0.0-canary.a66493cd8.0","@material/feature-targeting":"7.0.0-canary.a66493cd8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.a66493cd8.0_1590081545436_0.1858515868283137","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/notched-outline","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.da05f66e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8b4e86b18907f4c3e4014b6d7276f97ec8c0ae2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.da05f66e1.0.tgz","fileCount":34,"integrity":"sha512-9rZzkVnJG19IA7ncpkWTxjSmguEm+rjtGdsxaGHtgc8l6hfML48e3WNTZz3mDzeaHEoDQ73mZoC/ezCqNJ+RDQ==","signatures":[{"sig":"MEUCIDUegmKHNKs+ti9UJoOCUlPUSxJLoWfPtEgfU37eVEIbAiEA0VhqsK9emcUN13uXMCFCuZ/1UGRv4dNTg0QmbIArORA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrhpCRA9TVsSAnZWagAASVAP/ipn+qJA8DqoazVTCzng\n+GQG3TNk4fQvO4Brh1jNzBhfc0SWYZNe2+5koiT+KSZBsiWj0IUAN8df/HcJ\noSimv+Bpbem1DXWTXiHqGlFIwITjlF015vkWDT6vpIu5Ei8wk408o0NxNYcB\n6OswlrEmPKxvrgq0mMto7cXhQAGr+zpB8pOEk9Du/EfRPkMxJadRpR0Gy7by\nED8aqt747QEe9vOnQRhSO4VsXAHmsL4nMhP/g+XTBwBXjLMunXX5jWdLXy/Y\nyIdhWAJ3BAGSlyUn/H1EVeOp0eiuhvkvCLQfnPccbopTFJETCw3lj+ESgjYE\nckvwRrVnGLM4Q2DjzvZPPTEN7b8cqDDXu1nUzIiTYqcieTvXGXTD2EM7NBBW\nKiEfp0xhnY4PUHo7OY3wJSbI5r9wNiqZxruHKZA/28xr0VUsmdWe3Bv0gF1Z\nZYniwYQAgyEO3LvwoAlmUMypApVbJya0m+8c1UxGWCUKxo24NbiKSIir8dHS\nzJbucjPEwinxLgH2UvfLah9+A5YMKg1M1qfzG527xrXFkdaj+e5CLWFLvecr\ncwm6W95rnGwTPGmPsNcNob6a2ZwTjsRncR8ia2gsiYxsVy9NUOrjrjK9XSzX\nrHyaW8UkRWkRP6offc4Fr+30+Il7aj0JmMxFfJv9PQlj5UJgZv8SlYXWI65/\nIA2F\r\n=8/Ke\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"97f495e74f33645d8f066a4be88eaba95700a4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.da05f66e1.0","@material/base":"7.0.0-canary.da05f66e1.0","@material/shape":"7.0.0-canary.da05f66e1.0","@material/theme":"7.0.0-canary.da05f66e1.0","@material/floating-label":"7.0.0-canary.da05f66e1.0","@material/feature-targeting":"7.0.0-canary.da05f66e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.da05f66e1.0_1590081641040_0.8394360917237875","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/notched-outline","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.740860e78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abe4f1bdd9aeda4842e9f2c4fd932efe0293b569","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.740860e78.0.tgz","fileCount":34,"integrity":"sha512-jyaG/pC8Ds7ID3wvWTcl2QknEsnVfDPP+KWt42NcN29YRiPzzpVJc3+GkX4a+WwSk8kMAkQbZGJqUw5sX6oFIQ==","signatures":[{"sig":"MEUCIBh3i8jTw89ZcF8hCl4iBx79WoImFffTpKcR3GIklKN0AiEAr/ubYGTyVDzQIEAYkqhs2P9I8raEC095CV2vJnB8IEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexroGCRA9TVsSAnZWagAAP0UQAJLbUnZCQ4Pu76WLT0pr\na1Pd56WmYX9J+luAF+uVibEzrWfQNHB8GafaFMKy/gNL7UlABA8N4V5xxcyO\ntt9akw2MO0r2fsijSdQODudS68YrSSsdiYe1PtPuTO227n9VYPThoOVg/ZGt\nQS0CnfjNRrl0PsXbfJLYk6wM0Uz6o5B7USwhE1l3CRrJTNQlc/xLXuTNHow1\nCbAN+VpRCKqs4aCd2wG19CKBjxmzw/P4QykAhIyRXVOEHBULrKBRHzNvE3I8\nF06LD0iXQF/tK1etyCMQ8LC55HKY9Al/EoY9TcfdETvFM2g/YYnAcg0xMOMi\nWzcCfJqixHON5m8Gf0g3ZL8kaJ9UFSEwBrKMV06NQfG1JI21eUU3mPjESi7y\nkpnmgH5sxM8skJYrS8PsSBz5/o69xxtjVWhW7UAgdgu36IvS3M0x3zh18Aql\nWePaZwkPQukitCovSmHwGjLBgcMc7F0kc6LVUlGfnrI+F87tWOo4BXOaav1D\nhMUolBAKwHvXXbnTPnzJJjfkYH67k2L9sWerBL8s75Fd5148VsWMIPDGNW/G\nPtKxVCEpiIHQAv2hIZEatYRMrpHyclldHUN4Jlnx2NvRCZ4UcZ+xfvCzmLDL\nBlDbxMLvXRx01Fw7QGoYtz2B90dgnlPx5/mkBJ4S630LRjOB+HOhh7V9SFnH\nNGNQ\r\n=IhJY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2319c23e86ed8e7ed27865b711bb6ea6970b98dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.740860e78.0","@material/base":"7.0.0-canary.740860e78.0","@material/shape":"7.0.0-canary.740860e78.0","@material/theme":"7.0.0-canary.740860e78.0","@material/floating-label":"7.0.0-canary.740860e78.0","@material/feature-targeting":"7.0.0-canary.740860e78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.740860e78.0_1590082054262_0.6281235354220542","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/notched-outline","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.5cea2610f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afd8997f83c1fcbbf2ea78c2945b6b8de660a587","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.5cea2610f.0.tgz","fileCount":34,"integrity":"sha512-gyZK6cL/wG/QSyXiapDsiPasT8ToJ2rwK9yyZCJ+ToGahqUrjFq+Yw1g8AQ9NsOCLH7exM7W94jZg5tNCVxeWA==","signatures":[{"sig":"MEUCIQD1flo+73/jNqmCcUQzWNRdnzyjzbzo5yJWjAutB2f1UwIgfqwiR4Ta98tuKaIjPyZvUwMM3TgQqx/7gl/iRE82TSU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrqGCRA9TVsSAnZWagAAfq0P/j4iL08UIXRnJfJZixpO\nP90M7+/rpfCVnfygE/DVXGb5R3HkSVV4yMAssyHaIW+pjT2ubok1l+k/OJmx\nas1kSTz9A3599nfrmStK41qhw8wUMBjlLqcAjdFwim23t1N69g2von5XyWnR\nUBVj8ZqZU99PrQCIAgXxV0MRlv0UeyMbJIVyp9cQa2Lbu6EXQtkiwybZO1Ry\n13MeTEbCkwjseMvKiRLhujRjV6ntV/eiR9/ak7WWrGKOaIBi7MNNy2ZoLA6P\nsG+MojVv0PJRxqYbCvDl1XRCu4G9ir1ZzCUKs5RY+kwWlYKolXtAP7QSnCqF\nDHq+E9ZS3BHiWpcqm0rQ7lIo2dmD5wSKiKZjGbCMqtsspio0hnW58pU2GRQp\npuQKqjS0JdwO0QTJwakamAy5gA2N87GTAZVDHBzyvbW5bUwLHb7kNkMs+Gh4\nvo+MiuQbM6KxyDPzW92FVRHgSC1lQaypSQL/MyqBVr+bDpvZz2T1eAKUAq+6\nWxBth/FmTZAMHRIHsizUvC74WpvJnALccVgy5jiQglZuIrG9vS8rPpmE4Blj\nWh20sVJdUCKysm1QKjTVZRp6FHNATwPxuVL1FeTi6W5scrGtskFqTXZ5hvO6\nWJRImePgRFVONJ7UNyx7gVwsxjK14qvKSnhye1Gl/W9qBVYjIRFUMqCdMTAY\nVTlm\r\n=NF+w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"647d4356b68bdae8879ed7384b0ed1ba4e1954dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.5cea2610f.0","@material/base":"7.0.0-canary.5cea2610f.0","@material/shape":"7.0.0-canary.5cea2610f.0","@material/theme":"7.0.0-canary.5cea2610f.0","@material/floating-label":"7.0.0-canary.5cea2610f.0","@material/feature-targeting":"7.0.0-canary.5cea2610f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.5cea2610f.0_1590082182057_0.7089945026174278","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/notched-outline","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.cf7747ef7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56123e2f2791cebcd0c0642174d1707266f8b1fc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.cf7747ef7.0.tgz","fileCount":34,"integrity":"sha512-r853sERqVOdlmFuVeU3/qSkvdq8lTjLlZxtTlMjkPXRRUiQhJjT2UPs2VZwuJQb3R3F87ocD/XW8bUAljviTEA==","signatures":[{"sig":"MEUCIQDqsZRLB+KEA5ALPUBRTMN1Fe4IWaL8PTTxv5uDIT3I9AIgJzQ8PeYzu5pmKHMoQbjAv1kfKinj07Xx5txqkkE4UIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrqdCRA9TVsSAnZWagAAX5UP+QCSn/HVHY7cZQa0mMjP\nUFy13D5519IRjsRBnhrQlVHqULt/vq+IFO9vr6LSv5X4Rfa4Dmz67NiwbcJu\n602kfwuK5uZ+NzCV57/nJFBzAne792hzlR4Ycm/vuV6UvsttMUnLxKbI1HMR\nClZENVqrvyxHw+xPVEBT4D9Jo2+lvAlzuHyh++onffE8ZI8ZPXRWbLG+/Nxg\nvwzOm6KYv55JtQKOUFQLucrl0RUW8FhA7ymRaEC4kHZAHMT5EJF4ElXO6ErV\ngE2fojccseaXQ/GLGvyD1byX9B5kuxhXsepNbQfhtdPWIXpKxtKpzmnuntGi\nAgptx+HjQB+wF1qsFXg4iZclYvQJdosvaAiPYv5gQcDJKBUguGjWI55Ev9Jc\nu67236AAAYUaaiB47Wj8KGXmW5Pl+4uZAxV1NXAqtaoZdZ9rxbPDVAE/veA1\nDZe27eXds9qSCahJJYgV9PM8SUWPCmqHAy+K5sUup0oMQzcR37SgfbhArxRZ\niX+3MDpLiQpLlAgIZkEctnrxq+y597VS6QRvGXM6QiTQRetXUlhh8/W5VJnX\n1y6x9FXTMFs+kVd+mlrhOhHI2T7i2fkI5BnYZtIi1OvEjLn56h9Ujm/XuhLh\nleKUCcj9/b6TazWIYeedqgW7n+7kKYffVZoEADj0PRe6QFuo7GHviRnujsnI\ngFME\r\n=7lDU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"12d3ae46d64646ae020ede8b9ce88abc7efd384f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.cf7747ef7.0","@material/base":"7.0.0-canary.cf7747ef7.0","@material/shape":"7.0.0-canary.cf7747ef7.0","@material/theme":"7.0.0-canary.cf7747ef7.0","@material/floating-label":"7.0.0-canary.cf7747ef7.0","@material/feature-targeting":"7.0.0-canary.cf7747ef7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.cf7747ef7.0_1590082204863_0.5005985061274612","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/notched-outline","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.862d0d7bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4610b48e6b538082cee774bae8471beb01c85f50","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.862d0d7bc.0.tgz","fileCount":34,"integrity":"sha512-cWuLg4guQCz9b5HluahzTPQWuHm8U9qEevsRRPDi967yqLKaIxnaGCkkScqnCKIajj/3EORAwyCr7j4zpgqs/A==","signatures":[{"sig":"MEQCIH3O3Ufg2SLFk516tH6KZRueK8zcy1tw953RN0suKMgHAiAH4+R3vURbutBOdDDwSVIPzFdWlgSiq22D7voKX/1fsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrs3CRA9TVsSAnZWagAAvjgP/RQ/Wz3EXEPBMeRIw7pb\nwazzNlHlsSaaDEkzwocTUHAZZdGoq75A9uJPfPF4hVWrBy8i/NWixyqer+W4\n9783wta0kg0Ndr9nlaQ+tKD44NsycbSgT2XIyvluwRHT8L+HZQyU9G8kU6qZ\n1NWbymkXT/DWAQpt69h+mnongDCkJd+OZY7e53rV7oA8xofbFgq+SuVuUUry\ntGasdqZ68A8WKzk6lRD1+Dv+4fsxWIv31yzopA0NSA5LX2WCLxEY8siw3j+Z\nTAbj4t3lswyeyn9Yi7gvvCZ93XJvU0zRf4FtI6jmlOUZQs2CVoCeCRDj1TaK\niS/cJS98hyN8weE+20zlpBVlNcwkGKUAhc/5Vs/ujUXfTgqHwLyLfYzkpby4\nKj/5FGnzl6B9sdCdsyNYuV/REs1PjxNH4el3lpy2NiGfNowF3oT/30p1cW27\n1iUCdNh42VnHYOYh6u8BE2rhyKaDGCtn1btWUY2iDHg92PO+VhzQYBBOJ42Y\n792iDoa/IWUVx4M5B9U+jis9ON2samO7CiAexoEEWR1DexQpuDfoMQlHYm82\n5h5Fq//5IJug0fmL+SL8JNyfvAGc2pSakLGRwktsb8QH1BeAzlw7EMLW9iK2\nicX5RU6hEc6ZrFcBkCOkw4FwhGsvxdiQaXS+YySFGDV92GcRDXSG2mAlRQvs\nReYH\r\n=Fime\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"534ebaefbbb3a8abf3be3e2e13c05f86a5461127","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.862d0d7bc.0","@material/base":"7.0.0-canary.862d0d7bc.0","@material/shape":"7.0.0-canary.862d0d7bc.0","@material/theme":"7.0.0-canary.862d0d7bc.0","@material/floating-label":"7.0.0-canary.862d0d7bc.0","@material/feature-targeting":"7.0.0-canary.862d0d7bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.862d0d7bc.0_1590082358938_0.22017979709472568","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/notched-outline","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.0008c8a91.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0ce9b0e7a8cdd34ed47bca2fc100107072379df","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.0008c8a91.0.tgz","fileCount":34,"integrity":"sha512-ywHqUDcq16vtbrmL6NLABouC2LddH93rJAKb3GDnU+KyZU2/d3901jBnuW1nxlHc70lXbqrEfou4wbgX1uNmXw==","signatures":[{"sig":"MEQCICOR8Vj8AbK0yL5npkdpbl2CvohqYZJEY+GAdHUfY279AiAzm6q8dBPP0QLEcBSUZzNhLnrs3mEo9KymnhpWWFzRpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextemCRA9TVsSAnZWagAAOT4P/jveJVBGdBxvHBk4p5yK\nckCe2mtdniMWUUxTZmkZdtty5ja4heeP5RejAEfhU4RJ1ivc4VVBkm62E9Vm\nxNwOhdFkKzfM1LZIORvwos0RrN6cxg1L6fjd9vF3hAFkH3yLoABfSCvbgFFr\nMbxP+DRRrVfGeq2hWHHCE1WQqxEp0uejYEusdiYkkoUsJ4jGm896j/EOSMzK\n+2ZpsxK4YIBOIXc3mSuywEURBcdhw792QpJwgOP34ig9+Ve9f6VjEDV8RRY6\n/ieKi3gUlLI4fWB+/BJB+rol8gGe3JLXRnKaIQ6TDRmvMIHsEzdYRKkmJdN2\n6WG5nF+sQWrJXH8kkiUT+ND4b2TDo8nkFG+GHT0cv38YZppOs6PappXruenS\nJbPNZe4Ts5W2akIA4IFe4/cmNf6aziy5jCfos48xsytPv5wj3hcSkYcBYOIn\nGy0L9uOKTv/dq5t8pAv0kOlRUramgLCiGAVh3ILMDYmaTakOVvhc4PEx9ISR\npg2dFm95Tc4wJ4hy7foSS3BKmTGR+t7T3bFDf665Q8nmLO/63T+oPGBLaByy\ndOkwBOwvrALKNBmqgo0AvuNQutQRTUxPv6iF27ZFwrnhtKfu5glODJi9nVbp\nrSJRhw6/NtAZdkPq5scUfE3HiDfedrRdXVfRhFioJHFL3FltRJT2LYHNem+u\nOLIY\r\n=RenF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5bafcd3cd9f6f60ca813af30e2b0a8974de09ec8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0008c8a91.0","@material/base":"7.0.0-canary.0008c8a91.0","@material/shape":"7.0.0-canary.0008c8a91.0","@material/theme":"7.0.0-canary.0008c8a91.0","@material/floating-label":"7.0.0-canary.0008c8a91.0","@material/feature-targeting":"7.0.0-canary.0008c8a91.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.0008c8a91.0_1590089637757_0.2246784373141235","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/notched-outline","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.541638fa2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0492faad56a83c0b694fb88e1792c79d33f8880","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.541638fa2.0.tgz","fileCount":34,"integrity":"sha512-DasNkYIxiw/qevLOhO1e6oUqf6ef5H/m5RSySYiLG/933PM/G39VZf6gU2X+e4DLwBF4qf/KYQbf+tnKmMSWhg==","signatures":[{"sig":"MEUCIQCLaQYUMAhadL29PxN2oQCOjX/+YkdtVH6GI/e8FJZmAAIgIsi6+WbgX63F3blerL1APgGTb159AYOZXPAN1f2JzDs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextssCRA9TVsSAnZWagAA884QAIVYqlEhRhqst00eQerC\nbqTLB15lE6wAfJv3uE4hhneHBSKBCZeOlwpBMolAlrNqyhnpeuUDJQp5XmW7\n/J03+p6kbeFmwugr3FzkLbmK1rBconk2Ib4x3l//8EqnD71pgQyWvrCuw+3S\nC+9FhaXYY7KkFXhtzqhWtFWs+d7E7al4naXrI4OrQgd3aU7xZ1bzWKrqzS0v\nBZ3irJ5EEV20UWukDyZ5zshXMeuxBnZrjOmEcDR1V+wMkg3IEAgrQuJ8dCEV\nA/dAHfoKjwibXb45PKIkjcC3q1buJSmuzf4DEHa7HYXUe+hO03AeMXP0enSu\noDirO5MUue0y3zErCg1msaDTXy+w8jlzfyzv9Eued5Gdpn464gDjA/7DOn3w\n/Z5ZV6dmWOjAmmGVjlqdzHmlgqhSx43at4C6ULJBUicRruo7qCfnoZ2qatI+\nDHT+/zmlB/frbleYbDnpuk5ctt/gq7U8I4jZU4d7u+LGhiwMipyNmM+8ffse\nti0ZKi/d4IDcA4zUKm6BwohjzsX/bJy/hrbWyiIUSyU93UmWQPelTw4OmxAI\nb46SSatKPyawhVUJyD+n0bw7sY24pUxV8hG7CNSAXnp0/g71AeSaw9zg1sQi\normyVYz0+B1c37Y587e3stA9vc9W/kD+P86fnF3o2ji3IaQdIffB/c/5BraI\n29N6\r\n=r8Bs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e9634a8258477402629947671e06d007833e14f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.541638fa2.0","@material/base":"7.0.0-canary.541638fa2.0","@material/shape":"7.0.0-canary.541638fa2.0","@material/theme":"7.0.0-canary.541638fa2.0","@material/floating-label":"7.0.0-canary.541638fa2.0","@material/feature-targeting":"7.0.0-canary.541638fa2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.541638fa2.0_1590090539909_0.7946155320370027","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/notched-outline","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.6167cd075.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64050199a4fe1d385f8b8f8007aa17009cf74aab","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.6167cd075.0.tgz","fileCount":34,"integrity":"sha512-xOud6hWbJdECMYmdNSIo9LGkgLETwoQDflHnSg3piXAVw6hsBFokEAQOj2DF7D3sPI53tblbUKZIMAklZDaOFA==","signatures":[{"sig":"MEQCIGvHIQJTa5pXAr5LyeK8gZy6lJo1+XkNMYavlYndJfGFAiA6T/ymtu6adp5q8StKy+iCXtCtflByKhViLGaANU3Y5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuLqCRA9TVsSAnZWagAAAisQAJKo+2It1KpNSUXJr9YO\n8KwoBYNmsmq5kIu5Zxmk4qXr0VY5r2iKaBJy5qfl7qsA11N737zriaxwwGW0\nkIw/GW0DRsvoGBdDeMVEmQJ44ikmrSsTzpS5gP+tLweY9XLMtxf08uivP8Rd\n/FnMYQhEOof3Es2BRxlh6yWnZoCpO+aygS+KypR+ZawkoIsUnKMHWtCzMT9i\nGiPC7Xkm3OPzBvV/OKWBADPLi5mHDBTyxCT35DRa+kd4r0dsbAgPhSnwtg7o\nocGe4PWDo5fuuF6Qkqj2WVkW2qTR+lePUWtBfKQm4aC8ABVmYsM+mYnzaSYs\nC1CMvzyb3kLnifPqUbMiwFjktHmXRTF1FXXyVoTM9HbAhYA8oNT1GmhFQIRX\nqoH18PLKgNaBWHdtMELhCe0n7XX3n2JOt3vmwodtp7lV4ISQXlhHg9dis37l\nD4gfxub9Bqk3cAyZBYEl9yS1uw8S59VnBVszUfiiCvihU2c2m5le5eGJUoJW\nxTwSQWjv9fNCWcmalp20X8HI//rST7OTUiWdyNlGm+O8pM35Tgj2I+S4eIUd\nZTbvv31IhpGfLKqduU34qTA/TE8hFI3h7sV+7KcCOVPlamzeU75wVQKEJObq\no3KXHp8+Kr1Q0A4ocw8taAc2dRBphq8sfIW0uwzzTmHra/vrBbv7QMep2EGX\noH9P\r\n=RHEZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c86a924ab304fc32e4e6840c7c8962330b6b0fcd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.6167cd075.0","@material/base":"7.0.0-canary.6167cd075.0","@material/shape":"7.0.0-canary.6167cd075.0","@material/theme":"7.0.0-canary.6167cd075.0","@material/floating-label":"7.0.0-canary.6167cd075.0","@material/feature-targeting":"7.0.0-canary.6167cd075.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.6167cd075.0_1590092522045_0.06446520041111659","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/notched-outline","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.863ac1b0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"723c30fa77197d457d8e814284f687263ae7d159","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.863ac1b0f.0.tgz","fileCount":34,"integrity":"sha512-1ZHrlNYdNRKzxi75/FXAOxakWwD2s/H9+ajltvnoPJ/lxdtsWyueE/Az6I1lZZLpOxRu6XIkxr497iTbHPYhpQ==","signatures":[{"sig":"MEQCIC74QeiDGgycqCbHPJDjx4jkPYfkl6L65jKi+NthuVp2AiBl/JjE4PCIequ6MFj+n+KPp3kq5CxCEyo4RPrOTmHNiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuvsCRA9TVsSAnZWagAAqc8P/28Pjw+u19sSqU6odaHJ\n7t7KMAzGorjmpxaZjIDCMxcXdUGaSbOVkrYyYKCj0Cdi3rocBN06zWyjlT9h\nv0q5d93ItsyVyEAQ/aCnaJo/0fxK4JT9L5UiZx9h2DnIg486egplEo1/Tv9I\nx3UwIjjxIKIFDV1hrw0N9nt6N7bRo8V0HF03oIFwqDnHB4ADODoIxL8/mLML\nGnxj5Xi+yWc2Wyf4oefoCQbFnK0bjkS1PDxzRhoClXKUqr08BcxMCUocwSpq\nIFmFQ9tnjwVa0dywUgWlcun4zLKZKqVgd7TGrtOLNMcxmxPqShg2iTfXCCF7\nT4qJKrRex5xZ/uBnOcWA9ukDqG4MyfDZ2SPjQQAzISbUZJmrMJ+PDXY95GWf\nwALVGJ8l2u0wWlX+ZjfWcrQKLM5IiXiuYYQkBYIyNQfmpE61SNbDP98iDM7C\noJJqlbq1Vib9+MeRiK060Pi9EScMzVrrEN0BALZmJlsxL6x2tIiJdPLuzhu5\nTiMGj3kWSl/xRjJoSyXJ5vADBMPBK0VU1XFQcaUJDHbzHGwWRev9TXYZPg6+\niIUmBI/TCwl6mFmGvULk2WIWYAnbinZpxyAONH2UjAUACAQg0acXRR9kc5z5\nkUCqHpuLPVyKpq8sXT5mNawU153m+ZpDOxM/dv272O/V9EbTzWK3vMYpkMNc\nTgdD\r\n=ncrr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c1e7026720dc12f1bd465dc892c8718b429563b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.863ac1b0f.0","@material/base":"7.0.0-canary.863ac1b0f.0","@material/shape":"7.0.0-canary.863ac1b0f.0","@material/theme":"7.0.0-canary.863ac1b0f.0","@material/floating-label":"7.0.0-canary.863ac1b0f.0","@material/feature-targeting":"7.0.0-canary.863ac1b0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.863ac1b0f.0_1590094828268_0.6210655125406535","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/notched-outline","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.d30a214ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94a2cf7e0ea2506b361a4d952ead7ef1915c833f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.d30a214ac.0.tgz","fileCount":34,"integrity":"sha512-h7H/mpiLsGW3L1locbAlvIqsERT+O+RSOncsQkzpCaSqKvJwDiQ8AR/r5FOKp4lfY1fyChMXF0SMzqyIbApjZg==","signatures":[{"sig":"MEUCIFnMckIi3ufufuGTNIRLbUMyYV7rl4s+7cIXhCsd7/XiAiEAzP1K6b4aC24i9mzFdcJql+u/TdkeUgeYjpUp/QguEC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuz1CRA9TVsSAnZWagAA4YYQAJ5YB/ewJKxNrbVdP7Y9\nQy82fytuCXaVRZEPCiMLGhL3RmNGGUVTS3c916XMYjWfpz2DAeR2Qhf0w5ld\nxMuBB/Nn/yHL4pilV/caEUrBMY4/eKeAaC7gRd3UGrlKrED1Upewh4nix1jZ\nWU74lUfgVOurOVdwGo1QAhn5D9sn223UoT1x1rOzKgZ86cfwjKwdr5jBngu8\n6QOL6+cELTc6GR8pyOumK9GML0CEhtCJE2U2YaQScLwuJ7iSQ5hNsDvONHUC\nOxJt9ClCejuBc3NORCmJ+5bIHWNkQxMM+pG/JQqKjzudW1n23YHGYUeuO8LW\nvr4DUxDCMBjLjgmXFY8ahs5hCUrk6YGqfYMV3Zks62QoqTT8Uy1XuyJ2o2Oj\nkR9C8mo/15Ch7ec6CmVSWrdd7RB1cDZl3okPncGOz7eSux4oUXxNjWEVw6YX\nP4AlqDOXO7OSajdEHO+kNTfbFMHO5jtaIr5nboT0+nMlmwc/E5W8fBNF22jm\nM8OWVeuyKwEF7bCL7M+5dfbw+1OBGyWSj5N/JeHbw+vDqs+KO3+caeZodP9u\nks2TD1zcC3+f6Z8lSNhLX/kcYfRwbvgnGl2I6N4ZGGEbrH9zXdjxPSD3jC6B\n6KZ4otM2+Ip+l8lw5CNqhZ4snQovDWiIlZOhuIIbI4MgSi2mNq8suMlSorUk\nK+hP\r\n=g/dG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"635c0e7c484f851d2ecb4be825abc36357ffc685","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d30a214ac.0","@material/base":"7.0.0-canary.d30a214ac.0","@material/shape":"7.0.0-canary.d30a214ac.0","@material/theme":"7.0.0-canary.d30a214ac.0","@material/floating-label":"7.0.0-canary.d30a214ac.0","@material/feature-targeting":"7.0.0-canary.d30a214ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.d30a214ac.0_1590095092758_0.2876706144335677","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/notched-outline","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.62abbc8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7873631b0bd018329cf8da441dfba9632397d093","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.62abbc8d7.0.tgz","fileCount":34,"integrity":"sha512-0Lzl8c5TtX2ic4z7KeECtklVvUbEBN8T7PLA5CzDQQYI5kQ9lnYGR3jFOc4gLPJ4spHxWJMa2YBngbm1/0HdZg==","signatures":[{"sig":"MEUCIQDKNWXo/mv9I3DJfYj9jLXKS/JSSZhQuIw45ashTRgKcgIgFUuMYeIfJ6ya19AGp/0D7eXKci69inC4UpB3ZVxNRlQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvK/CRA9TVsSAnZWagAAmLEP/AxsY9hHu3FyiMqo2teL\nQukb49WCFXFkm8cSynDax/asXtONF/VsSxeUfEzoVfxAGgM+8iEtQ4i1hzCX\n6yPHswfvu7C7D9qFOlsbr7a76Aqw2W7/HZXvdILzQ/l4ifGLcP3cWxcS0xmg\nu6K5MOjn4K6qK52HDA/jk82gevM8F6crVt5zzvVrAdd8pIbEDhSBvGVJMify\n4KXmP9v/r7FGjIiyY68UUekL4TvSD9WxXyPsl6Srfl7tZ2+5rZfhhRC1Vlli\nrLIY9mX58NbNc4QoS+/SGThDpRVSO/xeLP8boICfIvKnYHneBqbKcTYpIJ/6\ny8Xy8/9bOzy2g8+ThACugj8i9HqH51bHIXogOfZfF66ygfDLj9un2DIPwX1L\ndVxifEqgBqTeNdTFPbdpObIp5LjIlT5uAmpPNRhTdEc7cuu5aPZ/Z1TrQNI5\nYYxkWHipZD63rp3evVjYoVAMWX6ZTJcnhKEqR3gaWHy/W72AMMJyQcwLw6eL\n5uiuMbyl3eKt1A7vERamT+BOHV93hSavkgnb8SJ/7qH9ytLiHNgwS7+F7E5A\nMDRPfQHlwZodNZ4X2MMs0EdrmyZVmAptO7z/vjSI/DkDB05UlEUZjxHdqSCb\ns2ObHVWMw93h3rDFGd5NlveCiz6PhJxgfwUG8HJEVJy+z8dlY+91soT47Xyq\nycZP\r\n=A3+I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6758c29e4b065e2aa9cf633b0838c4ebefb9f54c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.62abbc8d7.0","@material/base":"7.0.0-canary.62abbc8d7.0","@material/shape":"7.0.0-canary.62abbc8d7.0","@material/theme":"7.0.0-canary.62abbc8d7.0","@material/floating-label":"7.0.0-canary.62abbc8d7.0","@material/feature-targeting":"7.0.0-canary.62abbc8d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.62abbc8d7.0_1590096574853_0.840449882425474","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/notched-outline","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.49bf31d5c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d5d5f44e2ad1130338742d95a909108ffeab4de","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.49bf31d5c.0.tgz","fileCount":34,"integrity":"sha512-PhG4B9WmmGYCmtUDjrptosaHndOrj1oGh5CtRy2dB0kcxOcblyoyhshQZx1d83nl0/SIGWP98AoL+ikW0XOucg==","signatures":[{"sig":"MEQCIEYv048ASC71JqR+Yt/J8p2T4cdV7vpOBTiCDh4zxTZUAiAxM2RvRg5/FZJ2o8TbvciV4mIgdbM8sWPTLuh1vrH3bw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvOPCRA9TVsSAnZWagAA9EcP/RRxcfPzq01U95Y3+Beg\nGs9WVhOZaSZBv6efT2JpohiT96ErVvgI9JD0JAnJ77ju/jF+ixwZzn51Jsxf\nrdJyzFy2hLgqs6ZajCd1ZWTKUF+xROJK/UwedfFhiJSR0ZzTk/w3fmVG3/CM\n9K3fyXGqI6M48N2xvZZwoVdn+TJGGC0XRSza4HX1d3R9G4jO26UXQ4cIRtWW\nK0PXRAPVIcriPijFlylWwr3EI+A1HAw2K81FjzkDUZMHjbMJoZN0TeHXKD8X\nJbrPpN3smoKu+EXoq6BZzRr+Tzlkt0YUh2yRY3oS+4V2OqoIn4eS7YbhGOxv\nTa2n1L+FVPoa6/BC1qnH3HBjc7SUIvhCvWK5jHIH0E2xvL3WBq0gbimGsACd\nGjwsGnBLQSlK3ZCucNagw+bZtMlMtGV/WUv0DiK4ajntHuGg6X1yxIyrFHa8\nomACWejCzRhi13eh+rtXlWGcyJ3nT2cBwMI7QOsi++eKgj4DBUHMWVp2YXT4\nmnyBj8oU2M/p8TIGlCEocYLh2bDMab1776QuLMku0yFdpKk8yrJEaze6ux1K\niQkglMzWvKfgb5RfZJFEm5OmHtt3cytZtWtv9TXnfOYV8CJVwx9YfQ6dVqCA\nQdihjnfE44eskviHoTbp0XlQErnXol6kQAoMjTSnhLZ1cLvae9Cx7SWi8Ps/\ni+mO\r\n=AZlm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"01cd7b0082a754dfb042df35ec48efcd4aa4c52c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.49bf31d5c.0","@material/base":"7.0.0-canary.49bf31d5c.0","@material/shape":"7.0.0-canary.49bf31d5c.0","@material/theme":"7.0.0-canary.49bf31d5c.0","@material/floating-label":"7.0.0-canary.49bf31d5c.0","@material/feature-targeting":"7.0.0-canary.49bf31d5c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.49bf31d5c.0_1590096783365_0.5225910602264838","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/notched-outline","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.8e17857d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bfcc750962aef5650e730e3b69160129a739137","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.8e17857d0.0.tgz","fileCount":34,"integrity":"sha512-4zpFZ9HJEvKKiEo4E9muhELjzFVAijFE6xYZd74Ut4Rz9pV+QZY7kQUMASmdbSIYWy6StzxC9/aKbpiiBZ1DYA==","signatures":[{"sig":"MEUCIQC1dQnNOHu0sLvvwtulgjB1C4dU1EA9dkqe/clonVxAEwIgf6A71VmRmrVx/CgtF8wRnLjj8Uuw9eTNuqAFRQYoO6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvO/CRA9TVsSAnZWagAADvUP/iA9uPEf1KQ9gSwpMAz3\n88V4Leg4mFj0E21mLxyIw79f0/uI2A6nsAc7yS3bof1rl4362Xs/rDnLekhc\nYtqvhqwc0X0HySAzvaZ9ce7RuiDe3U3qa7tKEbKbhGKNt8kUlAVuBjBd5f5C\n1Sq/k4/wT2BxL31DfgHnxaS0tZI5lpFeAItHInDhikL9XUkv8ZQ15pK/AGtv\nOKIqpBXnzHzRy0KZs5WU3MsbsuaXTng7RLVksc1gXh//Sdo6b9gWz0dxQOfN\n57MCBwCpfstl7IBhDuXVh/qmz3nRwrYplPl5UDFaVXXD4ZME+eOifnpmk0V5\ndSrXVhxigICON8XqgQHLOvHGcpkKJQPxMaCV0jEryt1Sm+TbkEiLc5EJZt09\nkOnDLTxsoAPBxc5AAzIaSoAcI9qU0CgtpBHZts6Bp7Pxv5qlo1r394oA/96s\nnzJOeD5mp1hSFHheacYl0PfInwV32dVFP3rNReEW/8zNPGPw5/s0QYs6NN67\nUgruI/auW1p3yqsxNWnEAP30oWwXdkj4QaT8j3fHTJnwb4ZTlWTwqS34mZik\nGlIKiHX1XKbnY2YH1yyTBNIeRmSBaP+P26tnIApOa/VxF7ZKCz4e7f8FlyaD\nZhfYA0IZj2x5FHydoHPsnWMYm+cQ/Md/2tnjamlWizMvNCdpPeWM5u7J3K+s\njuxX\r\n=H57L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9b03d700366fd287f2ec053c5ef4ccf802ac600f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8e17857d0.0","@material/base":"7.0.0-canary.8e17857d0.0","@material/shape":"7.0.0-canary.8e17857d0.0","@material/theme":"7.0.0-canary.8e17857d0.0","@material/floating-label":"7.0.0-canary.8e17857d0.0","@material/feature-targeting":"7.0.0-canary.8e17857d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.8e17857d0.0_1590096830644_0.2864669596023195","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/notched-outline","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.c113fc942.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d2079f943dbe6ab7520680ed38388ac1812a4c9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.c113fc942.0.tgz","fileCount":34,"integrity":"sha512-CfU84eWhpQ8ynK4YWXlIrF73w8VVrUgSiOo5VBnk+VlZ1pTmwvpHKK8XF0lRd9V1OaSrwX7ozJVX9OJ5a6j2Ng==","signatures":[{"sig":"MEYCIQCtJQUcZ+2U1FX8tQaUMueFieTXr3JmP5at2jta/EjkqAIhAOVfnn5SgbwV2V0sofW3DSu7aVN53R9FhETsHUvw6RyK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwUBCRA9TVsSAnZWagAACMgQAJPysiw1UvKEjfmkLz9f\n3E8cVPcby8xT/LjHQW6togqezClUesLDgIYSb5bP2QjiqMwylkSRzKzvvyfd\ntM5wcETw3stP/W2Cc16uHsDG6d+QVNrswckhnT6c0Zk7krYyi0wwhuxqX5kj\nNRUoSE9L8xiqjJ+VxVaAEWRWOdojM7fWDYaxN96plrqsVaTl4o0wjWkffMOn\nXOWO2F7GYxkU3ZrVsQZogpQmqxHc8JRFAo2gI2nfAe4eq/+mX64nzDt06u6x\n6NSvf72rRt9oWi7btdDeolPXomqQoalBlqVbiiQEM7E8K4E5zYSkCRBKrVwq\na1eDSziERXHDk0Sk+JFuT93zOgCPZ9hy4giZfTdpsd/OB2GitJO2yMvnu0de\nGAEHT2rj7TEgZ1V1hliWjsKMSxvthnEzMSEmU6P/Z/gsgcVtUWzyCTAdxRz1\nEngn2Tk4iNKLdo5fkiEtDQuG3qcm1T4NzTGxqTX+wH7ofTTbrVrp7jC2fDMV\ndngpq5Skyh9JLb5avDPimKmeMzTASx15nWCBJNa0FZhdgV4HzsuUHx93rAG8\nLboV3Aj2ACE7lKsRqWHgfahvUmDw6fGBDfkYq4OgCeaYD+upXs6rmpsvm0G2\nW0AjeCo/tf6s8gduxlOdAUFKYGPlX5F8wJhtRtlZ2ioXHlSNdx/qUKEsOjX1\nUpmw\r\n=cuJ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"49605d78c19f78dc1b28a35457efd8dd808621e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c113fc942.0","@material/base":"7.0.0-canary.c113fc942.0","@material/shape":"7.0.0-canary.c113fc942.0","@material/theme":"7.0.0-canary.c113fc942.0","@material/floating-label":"7.0.0-canary.c113fc942.0","@material/feature-targeting":"7.0.0-canary.c113fc942.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.c113fc942.0_1590101249478_0.3908865036450091","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/notched-outline","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.912d9021d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6cdd4537111d0e7bc12eaceb2b4f642bfc11f24","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.912d9021d.0.tgz","fileCount":34,"integrity":"sha512-bYC3AgV6xQU7R6c8R7sa9YrbW4Nt9x1aFrtOoJnZM9kpglpdh/AGuIF+sAOTPeFda1HmwI/b/LS13tTw9x4G9Q==","signatures":[{"sig":"MEUCIQDtmh2qFtk6RHrAH7js6VLtZw0MKfu0YU+O+CzUptgYIQIgEmtM5eC+dLN3Nx0nkLwRcdNpY+H8UC2Z/8y+h7+J6Bo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWP9CRA9TVsSAnZWagAAKzMP/2EPAKjoEv1s7f7rMVBN\nd+0xJdRMp079yhQfVSqKediZdunASEwWntkQEca+5k5skAmWKVByxAgP+Z66\n/f8/TWupVKFAR1I1niAApLcwh93dBVggTl4UXLFF5GexKGmqw3NPR/gjnAMy\nTh6BjgBUgmJ9I8Qtzh60ZXRAZNJhSB0GwWP0vAx9NPBIk6WNvma69t6ByG3c\nfaOFDZKcltOfM9GCfMMS0W6lQsxvtADi64YaSN1ibvteAzOxZ4ZHWwRdPYmD\ntOtiOQ9dukseKh4IIazxXqpgHNr4PUcB0xfHNd9pYq5gyV0qwCnnX9joTQvS\nstY/IaxWaOSis8FgE2kKjelLEjtyTNhDX5R32eykmiiHrCEJM+BKwfjNwYUT\nLH2CED9l91Wpg77DrdBxgER17QrewPyBVR2M9M9uQgtRRxHohT0Vvlq7YpLn\neTlCwSVyiD+2V3hBfV/habLCnW29V7+GBi9tYJZY2oYHL1fFCQkH7ou92BMy\ntJu8fk+v8XgqDcxt2GMYJkmIFEYt5Q+B7YL39MAKR6kGlX1/lfw6BmaHOxbo\nkijCftHlE7S6hJ++uJ5firQouacEVHGUQ28/GdTz3MWro8TMrNug5q0apKsE\nzE7dyWk3s/a20skffjwr0bFz251GRlon3W5BkVkbNrcTJN+N2yFOqTw41njS\n7RPN\r\n=PXIp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b7080ce5675d8ab69b7f361d040e079511499175","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.912d9021d.0","@material/base":"7.0.0-canary.912d9021d.0","@material/shape":"7.0.0-canary.912d9021d.0","@material/theme":"7.0.0-canary.912d9021d.0","@material/floating-label":"7.0.0-canary.912d9021d.0","@material/feature-targeting":"7.0.0-canary.912d9021d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.912d9021d.0_1590518781165_0.7479662964084393","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/notched-outline","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.68a2af131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78c06e08d3d8ca2a63cd6c6451ca906b236938ee","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.68a2af131.0.tgz","fileCount":34,"integrity":"sha512-zXrs05UbT14FsfDD8NPa0BztUiLfzT1gsGwHOSQNsP/atvOHfNFD957XjOEaFnw+xtaNFXWmbzH7IrSbELyeTg==","signatures":[{"sig":"MEUCIQDZfV/rJGvHwA9+Li2eAefu+nlpfrZhdvtDcJbZX4Sz4QIgCJlIfRLxSky4u6Zojk6i4XpCOcVi+A1QzOmgfVdHLxk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWkuCRA9TVsSAnZWagAA+egP+wcHknoT9RGp0XFI5D1c\njFmTJrwqv1Q16WhdA+ikKgFxPwj0Fc1yYC3K4XIjcyoQ0VlgVL6o9WmiAE0E\ncQ2fk83c1Fqb214O+nWrNSxRPKve36wZsifH9+ZJ5SDiel4yNK85UoddpMyv\naYy3rsqO8aPkJbCfftIcOnLvcyRkVIirvKsfqU56YH95Zr04nE2M9EGQc9AR\neI3wFcw2c8HNP3+tbHvdn4a0MlRpphgxtl0hSCSNmpd0D8x5tIjgE47MnbOS\n1mpKgTc+2AkmfCcaNgG0kaSMP3PhKlybw921ywUNosM/k875ueho3VA5fiUa\nKpxXBhwIPMK/LJ1F5uW7hSxCPFNcS3FQsq/g+2wzX+Z73QlR4NCmV0Twi3eA\n1ylhvKRqRz1PwJS+F4nROIYXh5arab4TzpYs6cO0LA8SjGRvON+RqtKQhaOM\nVB2d6lwF+5plsBNtn9Ou7x/zfFGFD6HiBkpej8gTpMNutJ5SuWFHApxGoEPe\nUuTMk33H3CXqaXzVOPSSaX688cLxZ4s3ajqmMABE7jdjP5O+gJvItWA452Rv\nIrHeREHMYnvi93EJ0eMXlRe7Ml6D8WJ34ce0oq+XiHo6f385TH1pWdf1Hw43\nxycaPgWU1IxEGvb78YM8Fv3JNy5zFHzAAjtmplEr5o91E9M76+KYgE0o1iYz\n11VE\r\n=gRgv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9fa697d39bb8f18500434764b1fd608819d2e194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.68a2af131.0","@material/base":"7.0.0-canary.68a2af131.0","@material/shape":"7.0.0-canary.68a2af131.0","@material/theme":"7.0.0-canary.68a2af131.0","@material/floating-label":"7.0.0-canary.68a2af131.0","@material/feature-targeting":"7.0.0-canary.68a2af131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.68a2af131.0_1590520107237_0.3715432279174049","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/notched-outline","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.01de07011.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f15ea0dcb42be33f1144a71a0d7c78feccbfd65","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.01de07011.0.tgz","fileCount":34,"integrity":"sha512-ISmgXyUGpmYtQQ3QuFkA27K9O3xqg9pog3uEBUxvumhR0gV8592PewoU2fWTBh4aDP166GGVj0sTqY2qLwfjwg==","signatures":[{"sig":"MEQCIHGTGz+32mVpR6fBkR8icuipmzMz9/TCOj0B35pnoXEAAiADthL5guCsqwxgUNwFs9btMeHML1gogEuN3wAg2wCydg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXO1CRA9TVsSAnZWagAAT54P/ixIxo98ljyglLVClgP3\nLgbSIEBjAYLUQK4NE9PzDoTSFdyKuVlUxjvo78m8xowC05o3u0fHvINLT8kB\nsHFFZOihHe7QfxFco8RrZvrWNNVZ6KE27ssiK+ehYTeymwie4jBUuJLzKudj\nPdSRXYE3LfEP9ykexAPlxYzzakM/bg10GZKmlo20E/hZkPxyHUcgx+prL/OL\nLzAY0XQcMzHQS6Vx0bSwUZ1EotOtKbSAntYfEqjRK62I75N7EDo5Pij9si+D\nDA5zzxw7vAlrA7aOEP0FECCRSYf/lUPOS78ZE+ls7Lw18VIXT/CEvc4SRmsy\nmU2mvVVLI/wCmSuyg1CLKfGZ0dKRl5yW/bs2Y46r5RjXI4PvUrePndZ4mXeb\n1YVDEFPoUbRJ/Pis/+x9AmFs4XuH/oIhdJKmIgE6a1nZAR227DhHIdJL5NPr\npQ7NrYAsTLywsBR2wuoiPmlooqPODQbSBd5BMfaWv05ejwEdUGFBTMmID9oo\nNqLOXoxdKMT7BatekHQayLG4gRU9wMZ93BE3HxnbMKgNEDs6vD3JOCNRIfrt\nVYXmc9iI1xlUGKi1QDwdZUEMpqNnLViYpooLj5o8HtOHeZDo18bjIlmUxg9I\nSG3nw5lHHF4M89HWMKJuobZrmN1RpCaspoU3ap5cNAN7J6+qiH5JIgDQCIOe\nXNAJ\r\n=c+Zw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"58ff4055affa7a1d66e79813fbb147990e5360e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.01de07011.0","@material/base":"7.0.0-canary.01de07011.0","@material/shape":"7.0.0-canary.01de07011.0","@material/theme":"7.0.0-canary.01de07011.0","@material/floating-label":"7.0.0-canary.01de07011.0","@material/feature-targeting":"7.0.0-canary.01de07011.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.01de07011.0_1590522805207_0.31050314478589147","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/notched-outline","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.51d4535fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db64d729d03a77e564beb6bbf1100352c22c9bb6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.51d4535fe.0.tgz","fileCount":34,"integrity":"sha512-xHQDtWGq9rTcThS0Ekt0gzw4KYrHLTFyWlvzxwqDCOuaoca8pZD1AxDXSrK6WUSO8p4mNWWqFwoGaxlh/ZJLJA==","signatures":[{"sig":"MEYCIQD0gxEAGkEHCGzO+AF44xhl+N0UOPl8wbIC09r6Y04mSgIhALDYxUQdQB7SwNyn1ABGlUlpaqrDO5UVo4pctdTqyryw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYvUCRA9TVsSAnZWagAAneEP/2i3S2nypRo4fPcfX5XP\nIMrBQk0LSSEIbMMczWtG1HrqjiN9iO7O8xkalsihJWmnEDeeMiMp54MWeMnu\nMLtKxYIAr2kl7LfIGcnu8NE1ZACb0TWoZE9+m8da8A9eVto+KGkOuR/ZJSQ/\nymsLYbFg2yGs8ezfELArq+HF4PT8tOxGHUds8ZAdEq9ck9UqoyDfKHA9ZcKK\nIjVJnIclAm9VbiRxHnrUUFTNQaqEPNSMvkvEchQHF6XlsU9AMZMa2gSDAkPC\nxpRmSk2XwkBYvXVqd6JcG9NvY5kZvvw5k2IJDRHd3t69QozGtA4KWCTTqQb7\nzamPM+dXR3qTVGs5q1aACow6MSF9/ZO6k+ps0nH+ouy/72mjVIImnWD8bo81\noKjLlkYCU4Ey28CGKwL35jYQkYewtxOBLeyYHF8ARc4XpIBlTg0UDC+MhzHg\nFXOW7oyuZOR31VOwJaxudwccCVDanz6X22bQOP3ZkpS0g4qzwe4kw7MPg5VF\nvi3t4X/wcBw3s8NNF9T1YGCiaeWuFrc8mvWvR7s8R2rKWjz8yYTbouFA08Ii\nfChqNvo3+9opT1Qpg86zWfCD7jRbAOLEqDMxWPQz9hrAvFdt2vkpbrKjg2Tl\nLRWUqokcps0he5kOqXxSmPKcR2bTQTJBYNAOpVz/ZWpYuPZdMAtVWo+mGdc3\nKJbu\r\n=k6/L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2ea346ccbcf8fe2cc90f893a510a194ad4f67356","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.51d4535fe.0","@material/base":"7.0.0-canary.51d4535fe.0","@material/shape":"7.0.0-canary.51d4535fe.0","@material/theme":"7.0.0-canary.51d4535fe.0","@material/floating-label":"7.0.0-canary.51d4535fe.0","@material/feature-targeting":"7.0.0-canary.51d4535fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.51d4535fe.0_1590528980333_0.044724265907115424","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/notched-outline","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.b86d826b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07b0c34aeee75b15b7ef61214d797799bcab8ccd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.b86d826b7.0.tgz","fileCount":34,"integrity":"sha512-DazfiVKjfbBAM5jejA7+NoEIrjiEST/M0bYu1k5xz5eMC17eqbgd7cimyrl915gIf8+S0kYAtyut9zLN5waKYg==","signatures":[{"sig":"MEYCIQD0M9wnPAmCIDuakR7VxJiCP6Jzwb2N21/rS6ic8I4jrQIhANgWMDRhjTkb2OVGLjUdPFZJ15QCn8zN44ofB40AHGcZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZTLCRA9TVsSAnZWagAAOlwP+wYYfTjl4NAhxMl9xWm8\nKgJdHmJPfkcMtiqSpIQj7kArMyqZQrtPSdmMfCbou+Mpk0xLiGI00rx2pfya\nJUbbgB9AZcIk3skFecvV4teY1hjsgE2z8Ny3GDT8IQKXDP85GDdnGhkzukTe\nNQ2I9A9OEMd4drsbNh5X+VxTYZh8U11ZBBa3DFtdsNUxuSOWUTPpwk88NfIO\n7TndCBKRjtyZFufxdUHgkJvFX1MH5qSaQvIOZ7hOB/hWvti3cNhYtVJOHai/\nww+ezxoVW4Z+9j2kleGxpl9Z37+pzr+O7stSN04QFpVB3u83wi2ifWTInZzW\nR2KMCO/hsP8hx1tWOGKuvSQWCRnanknA61YU453kt3hfCb4D0POZPzB541Em\nB0OeNJCh2Xvv3tVa8r6taRfnFgCtGCz/hxlGoX4owBg+dIIFoxQiCxPjwf0g\noZBD8EGglaZOytEHriAwbATDxQPMTnmMFCMTgG9r1Ytb5pHxze/Juu3glida\nNJ4vE7KfJqrpFol83wACjcy4lXLYly3c5Rz5ijyz+qXKEBjBytRHEGFy01kw\nsuNlvWxP8HbsbvKDJh9fKcTyy0UDOItbEmEc//YBQYp4q5IEqkvz7iOwaxMk\nxNtPLwU037pImIzdbCQMt4hkJiI4pHXT1w0elQP0hjVz1fdKBkeI5Ifswkc/\nVivo\r\n=ffUE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2b22865938bbce871e6d1ce8ce0129227142073c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b86d826b7.0","@material/base":"7.0.0-canary.b86d826b7.0","@material/shape":"7.0.0-canary.b86d826b7.0","@material/theme":"7.0.0-canary.b86d826b7.0","@material/floating-label":"7.0.0-canary.b86d826b7.0","@material/feature-targeting":"7.0.0-canary.b86d826b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.b86d826b7.0_1590531275299_0.1492538025892871","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/notched-outline","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.d91794c7e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3239f2dc274dacc64e5c529079b2e34599551c3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.d91794c7e.0.tgz","fileCount":34,"integrity":"sha512-4Y2PogTqC00fvfxFkIu2J4pkoi89lUltsADXD2sV0e980Ifj5YOo3na635/06tTBx+NEuuKzKL8ny3Kjf5TG3g==","signatures":[{"sig":"MEUCIGp2hf/ttsw8AZ+6GqKd8dU52DvXwrNImHgcuufLw4/sAiEA0xwjS+AuyGZdAWwIB/g0XZPIhw8b5grVouc7Bm7J200=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezax+CRA9TVsSAnZWagAAXo8QAJ1vu8Bf6gK0LUnfTS/4\no1Zr59FKDJ7GICV8B58YYtH6zQFxzncCyI3KaVx2ZVzH7ohyfpix9umImEDv\nNsNDYFotmGlUfv/tbbBmhRV7+g1k5hi48MoFZ/7fWA/nDzFDHGZ9OXu73GMY\nkVjNa0ecJrzJpFt93i/Pw8XF5W6NhUWWSLYNbCqoJb+6hcP71FcO6E6IGKUO\n/n0YAMKbsjC4Uxs75y/74V0qh5US/3g7u8zfPpXlnqPhQdZNhpiSz+kJy33n\nfF0jpacM12zJQCvkzeBH1oifW31mlUjZ6/GobuefzQORST9x1XEHC/tNzCSN\nQSPM4ceWg4CfQ4u0Ozso9uW9WZhlxALwisP77AcTimTcydVyZWUcnSMGdW+R\nbCUPddJ5NlkmdNo1ScjXQ1QZFF+A+1I8pagnNEqv4y2v+i8GNJwO/Xia6BDA\nBJ+pkV4MPsWsy0HNNzVi1EvfFTZYpZ4m+LBUFVtW7WnfSfyt8ZPpRY9V5HDa\nf6f6qIjes13gvRGn4zykVm/5TPT5oZn9ZLhOlmmrxbdJKu0B7BoXQ0Zdl1RW\na5TYmDUrIYLX1s84i6TEdC+b+HmwG8yjbIlgmCwX/OrnQ0YfOSQYZALrfEyU\nbzshfBaWoRkwaEeRrx55E/14WfVrXf+8KJ6HGVBx36zkZRWsH2DzeYLeP0KP\nkIYZ\r\n=vyku\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f931cc9789364ca07cac4a17cef0a225bf43c168","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d91794c7e.0","@material/base":"7.0.0-canary.d91794c7e.0","@material/shape":"7.0.0-canary.d91794c7e.0","@material/theme":"7.0.0-canary.d91794c7e.0","@material/floating-label":"7.0.0-canary.d91794c7e.0","@material/feature-targeting":"7.0.0-canary.d91794c7e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.d91794c7e.0_1590537342279_0.3098958481757583","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/notched-outline","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.8c6d7e076.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2be3349aee004d867b88907c850c8401b51ebfeb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.8c6d7e076.0.tgz","fileCount":34,"integrity":"sha512-w8zfORJVbUIwzA7J5VnK5HrT+hbwj8pTWH2b8hGrQJHdJkn23nZpYDFkxs//WayPJ+FNS7vCHhfzZ6slKWeSEw==","signatures":[{"sig":"MEUCIQCLajqXldUn2BeIx6DkypN+anZw7AxBbMTcSHLGdpb50wIgMxeZXA+KoZiktKa1KZrQpMBK/FouQCcR3zP0d6HKq5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrjICRA9TVsSAnZWagAA1kwP/148KJX5KIf1Npb/kP21\nQIzwHGjOykm9AKLmhxLyozrFCz69IeNBSxWS8h6Uha8ViuaPf5KyM058KVL7\nJgUi3EVNH6vACX8OPEI4GVCLUSdeKdXloa80FfJMpPMsytQdXj3uQTexKKDR\ndQVsbhbsICakKJcQdjSLfN/FXa/Z28Y7Mh4oHeEYhwh3Ptbv30WhbJ48oTBW\nc0O4HwXLEHIMKHla8ME4F4VqwvpzM23f6UX3PTdoW6RS+rVbP78jnxgLQYb4\n3QDgMgkmBpq6RWKCVeF2236CJp7HDLiT7UAkXTSHALwA0n/7nlvVOE1U+K/w\nd52f5hYRLoxQoGixDtcDs8+DIltG8/n5GFXAEbZWT77xJoK8h5C64/BHmdUG\nraTOkldA2FYdlny0gZpzR6A1i82hdqFiqfAtWnIQccjJhxJGm3AsZlBWNRZX\nXFotdvLyDc0QInETUoo32qSDCbLi8XHbUuJRqehsQobYkDzj2qsIIXR4+gAK\nJCUm2JX5fjlaHKTjDP56jfwUKCuB6g5Zy3VNFk103H9FnBVRabkugdXiBvfs\nF8BCvC8YarpjloQtQIjKlomlQ0S/DRSMmsnqxkzZpVFzt+gPGwVN9QCj2Vkz\nXZNmnm0/4XOxR2U6KYp8U+G8Sb7rdC9FeoOkEcw7kYJXGVVie/dbk5ahOFEh\nJgVC\r\n=sDJj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ca2efa9bf20bd3fd24c7f6ff263721fea798614d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8c6d7e076.0","@material/base":"7.0.0-canary.8c6d7e076.0","@material/shape":"7.0.0-canary.8c6d7e076.0","@material/theme":"7.0.0-canary.8c6d7e076.0","@material/floating-label":"7.0.0-canary.8c6d7e076.0","@material/feature-targeting":"7.0.0-canary.8c6d7e076.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.8c6d7e076.0_1590606024514_0.8983108028476956","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/notched-outline","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.5b5f62f93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a7887665649df48da88d84abb42e8c45d3d6fc3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.5b5f62f93.0.tgz","fileCount":34,"integrity":"sha512-6P5EuYbqyEMxvhgj/pvk1qj5Tta2OI/1nQX5+MOsQ6z/hdrKhawUn1VBJngyJaF2nyA9VgEt4sQEPAtqZXrH/A==","signatures":[{"sig":"MEUCIQChfbkCclBYDt1mHme5Mwenjqg8WALQH6ULCiRGdTdSxAIgNhmjXPCv0sXFAxXDSl3JutJDjVYSHu9BEv5q0AwGr90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezry6CRA9TVsSAnZWagAAXtYP/Rorhm/zOu+b91pYBkp2\nVf1LV578O6vBnjVz1s6yDNECN+VKs1R4+V3xcyw/WAoqbiQaLoa7vU1urDGF\nw5FFkvDa85hogSUUIBY2MSIs584p0piPsXQVwTZeIfpyYwHEx2Lgl5aCwTBF\nK8WnF2Qq+UGROCMWBWXT6M1we1iaQ5HUp0VEw9yF+iV+2wJFeyLBKb45SLZN\naax6D6QPg8eKlGSDy0gdd2TK6qL6rH1MdNKRXNxQcjVQKpkVP5QM8xQAOW2X\n9aFQj/XqSnoApGUuFYgbqX0qmjVv0RZb6tk35iJ3umTSWUrlAp14phXlRyli\ncvvcLqd/H8SksldBoQTXrvEgm43lRY5a4YvUVZD6cwuGvtT8h3I+oFSREqGr\nJULhYzZ5DA1w3WLg/nDhbTqlRMX2gAh7Pa0DWVncyNjWiziQZzhzwZKWsJ7h\nW6cfCMZdBmYFZEC4oWd8PdT8xnym++u0tKzF0xwM+K4C0t287gOM/EGW6Rmy\nUQ/SCUaQIT24aI4QKcuP3wB1s8mZSVxUipSco+GTaJ0ZnX0G91K1mUo4mzit\nw1n8zxxzvgPysABoK5rKXhBF54WD2PkiU+Kzf4Cbr0jpFAD5TaeX3K8qLbAM\ntF67lJL2FSB7+HVBsbH8ixPTo6b7FQBYdsM5ESWPmmvKjAG60ZKXyWPezZSQ\ntNbt\r\n=4Nmj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bdb576423b0f8020c453a5473bae420ee287c240","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.5b5f62f93.0","@material/base":"7.0.0-canary.5b5f62f93.0","@material/shape":"7.0.0-canary.5b5f62f93.0","@material/theme":"7.0.0-canary.5b5f62f93.0","@material/floating-label":"7.0.0-canary.5b5f62f93.0","@material/feature-targeting":"7.0.0-canary.5b5f62f93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.5b5f62f93.0_1590607033885_0.4645190684068863","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/notched-outline","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.d9972abb1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eeb0fd5c7b2b009b163e936dfa52c1e3e62a8de5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.d9972abb1.0.tgz","fileCount":34,"integrity":"sha512-b+uNaM4swl0nupMl0WvOHYmkyZOZSHBGzZbi/V0v8BFP1peu8mfeOmCDY7prIRNOV8SnGWNcsI8N/icrM4W5aA==","signatures":[{"sig":"MEUCIQDN6ZmruIAxqhTrfYo1Q2K7OEM/GwjsWJ2qp+q++1XH+gIgf9G8iFkZZ3rAOJaCWmn7CfFy1kcpSNmuySRgvbVdseM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsvXCRA9TVsSAnZWagAAn6QP/jQeR+V+9uuxzZ5PaNew\ndKfUvk3YmDlGp0Odh/FtOcRKscXgj4q+DqAPgXYuA7UGeB1QjRUTuzFlpHa3\npp96Ez7ADe6Si90doJC0jrsHMadruYOz20YMFVA2u+i+J/Qplx1O+Xz0Oulj\nZeP6ZPId5YVvtJ4D/++i89wyXDu/mbVO/Wau+3DRx/LUB2aBrDemyLLHhk3w\n92zMZmrF5C1i5wBzqWmZj+/IvGypT3QPzHJvvsJedKY+Aujj3JdIhyUaKOwX\ntR/SdQkGpQ7qf6Z3Nd4gQVq+Kb3R8r+CVhb+F7JcbfNCGU9RA9U9rZPZSbfq\nexW+8MoasrnH0/NMzgM/YMaA6PP99A9SPFaqeiGrWNnnfYZthj80UdJ1Bgs1\nSYixw7ZABt7dTm4S+dH/TZdzAEn8Qqh9dK+/N8aBo7U3+rBumAgfuI5ISBeF\nI5oVqO/7UGy5pLc/pTKfV+vB67GcqxjSaqHS6VJKxUVyl5wzODwC8J62/XLr\nGJjWzo1aQyq7wj48g+xD6AzNT2h8O8sE6MeWcsimddbk5bbugXG/pZmBOpjR\ns/RYhKzW7Yda6qteBvXBY0zZ9u58JBlGQ+1jZEfovKA/vUVF9Bpyb4Qx1kwV\n3lqQZ9RQPvTeVtHIN2m3Vwke7WWVDmv1f5bAb58NoTL9M1li1pVC56ffmyo/\nRABd\r\n=0WvS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3db449915645c45b366327c8152342a34f1e10e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d9972abb1.0","@material/base":"7.0.0-canary.d9972abb1.0","@material/shape":"7.0.0-canary.d9972abb1.0","@material/theme":"7.0.0-canary.d9972abb1.0","@material/floating-label":"7.0.0-canary.d9972abb1.0","@material/feature-targeting":"7.0.0-canary.d9972abb1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.d9972abb1.0_1590610903361_0.129814894398935","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/notched-outline","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.6556eda2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7649d990e37b05fb1f39a331a4962eb2079e1856","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.6556eda2b.0.tgz","fileCount":34,"integrity":"sha512-SIPfXun/yLftVQD8WoZt9O24gD0n/VWSW5ENI6R/LVIHKBdNYcEOgdn9t1nerfmReIUVat1Gw650tMZx6oZ38A==","signatures":[{"sig":"MEUCIQDg2M25gXKe1lzb1PG3sOfsFrV6dS4WWkRVBz85DHOuTAIgS3NBhy10qM38aKoG7o2YjDgfT1Chr8qIDS2WVLU6ac4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs4ECRA9TVsSAnZWagAA+bIQAJN7qBp78VPpd8AM488K\nVZhCDxD54stdTljaKmEPbRqPlbIvnqa6hArH6UFUwiKoeXFmO1VbHUbxme7u\n44ARxXkLWRdg461orKvGeJUpZSVZEjHPg2ZlvD1nUlezQ1GxcL0ba4ZfQu6F\nhB84FrFcQaBrGJi2+yv9EktmZGeFCXZdji8DPEVhvpFFeXYQN+3HrptxH5uK\n7GrM2s/RV3aFvCE01XFoEbXSAbHIAEbJ20eIgEx20DoH/dUZwlRgJCHEkKEU\nnT8G7fPLfQUp77Wq44wBxrrkxGwLrKITUYh/Q3MDZl3dHRH8Q2CncF6CXzRR\n2V3UyJzoTO6bDV/IJmQFaecULCzUfGfcKR0aFQVRtGKKJAcF0M5s/vfo2IrE\nncYAIPGY///6sAJOL7oAXAMcYxv4KHO+BqbztfRg/SJ26rUTSB/fOHiBi3ju\n8IlhlBvswmEBbhihCGceA8uTxImB6O/fYIWKpB1c1P7ou9TBRMEFBXznQEkJ\nP8BwrfZ0BH7Zz4OFOz87EjCBL8Z2Uk2ZEvZIU6x4+2+F9SGe2FxAvxpGiCiS\nW7gDWEMt7X3Op1WQH1H5BtjY3Lxv08Gm+HjPgjDGGkCJM5v6iFmB8ZT2X7VF\nIAiQKl91UhxEz2P4gUaYj0gpYR4G7HCunyDSRgYau5Y0/qR4HZrNqoC5hpuK\njbXU\r\n=Rf5s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"504ec59b4b401d057e70ba4bd1bbef2f87218204","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.6556eda2b.0","@material/base":"7.0.0-canary.6556eda2b.0","@material/shape":"7.0.0-canary.6556eda2b.0","@material/theme":"7.0.0-canary.6556eda2b.0","@material/floating-label":"7.0.0-canary.6556eda2b.0","@material/feature-targeting":"7.0.0-canary.6556eda2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.6556eda2b.0_1590611459653_0.3059280664241322","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/notched-outline","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.32aa23641.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f8e680e57fff7a4dc9fb8be96605e09456ff2dd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.32aa23641.0.tgz","fileCount":34,"integrity":"sha512-vJqgDajQhmgc+1nf9TWt7uY3yfO5Y+SzXWn8MOYpZs/mpldbCKNVrQlnXJtPCEmrZaxZekU1cBl6bcWF6mLaYA==","signatures":[{"sig":"MEUCIC0WDWiEJeMxt0wJenIcB6VvnGIgVRuTNpDkwQdjObLwAiEAwbx2G9SC2e1eO6nq3E04K7NSH6Oz+sfRfO+YdGmlXGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt4CCRA9TVsSAnZWagAASFYP/3c+BmMufLuQvvjpuIb3\nSFMdgqnpabhVg//ymF4tIZPXyJ/o9NLEGTBKQWDnwBx40vB9xL5c4bQ80xIj\nteVRIwkaBxBbS2/fT+pQTnoXqi1I4tHYWs5CRSsmGzXAv3aVV5EOgjvCLs4A\nHX/ByqQXyqDN3oInWFDG1PcpaqlPjBqW8uZnR2Ws7IrfIuwrnumNW/LqAeHH\nBOMb23Rxez3cu9Jiqj/18ZyN9NYArGbMD7uo3CC4WzwnhA5/FASK57sXPd5o\noIaEJDwrOUhpRh3T+xHbFitRvpiW/bRGFlBQIuk9d6HSieGgyQdbJz71oyMX\nUgxt1RAL9ODHfhlwmCqAvrzoIjtSWCi+c9kKMPk2I+FPvg8muxinTdQwfffB\nqiSBhlRG0gVKpor/Mul0P4qmUjKReiK9upiEaUfMMj7PDyU4fWLT0eGLSAGR\nowDwh+XYc2mgMaeNyZ6kziGfu4w4z9tnZclQV0Yv8fddE6xxI5pg2hK4vwkT\nWfBTVewdyqJwZh/SuMYyyL1iGd7nAPfyRhfTx0+WKzvZYIUcnd9Z76msvToW\n+E0q56QqzTHkY27KBZuGDgphP6J+NS7tJnOzZeUfBSyGq6g4k8D4ou2eCcni\n4mhxGHeIWvIQafkK974LJ4o/Hxb+AG2XZKHB1GEDlkBkJCsBAm+29R9LXsag\nd0u1\r\n=XRfi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4cc39075dabda7fb76257a3403f0bde13084b87b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.32aa23641.0","@material/base":"7.0.0-canary.32aa23641.0","@material/shape":"7.0.0-canary.32aa23641.0","@material/theme":"7.0.0-canary.32aa23641.0","@material/floating-label":"7.0.0-canary.32aa23641.0","@material/feature-targeting":"7.0.0-canary.32aa23641.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.32aa23641.0_1590615553881_0.9794105901989436","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/notched-outline","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.654934dfa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"803b906307b653b1cf8948d22c5cfd4dad1074d6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.654934dfa.0.tgz","fileCount":34,"integrity":"sha512-Zv8OUpbYzfoFISavXCBDGCTap0p+x8N+SzfrAzXyvPtANWzrK1j9NUd96OSmSb/taBF1jt372vKpEMQJwyBNKA==","signatures":[{"sig":"MEYCIQDAaUgVULxXRek5N7Y0D25KOoGBKKxtR+QDGRUEIGzyHQIhAPNjm5pp5q+WvP2mUaDyKu15EM+TejdQ51te7jZ9dBI0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwfmCRA9TVsSAnZWagAAVPAP+wcSzvzPoO/bJa74TYEG\nRbJB5ip1MLwEPrWV2Sw2tlHng3VPUayphdeTTLIKSJ9IP3M6n4EuaguDlwLe\nWVtcoeRGDcbLhPm1FjcTBqGXfbbHcN1bqziKYZAyxXWTgIEMQjKGDvSu0Xe9\njXA+C5ddfcRcte+U/abvlfZBHlfHY3Ex/IO1Y/xuAgJhne0vW+oGV/2KLM5D\nGuRWaAITOJYgwcuVH+64+1lETtiF5JPTF3hnuf68G5kx20UWu6Pa5F9x1eh6\ntFeA22CyuqD0DiRjsfdZ7m3CLvJnVTSPVZc9aTvpwVvQpSbksMkf0GcKXjBN\n4ccAzVNToOywh/Ja8/B3/1dBKQUl22Vui4WmZXiy2ZDORtgK5XGhSmWEPgC3\nS8Za+oaAhl6RFUMHdF0G3Lei596qfCPVD2BMFiNkcWt3D0S9esc7Dj2cbAgA\n+UkxV/T4DHRBaK5Zbe+9RhiRO5Wg5jSvHqWT5ssvBN7y6ci7Rw9F5/lo895D\ndLgb/K6ayjUcylNmaf0eNz9iDJXpYHeJ5VQiMfpMYX0+NX9+oYxILkQg34+8\nFBRGcs8r7PnqPAfNHttI54+msq+3kNJ+y8i0siy//HwxyP2pfj6ms/q+mzQi\ntDZUxf5/nzi5GNWLTVE2hGuQWX5NNeF3+ovYlqOn9qbVK1hKeOaJZwE45HY5\nzYis\r\n=nwpB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"99e56121d157a5a30949b826c0d521a365a1ae59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.654934dfa.0","@material/base":"7.0.0-canary.654934dfa.0","@material/shape":"7.0.0-canary.654934dfa.0","@material/theme":"7.0.0-canary.654934dfa.0","@material/floating-label":"7.0.0-canary.654934dfa.0","@material/feature-targeting":"7.0.0-canary.654934dfa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.654934dfa.0_1590626277659_0.9945468277128096","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/notched-outline","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.41910b8b8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95a95e2adc40265c3c1f048d5007b9d3d6eb619f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.41910b8b8.0.tgz","fileCount":34,"integrity":"sha512-BQ8rqbg1iUhHW9WVVN8BQNTbvziYljvwWjEKAPQnBs/UDN02ODVACEUznKfOSukoQbvDKcJIjVj7/QmDuatlVg==","signatures":[{"sig":"MEQCIFr7aBlGE9QcH+4Uzfq5VJXpHQED3xnH+pk9gIgL69STAiAf1Y/eYE/8E2ZS+2c1MkoiIwRGpARqPguPWqHqR8Ge9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezws2CRA9TVsSAnZWagAACeIP/0UxyPSV6Fmffyy6wASl\ny7tuO8E7J4nOTdXWluRbo4JY9Uw/ePU+qNXYAsP1ONcudEd3A6W7rTg/PgAa\nnI0G9+vRi9JL7U9WG50fdhiFMi7cNS3lsSwbv6ES8eeKBjvgx8J2YRgjlIYk\nwetxJjRuadifK+dlBrTCATm3fHGUsB4BXJSbkGhLFFmzmVAc9kj9x0D/7VgS\nIoIlQ7NvS3YrbChvWq/AbIWXctmLPTjbvdd7LXbbuFHahtFVClp0zi1J9+/x\nje3LXpdv89fRDqC6cmZSnM062ohOFdto+UZHeH6PgPZ6Sfl1Gy9s1HjA/0oN\nDLRe5ffHGQIdz6UoKvJz2V6TxCYXkKaZBb3GQmCTGKg0d0I1shqV+IO1wZQj\nXClT2F1C7v4BNWg1J1HMgymMnQosQutVtVbsY9z3evqMMi/Gw+/N0hSl26cB\n4eq/MBrHD16K5vHcvUeEQuJnZy4iYec+LAJT7+7x6GSsMfrbwQADRLscflQT\n2Y3CQE5bOx3MpSXZFtckPzvCnnpgrYpWZvZfGIsiFd2JYLDl2RK1MB0YqFdW\nmp6uAndDKXmZ6BSFd5h+lZSLoNn/OwuzSZ1mvGMrgoVBuq+Jp+BLfcOXQIpM\nNTAxfjsYKh8S6rerrVTX+g+Gvm9vtKclnk7PUKZdpxbT/0VSgN/XnvWCrT3z\nI7Un\r\n=OYXe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"14656d5f31e9a410c15eaf9b47530d57a5901add","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.41910b8b8.0","@material/base":"7.0.0-canary.41910b8b8.0","@material/shape":"7.0.0-canary.41910b8b8.0","@material/theme":"7.0.0-canary.41910b8b8.0","@material/floating-label":"7.0.0-canary.41910b8b8.0","@material/feature-targeting":"7.0.0-canary.41910b8b8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.41910b8b8.0_1590627126274_0.48674007400846064","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/notched-outline","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.d66d22bf9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac33fac3c181a5dddb6d15082dc0ec26b45f48a9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.d66d22bf9.0.tgz","fileCount":34,"integrity":"sha512-OP/EWAEzomEOkmXStvGBqkQO8MFurcbGVCZopZ0Vay2QJxuS7SNrwI0PXvdwpvF1tlvcvkl0lD6vcLqD/P0Evw==","signatures":[{"sig":"MEUCIQCFMrqv01vJW7kZSlOtxIQLWroj0FYppsAxuaeFNuxqPwIgVpjIkGvhPbowXRdeOJRfkBEWdD7dUixE/OJHLIkvZLM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BdhCRA9TVsSAnZWagAAEBAQAJIIjkSPLX28PE72aFkK\ngHPCAZU06sleXVoftKsUEpUn0IL7SjmiHMclXiILkCcyV8+SQL5rOPydxLXU\ne6+rF5QyYN//kv0sQj71+ZfRoyeX4hJyN0nDGJSOota3tFpqt5us09M/JpK5\nnBTjx/uyBhd4ydMSKaeP7Oi5C/TSrie1McrmWulSZmqR5YxIKrkGR4814ySd\n8Rw/VXWoQsmdxrMnGgmueWwG4/vSEiW8UfAoChShQ8hOQof02NdnRlJw77t3\nUrGKA/CDh6Fbuw+0c6H+BpUBmmKDx/M5ZzXIdhDtxtha+L/efOAR4zaqmrMu\nyWBky2rIza8P/Eko7J44XkCp0R1zGR0kN8aRGNYj25uIKJ7y3kX7VmSV4aBZ\nYlcKdeZZAgbi8iap94xqOqco2smUNFz55WEJeKgiRBKxFWTUSl5uVu25TZUW\nWzPW7krO4To2qhMpCsS/cGIs1tnq8u29ODiZ51xrNPVn4/g/+ltcfaccknyC\niS+Dce2VUnI9Homf/E8d5xUxe8v7UfUuUMODeU9y5S43ZbW+grW3y24TCZj9\nqzQ7yLbOrtt+MrDResPIU3xCu0vG2qDIt3lr7ixUYHefCQc4AZrZ2Bv2ssa5\ngap11xKytKGl5eO3kXY1XIf4/NfsS/HbQDJRJ+kfFaKFuUGxz5jSsh7EK2TS\nNq6e\r\n=ZSHc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cc182def4daea4d871df41985e6d893429174b3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d66d22bf9.0","@material/base":"7.0.0-canary.d66d22bf9.0","@material/shape":"7.0.0-canary.d66d22bf9.0","@material/theme":"7.0.0-canary.d66d22bf9.0","@material/floating-label":"7.0.0-canary.d66d22bf9.0","@material/feature-targeting":"7.0.0-canary.d66d22bf9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.d66d22bf9.0_1590695776903_0.11664414135334167","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/notched-outline","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.8904f3cbe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a479a809d2265db06e742cf660df2d63e955b489","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.8904f3cbe.0.tgz","fileCount":34,"integrity":"sha512-DqGNq2xpgNagOpxT1b/07Vw3ENdh2ptGLR2GD5x4ChITsgMY7yEDmvMCQ52eoUNhGwubX7Itk/VSNGpBNqnfHQ==","signatures":[{"sig":"MEUCIEIUfeXluaypTDsX/jMdX0GiBTUokSYHYb8UrbkdgzT/AiEA/dr2daY1lruVbkVwdmgJ8NdkxxIHHIJ8TSUnKQ33+nA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T1/CRA9TVsSAnZWagAAmVsP/jH/6b2csLruophtxT34\npUWGf0ys9APMW0z3T8IfgCaNAVwsuB/WfVMFUcycKwBjKACwgpb7zB7YuHnr\nXQWAPat8IxNa12YQppeQueSGYacU1qxpHzZZJiPX6tuKbQ1eewzz9bthYCZa\nZqp+UbjmvSgvW/pX0czW1jWoLrlF8I6dIPwO5r6loIAxYp61hnEyhsFmz+17\nP8tgn9lrv1LDnIt6KPTAC9nDO92lUyLhKsz4Ey+O6D9fGN0+Q4QnN84rbt8x\n7JUiGcYBqxfl7txDGtHi/bzOjcrgt6P8+CPV0LL52hayBjjVpuaW3QaXiG0R\n0UD6F07VkqZrB5Ca8Bu6bDqtD0Qbit558PRPbcYxJCxNlUBPundJmmixCjzt\nnhbYZKiEgW2TA+7aYylJk2TtGpECgINkI3uLPLmKSV2lWbDgHc3ADp4QFm3O\nty0TK76OU27M5gu8a63BRhgyEYS9abYn6nHLDpta9KYvAqswIdufXxEtl/4c\nQZdyDgpgRbJu6aRUfF6u0ullmQiRD4RvHS7z0CfC+4+FaeN9hfXS5gP3wl89\nFwlRmwRmLaim1S3Pn/zOIHfaAB3hME/AbX380IkRB6hbP4RfAT64gHZPuBPY\nBhQs3NF+2p4J0ynfsAPIvxOVjFJI/E/G4TDKqysDUKHefk7qvnnWNvxxsZuB\nNYUQ\r\n=P/Sh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f78dc612af1ed0ba397842886fe5bc41e32f181e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8904f3cbe.0","@material/base":"7.0.0-canary.8904f3cbe.0","@material/shape":"7.0.0-canary.8904f3cbe.0","@material/theme":"7.0.0-canary.8904f3cbe.0","@material/floating-label":"7.0.0-canary.8904f3cbe.0","@material/feature-targeting":"7.0.0-canary.8904f3cbe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.8904f3cbe.0_1590771071269_0.27091320563836074","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/notched-outline","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.51512a4ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0cd2ba775b4a3415131d3c54691b7018fdd3531","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.51512a4ac.0.tgz","fileCount":34,"integrity":"sha512-2wfJqegjda8pXicoyQBP2hlefs/hMTke/qu6qv6PKVwA7Qamy+KTl9Wgm9+pd45oia7rcfUOuuqNJNzuYsMN7g==","signatures":[{"sig":"MEYCIQCdUM18ZDU5X7o2LJp9yOf9bxQraQAkSH/+Moqen/rrMgIhAKWK4QobBwtQMzDVy+2ZNi8mBaoIJSM52IqF961kBL0T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V91CRA9TVsSAnZWagAAQBgP/AmpzU5ZIQn09u8vBYbY\ngxLDQvAVzuKz58aWeo3MEJeOc9RKWvxaloEn0JFD5mQ1c/dCmU872W+IgCUH\nbQCUsx8DXY0vAxsG3YMdr9D1ekby6JVEstH5+znTDEIvSx3ltxd726ZCi7CW\nS5paQUSlIvQTpIr3wysyY2jRr0CEAh6YISfknBsBlYyDqY3wrUBcBCu5n/vx\nt3pe3aR3naq1VwqGwFbHnFw353qERiW9DBVEvld5LNF5Ov5zHLNNCSz4H+av\n0mBfWuc1jNFgLQ9F4Bfxb3NXL98s8UjNL+fbGrf2+zj8p1bte0gMQfGV0Zi1\nJOYSKEO7M9sU99uDVQf+owdRw6t2ls9roTgQrrtfWloEb3eOkhOXFtcBKI3d\nYGc7iQcw1BWzoXtgXpoeBElB/ONwoXTNW/wSXHUFdajxFw++TLluf+Th+GmH\nyCzkVVq7hW/UKPVc7HR//ndwyvB4vTuILVvLhwcHcHLSYFBPSXzZiaAR1xe5\nqarIS0vaC7QjmRDJwpOSku5/wlaC6N4h50i9AVNCmhJQWT4fdItb8XxfhPgw\niH6y9X1/J2OhdL2kZs2iJgU8gOkhgaGwdboaN/2rkSMSoF3uMGU8Umxgz8m6\nBREqQOjjFSBdkBrOVnZA8kFQ18mLFMs6JYRTQSm+Ueqfc7J5o3YgMZzfWxe3\nP5V8\r\n=ko7a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d5115fe8118e1e2bc71fc7a491f672b079f281ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.51512a4ac.0","@material/base":"7.0.0-canary.51512a4ac.0","@material/shape":"7.0.0-canary.51512a4ac.0","@material/theme":"7.0.0-canary.51512a4ac.0","@material/floating-label":"7.0.0-canary.51512a4ac.0","@material/feature-targeting":"7.0.0-canary.51512a4ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.51512a4ac.0_1590779764611_0.07208855558956317","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/notched-outline","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.0743288fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86b0816922a77947d9fa8082b4ddc409af59bc66","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.0743288fb.0.tgz","fileCount":34,"integrity":"sha512-ZbG9cLZkSYY3EdIXHtH5zo70BHbJTAeMcX/SN0PC/vFxPTvZZGshMvSg+8V1o1pKF6CiJtJw+kzB5WJvAmKLqA==","signatures":[{"sig":"MEYCIQCUf5rHdSJ/NWXQoPPMbeKacWoXm4TFm8ttzZz+MCdVgwIhAOHXBV41pG9ITjmmn4HXW2Q2clMo5wzyBlIwekh2vc00","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0WsmCRA9TVsSAnZWagAAtEsQAJmaSAy20Y+DNVeYv7n6\n6GjKUSHDsAEgwXcWEl8rYTKA4ZZAd7N54FcGkuIN8bFGdmc9URBV2yLuVmoo\nimqnBMOzolNA4+zG3vNZEwZN2/JKVN/ckKPaXmX9RC0nmUZhqPxbIodvIXi0\ncOhxVAoOSWF5alquFaNcrA4t/bz3iH2yCcSBo0Na12PLBMTv0fv4coLnJ4z3\nJLoHMdsKqs2xPEQxPMnBs+QLZyklQ1rkVj1/X4v3Cu5/lcUcOxr3iJFwVbDW\n/F/s9cHHhg+/6sFvo7mT8qQ/arj2HdZgc1uTcASQdgNalJOy1pX/d7KuXdsM\no0Iyykmu86MDFTKGzv7AuffHgO64C6FGMSt42E0R1AYfIJyHdMNXbdpGDSto\nM4G+Ou6EprpPIdryHSOkFbUAu29TifWg1MheUx82g5hMiZsf8GIT329hT44U\nB/wL/RkNVr7oByiBMO/dKN8ShJa9cgrWFQZHh4bHriGWt+kBbw7YcJqvqAgT\nr4N+ik9uBWxVkr+EqaYr5QMzWHYWYXHkI7Qfd4vCyB2sWkIm3oxUyqMkR0IA\nsuDsUfdPaPczukunv54xNv4wTO71dEq8/ZEPvKrIhksfcl4l7rEGumjxwfA1\n5I25NF3qazo2tFbptUodrhX0lZdEkp1CF/tOtS6XyHBnHZb7jUcShkJdKKmd\nWn5w\r\n=ii6y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e0c92eea0cf28bf0f2367fb0666eb8592ef2f8c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0743288fb.0","@material/base":"7.0.0-canary.0743288fb.0","@material/shape":"7.0.0-canary.0743288fb.0","@material/theme":"7.0.0-canary.0743288fb.0","@material/floating-label":"7.0.0-canary.0743288fb.0","@material/feature-targeting":"7.0.0-canary.0743288fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.0743288fb.0_1590782757951_0.8340495585570333","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/notched-outline","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.06ef147b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa71b2f8e00d9e11e2813ce3cb88a812a23deeb7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.06ef147b5.0.tgz","fileCount":34,"integrity":"sha512-OI9smmfP3yVedeOmrLBTyIhajZrak0/pTJ3jPJH8ToiRd4NImvvRSgrgYi5sCBGk3UfZWYHJuCAavNdsU2lP/g==","signatures":[{"sig":"MEUCIQCB4LPswOZ2Lf1wEP821sPotVJAjZsEWplHhgxlgETBxgIgKPM076KU9xE52CLfMud4Hio0VLfGQ2XPP0QmH8kztH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XN+CRA9TVsSAnZWagAA+r0P/0/Aj2oxzVS+Nq0OS3k0\nfkDNrKChUXTFWpPHC+qVQdUWuJw83F1vqhM52GHqcMWGzWkLdyCuUx3u4oCC\nAG534vp8J4kFjDUcX6T4giy6IzOQD7fkdQHFgVCJjPmqXldafTt8VFyDJKpW\n2HQjBs9zueKpyrRy0+vsAptDDXExhcbh+OmULfzAFq6xMSBonxQat0y41uIc\n3WaRwoJBs7QIGFOSipb9BBUP+RIY260sk17cou8uc+Jc5RQ8BQ4cBjyZAFy6\nA1Xw2F9LIMkqhY1fYacR1XW8vj0j8Kl4m9IWFPY3CkllfkZTBqVWgX29Av28\nrcbjIOcpTOfUG8NxZOEDc4+oyk/lAV+tO2c2Wk7vbvCDoPxC7t+tB1ubNkBT\nt421pNFz0HUdgd4wFRlX9XqTaAJs8CyQJMdJpguSw7XHBHDWxle9Gh8TMMK8\nAfhV8ULdNM4FHvMxjRgsUV00uaxi76ySwTbDKyxK6DA90ttVU0LfEEKNgc51\nILqTwwB1tD4zfk8oAK2i42FV3deqYMpcuhOSs5xhxLQUeE1f3uH3PmDAIONe\nOOhcOFYcjiwV4Zv+cclUuO6S3JQPYe2RkgnWkPOS/YzhnuaYdrSf+y4QaMX6\nbOGX+vi+ZCKpHMR1ZRJWUTA3wACRaF3a5Q9iNUAKx1RSPw0G6S/hgipPzU0/\n0YJZ\r\n=ZNCN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"43f043010a4682138cfe1d453ea0460f912fc2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.06ef147b5.0","@material/base":"7.0.0-canary.06ef147b5.0","@material/shape":"7.0.0-canary.06ef147b5.0","@material/theme":"7.0.0-canary.06ef147b5.0","@material/floating-label":"7.0.0-canary.06ef147b5.0","@material/feature-targeting":"7.0.0-canary.06ef147b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.06ef147b5.0_1590784894325_0.519675493088636","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/notched-outline","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.8073a20a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8425401c5d8373749971ea0414f14561f3dd92f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.8073a20a9.0.tgz","fileCount":34,"integrity":"sha512-XR08Q8n+1xNqJSleNk73RAEEJW2TD0hi5dZT0ho+gXPexfoPdnMDGTt6EVzXK1MgYXHjJGLQR4lMC6zuIJRjhA==","signatures":[{"sig":"MEQCIGDO0srIhiJiA6yTMTwBFH7LO2iCCleV3e2ggKfCm4emAiAln6Oddl4PZL5FK1YfpB6DjBihF7OfMl6wJRb+fA7EeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ZolCRA9TVsSAnZWagAAFUkP/3SuspMs/clwbSUDG2hY\ntCKtXxfBEeU1MZ3RAYUertDGccmb59Ry66aLIYu53CFANNkfxG3jcR8tx+ns\nL45O7KSXIFg7LPt2wii8fWY3XConAeLMKN4uKGkqgBNDqq2gI5y/nC2cWI/f\nY3ddmn6c0hlHHt4dSb7JqY8fNvRefCnOiVAz8/CAsmoVzRwfJuuV4D/MnRRb\nJoDr+QTVltPqPOBphHG/oaDPDEUNkeJN5vNrgp/S4CDXvoRy2OkQVKgNepuH\nsezrFwWCXOHnDWgx0Qa0qlpZ58m02hCs9InvLf68YbaPwx0WFs9Oi2khDL05\n3bDRMCE+9T3m9l8G3b38obcd9tp15CBLPQNiozAkHW/IVoaf5S1D8QqZoPWh\n+m1m1xmq+Cw6KfwdAVJhVvCwgzIUMzzUVVPJzb9tJG/Atn4nK/m+uTTNyh7v\n81VmyTUVnBbUkTWDX101CRF9Qq32SmcBFElqleAX2ZtojfTHIS9Tas6owM1G\n0yqFpX5WRKzcTLkJizCuoEhZviVrmTxv3heosQjUAESJ5LjP8FbQZi1T3k7k\nc6VIgo5/4qAxwZnP2oUf/7QD/EdbXIYWwFBxvl7JHjGjP7jT9JbefRu7g2xH\ngNJZ5BeJee1K3G1GwKdUqXyfKtSpAGQXxDEVn3ylX/+gATsMFSEvt5nhmbF5\n35Tw\r\n=wsrr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"576fa22ec00234b59b1dc4215b8dd1ae982c7c8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8073a20a9.0","@material/base":"7.0.0-canary.8073a20a9.0","@material/shape":"7.0.0-canary.8073a20a9.0","@material/theme":"7.0.0-canary.8073a20a9.0","@material/floating-label":"7.0.0-canary.8073a20a9.0","@material/feature-targeting":"7.0.0-canary.8073a20a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.8073a20a9.0_1590794788901_0.4494611505251298","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/notched-outline","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.72ff42330.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cb240419596dd8178f697a92d49094593ed0bd2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.72ff42330.0.tgz","fileCount":34,"integrity":"sha512-RUTKeaR5rjUQjAEy+dZNwtALnys5OSQcloW9jq43vgtQweDlzBLsj6v5jt3ewXSUvgcqEuaBgxBpSIOv195SCg==","signatures":[{"sig":"MEYCIQCDlGU74a2155KIvhP5r5yvY3UTkmzhONixONyeZFoQVAIhAJ+rdfTtKAdfdJ3vOpZloCkm5AONPgAh38CaleLeUHAn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TCdCRA9TVsSAnZWagAAtDkP/RCoAij2tcVGa/q+Iooh\nZl8ex2vtSxOWKkLwwJwFekHgxwm3If0VI0ovarFhvZwfsXCxz1bMHa3YC6pE\nIjXT0CajY1DiH6nHocpNlZcU51/FB67WhFDYUzCm2ulMqjKmyxdANCLXC4uu\nzIJtHolqTTLt2ZeZAK2Xb8V/wcf6/2/nX6/ofLhELJxnW9BJ3PRy2U4Cozma\nZ5Nf6P0W8h1S4YhBZ0UuhKP6cf3lpduZb6ewMLk8RkW4Q4VTPUa87XF1KJ6s\nGjn1kwzofR91KYKjAW4/7h560RHXpF+z/VQjaxUkzLcj1Ekk2w19cDh3Xe+6\nJIirwu6vX2Qis6686+pvLoEaDLJ/aoJ4bh57CtCY8O39jBkJN/BLPDLmavyy\nQE3D2bt1A+aes9GJx5Xi1Q+UyL4EurGvtlUKo4K6cOgmdD4u7Vrk1RZ6GCME\nTgkFAZecWZLUffr5AtAhJedor4a3ebeJ/1txO1jeX2p0Gvt9w9eosuGpupxM\nkftWPSrR2n99Bx4e/hfKT1r6F1OFoQckVWmejZHmvqCkLEp0kUdlj341KRjL\nf/CAUT2woXekQuzYObQdIgaq7HtthYfuGUDEuqguO5zj2sjd4ViTwljC0rNn\nKB4OHdQkcuosLapYLAYnfkUmOhiy5CCop92bNGl0jAWTFWsZVa4yvswSJkTz\nzOFZ\r\n=ZoAw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4c820e9d38fc1bae9a502ae78e336f0e8381f432","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.72ff42330.0","@material/base":"7.0.0-canary.72ff42330.0","@material/shape":"7.0.0-canary.72ff42330.0","@material/theme":"7.0.0-canary.72ff42330.0","@material/floating-label":"7.0.0-canary.72ff42330.0","@material/feature-targeting":"7.0.0-canary.72ff42330.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.72ff42330.0_1591029916637_0.4811877623345966","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/notched-outline","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.9ea52070f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aa50d86fff0ee26a96f538e83a2316c0bc5bcd0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.9ea52070f.0.tgz","fileCount":34,"integrity":"sha512-cFCpIzq4MWTcqFUVLShhpJ72bKOB0XvNniWFwaI7Zns1WA6DchwcyYgSnlIOW5lhJEx01QuC+mOFXFfbdXm+SA==","signatures":[{"sig":"MEUCIQDDY7qJ8Xf7REMH44/opldvxCsANg3MtXGPMsYthNAl4QIgcBFppLElx+FbXKAjyvJaldGQckkdNT39kzndGIcT4mI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TG3CRA9TVsSAnZWagAAdc0QAJOcewVgPYJRyTkJhJFZ\nsg8JGGrm7J/F26/CkjpFuTYvD+ay7PjF3nfLku6esP9WqoP9sMCiDehaq448\nMAv7QuoehPtr5LmvQtqoMOybs2krXtylcnJ5vMzzBkJjsEulAXc66eVWYiCW\n05llW0B3YUbEzc2YRTnIOSSOnFtybXVVpg8m8BjVE8iHKhMEzDTtG2Z5Y+qq\nT750c3VD5gPoUU/CbIBNRe6Ggr02w+ZbMei31MeyLJ5Imt2d7FWC7UIuPAJ6\n0N/7qg9yx0F5/uA5jmzMWlaJhAPW+qdQ6vcLvbFKI7zWeB4wTfHgaID8qM6+\nxM2w3K+gKwil8q1HtjODKIGQ702bRzz0W9MUohHdFrwVS5TceMQFF26zfxDa\np+/A0T0Lk+m9OhCSsEsVBLh7/i7WkZF5QaxcaAwbRcNkMDdwfrzJ3Jqq0G3M\nlQ9tteYWElCgChGg4Sq0NfQgwdHgc4zoyQAcKi9Ttr2Ku7dkxs9oA7ti5gPG\ndbcNpKBDytHq0dKCWk7mDRAqyEEk/cUMjyBVX0YBOJUPHUXMnzrJ9tZvZvZR\nYPgwJatTI5qwORg8NtRBnmIrSwzHJJxEU9G8cAhZDFZKiRLkxAgq69XsAr69\nuzc76Wwxoe3tXnUyZbnPytjwkUbjvqxiNKYMzdTIjGbRwvQhHaFiavjMmR6y\nQWoo\r\n=evrY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1c7aa3231ba2d87e7abffc33fbc156ee0889131a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.9ea52070f.0","@material/base":"7.0.0-canary.9ea52070f.0","@material/shape":"7.0.0-canary.9ea52070f.0","@material/theme":"7.0.0-canary.9ea52070f.0","@material/floating-label":"7.0.0-canary.9ea52070f.0","@material/feature-targeting":"7.0.0-canary.9ea52070f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.9ea52070f.0_1591030199528_0.06683619425619769","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/notched-outline","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.d86ad3b60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26348c73aafb30b2caca32b0c6690df2906dee12","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.d86ad3b60.0.tgz","fileCount":34,"integrity":"sha512-pzhQAcmiMyCWcNShSsZf7SKqzy0JLFZCduT3JBky9n6wkM+KWtl0dj1XpZjqlw8pYjNjcV07iNks0uiA511ojQ==","signatures":[{"sig":"MEYCIQDqEWKjK6c9XbHc4aLC8wI6R2O7T/Y7YUQkekw1gYZBQgIhAJ9+vm8BKg8DyQEKZJd9Ttr/JmhbJ/TCsRpGWoT2clYg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T+1CRA9TVsSAnZWagAAVXgQAIk29X68FoUvAsGXbSKG\nFzEhyM/NiWB+xSviQVJuiL6iSalRq3UeM2OBFzBa/bu1eXPYaMyJhWt9iByY\n+0mxslbUeMY28C/utQ6+UcfeynMrFoclU2KB8gkCPMT8FJVy6FDxLp6a0NAH\n6qpMyFrFAuQYS0/Wj9O3hV1WGMpivwLvt2hytnN2BE8pTjLCe2GR8Fkhgep8\naR3LoR6w9Nt0EXasMcKnBwHw/bVsSsPtmtmTNZfTdB/GTecnVAasySRzJYyv\nisMPB5RuVNqcmTIpCP0Y2PFVxXdEWu+0CTQQVbVdVWpqqueKJdy88QOE5dIq\ndWx3doRrDGE8EJVASlwC2+2t6pIwalO8tAoyGSbYtfzEjLZfhh8O9BD0s8sP\nfd0qXBeVZ5B3MtDEIfWBlXy6tCQ662gbvA5R5+xuFdyIH5BEjwDLcebAXW9B\nHj6/bZHyKuMCTxf7TtR4GJZiwYzLVcwsI8T7zcGUVRZp6R7jf1SSiTgCGR1R\nXKGZKKQOheAAVvkjG0FsKpR3r94FSbRoh+3vnxLEHHyM0GH+x+BSfBLHZbG6\nf1v0NFbcZIN5XqPU04Zi6VH4gi5/FqptAX1TcvCfmY7rahE2YXyqklBe48lX\n5J0qZdCg7m7nyZ4iXARhr9lTjyjGEJblkAm4ONSksZk/PAR5Xr0+TF9pmJeY\nhOuk\r\n=Lj6D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ff64ee77c98ab8a932f9397689714c078eb9fd02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d86ad3b60.0","@material/base":"7.0.0-canary.d86ad3b60.0","@material/shape":"7.0.0-canary.d86ad3b60.0","@material/theme":"7.0.0-canary.d86ad3b60.0","@material/floating-label":"7.0.0-canary.d86ad3b60.0","@material/feature-targeting":"7.0.0-canary.d86ad3b60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.d86ad3b60.0_1591033781221_0.9815074945440656","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/notched-outline","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.b9776b1d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9197db83df839a447fd86a145d77e6db2e1c417","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.b9776b1d0.0.tgz","fileCount":34,"integrity":"sha512-zGR+gcF0Z1IYosHDW3bSkMp9lxMq7IF2XQLn83EiczfNtgXkSO8KVYeey/+qlq/4hjqqaxql53iL/f0APxmxZQ==","signatures":[{"sig":"MEUCIQD8NkOS+Y2sCzIW+g8Z18TPllMslGndY6CgdV0RauX+cgIgClDTWMKhO3qk2iKCfiuLq3yZpoduQyICQXMYKUgxnnM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Uh3CRA9TVsSAnZWagAAptYP/1Jf/Moxw8ATszCMSDhV\nQQSdkKNnlcGi38kO9V+rPCZz16OOq9P6IDMJRSqFzXSyj5OCkkKEQPrsfFXE\nQySEiU80pyFtzMPigWlhfg+D9JPAer5NHUydCV+iEc7O+kV6LB+tEYe9jwRf\nw85kxMGkrZPW7UAzw3A0U3JL5lZFI5r8zDCrguaWyfZ94vyq7Zdl1RXJHIpg\nMRFM2wDTIDgXq+j0AKGSqzh86CNog5CNrYjbj9clrRTRGbYu57+Oi5dNjud5\nTIrHJ0Cvxmc3u0dBJwCOPbOoUM7eCn/taPDF7u9ejsJLwvYdweAlAQ0OZWDz\nwK9CSewwKz1dmX3jJNStka80OJl3bplku2xwT7eXVz8d+TkF3dZ76/9U8Iwl\nNsFgV6tI0tFty1GtpsB4bAZUoj2na+8lT7Otyq7Jppx+tbcLB+drZ1Kkgmu0\nNinOf0M2WT7ClRl+LB6NUPFoYG1UEtvwjoKPBvZCzUNObLlBjEqXzJ29SAqt\nacMzEbNu61WdDLACnd7qZjRegzrKj2yr+IdrK8cZK/QpzlDvmVmKfxfJXood\nPUuNlSNWOTNT83AcjqxIL5XDO+q17d1mReSr8MMysiYbnrn3H2mnsrouYdAv\n+IXK/HCjDRcPRhQXIdR0gUtGw8GguPJivOGcd1kpvBhVfpUgBDkFXBD57jLD\nx2Fk\r\n=EKRn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d43f6785558859ab233dac12d042ada9fb8c1b84","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b9776b1d0.0","@material/base":"7.0.0-canary.b9776b1d0.0","@material/shape":"7.0.0-canary.b9776b1d0.0","@material/theme":"7.0.0-canary.b9776b1d0.0","@material/floating-label":"7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.b9776b1d0.0_1591036022889_0.9237483116960938","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/notched-outline","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.ba6f7c294.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"575b08ee264ccf9de3428150f9e4aa89b09d4e40","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.ba6f7c294.0.tgz","fileCount":34,"integrity":"sha512-QDneADa2eH4H1a3ZFxsK7h90yP8JG/RLzK6hPQg18IJyXrSI1cN9Shs5KH1QzhtGHonwXGVkWJpk55l/VdlZXg==","signatures":[{"sig":"MEYCIQD+LRKVVRtjXxGXSRB4lU+ir/xfcHy+JUkuRX4exYKsXAIhAMoCljq0f8FmbKOXgUvIOcSt8OchXh4Q2aVNuFeEgUyI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oZqCRA9TVsSAnZWagAAO+AQAJ37P/875fUAX1Mwn3kC\n14tEHASMF44lbkh4NAoPZIxi6U2yWuS5li1iYt5IGZsuCDoxAEuLKzLITMse\nwDNHVyN5vM8cRUzh/t3Sgh7ybeAPdrLh8AGu7f1vYk2OoN9+k3fmRqJw4Z+P\nL6t03DVqSr1vksZNSHLn6YAgLKGLqTbJttigcW2wq45+JVzr3dPLiJ+TRUrL\n1jol2W/TIyETcKPlyX4H2X825LjI5Sv+y5y+ZJ6nlbHOM0ChzwGsnMAMZn+Z\nJWjCG+BzNsdRSZ7IDTFIv0wvJqG94D55n+KEGWE/3co1T0JKL1cxDcobVLnm\nACkn0e4tHvAdi37M7uY+QugulhBbQSbPeMrVAQssTFgqsYwJ/MOv7AdiKpsP\n6FAdYWHxUnZIaHQI7x4bBnc5LEr9h0nijzHLDNNLIaJT5BAHvHULy9fIr70x\nKMa+JdPuFSYE7CszBQnfEox/+MF21okMeAaOG4yh2xpwz+qj3K2zNqKeGb+c\nuOf++m19xyury2VmS6AVI2JfNRvoxpxRWQjYemZuT9WOKlXpJ6MKZO2c3El6\n0Hb7wAKl8VqKdSyWtSyvlcGQIzdeLtzIHyTlwJTeAkUvWe7aJI5yvTkqjBdo\npSjlQ7cXfgT3igVZOKl8HiBpFh5iSFX3sE/KbwagTWkTzOIe8i+aEDw5bE1Q\nNpl0\r\n=p50H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f181fece0cab022dd478b7c2f4b768aa14f7ebf7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ba6f7c294.0","@material/base":"7.0.0-canary.ba6f7c294.0","@material/shape":"7.0.0-canary.ba6f7c294.0","@material/theme":"7.0.0-canary.ba6f7c294.0","@material/floating-label":"7.0.0-canary.ba6f7c294.0","@material/feature-targeting":"7.0.0-canary.ba6f7c294.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.ba6f7c294.0_1591117417774_0.07064605351523623","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/notched-outline","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.cf3b664ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f465276b99b12f6c3dcd01f96f60483e3574a85f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.cf3b664ab.0.tgz","fileCount":34,"integrity":"sha512-cvNPpDiX65WQWjsd7S7w22IgCN9XlpTiOFuOb32KwfF2hQJ/D3xVgBUxXKA4k7V2tP3SKs6opKf+uKaYsMHe7w==","signatures":[{"sig":"MEQCIAfqLhTmgIJ8c5DDX9dk9YZMnwBcENd1iS8UsUI6jF/QAiBnU5rQEL1MVpcOdvXhyw+GRx4TVcyPydGkatHLKKCpTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1plaCRA9TVsSAnZWagAAgu8P/iDOVlr1AgV+mSwQ3ZwI\ntIGfTy55W97smyHvvhNociowHmowtplqEegR/V5m2AeRcLWmcRhC+UPTO28Q\nmXGv5Ldt/zMcRbOwgKPyNpXtcF799u1Q2EaUjuWr+fNkqELrZaLc7p9N31kP\ncaExCivnLI7OooEztDD4XcwQ7FKyA/QiPTclTz9QAKv4IFcpvzsl85Gzfyk3\nUvhl8Dg3BAUXHsodFncEbiNqoDtEAkDEnf9M4oGetHvdXR1ZZ0xo/OsBCb6O\n3kLr53FY+oSPE1gArQJPzGqh2xx3Brgd+j1bNDsrjQ6UGMkOI7bcTlEZ5pXD\nE/MO1gwcrfRTF/EaJo7c0sZ5JJySs/K/hxx5pZjUAD9OleSzMOp5ZTv0i2Bq\nwPNgvsITmM/HtgzXASvCbZGWRJ6Bfl0+UXhsSSmTNYIbDuztcsHNcYhcdCxj\nb8qkL7QMfhslM3Q5054MRXPCAsL1D6jJKNwMOHEDPCtgubLCLlh+T5QL+fOG\nCV/3WO/oweJ0XLbgi2iL7T1Gn77aXn84Ht/l3ClTZp2pTE0WtIyNznpvU1Im\nH8zHyDZXiXeyRLTC10e0VUbM9x6/jdTpzYZBowcSOkqnEBxuXYGEFNsbnDUp\nZgnmfOiHjgDxopq4QTyZ/D48aVuW9NQ7yftkrZOPvZ255/tePVaJgLWCGvUg\nKynt\r\n=kox7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"708ed8576095ca5e673311fcd970680f855a7b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.cf3b664ab.0","@material/base":"7.0.0-canary.cf3b664ab.0","@material/shape":"7.0.0-canary.cf3b664ab.0","@material/theme":"7.0.0-canary.cf3b664ab.0","@material/floating-label":"7.0.0-canary.cf3b664ab.0","@material/feature-targeting":"7.0.0-canary.cf3b664ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.cf3b664ab.0_1591122266010_0.5967990989568239","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/notched-outline","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.4ba3c9a31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbecf7661284c34999980b22e6cfac9ff479b2f1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":34,"integrity":"sha512-MYa0MnCEOmG5BAsd3cnNzk7rvwa19bF2bLuswtRQWrQtTG0xU4pRwaDVQZktuGpYiyD17ZrNkBH9fQgGIPAj2A==","signatures":[{"sig":"MEQCIDlmrjtq5G2GH7G+w/zBKWu+Bn5gDLJDYpbBiz5gyTQmAiAgBq8zjtD4J5fNm8gN4tzyfczPtcjWgoVwcuv7wQRkaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uZ0CRA9TVsSAnZWagAA1xsP/AxExeFw7eqDuTuI3ZwC\n7kZnotkDS24U/UUvGe+kYI011BCZsNHho8nx7mrVIeVzN2Ib5nAFKsUHVDNM\noG8RE07F7+fnZhHECij46FD5m0UJSZyHIPZRAX9fE5S+qBorgwrmTa1n0pE7\neZeC8ENKca95eZxhHBakvpj8fJGXcfr/ne4m8sD7HaMTEFdFg8iTBvHGDcbD\njblz1o1bCwWygDkNpRhHq540GyIUosD+0A5lhXNBZlRM5Lpqay2ufCLL7dkH\nWkDBvfQ6QLoxKhXuDrLcww/CkaeSh/jk4IemNALXDz0dqfKLhB2N8ofpGqiu\nXznieF8ENUvWLCRX83tM4+UgBG/qjgDB1HWaY4PMsqzNOW3gw9hCePXl+M0e\nD/1H5av0ojwDqAlxFPZb3POE99LVUaL6eFfll9gbCFGg4kAK3eFOCJx3SY9s\n67g1ealfb0x3SdfRcw/irDCn09uKCJbiPgGkLXfTiulZcQCNMQUuBm2ERTVk\n7N7P7Pnx4eCObLxOHedLVDI5aqNNR3NQ+HHMMhAbGGpVkwWr9ruON0CNcBGt\n2x3gwn+SKHclMjAZkna3sjqiVp8cFGJpx8zNsGPaSfRa6wbkKdZij1ifbFz2\n/Rfy56k7dKI/S0E/1aST3g1jU68XPtcrJP3HKu6VaotXydaINznUbqvCBrR7\n24Kc\r\n=Qx9p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cf7f823aac5f803db06863c865c07f432ec4fd09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4ba3c9a31.0","@material/base":"7.0.0-canary.4ba3c9a31.0","@material/shape":"7.0.0-canary.4ba3c9a31.0","@material/theme":"7.0.0-canary.4ba3c9a31.0","@material/floating-label":"7.0.0-canary.4ba3c9a31.0","@material/feature-targeting":"7.0.0-canary.4ba3c9a31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.4ba3c9a31.0_1591142003476_0.937941416197674","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/notched-outline","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.388b042c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ee17baf44f6bba67ba937d017ba1ea8d7360fc3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.388b042c7.0.tgz","fileCount":34,"integrity":"sha512-9P/p3EPwZGcn2uSz4ol8kv73XGqCG1NNgDBN49ZJjKTWft0bZKrl1DvtXvHXcXqAQfTGN6hhIGkS0xGjfAdoeQ==","signatures":[{"sig":"MEUCIQC3MS/BL2wVSvggBu4TGKW+dp7j6tz0n+1MRGRvemJyTwIgEWk7KXDX0kclceIWLWc7l9nlsuacLZpSjOzf63IQ5tc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16oACRA9TVsSAnZWagAA2qUQAJ6gKrKAR/FpAdSMP2Ep\nzjPSIXmJmojiL/UwHgyGgOfcURYPpKSeLy4jORj1wb1UjicAgYMLdioepHzR\n7Pm/Lt/LHFfCYelTK51WewmHj0NUnSiXpmUVAT9uqqPgG/mxZ7aPS/N9wnFG\n7rNcokgKc/a6QK3KUUIfYV4cxOCltqC3ucP1I3sEWez07mVWRQdlqNLLrVZx\neMrWs51Y1JvSwvjBx+AvWAsaVuIpCmt2MSlbUMNoRGKo3KwS2Tfbiwtc/eGW\nB6nrZ3CSISwUTpXfnRx4tBp14GeC8i0uXkvU3H6nT3wAHxz+Ue5IoIdUJ7y2\nt8Y/WcF7ztzDBNuaLBo7nefWOtnvZOocfgB38eT/qXMyIVwFpfDY8/qjHi9I\n3TUXxyRUBGHuUfyCjDGs2CQF3/ccjcVmE4eTuFNEyTa2JyYYohLMVyZocf71\nvqotC/D663T44Y35jcnRulV9pWoDcSVNoWnkP5u8k5fF4yH/5sFVdfG61MEL\n6sZUXigUr3ECDeK+zifTuViQh/EmVGXAhdDjOtdQS4uzq4Rjv4gODRsft0us\naA+FLoncPIoxv5TqHkjdBxnZSoKEV2GpiAoNeMhewYVq9ehFBqnsCUHNOjin\nqoCCow9vCNWmypaScLR52bLspRSf+s1qp9MNXpUsCFfqixKwA5szvtmuivvL\ni7BF\r\n=SXst\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7c9ddf94f1ba2ee332d7acea141e5022b58f79ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.388b042c7.0","@material/base":"7.0.0-canary.388b042c7.0","@material/shape":"7.0.0-canary.388b042c7.0","@material/theme":"7.0.0-canary.388b042c7.0","@material/floating-label":"7.0.0-canary.388b042c7.0","@material/feature-targeting":"7.0.0-canary.388b042c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.388b042c7.0_1591192063624_0.2701075351927118","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/notched-outline","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.cca1ca84d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1425b2d3d44dad7506c6f698d0a5a469931bfc9b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.cca1ca84d.0.tgz","fileCount":34,"integrity":"sha512-SALBsQlYXg9PBdgcBcQ7bdNMy26JPhXGqVKdsi93lLErSzIVUmW3eBvboYDfrTq9X83qV17KlD5OYtrDZzw49A==","signatures":[{"sig":"MEUCIQCN3F+tV7cpA+RJwykyo68lB/iTOI6q/ng4HijiUUFloQIgD5nAzKg1xb+zBjnHdJagig7A6meJIRv98h8NmVicUL8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18nxCRA9TVsSAnZWagAA06sQAKFYYrQu8D2x3Zq+j2KU\nxFbp1MZQGj5wId7vm3HzyYAZEak7a2BgARaCK5pkxoOHrN+OdtDo30+WHU4h\nPup0mCOpTJ9C4TZ435Cu9dUVahAWgRjFC10TaEkdKgqzep7yZ0Q4bxX4mDdn\n8mB+9f8JPUUuLNVqmXPn/JXkvbh6vVUaWDxAhI14JgE88LjVZeGKFsPmq3S3\nXhFJa5HAQRDkp+4UxGfrUxRhtAKyb0qWxkWPJs7O7B801UirAPZSMss3kshH\nK+tvGUOZU39I+Wueqb4BLS69b2Gfq7HEUAZd0SUGbGxLEqKxBO4d2Pf39cvk\nDFQnm6gu342rKaQbacBUqDQw71DoR8dZKPyk45fSyfE316bu8ZMzouNmsmPe\nb+Ociv8oKTnIaoPyS7tL0es3roWzPi16MCP0m+FUDR/8ue1fqNoXyTqztuTM\nuwM7bu6b9zUqhxC6kjD1H/3vCEIYMV2CPdm4WyvKfKUMJ3VgMqtYzc163MNm\n25jFs3betTeNBsZFy6pV/H5wjpfZHpqbIOIJKzQoMC0i7WG2GzxmAjyWCCcV\ncfgkXzjsS+IJyZpj6tAQUNwmorWuhdyBHPzAYUrdqb49smtVRHuGolY1ghvp\nHi6NiHr3+61WjnnO/4WtRb1ZxRFGIYpDlh6Lch7ohpmwYSz2Dtvv5xrur+sC\nzio/\r\n=bPJp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f154bcb37f9df5f07d3c6dd0c397a436794ed609","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.cca1ca84d.0","@material/base":"7.0.0-canary.cca1ca84d.0","@material/shape":"7.0.0-canary.cca1ca84d.0","@material/theme":"7.0.0-canary.cca1ca84d.0","@material/floating-label":"7.0.0-canary.cca1ca84d.0","@material/feature-targeting":"7.0.0-canary.cca1ca84d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.cca1ca84d.0_1591200240984_0.6242155323582188","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/notched-outline","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.9b0b5f2e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76924bcff5aa37b75446417c8933a9b8b1702a4d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":34,"integrity":"sha512-O9hviqQMqdmkrSGlsg7EZU/WwBO2UubjugkBJNuoGVD+NEnjD2wgXHzJzYmb+yAFRtV/2/tcCe/N3i732L0eIw==","signatures":[{"sig":"MEUCIQDFW+ev67pviTt+TgT0SNQkR8RNy5YVEoooMz7FAf76FQIgaUgnW2nxZUW7StuO3CBHEakyW2bM7QXDLQ5jggeK5sY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/LzCRA9TVsSAnZWagAAHloP+gI/X5IBUShaeA1qMAIP\nqU3lj8QfUSKQyLchrN3A51sincsPsmvXgCaCEnuR6QB0IJF+xwaIJ7WpBVwq\nrBuIbl9yOrKHJDgwZV7JbfYg/4NorMofEYjIO+XuoGZ0akhb9tYXYj8KisOu\nI48jayIJri63zr8qcWZAkbjOZ5fIdSRQgQt2zKe8At19N904K85/AqdtkqPF\nxqnHcZiZMtxsET/u0gSPvAHH2xw7M+RFatd0YyoAN4mBFw76rErpO2v5s44q\nStQXGPHQ8krf0fLGUkWorLyOaBqGN63eDkacPXyENoOV7DISpJTlU0du10qH\nzZ3KfqwuQBHN0HpKWn5FGEOTlEiwZDuO7uqLOUO9nSxoSYF5T4Ru3jDnWTAL\nRnBiNRnA1bX0ahxsyrJUt2250TnnlJsvCjQ7SocH/zl0YWXqyRPkEbV07G5D\niV1zWWHHANZo9RLwCbKsKLrFZ30R5kN5IB2wYWXeYzqGc52stYLRzG8BygxP\n3C1lk0kj5T1rRpi09qckVJmJ8OyJvnWQGmmfDzPXqg/Xd9quaQ0p/FT6tGR4\nTrqSolzmgzYMYnEl7XXOn6GW6IopBJZ4VECaOtdinrNrjkroCSS8+nvmjhj7\n+LP8U8zkefI8l1HrsbRYHh+gdMmQQKbK+7Gatdqv/KWyW6psMwe75FEn/eqS\n/ENB\r\n=MVrj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"35348e60387f88e73ce8e1376b7f352877821cb5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.9b0b5f2e0.0","@material/base":"7.0.0-canary.9b0b5f2e0.0","@material/shape":"7.0.0-canary.9b0b5f2e0.0","@material/theme":"7.0.0-canary.9b0b5f2e0.0","@material/floating-label":"7.0.0-canary.9b0b5f2e0.0","@material/feature-targeting":"7.0.0-canary.9b0b5f2e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.9b0b5f2e0.0_1591210739479_0.3780648315324957","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/notched-outline","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.0a7895f4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8e52ce22186885da3a300f021b506fa378ec4fd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.0a7895f4d.0.tgz","fileCount":34,"integrity":"sha512-w2d70CQ499/djV/uPQOzG+7KAB9t1Tl7z6zJkD8yNt1AyrQiz0TrCNkc3ZDDmML3NDbk8VdrCp53Hq1ZrOLIbQ==","signatures":[{"sig":"MEQCIE5zlhfp29jkiGq/zFkqUPdGrA+wONCg9wXuxCgVOhTqAiBhS6gsmH3JkG4zSnPvFLPpZTYWqoT7A4ri09q0RJlqmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BGrCRA9TVsSAnZWagAAJ2AP/RaR+Ee7Azso5fjF0vcy\nK9kJhYeSIu1Nz7QtslMMaGv2uWZmyrQECpFVxHLYxjfADtgdCow+Qgu196lD\ncCVWn5maFpFEa60Wn6kTHj4/ENvgdy3v5yAr5so55cXgG3P2+5OXKS6fgElc\nn1EJM0xQUSVJQmXOfPNSYiH6CdHF9ebnaCo+SvrG7ncZkUxuJB8nShNvmj+p\nczP5a9QnE7j0BowxVn8N2XiNe+dw2uPpuE+Bx21ZuSKkli4lfwMKMqXoaVth\nC9Qe54qKwq6Hlo3WqGSSllzVJrysNLpCh5U5T/UYKWZHiEhk8gOpG0S4oMZA\nKnROTRCNyNwMnHrxDV/7/3gXM/m7EU9ZXXy74uAbLxbEFZng9ce4BYMJmlHx\nDV8veQdNdJkepw1Z1EuC65k+t7lSXFsojD1GaRE/Fh97aOBem/35ZQxZvojG\nOZCSWdomIywN7fH8uTAC523xg+anO04A3BwV0iAkRvjuT0IVem4V6THG7qIo\n7PGt7W1J8YcnfRVPZciJTQvV/3JH7TyONsQZ/HsOvSPBhenn/JR9WeFTKpKG\nQebPOfp9fkpKcqCt5HezcyYclZnCkqfVf+xb4OH0v9XUjn6IZFcrVmuxHkcL\nECNwminSUL0zWJV14tfOF0wpalR9qEdwKpIym0zkOBfMyQLX7gahp4Ko+Pyj\na2qr\r\n=L+Oo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"929c9bffd0636490958fcf34e0b40578b44a9cd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0a7895f4d.0","@material/base":"7.0.0-canary.0a7895f4d.0","@material/shape":"7.0.0-canary.0a7895f4d.0","@material/theme":"7.0.0-canary.0a7895f4d.0","@material/floating-label":"7.0.0-canary.0a7895f4d.0","@material/feature-targeting":"7.0.0-canary.0a7895f4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.0a7895f4d.0_1591218603268_0.858131380774148","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/notched-outline","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.7461aad68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4effc1632be162fa24c94e26e0fff17732157f7b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.7461aad68.0.tgz","fileCount":34,"integrity":"sha512-2nAXlJenTTnPRsJ4Z2TWBumZNCRcZAULzpYiKlXpu+O09rXq3b3ObWQepHdmJ/s5I4JoJKsNq/kOLOeN7yax1Q==","signatures":[{"sig":"MEQCIBPL2JIjHhw6imzJHE0KG9idnvuNZllv/zFA5lsorFwMAiAEhsXUCyiCZXPrE72HzY7rz+vfKiOix+8xytP2bfVZxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CCVCRA9TVsSAnZWagAA8XAP/i87UfnHQJHhr61PvRJB\nWe6gN9eruQp1Ak+h9wfiHOFnoALoJIZg2ai4RLjTQRiXhPMGWFfSTWoNy8F5\nISfoKO/oYlS6g3bqOaOeSHwj733AQu50/Ys3f+lrdo6ScQ5l88iTEx28vtwP\nD1XnReYlPq6BBQnfb88d38yb31cTi7ASbtJO5hl8+wsREV3GaUkopGTDV2Sj\nKfmrqJH+pJynrpKY+7JRIbYqbdvRpMweMHq7PYeNpispJ4UlDZXWXFtvUEBu\n8OTDKKJOmBSAA8kBdMai9BzVaZ0ClQKveNBCsteKDoWLTxytB8mIqg/ZZ8nj\nM+sIagoMIygBPWid/UYlNcNpa0SzeOMUQpfm9G//lo7LNTCJ8QGzc14B5kzi\nQNTj8blJQMc253K55shOeEkitoSVh0vVe4cBdwz2DbYkbBy+SBengZ7jOMIf\nAGFGfnfhxCGHYRXY88odiDBggSU+TdlnsJoFmIG5vNMsQA0Y3Fa6J6pUzoMc\nxMje0b0N118i4I8xWzkPlEVwP1ZDrrdbeqEcJG1g7LKlBxH6emI0UE4HM/j8\ns+hwd2ovd5wAYkvGFPQVOasdn99sECOBVA1OaNE5bS9sO4WoX83Zg3ebv6AV\nhHJOXpzCphfgdCdNUSZYzVYldoVvpdM8XSgO1o66QwtY1NGd2iWoF11ehnLm\njWKf\r\n=fhah\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f9166e39b20f57c6b5cdad1ce684529ca891bd81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.7461aad68.0","@material/base":"7.0.0-canary.7461aad68.0","@material/shape":"7.0.0-canary.7461aad68.0","@material/theme":"7.0.0-canary.7461aad68.0","@material/floating-label":"7.0.0-canary.7461aad68.0","@material/feature-targeting":"7.0.0-canary.7461aad68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.7461aad68.0_1591222421205_0.4058295241426344","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/notched-outline","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.a0dc2b5c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f32d64e5ecb460759125fdc2815d42e264941851","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":34,"integrity":"sha512-Qwaj5pzmTzpo+QGGFDztq4Wfp32quvKvJqUyaCGFHLPmMxkBPVipS8GdcHgKQALDsEgV8tun69VQWbb3hz8iLA==","signatures":[{"sig":"MEUCICuIHj/cY95WXR8VbiPyC9YZrdrfEGSXSy31+TopydVgAiEAwTo1DTPNP8H3yfaYMgIAY8/L4/Il2KCS2x/VVV5yCSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WRwCRA9TVsSAnZWagAAc2cP/3+cD4shEnc4Y4cutGub\nIBbA+4I80lucH5Desh6BxiLmhyvOc5VbTPAe4y6xfcP4IibUucqq4xQ1lYRZ\nG0PgUztUj7uEMjAhopa6FuQFgFwztS7k0zEnr5YAktuu2FSuBYxDqN9497Wy\nLOo/IXN487Key0A3vipazpEBTodQxAlkE4lu6UXWQJXDw2NzjIdfvRqwyZJT\nTwcguueLwyJtT6usPGawzeJelFG7KWqEDIGTrVWI8zSJc6S9STw+ejeEedQj\nCkkcqd2orpCb1/ct7p94eJ11fztAtLNbEH2ux19IYuKgjtwPptI+uaAnJ5xv\nNuvEy2tBWmHRXw5zWNqZfmK7HyPhH0RaimJsssh6PFFp6mYOxEojBOcwLBH+\nS5yKm7UefUeQyihqRaTNcsLqOUT+B/ggOkr+1uq4MQ2O0hg2YTLVwgX4rD+W\nova8+wFv7K9CHqVc0oJg4m4gHJzJWMJmaJ0p1240RC26PwfL725K9vGCMZok\nDrS1rUCNcEMJM/gYOVmjKyRBWTde0S8wclgwyzqr5brRVTycC1H5syiw4AlD\nrBRky332e4VHX8ZSV87uqtqRPa2Q1jUubPmOpEqNT3wN8r11dXVyPiVdwOBT\nD9t9/DQkGvceXPFrUTWc5bQC21GGcsuBWeUy2qiCAStD8aZ9ZhIUFCDTkVZO\nPazX\r\n=0/0t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5970f3857673cb8c032d0d4532a6cf1209f94c47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a0dc2b5c4.0","@material/base":"7.0.0-canary.a0dc2b5c4.0","@material/shape":"7.0.0-canary.a0dc2b5c4.0","@material/theme":"7.0.0-canary.a0dc2b5c4.0","@material/floating-label":"7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.a0dc2b5c4.0_1591305325027_0.5070528317496155","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/notched-outline","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.2b420c5b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46dfdccdcec7eec7e310f86129aa31008149d1e8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.2b420c5b3.0.tgz","fileCount":34,"integrity":"sha512-G8b+ERS8G6Of8R3WyJr4b5BfKBNzLKV4efH5xw3RDPA/0V+MF0+y3HjgzJ1Yt3XY8QZxARw55ufzvJoxDGtbLA==","signatures":[{"sig":"MEUCIQDnLR3aYS0o6gql0bzMWxpkNTNBmxtHYRdnQ08bbNsNqwIgLox9YZY8MKeJlw6GYz3xea0FLlibMc93ebx5pkxed9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mQhCRA9TVsSAnZWagAA0l4P/0G26rOsXK+ZDb7lt8Kb\n1VE4ggJpGG/pKlFDFUOXuGzzIE99LZTdUy11PjZit4FMBI6pjQO3H3o3YBCK\ntuwo2FXijZA1madIPDavfdKMOPjxbGtlusA0v2dIbwhTile+szSeJG4DN2NW\nY66Cw8VdVkTKMFAuZoDRqvFeAYmnRPkGYUzCvPEZbTFiNReNCC7Uyx1k/QnA\nEs4hm9e7fn3ygOvhc7hZCxKWsB98XmkAlQarni8N8JA17bmTQ5XkW4uFW9QE\nZuhAkg+6qih9L1VMNMd+3JJxPpnOmdW5eMDi8VTwwQA4ZNbVduHvr5dTIw4t\nRvlnAd4vXb/SlSNXl9z5d180hVm+Z1SXj9S2CF600Lmsfz3V6gks83cerBEH\nXjbgGDMWNjtMhoRWhmfpgK3QNNcVwQfz9X1nXTHyoc1xTMcPOwgmifUcNpP0\nRbNUtZfe3rj2rUZuahcs1kDoGJeMdtqfUhlfH36daRIBEnf8b0+nVElUKeh3\nZVj8M9MnENV0lpmSFgsHYTcmOVpBfrjLiPnOcVKAwMCuw3+siKG4Lbv+U9d9\nDaSMyxn2Vfk0Z8itBuqeiV4LrpgWa7SUsPj5rxrYwRqUQOckfnFj3qUbAg+d\njY6dQkYxkH1aACZlmMgfh6vtxhYXTM1YWQoiklhN0oGIRl514hwMJWQMVSm2\nfisf\r\n=SXIC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"80cc16a27982fc781b2a68accf38760a98fdbe2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2b420c5b3.0","@material/base":"7.0.0-canary.2b420c5b3.0","@material/shape":"7.0.0-canary.2b420c5b3.0","@material/theme":"7.0.0-canary.2b420c5b3.0","@material/floating-label":"7.0.0-canary.2b420c5b3.0","@material/feature-targeting":"7.0.0-canary.2b420c5b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.2b420c5b3.0_1591632929337_0.6856565796670393","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/notched-outline","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.8fa22aacc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e26dbab7247b852ff7ea343ba6ccd2afb4542b48","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.8fa22aacc.0.tgz","fileCount":34,"integrity":"sha512-qgQUo0z30TmJbSwPyR6AcVcQ8Ag41fZRIlkdSElxyVuYbrc87WyB0Jtaj0yYbeg8zMNMjl7Fw/Lre/gqDDgcVA==","signatures":[{"sig":"MEUCIQC1eoYpsdWj0fec3G6mwgUtTdTz5c06atcWQlIvHIpAiwIgQ2Cx6qQrScNQUAeYRdTk8DUTqcYywDIWAYvalxPWmGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n3vCRA9TVsSAnZWagAAP6wP/262iuWhr/JQJTTCOqaI\nwSmQ+D6S4pmz6zjhPT/RQ//hsN9B3vJ08MlcYCSePs0lLGlE+qPEgzOHF2BW\ntzs7eoBwWEmVXrhmgEsVXCoZ4qycGRUQIiB3lNl68dliS7282gGBCmlaiPsD\nGlNDiToy27ZNm0r9CTY7Ssplwlzf4Y7Y9IKf9euOrD/dqHuS1+xcdXU++c54\n7fExM+4zfzIDSX21bcICgLBlUrwLAdQ+JZxw4BwZ2j8w+6o+kJLmRPQ3I0Y4\nUugE1kARxu6HmC4FGqqxdxFA9GRpsucZV1E4AfzKcmnihjEDCt4F3IxrUXs+\nWBMKtrrOYJKLe0qJFm3KxlbfCnc66QGJMQzGylXDGAzg2+pAxK+rX0myaqzJ\neMilj9PbxtD5yCaFZRhoTx8tH3bPH9hk+fmbeiwuS2ve8HCB9NPECxjgPZC5\n+8t/3eQ3KeGsLA9EC8Iv4EDcI6vxx3A9RRO4Rih3lxmSANaGMT8OuJwr4Eoq\nUfRDZ4jxMfCZ17jY3MT5gS1uHZz2U3kTtpgFnKzQboXr5mNjOR7qq6EGi7IO\n5vAattaEX5h3Fi0fux/S7DnhfBmuQXI76FCkGWzy6ItLr9mWZuYsYyuV213j\nwnNBggt1Zg43nKwTkrVyDeIihDrgM7Is7Db+Coa7weWaNHJ3uiNykvhP3XSp\ncVUZ\r\n=tfho\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7c66b081ba582f4d58dde82c8b83ab1dfbed6063","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8fa22aacc.0","@material/base":"7.0.0-canary.8fa22aacc.0","@material/shape":"7.0.0-canary.8fa22aacc.0","@material/theme":"7.0.0-canary.8fa22aacc.0","@material/floating-label":"7.0.0-canary.8fa22aacc.0","@material/feature-targeting":"7.0.0-canary.8fa22aacc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.8fa22aacc.0_1591639534932_0.24967579424072772","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/notched-outline","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.21c4e4ed8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c43b165c76594e4a3bf40b15892bacacaa55c213","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":34,"integrity":"sha512-dj/NRqyKfK61S5eyA95e1VzhOtmgTaWsJUnmEC0UAztZJzGJ16MOOCRKsqwr5Kbg83s8iZBaDP3JyJDVkPkgaQ==","signatures":[{"sig":"MEYCIQCXrbxn6kpHCiqS4a3+DxJr6ktma/Q73AEn2GnzwiSIBAIhAKkT24nY2CvBbBRZQn3piULdQicjKl19cZjexth/c4lc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3oc+CRA9TVsSAnZWagAAKtAQAIZPewfWW5aVYyJDoiV1\nEpq98WgKszMuwxqPu0UxV5iPZbq2CwpqYSoG0Ly7jYm3Ezkk92BZ8y04uadY\njycMS3I4FsiCK2Rj07zbRS3HMG2Na1eJwYmxM661bybgdreKRQD3SoN/Txlc\nlu7fUPxbVbe5jbhnMvsZs2qoSXP8AHzxpfEfIuqB8EfnldjGjz91bZpc2+ni\nYjNPVWUvhRWlxdzae6ncNnHauOekDsFp90NpGImg6AVlY/kbcKlPVqoa42TU\noR9FfTSdyP5aC3nEtxBz28uVu/zR/VPSKfL6I2jx8kmMbFb7aViYjzp8m7/+\n3xz/xKnxyredxcPql1Nb9Q1DvoPpRbyae7iPUH/8xAY1nmkcxpJkp51peoyN\nrk2oieVTwk8u3m+D6XYHr/dYURRTYBJxfBwyrV2yw5pWRIKfb0AWt+asEW0S\n15CrcIYYozvxgMBZaJyikaBWvg/PVCnD3HAl0sU2y8jF0bVVXjM/yq6H1pvh\nhJZlMWYpl5SgLXkkzMu+gQuhvNZ2e3OqZDqJxgEBKtfyDDT3RAti10FOReab\n/u/XU12ABwEOkPXusYCc6K094urHFbYoYBF2xdaCreqBjgci/EXpPqUj9idx\nw/d6E4fx+w45lnuvZSRyPx4r7qxBg8efEg4cibtCIJva5jETeXQJIDmJW2UX\nX86c\r\n=o5+n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4028e059428ff6b13f79ad3f9076ddd853ec1904","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.21c4e4ed8.0","@material/base":"7.0.0-canary.21c4e4ed8.0","@material/shape":"7.0.0-canary.21c4e4ed8.0","@material/theme":"7.0.0-canary.21c4e4ed8.0","@material/floating-label":"7.0.0-canary.21c4e4ed8.0","@material/feature-targeting":"7.0.0-canary.21c4e4ed8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.21c4e4ed8.0_1591641917969_0.04826731456495814","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/notched-outline","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.dfde46516.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b31580acc41bc04acd56ab0e4fa7cfe44c6c983","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.dfde46516.0.tgz","fileCount":34,"integrity":"sha512-5oGmjJcbWTJp5zLfATOmXGjjLT5s26XasvWqM3PPUu0ClMFSzgDWDNAqX24GUsQdC/JauMiuOI2MABK1StuTWQ==","signatures":[{"sig":"MEQCIAcKD4hzhgS3HvNll3BYJQLV59Fc/ALP1givdWjK/XeQAiB6US7cqliSOo13XmmUYC46gFHkVyVGqvwVkkeR6m+ZVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pTECRA9TVsSAnZWagAAOeQP/1dqHjAYOOTdBdIT/2Js\nFa9BlopFfxaoV2U3AIjbV1O+zgb0/CPOFyVayRReZfahTlVWkjjA+S2OpJ32\noiyqlHlMdmAqYThFsoCYQhRMDK2ZoKw7X1Vqen9AXASDeY8XGfLEyJ4/NMK8\nqpxhW5LkXtiVZL6k2xaf+XBekLzX8/5zkz3yD/pgBM8Qb92xkyjLUlS6PIab\nbrIJTISYur7r1tuOhSgg7IEfvEeUaFX5XqfBhfg4WKIk13BlhJtnuG7AMnve\nN6bUIUw8hnbNTTpRLOACkpRaHyuI65Gvp1/jO9h+GJaJ1lzu05MyRERcBh/a\nVNv1QrFjNr1Uq02fNsWHGmIJzxqocHFngsH435IsJyxst/xJ2jevTFQb++NG\nB4xwvB6okuIEn2eBOXH9TtDWzRggSECI1pQz0UdmWTB3mAzIrv0sQf0iMT9h\nEde6DGOahsyLQvwtkW9VBF9+DUjydvdu9lk/CXeE6t2bLdW58LtatrsTkTXh\nCdktegwLtgkbjxVuEwVuThLNrBqvk4K/NWDbB/jomyii3fPNIOzrAp5L+M/8\nM8rLPrhFccAdCKTo2VGTDiUBeeXFPdK1CmH+22/Bnmk/Lsea3EwsjxWHle7U\nlQysfYFORt36pKJP+rBjL2ejzMXpoe85S8gwnYQ3wKDeTwLLaAoph2gVt0W5\nD67n\r\n=e3QL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c25d474d22b404bd6774ea12567f0916bd7fd165","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.dfde46516.0","@material/base":"7.0.0-canary.dfde46516.0","@material/shape":"7.0.0-canary.dfde46516.0","@material/theme":"7.0.0-canary.dfde46516.0","@material/floating-label":"7.0.0-canary.dfde46516.0","@material/feature-targeting":"7.0.0-canary.dfde46516.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.dfde46516.0_1591645380264_0.7436072871264057","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/notched-outline","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.05cc5c206.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a511c2d40b8b38132fc93fdcf5eb7127aba32a46","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.05cc5c206.0.tgz","fileCount":34,"integrity":"sha512-W1W4IzV2UT+d1psBcmAskmtIOV9OXWdtiYqD0WjQ6OHQQn+sxtwi0uJm+CY8r9NZYEiuWAez4e0HuoSYh2VfoA==","signatures":[{"sig":"MEQCIA8ZcdIvtmoYgJpJM/ESkAXAHfktMwjA0qOd4LRRVRUCAiBJhQqRSbM6klZ9DY5r2Fh16TzOJU3Hf/+L1RvnB3/VAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qZ3CRA9TVsSAnZWagAAq2MP/RFxV3dniIaVS+OD4yOe\nrfffAAKAZmuG3d83TJH33x/FqZtEKXkTG3sDuiHineQYaiEK4P5qEP9dryTj\nuWHpW4RIZeVvzQE4cksIV5XKtaU3S95ZwyZZOwi34VDfE/ZJHeB2B5aRB9Tw\nPJ038bm2nuawTz9JNpPmInXiW6TWbYwecOH9ikIRCcRfAHAZusIFsPPuSJYT\njl6HL8r8DpjlRBHLAMTztiYgNa+FYszVDW3sKMnEwltu4REEPo8uoOsrAWWA\n0MdKny+jpbTMGLm6SAs+9BScGN5bGPh69vOwpznGvJjqx9hkMaYt4Jq1+NkQ\nfgXUlOJNd8HElaqsSFzIw7M3a8T/N2y1uL5RY6JTxCvrbkYRTBs7bstvBWNy\nn4wIqJ0KzxnqQwGSibIJuewwHiKdDuKGgE4P2cXNkMZx4i+FPfwc5APQ0DcM\nELxEGwUjuwOFZGTPHV3MotAdx6Ibx12MmpA8uPZmCIpqITrXCV2fANOPTLGT\nbFzUgea+ZVa3hkywvv3RAst4KimiMkhamH96XqfOnDFjGxl9//FzfQfXK+Ey\nwutAbIrtyfGLdtforcvcYIeA+JE1B6XrExAYoFRAhOSNKpkvg0LbZ0DctR+C\nMaWeQG4GCI/Dh0ZXLN/gVH5dKdQtc43WQp71l7zz6y/ABBQkCvEqJR+Kr0cY\n57WG\r\n=iyNP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"933ae32b3f02920ab3f6f1660cefdd6302297532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.05cc5c206.0","@material/base":"7.0.0-canary.05cc5c206.0","@material/shape":"7.0.0-canary.05cc5c206.0","@material/theme":"7.0.0-canary.05cc5c206.0","@material/floating-label":"7.0.0-canary.05cc5c206.0","@material/feature-targeting":"7.0.0-canary.05cc5c206.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.05cc5c206.0_1591649910734_0.25879658148680695","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/notched-outline","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.3ee488f1c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"305f9f308112521bb9702f9db9303d34e4152002","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.3ee488f1c.0.tgz","fileCount":34,"integrity":"sha512-ruZPL2oNY9h9Cif3kzHx+F9pNce6Estqsr+p4TZK7v+QxJ1d1AEwbkz+U51fPLq9XtwuB5ln5RfZGJwSrY5kRQ==","signatures":[{"sig":"MEUCIGa0iP0GNESKyIqCeOztKb+3AlK6O+A1Hx0bxbhlCSkwAiEAvU144UnAIEGfHJAZH1NIMhpHSG1FCviuPMbj3ujz6Xg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36K+CRA9TVsSAnZWagAA1bcP/2UeUTy+YhR4V2iRWm/0\nCSSPSRlytaT/87HCxKNxjyyn37Kgq7b7AOKI180ozyW0igWiAZdk21N3KBtD\nEtHuxGKBbtu3v+sHBoHSREJrTuaZIPR1DrkJIEtKLnWI8LMt7Kjp4VIcJN63\nmvv/pHyhjEx6NjrZxKoGIQhwmrOCy4K+ATTIonCaYF/QaVJxWPM4TXrhXpO3\ni7Ejhj3uSWZEvOZ1ztuw7H+pykTNkrg3rZwk8RpcP0HxjzjfftATmEamri5j\nUbAz7tkNoSvB2G7BzWWnbrfUKXtnnhr3IQkpNjKxyuqDr9sAgF9CyJpncVyc\nuFiON0mZq+1FSafERHhcHXnNDKQwsUMvyo1GyNbf136sds0aekwdxzQVRSSB\nChbZsmWzcFW77H8//DYh3J/OZ9MeG0iWOp86DT42kZLeERRnO5Q2h1hxl/qG\npR5WL7IkgepkPKWIUQLSmK+FFFWb2K2uUJeg8VXeGnaWmwpikGhT/WF5vuUC\nota5eqbZfgQKoOptQWeDVyx7YXLontAQpSRkHe6z+qoNnnqABnG39C5SPAVN\n8NCgZPnfRiiPgsa8irrNLfFdzKGgL2XJrQ7br8p1HFBkIUcwyhgMDxj3P55k\nG3Q32MiEd9X941hF0N+o86Ety/HNZl55XHU2kT7e1hb6MZVMwvraS8nJcpYi\nZdiO\r\n=BuEL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ceaac97d295d5d50e71137ff6d4b390630570b8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3ee488f1c.0","@material/base":"7.0.0-canary.3ee488f1c.0","@material/shape":"7.0.0-canary.3ee488f1c.0","@material/theme":"7.0.0-canary.3ee488f1c.0","@material/floating-label":"7.0.0-canary.3ee488f1c.0","@material/feature-targeting":"7.0.0-canary.3ee488f1c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.3ee488f1c.0_1591714493908_0.0968043889343917","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/notched-outline","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.b83d720ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2ec5a75473694c512343ba8af83492969d77645","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.b83d720ee.0.tgz","fileCount":34,"integrity":"sha512-6cxQysgUimAHSYAOxHuwCoTAyQj3aygzT4AFeF798tsf5QqpwLkdgK7rHuzvAor4IiRCCw4361SaAccp0GJIjw==","signatures":[{"sig":"MEUCIBUy3XI30ZuHDzGj2KJ5davl+QWf96ERAfgxuL3buZrhAiEAujeM5d+WTcK+soJvYKNomO+qHW/K++NNbC1B1vf6rps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38ZsCRA9TVsSAnZWagAAR7kP/3+T/DRVK7SizOBgLYfG\nFTFwpo8lnuKrFQix6HwmPm0A4rYfH+Xt5jdGv4XZrZtIKb6fXkWrTEY4MmIi\nW8x+eAr+fgLftHWfhwAegOgYooNe244pk2sRHXf4oStnh6+En/egvxvOC+Qo\nbBG90koQfFbIT0HpmZWSCgNAb1g/mxqiaclcgMAREAsdGjJy5+0EpEh1e54h\n5pDMGuQyTz9RxlRAgJTobGi2C1OXIcLg51jhpV2b8Rk8LYGY1ZEylBB7+5zN\ntuRp15SReKXf35QxwrJzlidEnoP3cRuTl/tdn69wORabp3QDL+zGQfmZYw/d\ngIIZ9OopNTU21xWkNd4Yuv/6RegFUkBKX127XKzFlsl6vGeVLD1rESaV+UWy\nASI9pMlt17a4eDCyJEYvQPgyhpude5eHq8H2j+9TlVQEWuM8ptmm3sK6Dv9H\npkD7j+3EqQs/2B754rVj2ELLNnke9KLDyMFrqegs934J7kMCiT5EaH8ql86P\nVvuu8bmk5uoHpfr82qzU2n1MFc6UtE2itE3Vn3KicGu6wv04L3TtcTq+es+W\nM1fDxf4NuLxcwFGozplODQTV7PlsznglpKNm0H0dAEkiKD3h9xjALzJCnDav\nDl6GdiokK86I4ipABS8ji6T1CcXxQRQ5Ti39CGHPF/xySFc9ZPRnvn/LEbf3\nVAAB\r\n=A7iY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3e998e476c86bc89c3bb626240ddd068529062aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b83d720ee.0","@material/base":"7.0.0-canary.b83d720ee.0","@material/shape":"7.0.0-canary.b83d720ee.0","@material/theme":"7.0.0-canary.b83d720ee.0","@material/floating-label":"7.0.0-canary.b83d720ee.0","@material/feature-targeting":"7.0.0-canary.b83d720ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.b83d720ee.0_1591723627933_0.05124733736704057","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/notched-outline","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.afb1c11a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61afb50036ee01fcbea251673276ad44a2c1c6e7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.afb1c11a9.0.tgz","fileCount":34,"integrity":"sha512-6hB6g6AFeyq6CF9YfiAdEgXpnfgkazTrIElfamMYcisqHKfFabPH1HjK0x/sNs5zAgiUGUU5wkxf8apNBq1EJw==","signatures":[{"sig":"MEUCIESVdXVle5QTcgN2ExTVuL+wQktduXRxzmADpQZpmCvpAiEA0esJWHdWYKQb+O2eboFHONLFUcVKmtbaUj18Pl1fL9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+5PCRA9TVsSAnZWagAA3B8QAIaZMs8k5KMUcn+6ua1q\nzCl+w2rMcoRr1zP3BHGipaj5H2ckoFGBwZnJjBZQ631R7Aayj+z3HdssVfwk\nrbO0Wwcs9HzGodx4/XlQyhOHAdNmcazZcT6QJC108E7nNPIxVKM6Er69edVo\n18ZgWSW1GGnAzmv7mCmGu0jKsaJFhHCS3+rlan2slZKHzKTS00aZ9kHvXGxA\n3xT64szzR8YTzoPBWAbsQF9jZYpob5tZSRbgAS0o6aiZ5Mjbs3R5gL50533u\n5k2P1bBd25kYchem2LWOzpgr2Ku3CcOhOtTHrwSy9omGqT/hI+3+0M7ZEtWG\nGFSJxoGBXOBp+UjezZn6+s0+tQWTNuOujVNEfwmnV5T78u7Xf1BnCInngBI8\nScH9gngN2a0YDih2k9KlSC4dLxRK2mhjghCoLMJ7vEyUFZAoEd7rhaZRfDJo\nboQvAuPe7j5oR6HkQUFIap6IJjM5EyARGLRKJM8U2rO4QG6W5af2wbCaCCot\nw16H0A2/sER/WzmgbUDC3i8Nbji5OgVoDoNUqO+Kb31VaKRe3hiFrMatLG80\nLacukHusPvzR9LZz57+d85w6daGYWi7Z2bKS1TTTaEvmIBX4lUK2rHY+26fd\nR55FnT6iW1MqBVTj/qli7lFaybCxeoDCGd3UsquzL0m/rBc1iVumOUk96faf\nMgYh\r\n=J9A7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"893f09ebba8aeae1b012971b66ce3c77c410b823","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.afb1c11a9.0","@material/base":"7.0.0-canary.afb1c11a9.0","@material/shape":"7.0.0-canary.afb1c11a9.0","@material/theme":"7.0.0-canary.afb1c11a9.0","@material/floating-label":"7.0.0-canary.afb1c11a9.0","@material/feature-targeting":"7.0.0-canary.afb1c11a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.afb1c11a9.0_1591733838588_0.8084202466542734","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/notched-outline","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.39e6f71e2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e925dd97d379e33869429fabe4e40719f8994e80","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.39e6f71e2.0.tgz","fileCount":34,"integrity":"sha512-MRaqcABDxm5K3LlGPFZVgz0ARTCZYZD46awo2ClY60D6zJHtn4OfSwz183v13UlNTcodIRZAQMnK3eK4lMiqcA==","signatures":[{"sig":"MEUCIQDPuzQ2AiQr6maHARSB+sC99NZkFwM8kQRTg1SH9U223wIgX8jZXWWwWrOt03bkz+38pCaBsZBG/GYtX+y1zr4cuZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B3oCRA9TVsSAnZWagAAERgQAJbA1jh5XR+kKKrbpv0i\n7OeUd2ebSiUyMXxjPYV9Mvo5ibHqB9S2y1LCqVTI1ktvAOX9l6FeQgCXFZv2\nw9C/Km2LKU+nxmPFM332qcQYqJ5tram+hywZvZ8NULMoKPPOZsf15IQbwZR9\n5yNQRmR5IaD5AvJICN2hBgJHHD/UfI7BzL8Wc88BY2dt2yEsnmPOHpcu3Zm1\niBygAW848TbxLSrpl99oxUv93RoCVQvAQMQtqH7qyxZUagqfxtSGkPN1/G69\n9DHgqHR8gXRL3gtctdpLsUsqYnkSFFkoT1ZOBBkfRHFxLqbWU7BJLFK5F3kw\nNUlQuLpq/pr8O6+wT+e7S9UfIaxzHW0RccPAcHnAmlGFQJFlqy52wU0BEdCj\n7wCXvA0Bx0XAvFSvdq/dtZ7o9C28y/+Z5AEGsH+3lYEIQCa02OgaHNc6E2WP\nZt/d/FpxV5U+PWy6d50bKP8mEvuJ691MB4fD/wz8D6vqhMX11WZpVTg/pM3m\nsCzDwYZ0vRkm+AvJt4J5/v4sAMJK96MqUB9F3fnabWFDlYyj7EF5g3OoL50G\n0uh16kzlnDrXMmmdJuRAZ8rENVSRIHPAWhudgoFXXA5TUz7h7A+c2jzZsQBi\nlSkRxnYUVYAsr/flpWI4L+nt41hShTYqIePtA4ZnqgEW9WiGLvfmYI/aNOsR\nv3Gu\r\n=hp3Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2f7273891cbcb7da6646bdca0ac4c5dc2ceed9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.39e6f71e2.0","@material/base":"7.0.0-canary.39e6f71e2.0","@material/shape":"7.0.0-canary.39e6f71e2.0","@material/theme":"7.0.0-canary.39e6f71e2.0","@material/floating-label":"7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.39e6f71e2.0_1591746023673_0.6868828139919501","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/notched-outline","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.d4c66dc7d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3aba9f7f5ff66a643c22b7ad0e1966da1b28a350","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":34,"integrity":"sha512-bQ4Vz5tPeYXE0A/i0Tef4Zs01bQVj/Kd+gPS1ThPcu5r9X+FfD0xbmnwVi8dedHVBaLjdZU/NwVgtwRI4/mtkQ==","signatures":[{"sig":"MEUCIQCKd49adpqQ1BsrdUFDx8uKoyoM590I+kvgrQ4uxTCQhAIgHj8CjhUEfPta8ljGgs8N7Dv11GpRiz0ADKXRmVzGLWY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m4rCRA9TVsSAnZWagAAZzgP/2ceRNKqzgJtQaBM8+uC\ng6jQrjGvnr/uvRoqhFXDSzxj7zMUZpK2ZJfiqbB/yVMhxvRqNsWqLjndov7w\nQByonzak95FtdM4YUd8kFvp3nB6bg6XHcSNfbmminAewMyLGJhmTzMkqu6d9\nUUg33z+vybnjsWjEmFrJDPZ8gxug+Am6PfHlS8CnJB74V3I+a4ZilJdH00yG\nbUcXNdoP2eFZD648tKwJ3fZW56Jt1CCpxfhm3i5kcu2wgbh3sPJOxRh1TSgF\n72Cq+tlVjpH2yhpC1RxvvtCZ1qBcXQNlBLAwjDcoZMckqzHledh5qphys/Kn\nQaUGlacHnCdCCV0lwWxdQjnyzYa30rL4TCEp5ssvtedJUQPyL3aafcnPdX9S\npWbYlkgZGFeJ4WKyCmwTPGX27vqDVZR9ntb1wWqs8yfueUJaMbzK5lrSVTGs\n0XX/fFzGy8ku2pFPEUKe/+nY/ycyQoCCPPmytsPTJk1YhRVYhKj0cftPmScJ\nobOyfWTkxO1NBjjxdqQnwl9ZDtwCsLZaB+d/i6mkshlnEv5iU6jhm0hrR1cz\nmKIJcgSYwpqINgQayCcwLIF0B0Fd8dKEMcSgBfJqk3GoiZudwxMwTXDNvXTg\nfd8AkjUjBpAl7i4ZsTvPUxHKhOWfNIcFLBCRV5wDasq27E43nMD5mkF0z/rH\nG5+8\r\n=At3u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5964d9e6836962528334c54ef81ac4cf4898392a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d4c66dc7d.0","@material/base":"7.0.0-canary.d4c66dc7d.0","@material/shape":"7.0.0-canary.d4c66dc7d.0","@material/theme":"7.0.0-canary.d4c66dc7d.0","@material/floating-label":"7.0.0-canary.d4c66dc7d.0","@material/feature-targeting":"7.0.0-canary.d4c66dc7d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.d4c66dc7d.0_1591897643225_0.47974031563985875","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/notched-outline","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.be4a19f9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c1407747a8d25b735ab945d5452eccea15b3a31","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.be4a19f9f.0.tgz","fileCount":34,"integrity":"sha512-P4x3RmucBw2lz8He59OrNF6nGSdi54Fmhfdd2I3z8Yt8A7oIrdHccc6XW/N0dqTKEG+H5kzS7aS/TRj9RX1nNA==","signatures":[{"sig":"MEUCIQDsJa2pTnxh54xfw686rzbwQgKt2cMseicMvtUhhu1N9QIgJKBGDIALtPL2qbW2EzRgJ7mkYPKE+9cPOuwSKi3aO3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xwJCRA9TVsSAnZWagAA8+UQAJEORpsbMuqFHhvAz3Fd\nbs5p1lYse8vjvnG/a1uEstH9R6KEFuA3rA4/OJU28fze7msY/uZMDhN2JfSU\n2M8fHwE1zHGU8t40PONyNxeq3qXR4nCgtNU7Xo6AY4Kenmj0McpI7f6V/G04\nBqQ5f75QA4YKt8laY046Z8dwC+jY4Xc8amKk9xRrudI6uwMKyOB5Z1bcBEvt\n046fA8amFTIErjbJcIWSxmza3y5of32zwhzPzLID8MJttTdSxNj7ii6jdHsi\nMPFZh5Ymz150sgyGES94f3DnzkcEUOln+myxj9rvfTBshydJ6mZMhK48gUWv\n7rJvLXOXrOMhLG3eoPhss8hH+XunmFl4i6x9riAO41CYQtB8j4Adbad/1d8n\n88Yr/xc0eyWdHD2/t8tKH+Eyd7rql8dOq+T0Dp0n7QTKMqGXBcNkeEOzKREX\ntovXkYBc1Ol/4+Dakbf4mZN2MZhz1L3LmNjTN0lzmnoDhyW9KA6vJJH77n6d\nvkWsYCGp5VTd9iBFV02g+VsT0RpVa4mzZW5Ixj1JjJz+6uJ3x51Jxic9aIkf\n/G4xSmhYrRaJAX5qKhkHA2mDOhkMNOp0IL3dZ95n+qTQ6lwCheIGbENiOg/E\nls0AqjQxTLrl9cqxEy1sfWYkK+0YtksG6UPuyBy+eCcFR/MI3PL+WQSyQndb\nrbOf\r\n=Hrox\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d7a0b89cd18efc7fec60e96de627e59883e3657c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.be4a19f9f.0","@material/base":"7.0.0-canary.be4a19f9f.0","@material/shape":"7.0.0-canary.be4a19f9f.0","@material/theme":"7.0.0-canary.be4a19f9f.0","@material/floating-label":"7.0.0-canary.be4a19f9f.0","@material/feature-targeting":"7.0.0-canary.be4a19f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.be4a19f9f.0_1591942152987_0.5011756351824821","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/notched-outline","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.a6ac8f629.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab79eb564d8d579a0983ade051856fa16e81f025","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.a6ac8f629.0.tgz","fileCount":34,"integrity":"sha512-6C1gdu4aVRHXmSexYprT9rerLn1ARXuKWA4rfkwsC549RCEPL5TkFSWaUJQXKTMaroiLBYR7LGUdN3dqvOXn9g==","signatures":[{"sig":"MEQCIFOK1TWjq98IqLwlsvO1REZ/cydUIvlXOaGinsq3/YRzAiAo4q9EyKXGKOgBwXOn/hJq98my+lifRVupiPTJvqfMAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+i1CRA9TVsSAnZWagAAThAQAIyAgPwCpU3wzr9X6SlN\nHgCYLcVn2LW9vw4QBbNF4DY2v+BWipX5DM/T5J4Qn064udv8wYVUIjginq46\nFANbl2ldGMpy4p9PFe9mOUNc0mPDSE1U4CKTqJ8F9uxlNsjqVKeKt/QQkwxh\nDEMZoQgZojLnEWsyW3HA0vwoiSJxD3cM2WZzpRE3win6sNY0T5b4B/sBBK++\nZeXORq/zI17uyJHpfoOgWuuGyAbiYvVUlSNzP6ZCOQO3Cn1+F80KDLrNWwvz\nlrKSvYgGzDOKydciP4TOQwnDqjAu6cWvvWf2SE7/XAaO8OrdVio4FvVOkB53\ng17qb6Y1rxkrb/NLti0xId4nypKEkoIYZvXbI/vVQUIYOfvqYFG/uAlR52X/\nt0JYTHfyJavUaZL46vi5FgZxYRLmBbq1ArAuNCug9HHL2l8bcpLnLxBmY7bP\nveL6YhAiyhgPx+ra8XhSqk1mUhoqlL6VI5uKVtmT8te6scPWNXf5Rz2Vp4GY\ncP9CJkMRDeI83bpzio8yoIL+QzWiILmbf3txEEiTA8aWNrr0iKp4dxtK8rL6\nM9OV7nDibE8oxu7EtlMtLVvyH1gUYjB+71fRWPoR3ArkLsWkuqt9JZHHXNNg\nzYQU6FVH8MkeiOutvu/XkCrDFPQs6SSORqkTbhc9OMmKBwyrutiVzJ8YiUQM\nBGpA\r\n=HEZS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"30d2dc59ec3530f0f21233e5b8e93c990a4a2776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a6ac8f629.0","@material/base":"7.0.0-canary.a6ac8f629.0","@material/shape":"7.0.0-canary.a6ac8f629.0","@material/theme":"7.0.0-canary.a6ac8f629.0","@material/floating-label":"7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.a6ac8f629.0_1592256693016_0.6950927459443712","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/notched-outline","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.9833dc287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90dac60ad00a81a00b3359ba4a22d46cc98c2f8a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.9833dc287.0.tgz","fileCount":34,"integrity":"sha512-tjy4AUjdwcAa/J/YWtohvJdqg6GX45BhDjzqT3p9nMGuxXmZUTEzNtf2EBPfUh8ytqF7Qn4LW9ATDA4yivFADA==","signatures":[{"sig":"MEUCIQDQ8++/4ZWA2QBMoL9JKvdeuImZOrGu6uglT2XmsP/fwgIgO+NS4Htgsos02Sn+Q2wFyRVKMrLLhxzoNZhAqI42+dw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SJuCRA9TVsSAnZWagAAsLQP/RfvcLu05WOr0+O5fnwR\nF1E8baaF0mfKNZAAqhlHYS9VCU9pABW/2EBVaqH7cYgjoVuTl13+YqS/Zqm1\n5yuTB+9Jj0fiSdTWyJOgivUWSTLTgqjfXdpEiDK8YImnLp2UHNyjMadss5/T\no2VQMDUu3OjKAafXNzOTD4PI+03xk1H9QSVVevqm9ASn5hWGazv0pSSEWw+J\nrfp1rB0yZhca+hkJ0beUchx4Z6UIR09T6QDFUtQ4tmNmTBwU0d3prFLpGjEq\noDev4enR7FdrF4lhIFxAhXoKPro5aUQkk3aulvdiMW1RQWrAmOBpz8Lirw2j\npCLQ0DfHfweFTdM/bf1/4HkJC6oJH9E40xAASAJ7R03KHkJOXN1JxLF39pSP\nD+zdygsBWCYAGSmbw0WLu2BMKUoxqNyVQZ/dfxwM6ISjG8aD/YOZYDuEGN8Y\n2MS2MakpSJ45EsNRJm48YawhptPab+9ySBo+9xffn/e9gV9HdqMozJ4IifTZ\n/n6WyjBTlLKpMN6qMOLW9IfFWA3sfFD+tyy+9j5x0EfUTQYkSEiYBIF9GaX5\nQzPQPuoaUcPOeXH2MxWAWLo+gqSmkSIBkbwZdjNuogtjkFNL3KWYRuzjaGYo\nqSZIlkqmcwaDR7FgUPd1pELmQ811n4eqgQt7m1i0t3LqtKrKpJ2Giz8EhsA2\nKuJv\r\n=wmzN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6852334e45da838c4140c1aadc974a39d80a83b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.9833dc287.0","@material/base":"7.0.0-canary.9833dc287.0","@material/shape":"7.0.0-canary.9833dc287.0","@material/theme":"7.0.0-canary.9833dc287.0","@material/floating-label":"7.0.0-canary.9833dc287.0","@material/feature-targeting":"7.0.0-canary.9833dc287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.9833dc287.0_1592337005758_0.496251820390504","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/notched-outline","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.3aa33998e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0ff396442f170b1156bee687d5d91fc2b994b55","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.3aa33998e.0.tgz","fileCount":34,"integrity":"sha512-TKZFlzzTjBzD35GFVZ/lcu1laYQFwN6VIGs+yi+gPWOR09Ij6ZFJC/pBsnJNL/MVxN6KQwCpEitO1BOoA9anAQ==","signatures":[{"sig":"MEUCICig3GnzFD1IYsH0Ka0fg3PUn/35LvVaCTZucT5zIdbGAiEAgZfjq+0kazj2lvQ+ON1KHLkfFlfsv2s4BM6AqMO+gWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SnyCRA9TVsSAnZWagAACPIP/AkohElAepStE/WZJRQ7\nj2nhh+Fd2Yrptlq1tfzB+9hTVN2dElTLUXnpIMJz5TJlcO3oTKEQlADm2REo\nvf77Nd/z24IpwlyFr+Z15LYySrYJFZZ6GSP6Nbsiy0oXLXvwRoRNWtDWGiuA\nzMDMHeTjLt9mDKX3caZ1Andfaxf7RC0fNrna7ztYwb7O2DgJa7qJ+aaNRHAc\nytd4qCaEvHVNPBOsT11iip05WgvdrP1WY6gw4D/7B6nor+zBPJP29JxG2Oca\nYIksSPO/CsXdAIV7PvIeLajSJ9/jMeMPzyBG5R1Ta01KUXNkJJoRbbfuKQ8i\nms7fvPbh61w2cGIPH+ZVF9L4Fa7nLFc7TY8vGjYxrMn6Dnwq1ff9fYlLl+jB\neZHyxXKwvPGngr72LYM6u5E1UAdAoZPV7R2GcAp4HwiNHMarYVSRFW3m1HMR\n8IAuUoahpkhUiHKiRa9N8Tg1belG/ACdaK3sBzf02xT5oKNJBKgIBCDJ6Bsl\n5qfmwt5R01DDdmcdgYHoAB+3onV1rAElt9/Tdp8ZvxzktU3rptVXlw6zwPdX\ntME/fDRQ34yo3V1En0nktSnvv+Kuat3Ly72AatG/fg9grVY0d8HOg8ks8WvV\nUDC0OTJiRjnY18O7I4xXcDRgnpXwt7oLQScgsRqwn2/ExIlLpXTG9xAgddRG\ndvA1\r\n=ibO6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"20873613db8172781d25b42fda84ee1fecd88558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3aa33998e.0","@material/base":"7.0.0-canary.3aa33998e.0","@material/shape":"7.0.0-canary.3aa33998e.0","@material/theme":"7.0.0-canary.3aa33998e.0","@material/floating-label":"7.0.0-canary.3aa33998e.0","@material/feature-targeting":"7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.3aa33998e.0_1592338929707_0.9726336387353762","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/notched-outline","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.d2b54d183.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"035d8e7aa01e6870da5f3fe6de20b4ff5b55f141","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.d2b54d183.0.tgz","fileCount":34,"integrity":"sha512-UK1jjbeTbwWTSy3ZDD6tL/p1hSeDby/Nqvz669O+XwD2w42JA9hGQBH5WJE2Yqr8/Gpo/kSewVhD/PmL4xEDhA==","signatures":[{"sig":"MEUCIQDTDgef2EUcILFlmE1rKbojYdG1OxCDil2fUlBrFvB7CQIgcCPXNLgQHjqnxLm4NrGglV8pMFImvbp6kkDzWN9JBWU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sBrCRA9TVsSAnZWagAAZeAQAJp4vyWCPJjX7KMb1mh4\nTKCRl1qC0VIg9cwuLJvEWUcMF5zwO6Lzyn6x871Oji6+A8A1wbR2TaE3SRuZ\nYwRO3oFFTcHqD49VXf4zycxqBXLlg3qtKwuVVsyulJnhNkeaeKguHh9XhvQT\ncTZ4wRH+ZWYVZpduxxGXD/tZfrtaBlL/mozAZUW/+64E3mMT0YjAoVaVYhyS\n06Cb4xsJXaDqICJrzwaeeNwR37uNg6ezGHbgqFOpe+yhapCuvblsecEDEpEa\ne15SqFoiWKBny048LW/OtUC6R7uwmYMs+9GRb01ZS1Fv1rc18UTh+oFguBrB\nWL35iIX4ExJC5sm5okjfd37SZTARz2fYTfPmA7MGg5bngC0Kg0h1zgCHE9Zo\ngReXbmsRtohihIWO3dEya7ocCG0bOkgf9CV3ULewMvT8YkUletCHKT3Cfxsp\naMRxQZQxp+eLUeEYYP1O/z1/zMxdgptINg55oOWSHaMjwq+klH7QXPdOHGoo\nn1wceqtrubA6IVcXibUVfp5ClMe18VQKZlkMNa1VS7sq6kdhdPYxMZRbXG2M\n0tryKefbsca9rUikZWBa6oVPSKU+TZ/85YISx4WbJN5beZZhQkQh/6euudXo\nIzIAJb4aVXHkV8VyC9Jusfm8OSWy1yUw6hI9kGk9YjCAkWZ35QqQcZ3UDz/0\n7Hz/\r\n=It/J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2941697c8abef0c194a923cf548ee231dc67a2c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d2b54d183.0","@material/base":"7.0.0-canary.d2b54d183.0","@material/shape":"7.0.0-canary.d2b54d183.0","@material/theme":"7.0.0-canary.d2b54d183.0","@material/floating-label":"7.0.0-canary.d2b54d183.0","@material/feature-targeting":"7.0.0-canary.d2b54d183.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.d2b54d183.0_1592442986923_0.7568245015003534","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/notched-outline","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.f2a488e95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c9762cbd6ce500857ed69fafb84c5a437774711","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.f2a488e95.0.tgz","fileCount":34,"integrity":"sha512-rYT2OpdLLCUh0BhXnvpmKj6poKXCRGWe6UnUn7LWDXU1Y61+zlW6uCV7hm1AMShOdvb7fAE+6QHngE0ljC9p+g==","signatures":[{"sig":"MEUCIA2WAyPiNE2XjHtrmNz6INmbvg0znKcPoXFqt4GJYkOQAiEAykEy2FXkUuQHsev1gnNg9Cy4XPV194tN7KapFa5i7rQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64KiCRA9TVsSAnZWagAAl8wP+QDcT6eRHRwJ3m7uv/IJ\nQfBGy3rZcnZkS7qjNEVir+0h9zsBIX/ix07z2N5dl4WCh+iJQ9V4r9GNK35I\npax5ev1Dij8YhcF0bcm6YuPR/V6tEwJKgdRqRshiGmIMe7aVrWq3V4lDoGB2\n7MN9FTSA1GAS0UgirmbSY57TOj4YuQU4pDiRM9g86K/7a8YfGuuXAQ0690bl\nASHcpQsZTwRnwvdgFVH/X1g6UqrEEumdlFIT1apJdTGAul3lNicJVZYGeddv\noeqVFW4ZeUMwXIVFdNvg3MGxF+e9IvOZP/tzS6+RAVY8WjgTEl0K6ktQk1iZ\nlT9RlCkAJ5rXqO+uW5+XgQUCEYnfcfCKAq2ADKDj8VOTEKfTy/ixEJtQIM4S\nS8QqMZ4nQOWRyFVBP3r2ybVNDNLDF547RQCxjepnd0GKc4dgc5W+SkS63jjM\nTgBP48PdPUv7hfZ9rztEg8yAqPYE6gr2xvmGmmO9QiUDPZrumnfJah2mwe+l\nl7fvCfu/BuJDHw/q4rd3tlIfny7RtbYAUY6VVgHk3tNS3X6Oi2ljij18uPQx\nAdN648JTd7HP6XNQYilWMFR9faeZJO9DcJEgt6dJ2Bq7qvi07DIks0YTdhhE\nYPaAq9Bpu4eLrXCPhnGzB1yLwvYxWu4kPHcpafaXfDzOFsYFwke+u1w+SrVF\nxJL2\r\n=f81T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bd7f6aafa23ab94aa2f862ece45e1775f1895b88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.f2a488e95.0","@material/base":"7.0.0-canary.f2a488e95.0","@material/shape":"7.0.0-canary.f2a488e95.0","@material/theme":"7.0.0-canary.f2a488e95.0","@material/floating-label":"7.0.0-canary.f2a488e95.0","@material/feature-targeting":"7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.f2a488e95.0_1592492706119_0.9347826157333807","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/notched-outline","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.bd8d1aafa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"423f3c107ea2d3524d4b9834dfd8511e5a6b8299","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":34,"integrity":"sha512-QAjyS2ZNnVeFLZ9vA95cJcYhn6KkuhN2fm+4HdOCKj5qVsxO0LCRhjW+Mi2Oop5E6VuNvnQqAH18ll7L9rgiAg==","signatures":[{"sig":"MEYCIQCZrNzuNpsn2OIIRr6C1Ps5/AuIuOFMtn48gU94mjaR8wIhAN3MwSt+MOUcWi0AB+BammUoQdngGo3ml4xv8T0GE5mE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64V3CRA9TVsSAnZWagAAZJ4P/2R1qWSpZfiUbiPRS5N+\nFosFR/GUdrucYHl68VO/T7WT2PP2Gjal1wiNvRlT8UFef/JXiXOBA3pXyIHO\nBN3uZ38+/g8W5MA46k+ZQToBmgpeo/xtbU4I/H1gMIlZEmt6FFfNcszwyfws\nSqGVymZ9BK2LY0W7EH5BsTiPpOCT8Zim988hvGNyCyv93NsjygJNJ0XA0qZE\nyxRdQnyBGcGPT/TeWhAUFREn/Qcccml+PgLFwrdHbYwV1TMiXz82Vdv+upJg\nq9rMqTO31DulAI/UVLLHyaj1LriI2xQi9l4pXDOJ9+HKoBlqJZ5snoSXhJZB\nSoOJTJEy2L985GerVvdVSnGOs7yiozXovWG9VhfQq7OXW8/xca8QhpQi7uPz\noJSwOrNII6pNyTusKIvf0wu1Vatj+Ix7xOhxylNaMBGsUYOVe9/RkVUYTx8m\n+rrtz5FgTcj9FsUEr7+FRtSteWcGwKou1p3pCQw09NxqWaoVlC0E0JcmgrlF\nd+JaXElLfNBW5S4ggVCXzfnV/7j9Anuuz1URAsDXZwEaOmB2tw/CtigMDQ8J\n7QP+qc9zs1ri/duKPqVlSXbi4tkctr68gyq9oIkLphbDRFSZ6Q0/T+r8cYnZ\nQ0RBJh4SXBZwWISQB1ZCukUejAE7I6e/htS0DGG+PPtYdk586QVg9m0dWJSU\nuYte\r\n=sHUT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"05dd265c139c96ecaacbac16c7128e4a851b00f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bd8d1aafa.0","@material/base":"7.0.0-canary.bd8d1aafa.0","@material/shape":"7.0.0-canary.bd8d1aafa.0","@material/theme":"7.0.0-canary.bd8d1aafa.0","@material/floating-label":"7.0.0-canary.bd8d1aafa.0","@material/feature-targeting":"7.0.0-canary.bd8d1aafa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.bd8d1aafa.0_1592493430841_0.4048363625778826","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/notched-outline","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.1321eb968.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb47ac287446638ae7b3e1c8b36ab4ccdb977119","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.1321eb968.0.tgz","fileCount":34,"integrity":"sha512-Msju2LCu/kFFm+wZG/xTxMktMksv/MNGuGugtaKm1Ic13toaI0/s2iyOkyLQ1b/9YITjdCiYbSjMWm0+xe7mTQ==","signatures":[{"sig":"MEUCIQCGRqGdSG6GHDOkwd0FzCAJQxepq3N/lAYHoiy08KdjZgIgQYerxJAhgo+5ewg6Tt6GOcsKl6u2iUYwfzx8VnFNAGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RBiCRA9TVsSAnZWagAAU/sP/0CD0iNsTTm9TKFV3qvW\n5tQAPf+jwRkDDS5HhgfxsynqrX60hKjrRGC8kHkxmb6VQmpK1NWuWYFz7UhI\nHVIWasdjZo3+3J+0Hn+SKviSbTQ9vSOPOe8QsLDcIOwitq4tlQzFy1sx4sZp\ny6vA1ZvJ7NSXH1rO9uPfuTAn8s5Av5AtbIXJ5dsmSHZl45V/5O3R5ecLCE9W\n6TdPqkYUx9kSq2rEfB9CK569USrY++a3Es7CGfqDTmS+DIpAGwc2UtdlvsiR\n+19F664T1LreXETRXmb2udHcWArrrTupzbPYcy84NCkaXE4gbIzLzWm31xnE\nlB5rI8H225+GplfGYbUviEzWUZ1/hJx4JBitm4FpXAEuN7QYVSb0r2QcqpAv\nrkVO0Eqs66CmoXoe/WcN2qMwrQTZJW3uLGlJg5NZUaQkDUUxjnEMJlZn6TKg\nRWybh4gnUZZtppac178ZTnBrPTulRLPsnbKIhkdpmwdciqVaBOdTwfMSC6m/\nx9n+Ln+o6Hi/x1IrFPK/E2zsyiUXoW0DldgE8vPeBPSQI00r06uUUXFsXHqX\nOZVzOjMKISTf99pOaNBA/vV6nbvYtja0xSecmEP/MoC4ZOXiPkTXgEtiRdiq\nNP0v6aMId001n2VCzltF6XJHgL70UrQLHDju3U5h8l4n/HOTRLMR2us2kOTm\nAYCP\r\n=QTUX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"41c074a3370c2ff9b4dd6af27f2403d15cbf2832","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.1321eb968.0","@material/base":"7.0.0-canary.1321eb968.0","@material/shape":"7.0.0-canary.1321eb968.0","@material/theme":"7.0.0-canary.1321eb968.0","@material/floating-label":"7.0.0-canary.1321eb968.0","@material/feature-targeting":"7.0.0-canary.1321eb968.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.1321eb968.0_1592594530102_0.45121122841916805","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/notched-outline","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.db5cc0382.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f400e997f30cf43e4f9416db2ee146f6c8ba048e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.db5cc0382.0.tgz","fileCount":34,"integrity":"sha512-9w7kTfdqyeTc7qu+soQoHh1mEUPBrqrVbrAQMOvnw8vbpLr9F9z0MPCNtQC2sQI+CAEwwuZP62M+GKOzr32+tA==","signatures":[{"sig":"MEUCIQCrbVOf1UQYaCl/N1WKg+ZXUTHGgtOJXm7C0UxidlXOjgIgFJ6pzX9m8W1hqahb7hr0GmuGSFc4dIuoVamj9zSSAcA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RHjCRA9TVsSAnZWagAAhikQAJClhhqw6pR+S8Gn7/Yc\n/1TX/iXMVMmYPshKHSQ4rSzynWBeMReNga0tO0JWKhT1l83WMDDdWL3Eb3lB\nEwnIvZCQJ44i4e+uVEvsE6tWabmcUtVszxDx/Tn2ELiePUDyUVBwS1xthEk5\nLj71lrw6H1awh+qfPhrtO4tiBR9hC1PBaMLGw2jJVnby7vpdOdyQQElRLlcV\nFmrZt/BAzCg0ZlsHbAHZQz3oHi6FXEjhcYv3oSCxNrbXy/FuCECIhdMMx0QH\n9s67fetff00ZgLRvv2xyqTAK0yAPJd2uiidcwWeVKzrhPUl4xFAl3dX0nceJ\nxBsZONR60HrUxgWmaxKUb+UPh+5vD3z2lriTYtGeV9cjr0deYpWDnjORQpXB\nKw3R6zMniR0yEqojpwvjAYHOHhxnGdkt4F3Jjs+N1kcTZWiF1uqwFTFAH9WR\ngPw8cgqPEYk7aKVn3zEENls8a0tqg8hnqQqOgR8DbPto1Jzhq5pea9KNm4Dq\n9o5ZOezJFbwEbqqkbpwnCbdl2GNvyPvQyYPUYzl6u5/7ZmVGLeG1diVOQ1/f\nZ1XmhJABlm383BRh2lPj3a8YZSR1dGSvTTEr53JYnA9A6vNEKqi/Y53+fmJf\nb5ZlEjvx/L3jAwxZmxvTgepjrLlFhUTlTAlSXaq95IPy9XoNYPSFo6oyyvaJ\n7Iwc\r\n=wvvM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"698cb6184d0d6e6823147f7d050c39efe9b8e3b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.db5cc0382.0","@material/base":"7.0.0-canary.db5cc0382.0","@material/shape":"7.0.0-canary.db5cc0382.0","@material/theme":"7.0.0-canary.db5cc0382.0","@material/floating-label":"7.0.0-canary.db5cc0382.0","@material/feature-targeting":"7.0.0-canary.db5cc0382.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.db5cc0382.0_1592594914948_0.8525724147296085","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/notched-outline","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.6ac9bf031.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1cb03966750627ab1d8bfbe1c4a5c52d15c6a79","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.6ac9bf031.0.tgz","fileCount":34,"integrity":"sha512-T4BLEBVhFVK1/dPNIxks9QrZG+L1CtBMhx0ZHb30qhuPUOqWsVvPGFw7RzzJRp3RHtDpncnaynP60P/pzY9WAw==","signatures":[{"sig":"MEUCIC/PCaDAbyJhNVy6dIA73mz2Qw2NU+e4j0iHua4USNAsAiEAzVxxkbGFi9qL3KSnqdvsBLkanqRDGPQ/NTtefogP6bY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RavCRA9TVsSAnZWagAA8bMP/RR041ReTeqKp5prEsaM\nPm97yrJi20T4wNs+R5J+fJysz28cFCattB1rBf6u21A9HgTVzEFoHaIGvGv1\nGCaDiAF3yxHJKQ3Znzbb+SR9Bvvuqp4Tpv1N2zz+2VH7HNirXvzF4DpQzqVh\n8EQK/s/lOEGmwyK4EmO2/9fylXKYgS3B9ECqxI1mVh9Ux+RkmLJssY81J5v7\nSszotcxDY0GuNCUTQ5PY+WOelHDE+BBOyTIbLV3KIho/6lBsbHOe94vsnB4b\nvw84tJdJSgL9Ox/Fhh9W+iqquh25tbirqBzto3L6HNkVx6YOp8boHLelD7k3\nkEYzSDoXLlfhtYFac1epBrRc6aUcgAUccaoKlnr+dJgmsmZIPQ/dvX7sz19f\njbuEEl29VLYwV/N/utRY+410Q1lT+j/VMCDpn333B5GgU6iJv1VkA0B6k3mq\nieDvQaQqZQG84h3jFd6pUiKq9mG4k5Fl/zfFue54yOJb4c7hK9NehF0gviye\nwKc9KqJ2irpa3zmDfFhCn4X+5fEX6CRQEH0QUgve5lPm9cmgqPNDQNZKsL9m\nrmvzsFFU4p8R3z/aT0o3rJmSC+kVKgt+qiRIbjqF0Vn9PQD5+rcFaXQnnxAI\nj1lFx0ocoI5k4usITqnPvWcQN6M1B689qD5Jrk77OP2sls35Mjz6URuylozU\nVh0b\r\n=tBd7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e80b52100d3a9ae7653579d78250cf18752ea92f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.6ac9bf031.0","@material/base":"7.0.0-canary.6ac9bf031.0","@material/shape":"7.0.0-canary.6ac9bf031.0","@material/theme":"7.0.0-canary.6ac9bf031.0","@material/floating-label":"7.0.0-canary.6ac9bf031.0","@material/feature-targeting":"7.0.0-canary.6ac9bf031.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.6ac9bf031.0_1592596142402_0.5516904714562925","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/notched-outline","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.c21b5c367.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d31f5ed7dd2c03a27a9298aabba7b440ed39a6a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.c21b5c367.0.tgz","fileCount":34,"integrity":"sha512-8Hfz202uAeaj4K2R6UBLcUu41Tq0anj+qEOqQI6MTx30erP8EaMfJPijrW/7IXG66Z6D4V8LTiy/u1UrFLSzHg==","signatures":[{"sig":"MEYCIQCLpjvT39+eyaDKfRftBaBUVZXWBeHVXaNXG+VqKGy/KAIhANTKds7C370+ZlhC5qxy+SNZW9jWdQ9yYCCxDQsehTkm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Rv8CRA9TVsSAnZWagAAKowP/j57/iLjjWA6u2S4kioA\nzAGm+R7Jriw+3xAt1Cznw2hDSiRtUyb8DcZxPEYzaEU5pT+Avq5ameIjJLsz\n8QU9SlGzl33u/OUPHJ7Xx/HTXIzh94YvLEZkGB2QJIAg3sV8vhd+xUkB0iGr\nv/iqmg5FNb/Wxeh/nQUSg+6gjZxoe1NNoT7w8s2bDGaiilQDd6Z4cHRhzMg/\nvmPg2nmg6R5RFzgO0qAg3cCLMpr1rDv6G+uNn+cmfbpzM/7XjwTQ+vsYo4cx\nrMt71p/YODZaDVpRCzecOAtEu8Y7pdqwcY6im+tPUng2LGUdAmylosICXkM+\npabqMrdF7HAE+alc2OPznikLFnEsihL2m1HIbvZxmhO6to4z++ax1X+/0DTG\nvbj8GJ50FbDFQic0RPc+l4RI9ppMRpiPiy3UblcH3YifndRWfN0/ow26kzjf\nGYdL/RsGycv24KfanubMJ5m74/Fj26qMnWrqnLw/Z7Fx1f2/Y9MuAGfDsdtc\nWp2kiTlADeb9qtKyNy+WTOZhkM9kDMX0XDj61KkKHzyrMyFjyrVroAFK3dN5\nkUdtI4W1w0xz1y3I6tg5K3auDt6zSM4AeEc6Tia3mudzqU0tg61hc/r6vB22\nfW4xP+nRfzamcdu2sM9COLHY0Ey57gjAtEjmv3oO0f7mpAHn9k/caT7vKwqT\nv71Q\r\n=uFUW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"08c734c10ebecdcec22cb27e38dd9d3941fbe847","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c21b5c367.0","@material/base":"7.0.0-canary.c21b5c367.0","@material/shape":"7.0.0-canary.c21b5c367.0","@material/theme":"7.0.0-canary.c21b5c367.0","@material/floating-label":"7.0.0-canary.c21b5c367.0","@material/feature-targeting":"7.0.0-canary.c21b5c367.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.c21b5c367.0_1592597500460_0.44982913497038957","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/notched-outline","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.bfdd7fd39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"930fa128f88f47b0b6913b451202c6700908fa01","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":34,"integrity":"sha512-GRRW36phxB5KGiEgjyJkKhDz3xIoj2bCZSjLLplH3poQRU8lNikRvcAzxRoZ3q83VJNHW9hOmXwUHToIggjomw==","signatures":[{"sig":"MEYCIQCgzaZ6rX9XGQByY+9b9epxr0RtopE7cKIeF5EnTtM5nQIhAMnpd8bkCAD7ORrao5S+vgAW486QroxNng0WJOO9anBt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R4eCRA9TVsSAnZWagAAtc4P+gLzSUJesvgkZwAOieX4\nsEAe4PgXObAQzX52d9VClF9BTHCK1+OC5XvJZbBM5qL/ejTHhUtjBZuRCoN0\niTAVDsHw/UwG6ExQT5FxHhMYUwELBVBakuPilifhvcQbQZ8w1jITO93OMnp9\ntN1ka0fAdY/W01EHfhvyOppxK6cGMpJwVxL46yBY2aTJOB9oHnGyoLAY4LT+\n2yZS6BZBsZZy9CaW1YgHCZ7YUB1zmsHAqOA4PKDpTm0K56kmRa3keZTGQ9s9\n8iOBXBeiyRXJx5w1+FurSXvlqy9sxdIEpkr7zgPw0sIMYK6e8C8ljUWjUK+W\nW842ZHrrAyUDB3T8bP1QEo3YkmU3EWiF3acy3l/ra8p4sJldNXPljEIH32IQ\n94qyzr4Vjf9TdzI58AtmYxrw1oGeQLY/6wibX3mP1fygl/6L4g+GGVEmQa1O\nI6OmvNyJ8TFhfXkdvOpP0HxzGwli9mQRIigubA+HOnJJLpwJLjpcjKfiHqRV\nWA4depNiWZOEwpCfzChC1VTnaW76NPeTFnRDr7FFZNkXYv7XVejMke6SznEk\nwuR2B4ZFbl8qfCyN7BdQ3Feeys9dkbBogev45Uve6oWsTkwQvIVsA48HmuUB\nHTze3bINWQPvOCI5e4ntaIX0QAMjNWDKpiqi/J0UBv7k48TUtydN1+JORhkS\ndG4P\r\n=Ey4o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b9b865bcb7a8ad91c21f4b1cc433f6a49dc627a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bfdd7fd39.0","@material/base":"7.0.0-canary.bfdd7fd39.0","@material/shape":"7.0.0-canary.bfdd7fd39.0","@material/theme":"7.0.0-canary.bfdd7fd39.0","@material/floating-label":"7.0.0-canary.bfdd7fd39.0","@material/feature-targeting":"7.0.0-canary.bfdd7fd39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.bfdd7fd39.0_1592598046272_0.3737784330140579","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/notched-outline","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.10b505785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f486cb34576e3d1f377f236f46a9f4f1865fde81","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.10b505785.0.tgz","fileCount":34,"integrity":"sha512-9NFLtCx3oK7ZjDZEqwZNQfJQmxO3szPxKvv0wHGWT7FXOpHqJQPAVn8prfNlJcpSIXsRQPKs8TITxPeeoIWOqQ==","signatures":[{"sig":"MEYCIQCN+pGnpFWAjE8+qQeYsC2eBIzHiBV5q6TPxuUWvjWPKQIhAMlvC9hZrcZNy2m1pFvnzSKUiUdw/1w7Xbd27UzV8Ju/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R5zCRA9TVsSAnZWagAAHjAQAIEwxtZZcNL89E5tPUGQ\nPmsmaQJJ5+Jg7XdZwF4Xg+1hFlQfqj1OJaLIYgfY72hNfoJFlwTwMIlZDti2\n8+sHXbpY+BQ62wWBOBdUG5W3kLqxs2NCOaLE4XyTU1SD/geGACxERF3yHdNv\nlNfEX2cz236fwPVRAntclLBfRXMnDEa1ZEzCT/j8iyqT4azrRa/kFTrupqQf\nJPRSJpsfae5Bvvg/4tKiGTfyTTrhiiyaaFZh/s7Y43mZxz4OeRfml0W8exQ3\n5JEx0flPVgPL29wGBTmofFGkuU8wmMFtVftq5GdkQFy0RNGmlS1dU/hGkYn5\npPMUGAtfi9ETKDJ5biwTZHYh2blwc2ZZnsJFTd2r9gig8cRgx/c3m4RbmFyX\ngqWwqs+fiauzfO9pSz8OZqyjZMvn5ayN2KXk+tkglpLuzNDzBUnIQhFDz4DJ\neQgHhVlaipIoZmadX00vjMeylRVnP40onmW2f2Z0pjPqE9KajtmYVe9kMqfP\nSsRdGNua+gJef+nehEcbW5Ncfd/DZ6wfw61qnxeRdQ0lOC/YdONgQnX/uhGY\nQXo0Tqyj4KSs47YXhI9WXEwLaEGoC+suIUMSP4YNg2+hRqyao3fzh6s33TQ7\nrP/4uOYH3cnf2lJu2U89jpy/OANy6XsSsIbhK4NKptadCiFdsRAvXPNw7Q1/\nt0oi\r\n=yq7u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ed5923edcb43bfccd9d40cf56cd605eeaab00d1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.10b505785.0","@material/base":"7.0.0-canary.10b505785.0","@material/shape":"7.0.0-canary.10b505785.0","@material/theme":"7.0.0-canary.10b505785.0","@material/floating-label":"7.0.0-canary.10b505785.0","@material/feature-targeting":"7.0.0-canary.10b505785.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.10b505785.0_1592598131453_0.4196670275499428","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/notched-outline","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.6483d3f44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66251aa9b9d7e5ac63b48988a495ee899e8ca862","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.6483d3f44.0.tgz","fileCount":34,"integrity":"sha512-rn8Hn4MUJroi5I/Eg/GcEKdLj01oCxeBFSACXWuTwmzOn/GUYmukzze9gNn0jWHNze8kqhPNReD6Uvs9gTpmig==","signatures":[{"sig":"MEUCIQDYboMF8lc4PrBedfbTso1n1+9LAYhwO0EDGLOlKzNcLAIgX1aZbUuA3hKkCIyFoMj5lgtIWD9M4dcuZBsM6FtBTjI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SI/CRA9TVsSAnZWagAAbTYP/jzKQVV4F/sVIuHDfbmo\nN94nOlvIycWpWEzjdjzJVduzzfFD/QJhV8W4HslHw6JSCyZTKR6xt6PwZnyG\nh9Uk/kxt5e3h8FbIQ+whBdbmvzQDRGis16n6MOMabwLc33bWE4MRMZzIVUKt\n2tHb1kcqXGUKRYv7YaONk6r/IzK6nd2JGVdvIcprEPfijhIUVR+IgWnUD8dt\n49x8MJWsjyNWspg1kqq6QHteqk7yaEueNj+AwrC2mATW1HUGCZmkwI2OO9oQ\njr3LCvM1wMEVnpWACwjdiU1K1QZrLTiZpu/EVz3E+gCiExuBQ9OH4UdHOCJq\n+S96Ewbm0JTcSKWs8p+3RYkawlEfhe2bBRiwNZ0AoaB203czRn3YokP3lxlW\n/cQVRufjRgqH9Q9T6esgvX2fgnwnkv7zWa2QOhGbYwsl10xqDigit56ab2Gk\nO4yGcoSzGmbyHvJSKBWLLfH/KtiWbs3dMUiTP7ZVYcDeFwPPeotD1BgQIJc9\nzeiNyDCeWqTyHbE3E1NbCRiXQgpLQsEhcW2Y6UK5tFzbarnC2NlphwxmKD/C\nwNMUpnLCMWgsHMKbIRw+a2sbE3fGJgwdXO3SM//btp98n+DMD0i4f8iCQhEn\nEJ8utVXS3eSREwMuWeCeoEeQnUmS14XH/VysCnmgFvmHULiO0XquGnFmqn8Z\n5u8F\r\n=0R/W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5c831da018408423d31c9c4813c507ca591a010f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.6483d3f44.0","@material/base":"7.0.0-canary.6483d3f44.0","@material/shape":"7.0.0-canary.6483d3f44.0","@material/theme":"7.0.0-canary.6483d3f44.0","@material/floating-label":"7.0.0-canary.6483d3f44.0","@material/feature-targeting":"7.0.0-canary.6483d3f44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.6483d3f44.0_1592599103267_0.03569315754002811","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/notched-outline","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.30a74e921.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1855415e820c85442e9f47cfba0d33f1702839f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.30a74e921.0.tgz","fileCount":34,"integrity":"sha512-8KxQdVYDoeIArbyD72ZkDNnhhhLall5bSDEwln0vN3AdNG9ECyP5MWJabO02zE/SpplKPftN1sHB0KnWCDl22w==","signatures":[{"sig":"MEUCIFL2P2zlhJIJB+JerfRVAjXukDCToJyMw3s3uQmlOHfpAiEA72mnXxwCB6HUS8I4xU3oFcAe7Sb672xhGYxCRgeERVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SLHCRA9TVsSAnZWagAAA3oP/3BH3BognKrSC8nwNXRm\nsTEKdvasFDrrHlKkDukMBy0EYo5lh9Ozh5tPFZP3+Xv7/DPcp1IWnXfIjC77\nOpYqRXr4kTgRFyiwliqSSz/hXkxoruP6pMSVW6k2wgfSf59zCk5L2DSF3RIM\nFqSOzBPpQYal4WTp9xlwZ8lR5Ja+aQCZo2BZdVtJkT78i1FAsbS9Ti49DfhX\nCMehn3TH79nzjpEib8RRRCZzF9zV5QeHWexQ31tBICHTTod/7RZDRDS8ikjN\nYeyDaC7wpDSC7GUX73YQRpbLof4Bc8Lf0XZWrV/s0tkjzzf0UjBwPAH/cYR2\nwUkk/TollgA6xaSDu1xViHGgFpSx/n0xIFLDWoGWQT+cT4OMRpvxUzSvGhqs\n2rXuMpAbMU/nikRDCyVqYIw2XYb74j6RjEMGgqtJp1qpMfzvC1x3ayO9/LLN\n3N2HY+A01GMhN3Dh1+uxh+wBndVsFsvgUcOf39AotHs6uSYRM2c1f3U+MYwI\n9DiJXZthQQn1grejGQmJeOtyu194aalddyPqebrXYej+uLW8VE0ZZ9yGyHmi\n1aB7I3AEJUEng3EvnJ3NehpWi4LAvSnS5TIBmzLJX9kaUrGgA+R6GY5RtHAa\nz88FDN2xHKgj9T1vab4J3LmW3pds1DZcEE4wXTKgSj36DdQwzvQOdwSEhSBr\nkg4e\r\n=W8aX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5f983e004147b05efcae5aac51dc16aea4a18a8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.30a74e921.0","@material/base":"7.0.0-canary.30a74e921.0","@material/shape":"7.0.0-canary.30a74e921.0","@material/theme":"7.0.0-canary.30a74e921.0","@material/floating-label":"7.0.0-canary.30a74e921.0","@material/feature-targeting":"7.0.0-canary.30a74e921.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.30a74e921.0_1592599238711_0.365283970713256","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/notched-outline","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.c20727498.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7672244171e4cefd7bd05d2cc510f788f74b7960","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.c20727498.0.tgz","fileCount":34,"integrity":"sha512-iIEy1g9qKHBTOIdzcniy7+kz0pPF/3KO1rzm7+LQUBYmbUCZzxEinOymlNCJoTTt5UMLgn8TEhijMQQ0Edyilg==","signatures":[{"sig":"MEUCICYkjl0Dg81Gzl8KpQo9cgjAXXwebpIZRCF/2dEJAy+iAiEAhJtQAOfkddLGI/8655xBsc21BmBlVcDXcUvOEyiNcn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SN0CRA9TVsSAnZWagAAXvcP/0ERJnCD55texyHz6Gi4\n/xVpX27IY72RczsoMojH+jl5/R2xBZ8cjwQwta9Vzs0sHEYqDyjNE4H0Jd1y\nTaidwav6ipvJ2taVT2eRXo+T8KSnQK1nq7gQ+nGNZwXRVvhHAPqjDckrv23K\nI2lMeWflpiDwK6WiVVV4zVlSaNVpo5yOOOfd3HsjC8iU5tYYIbauhJeMxcLT\nr0UJGBQ6saGx3V1isMQ2jskFRNSaRiEictLfouSEr99vUYFXFNByD7ZJUznr\nL53Ghop4ZwAn8Fa/P1kDacFVmraZtyNYbXa89w4UWp/HxuQRmyICVlHkNDNC\nkMxQH1UiBq63AxyXa84CfhSJjVsZMheBPA8UyKUmBcOiTv7uZ4i6PpSgf1Em\n8EAVRHAc8bm2LGLRVZt4r+sI8Ap7qwlgwzH00L1w60rkWVVAQiMIcJzV/Ozq\no+nXFX0PdYZ0DaSKVAuEKPNQe1KyT/dPTwR3R9Qc+V/iViDYMANGj407N1HL\nO/uzquuqTICMWaXjyW5qrr8rDmO+5KfTCh4X3SPkFch5oF91hreSoEYWoNap\n+UR7yj7rggMi11l8hZkygwD9GfdM3x3UaY2IJPrrI0RyjEWas6LiJRZx6Uil\ntWhh1x4eCbsrMUh7SSZ3Zpc4DjRDtOF1G7Wh0lHcA8l1Ki4ntpbzcK3PXzs2\nKuwH\r\n=wG79\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f9ac75746f7899d34903c19ff758bcadb9ce2d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c20727498.0","@material/base":"7.0.0-canary.c20727498.0","@material/shape":"7.0.0-canary.c20727498.0","@material/theme":"7.0.0-canary.c20727498.0","@material/floating-label":"7.0.0-canary.c20727498.0","@material/feature-targeting":"7.0.0-canary.c20727498.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.c20727498.0_1592599412058_0.18511018067894103","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/notched-outline","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.4e360ae94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a4c19d21a692702cec9059c330cc8693899db4e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.4e360ae94.0.tgz","fileCount":34,"integrity":"sha512-yvEqNQpAosQJgCvvZUMXVaLkRpsBl4eGUQ6ohQmLKop+NnZNQc2FEowJygLk9Vlo4sTJ4JP1ku2OuEQwGiEx6g==","signatures":[{"sig":"MEUCICTnky/9ntmDCkrcO/Z2+5iGNJ7hFb5bsdJgvJ+nbGL6AiEAxeLl1dq3xIsTABF7bTbryHZnHYNGd1a0GeGONRxo+JE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SddCRA9TVsSAnZWagAApQ4P/iFD5MFblkgtBElzYkRD\neCKOASbJozz4f1iW9PHw2LsZPF8Su/9+LeIjW9vUzi5jLvHPLYEnXADf3Nje\nFzHnGKpdwf9NfLqACkzwhjObyrRKeGm2NvBSAL75MTFN74ddaHDkibytOHS1\n/e0pPQTlUNAf/H/0xIBVNSrDscDDRj8u4vK9PhZBRUr2R8PO2G246qw806am\n5M3rHc3XfB6/8zIlKBgNU4UjAXfbXke3g0DrOgAAsIESui1UL58Mbh3fOo1V\nW0IA6E0p3lodN+dezFaSlZnxPHlkao+gjWwLrEjxyYgWUhSdsryGD9GpLbIF\nsYZpzSEgGzPg+///+n0JIFVb9hPYKMaglf/H7yvBGbCYNYiEfHvxKg4loDAn\n0rCeEinw9H+/xb1gG7I4uVVCeRt7JsGyLHwG7D0SIbUvZtt9S8oZLrSIpINW\nKUPDaen8xRJqpGSITyXSHyI1b0158J8ASiJU6dtTDibw22fQsBBtZl/LHcu5\nxVHJGIlHJESZSzaWeGLQUgGuTzuIJoEuXicSH50VDs6rrHqNzKhZmKnTLLpF\nr3qKjsOX8qVQn0rq9dPnn4aTauEMbs4aXORM1C516WIJNwJge4WywNxO8Smv\nP//ik6uYdhGmAyJ/W58/wnnRCtxdUeavrDz3gEgNiVX5U+E4tR2AQW6arWDN\nGQy6\r\n=S+qn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7bbb3adc3aa84c4095304613145fa53862e147a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4e360ae94.0","@material/base":"7.0.0-canary.4e360ae94.0","@material/shape":"7.0.0-canary.4e360ae94.0","@material/theme":"7.0.0-canary.4e360ae94.0","@material/floating-label":"7.0.0-canary.4e360ae94.0","@material/feature-targeting":"7.0.0-canary.4e360ae94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.4e360ae94.0_1592600413127_0.27667130491128433","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/notched-outline","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.8550fa53b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24682f33e925ab8d69e96ec2f93207d412bcfe4d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.8550fa53b.0.tgz","fileCount":34,"integrity":"sha512-6QhBrlUij+DiC7hacLVVsnzS/t0MDgBaCpZefNTkwjdfx9/3w5LP8FJd3rvz8B+Zs742JchN/pAs6t1JyBfREQ==","signatures":[{"sig":"MEUCIQC2Zvv8VQfeepYFab4W4/A0Mb1vAyN32EIkZ/qMyfAdgAIgRbdiwkn1rOlxwt4fnqUHtFHKUB8cjpzTySYJxBuKLbM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SfuCRA9TVsSAnZWagAAhWMP/Ap/E8fHHS0csdHIocbW\ny9ZZFLUNZFm6MPLF14yIT4g81qDc4W7xLZXiDS/cpv3JHVTEziDYKZlwortp\nUFyp6XJ/tNHrJXnYZNFM2SNpD1cT9cfS6KE2KddK0rG16xPFhUD5YqtO57sX\niwD1flsKSM+awPrnF7hnSgJyYFW8AkLhpe3LHVBEcZa8oaNg0DzWV5KwqD6r\nHrxL8cjw2hpDEE7XZknr/fqV/zmJ/fINNflJY5mTOVuhwdMCGuunEZFTptrW\nwe4a7CYVZGRd9U3YAFOkdGREtSlqQREmFgpxddEK2SzgXTGauEvWPDDKeXiO\nK0CVXGpXAcLRva/iVXK8WHvIGiyLdsv7P4XsKFWXdGKw7L/jCi0nYhw8ke0h\nMePi2fSIJFXOao5OQztGRjAJ0R74ilWf4/WueN6e20+JSICEh+fGSbmOJ3mG\nw9m4RhjHmHmP9r4EFhkPTnUkohxBIBLKQVadsOqNUY3wI9LJGF+/vW/izR1Z\nTx7k8w+EcBsxXPFQjHgCADUCMKMUzI4WYrGwsTZbEkQ03cHNzMiKiW1LGTTd\n9fHvmlwCHVp196mXhIlKK3xc7zZtVb9mzoPPWX93Ro36ldrKaow1QkiXUtAY\nW160vM9jJ2GD7kbOjR5FA4pPNOPIW7jrxGrx1W1eW0nO1x9PXp8FIJdM2Mpj\n+DpG\r\n=kmgW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9d8529cbd579dccb2470a1f19fac57883cb2a5ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8550fa53b.0","@material/base":"7.0.0-canary.8550fa53b.0","@material/shape":"7.0.0-canary.8550fa53b.0","@material/theme":"7.0.0-canary.8550fa53b.0","@material/floating-label":"7.0.0-canary.8550fa53b.0","@material/feature-targeting":"7.0.0-canary.8550fa53b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.8550fa53b.0_1592600558503_0.1981358027801825","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/notched-outline","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.93ade142e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b75092d1c4158669c960ac14b810ade3c659f1a1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.93ade142e.0.tgz","fileCount":34,"integrity":"sha512-EHj1pN1OSwVXQZitVHiWl8JWFrL8IgaHNMu6v5qG/+CUFwRVo3g2bgMcLPlzF+RCPmjO7Ic6oWRiBp7XHJ41ng==","signatures":[{"sig":"MEYCIQDwUEM3f0U1KSy7b4Iu1EBTW3If0X+R2Vx0Ad4fIeh2dAIhAIPhYp4tT6++aDb2s3O7bBYWEOUVTGhaUzqzWi4uoWJD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Sg1CRA9TVsSAnZWagAA7HgP/1uWzyfxoQN0flSIp1jI\nL5d33iic1XY7IlBvGI8J95/2y1O0TP67tyroTCWmbfPu42mb609agCe8PI/x\nsycAdFeM+1oeH4wJ+3dAEffdeEyBI+282srX5dfQMx6IluuZEhmMeJjquQsW\nk/c6tUDAEPTPS2DkZZg3jp8QgEQQRz+UQ8ycXm6ADmaloshBnISiz/Dw/Bv/\nj9IUQB1zBp0n2exENxQhGITUhitaQgXBHtGyFUhMKDoZbtPFkPC1d2qYHxWY\ndAUNvMDwvajTlwT8aogdoSrp6KBfFJNICGaGEcDiJ3UGlZ5w9kHhjRcvmCVn\npOTJe3+8WM543Tk7gCg8qjbAIzUzgqJbAbdfeVYSsd/UHUapllJClxo3ls2Y\nR4OTAkhwQ6X1t/bl28d83mWPTY30Iy3pciJSWzOC1vtXp9bVpqEwAiKodJ3D\n/PsuWwMTxctZa9LiF/RhIuVTUipSK7IV8YH7CwUivbE17t3BqkVQyNS7q1K6\nBvtFwtH//t8NUkfbImErZ7sm4pXEzy8NMozQj9/5nV4Y+X+c1hw2BaEWk8hY\nWCNfBIi6BQDy2heH2fd5J2rb7AEDfuEYqzbCpi1dtv7N9Zn4T3jjw1AU424Z\nqstdOXt1+NN8zxthZ/9BtYYNuhjqiO0nwuaNJ4Znu+mYCXpmbaAfW0najFwu\nQCxQ\r\n=milI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fe392b7ba8c7033e5614eb91a20bdf2e6d7d7936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.93ade142e.0","@material/base":"7.0.0-canary.93ade142e.0","@material/shape":"7.0.0-canary.93ade142e.0","@material/theme":"7.0.0-canary.93ade142e.0","@material/floating-label":"7.0.0-canary.93ade142e.0","@material/feature-targeting":"7.0.0-canary.93ade142e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.93ade142e.0_1592600629007_0.43119158625417864","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/notched-outline","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.a0032f5bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef754c2685d9da91bd56d36b96d636028688cc37","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.a0032f5bb.0.tgz","fileCount":34,"integrity":"sha512-xzFhBOE0YCxsYggkKIQkMzo9OYdOkp0SNVQaVImAXyClIY0e7URhLH5SWgfs4S6Vop8rPoJvV76mqwEjik94vQ==","signatures":[{"sig":"MEUCIB1GJ8RK1DiwnGC/LNR35NQTBhhRgtnpR+ErdrOMU6MKAiEArGUrRelZaXK1tmibYw5eHUeQCAcWvDlJcizNftwWkBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S4cCRA9TVsSAnZWagAA5BIP/2VekmiyVOPR5MJ6Zo02\nbf9xTcoKx52g/Sxk7c01e9cnhgHkkdGJmiB0Q3+0pfqPtlOuUlNbsSDB5AC5\n8CDqUGN0pxXAQtrgPms15VOaATR1aQFxfc0BX94mRoePCbVOsv7fjWg2Lqbf\nKgQQJ6e+UAFWpGO0P0AmY+5mFXJuTWYDIcKHhY4Ckf9j2JgiTaYgjUNDtxKg\nPpt6j+t2OMUJ60ztt05Z2METYBF9NXG3meVdEVbCpIg6E+XD9yEshrxIMjN7\nYzBE1sX6pFFNO+PWw1ZNsLA9qtJN+HhrtCxszT0tnsx6UGJi9e7gPAECh7NO\nTeKI7BXa8dRMnHfy2PicjDgB9m6w4kCQAJIdtVLYd1D4ixRP2Lsu334mkgeI\niaZpUKhcAc6BAmU9hFo0z6tvn3D609YDFU/r0dSUF1DMXIgPG7Bm24gwQGwe\nQZONQyFhp+2nVRRb5gZUKICOkcriEOh72oqzR0g/RPbU8Qr5UhVbHlaJaDry\njg1KFYxSdoAb+l2Qn8FfNb/pdtHDiCO+lsPz45qsBZzGaYbdOO8/y+MLAdZY\n9nusMMWS0/hGJixYpjxEb64Q70f876gEN69nfDQZKOaWoacBsdbJuOtCseGG\nXad6RZIc9CnGy3dC6qudP77K4zRUtJnW9Vj3A2plONMUbvr2aiWA5suHKMsv\nM0ZF\r\n=fYO4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8c0789d8c409d91f7f4e13675ac80e0f355bac02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a0032f5bb.0","@material/base":"7.0.0-canary.a0032f5bb.0","@material/shape":"7.0.0-canary.a0032f5bb.0","@material/theme":"7.0.0-canary.a0032f5bb.0","@material/floating-label":"7.0.0-canary.a0032f5bb.0","@material/feature-targeting":"7.0.0-canary.a0032f5bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.a0032f5bb.0_1592602140172_0.8820818401666886","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/notched-outline","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.3f342e721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bbb0b82e1c57584cf1461e6d999d0eb24805c89","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.3f342e721.0.tgz","fileCount":34,"integrity":"sha512-nj2hAv7Wo6LCkTIQY1fT/URRnLN2mStckIsMfxEZ6+9tGH+xxN/GCn2LUMwP8GR8C898EokGvJxpnxt2WcWNDA==","signatures":[{"sig":"MEYCIQDmr1FiHGxl9iYnyfXnhH7KYBOCAAfpaI87yJfSZ0KkewIhAK7Ird8B6FBp/0xipSmFGaxk50e5cq/TFuKTajl8NWLb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6bCRA9TVsSAnZWagAAUfgP/3UHducLcj4BI3WNXgxn\nraos2mYhR8R0y2yWcwI+Kqlc88ci/fXheT9jGY9Qn4k/0fDZsrAiFIVyqtrK\nsX+LhismBemvk3VvgXRcR7HTt3S8821PJdVvEG6FNSpon8RLV/hTLjnRpi+D\nyCTiFbBgw+QF/3Bd556bP0eMqjTqihBblXiZP0J7oqQ3WcCKnPuKUtwdm2l8\n6r7ULimbVf+fV2xEz1dytImt19IOEUgaEz8S21o1Vt6O2m+1SQTXmfvm+k4h\n2jSvkpmsv+3FeK8jSZfO5tbHqoVFsTmgGke6ey/qdURKbBM7S3c6oa18kZ+e\nVtUQL8tZa2iHykfGN++P3aIz+gFeZhPQgY+DZI1cdj///6JRAEH/5OKanr4G\nB/wGhwFgxZZvHs9TJLbyftDBz4tb0hnp+iwCPpaSLRKC4qMbFtuWZsP7muUx\n6oLpLkX9SFe2hXrDcKpfBy7kIDxJK/GOX5TsxdHs31/wY6IdqUrqcu7cJp9H\nukSF7k7JtriQ4OF9/CKp/LTKjBacMXZLJy15kAYIxLYbe5IfhEFTxDOMRtRg\n8Dh7nKmr5LZbT7MKeAyzhUBDogL+J1J7tpHOpugkUfXg7I84aceDtm3VAJja\ngjTokKeqefhurWzMpH9L27Z1TrTIi5V+RimUisW/ZlQia4jtI7sBWQWNFp+9\nHIpy\r\n=c8q+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e972042c8ae08ecc8469492707d55d647e3495e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3f342e721.0","@material/base":"7.0.0-canary.3f342e721.0","@material/shape":"7.0.0-canary.3f342e721.0","@material/theme":"7.0.0-canary.3f342e721.0","@material/floating-label":"7.0.0-canary.3f342e721.0","@material/feature-targeting":"7.0.0-canary.3f342e721.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.3f342e721.0_1592602266465_0.1682866899040576","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/notched-outline","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.ff89457cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d52b18b1fb2b099b778ecede33f592ccdc06363","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.ff89457cc.0.tgz","fileCount":34,"integrity":"sha512-/7cAkdcn2sZ6Zhqq6pdVN++i2W23TN7FbYIqj7+TP2R0zDpNe7h48Zi3nxr6Irygi3ozmBD1cZCifJkTyefYKA==","signatures":[{"sig":"MEUCIQDtjH8s3GZGGgxPdR8o5xbGjVkUBfCO9GEdIMar9NIVmAIgR8u4w6HP785xeHN+Kv5VZIy6j9Y98Ims6j8rVhX8k28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S7ZCRA9TVsSAnZWagAAphcQAIeuo10zKcqPRvXfd4L3\nbvhaFZyTE4TO+pModjJPmHqpytxZecyM5YbhVOLaZTd/9YN4fdGO8Sva2Zvr\nL9pYVxJ67+kMxiXhjAeI0zrzVMefPdNaG36VvQ6IENITmlNsWE4Xj/NWOVAs\nTzyS3PgXLa3XUb6tR8PHD2LI2UIXowqGB9wgtMYDjuZBtG5TRwhoSjZg8Cz8\nRkVhWBE9Sa8SvPriWHgFOZrdCK/YaJF1ShPwLDsGwmfXIwhgoxzrCEPCgtCG\nerUuDmRWD22OLjl6qORtsYKa0ikaqS4Jcr5yZikhCO8tM//dfa5/E7zw0IYH\nI8kMQ1aIpGvfnN/Dr63yNjlMHdv9myyS3fjbGMziJsfSQtGx/dOVepmh/5Sm\n/3g8oa8vifaHXeatCyfN0Omv1LzobDhF3gcfrOBFYE8UTG0DomdRqGK8pTmN\nU83aN/QaNjsStkUbyM99LJbbBGBGe35UywyQtDc9rw/ZoDtAeJ4C2e/Yue5T\nIfrB3CYQ6ItWku4kFOewBCBsp4+QzDhvs8JDhdWLzHZXRDPSJLBm0bzjfsyB\nH5VDkq9a4IYLLOYT0K+E1zXZHIp2gWxMgrmAmEl5qiPMYPpf8afCpzZd0KL8\nGMyy37Jq1POFQyEMGX4Ei+2TTr1xFvyYdukAh/ax1SxgDu3IBAwBjg3mOFLQ\nbfXP\r\n=QXEn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1a3ec64383e8afdd818b5edfb74f32f6acebd044","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ff89457cc.0","@material/base":"7.0.0-canary.ff89457cc.0","@material/shape":"7.0.0-canary.ff89457cc.0","@material/theme":"7.0.0-canary.ff89457cc.0","@material/floating-label":"7.0.0-canary.ff89457cc.0","@material/feature-targeting":"7.0.0-canary.ff89457cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.ff89457cc.0_1592602328630_0.9672871332044068","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/notched-outline","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.4a1855cf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc04fa4a9066c6d17edcb9b61ed793bdddf368cf","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.4a1855cf8.0.tgz","fileCount":34,"integrity":"sha512-dpvLrZEnoJO8PIEdcv1wMh3xHX+a1dBq22hILXsU+3bspXrtZjAq3Y23J874Baq15OgNoo+Yy9N7W1QYxO2LvA==","signatures":[{"sig":"MEUCIQCWnx3fWr6Afilpt5bJod/Ot9r8yc2kV5CeoGzZ0LyGngIgNrJ2iWH1jNNZ1SVvWAznH9U3DkZp4AKoXUkc2ntsGYY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S96CRA9TVsSAnZWagAAZ3AP/3yq3fMU2Nz9D8c8Yv89\n/urYaxlQdA6HmFx2N/cw+sdd8Tzdshabs49rsQuI1azoP0Yh4roMeLb8xFeu\nAcS0EzteP+pzPSkN0YHMWEM0dWOujvAIvE6/pY34/kR66+CRnsycNA7REPjv\n+3FK9mIYO7C/SKaKzQEJwVn4gReKD4rfG0cbFt6+S3wiQLtzOKPcJzr6ub4F\nE4pL2KGgPXq+3SjgpQrhDXMvsHfrx/8+1lFJ9Uj373JvcAPAAIc/VDmeRCro\nn8Th3lbZ/P8MDLWt4NsVRvr9lHdou9pl8OXtTokEmBRukWgJegZ7nsTa4fRS\nbAx/Kdge3gVNrtlH7On6jCXD+NoGP/KGueG2flBruvAOhsBa+PQ7zaxDN5F8\ntyyGbHixPoB3Kja/ESvCZ2K+qL/0GqLPrt2aXJu6JPvD3pAgw26mfUQ7Fj8m\ner6pUGvM0aH7Caql7x+ZqNpcKOfFTnRjcQzZ327ttg823s+xoGx9VWLDhYP7\nu83kPN30rcW0auZqiTZaumJM3Hx3EsD8+jyIHEwFf+qGHzdbeC3Kicb+6Cf6\njRiwKgSjMpb4LYltmA4UFWzj9GfaSmeIubxp2PPTvHfUN80v+n/njvl7F0uV\ni7jYHo/s0ALUUjNLhEvSaeBJOpsqZyIGEFSsA72D4eX+S5pJsMmioI/xJgRv\nC6TQ\r\n=r2VW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"eaeac5e820cdb30fcedba281da8c2c4a846f0e73","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4a1855cf8.0","@material/base":"7.0.0-canary.4a1855cf8.0","@material/shape":"7.0.0-canary.4a1855cf8.0","@material/theme":"7.0.0-canary.4a1855cf8.0","@material/floating-label":"7.0.0-canary.4a1855cf8.0","@material/feature-targeting":"7.0.0-canary.4a1855cf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.4a1855cf8.0_1592602489622_0.3732100774646938","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/notched-outline","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.8602f1b4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55998e1d566759ed3d225800fbe2bbfae0f1eb5c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.8602f1b4d.0.tgz","fileCount":34,"integrity":"sha512-6WQtlMNsUm6MxJSe8VoyXHu6zpcmzEqmGu9KNFXl+KVJD4RP0nKA2HaMSCuwOtqS3EqOy7MASn52FOEPaX2fEQ==","signatures":[{"sig":"MEUCIQDoHVUed5ClEpO3Fy8rPX1fKoxo9R+8Vy7KasRppV9x+QIgQrz7pPUeYI330kXMt2ev5A80dAApo0lqajiVKGeKlmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OlQCRA9TVsSAnZWagAAWOQP/2jtMq7fx3MKedPXtFai\nSuDRJ6W/pvqUviyAeYaHGTckd60cFTWJD0RH92Z67UTQRxCrSlgf/A7k21yu\nnaPMXrLpI5CotZy1aWCUYJCerONv3XMcFkbPKHFk1MeyzC4kLyiNVyeEJwuh\nFcrLmweyn3RQxJ1qB3zsZQScphTBDTaMiqqMS+CvGH1fBpnRJq4l+PbVkzZc\n6jfKdjMOarh96V8YXLS2yCPqX90udVy6HilX0XLD/m1FzFNI4jE7qZWLuLqf\nMoKaFxR5EXGwTpD6mb5N7cWWHNGMVEjt9s08xEqYm2nO/c320PnUNc92zAb4\n0tCoI/gwuaguc4vAlby0rKN++aa+RN44RdsaSs4m0RGngVJs0p+FUmK9sf9M\nRiYbzWieW4dDCcWWNRoynESWUQDUdv4iZ7uzdn8+2tYjDELfJ88J523c+8I/\n4DQ9lbUmRDhoipPWAe4k4mqT4JsZysvSEn0u/YBLueDmzlRE/lipeT6ncXKW\nN9p/Zj6D/1EEgzGcAl9ffFYscTlWA99x/gPr8xSEBBLwOMOfQL9lQcmw/Cq1\nFzt0dzriYUUvhmX7rSnlGb8JznmgYQhb2pZ8UStSapf7/93g+NJJ4khYxbOA\nRqAFQzeV2tEPzulZJIkDIY3uwTL6O9EV4WBup05GnQlAwNTVMuwduCf5KAb3\nxqpp\r\n=gMEn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"07f6372c5a2f6f8add971db62aba74793d912f70","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8602f1b4d.0","@material/base":"7.0.0-canary.8602f1b4d.0","@material/shape":"7.0.0-canary.8602f1b4d.0","@material/theme":"7.0.0-canary.8602f1b4d.0","@material/floating-label":"7.0.0-canary.8602f1b4d.0","@material/feature-targeting":"7.0.0-canary.8602f1b4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.8602f1b4d.0_1592846671804_0.20232210114935745","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/notched-outline","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.69f9f0982.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f982b9577512eb8c95e7b7f17d9db57b23d90cb6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.69f9f0982.0.tgz","fileCount":34,"integrity":"sha512-rmU4MUMVw5G0w+/zYXWwg+s/bs/OFkVwZoCr5iLbjinadh6qvmCj5PQwsD4LYU4nrViNje8F0cl4iK6rjrg+nQ==","signatures":[{"sig":"MEYCIQC9aIdrtH40HGwsL6BnIZV+uiaaQ+UV5Z0voynG6IuIXgIhAO3bet3szx7QsgEMQSqd28GTsS96dzFSzkeFMR8XcuU0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R9tCRA9TVsSAnZWagAAsicQAJTe5iyGtQKo7KOrHtiX\nHqHPXUTJv9/5o8M8Xasimx0dqFwlpiufG9il5rWDMSjOtHqZYQ+/cSHC1dDs\ngFtUxH0vkjR7pMBVI1bca6RHROKwFsubvnvnXFx5nFtsQND4Eqv9Oe+AggeC\ngRog+eQ1NTLQFraQLaG3Nej1o0x8mtBn0sfQ99T+b2AtTjXqkwG+3Wf/3+U/\nneHBC37SOA66WTNWq4OAhubh3f681b79wCnk9IC3L1yqi/PjCtcks5AKkoEm\nKLuAtPdQw6O9Rj/5yhaRARmxx/63KmIeUNP+jWM08Z4JcsUoCBo1v7TIFMw2\nB3gHM/fhub09dgDZhDPwEus/yvXwoad+c1ZdweWzSbJUWGSXOVj4z+OT5CXp\nxGAk6J9atkdniyweIffSQg1xzHgMDm+EXa0eIBI2j4xZmOH5QMz91U24k176\njtoKdfjq+dY0bczbM2xh07cCZKPrUWx+j31cLlN2FUVSyeglLuhDc7L6Rbq1\nFuP66JYgY/1lPUViwARww84h4/x7ycVIgSLBeCLK4sy82rvn6I9kDwevmssw\nQIkIERfVj9GKOZmnkLoCnxP09j23oa5agNQKd+HWSACTLBWtEpICbv065lhn\n63rf7LvnhqjleyyrmBR0fLyuHR9N0MXZPaeGgYFMGqgAMbAsAH7rU8AaZHwZ\nKkwt\r\n=0u/L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3aa0430a8c5f21a2aa9f3d54afe07b1c1b1cac09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.69f9f0982.0","@material/base":"7.0.0-canary.69f9f0982.0","@material/shape":"7.0.0-canary.69f9f0982.0","@material/theme":"7.0.0-canary.69f9f0982.0","@material/floating-label":"7.0.0-canary.69f9f0982.0","@material/feature-targeting":"7.0.0-canary.69f9f0982.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.69f9f0982.0_1592860525308_0.4286495605358951","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/notched-outline","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.369a293f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b6446edd5e8222860d158964f72d4fd28e8b477","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.369a293f0.0.tgz","fileCount":34,"integrity":"sha512-VrZHmF6ezoQuzuztGLBTPwWL6OqUlEmQM5mMoW8F37rthy6n+g4Fb19rDQLCNqTZE1+qcQ4aWZZKEH4WllEEnA==","signatures":[{"sig":"MEUCIDVhxcLMgE2co+QDxxZ5SNs1/vhCPv9vKaVEVIYWG8U+AiEA4JzBIidY+FOxBQpFv8BtHo0lBkAIq+DyHU5lY2mo9C8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SAPCRA9TVsSAnZWagAAv0MP/06U0t7C69tdlbC+ZKaI\n0ChFjK9xcG87kulOzrG/oE8FjK/Am5Rn0Nxm5+kkCcF07n1MtvSaNuLAh7Jl\nzXHKWQpq3eGIQ/8+Ayo3DD0TCDXdPueD+HWobaB6JZ/Jtjd0dDolYfXnZcgl\n9ETt1flmhoO9kK/EZl73+Y2gGIK5XrD37eEUvLU6hmavd8S2WEnMSY4jf2kX\nxLHgV9TK1Vu3BiB13pWGOAIvCQmbrTAgGMit7uEZ6hpJ7VSZ4yO+n7LAobst\njJpPxuRP/+Y+EJNAIZYD4LUyU93HFz11n4fJmPIrYYaPH8hTHbpcXk/RwcN6\nkR/LE/XW/JSJNyh/uDE85bqQEdZjKlzUj0/T6njTGd5VpANIo5WU0l//XIFd\nznvpAPIzD6cKPL25aZ/j7HTyzblmShkj05vr8libIBK+kZeKgZK5AjRP+Q0I\nrLoe81G7k5Tvz2cDBuogwZgYfwB6DCG9krXQICLEYS0fxCMs5oXdHswnXXIC\nuNSgyGE65T3RdWSFpL3+qJKceb2L4vCHHEglCwbNZxlzbUlUfUcUO6x6ReB8\no6mABLOLOdYjUAQd0p4TdrMy53+6ILyq/usIiBYaCIjrvSmNlW7/zZn18+2Q\nXx1v8Gq86qQUExoskhZLoCI74++908WVpnbK3OYKn5RF/ebItxqoGVA1oawY\nM0xx\r\n=eczy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4b9943a16a4fab61aaa8f5dad0d4f7aecee862f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.369a293f0.0","@material/base":"7.0.0-canary.369a293f0.0","@material/shape":"7.0.0-canary.369a293f0.0","@material/theme":"7.0.0-canary.369a293f0.0","@material/floating-label":"7.0.0-canary.369a293f0.0","@material/feature-targeting":"7.0.0-canary.369a293f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.369a293f0.0_1592860686479_0.46884964502238113","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/notched-outline","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.f1432b5c6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"051c0faf412c503426a80c6b963d0c1a239d8c77","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.f1432b5c6.0.tgz","fileCount":34,"integrity":"sha512-2umveH33YhbjnlvevwdRYiZarPoNDuTtscC6u7uZfDieLp6LLh+mv68LGsKc1/FaGuUELoCfmbdizRmGJHdPiw==","signatures":[{"sig":"MEQCIEem/xUoHy6IRhkev6NWU5trEH9OolbXZYAq4GnnjH49AiAOTaCWi82i916BpWokItGKF9SPyaH6etyzY1obNgYyRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SHrCRA9TVsSAnZWagAAgJMP/3DeU+sCxwgQTHTmIy7l\nY33oX7jw98gv/uq+rlsRSJ7k7AkL2jEj5AburGM5L5CDxyubwIHcK8d031O3\nMFNLqJhFH+gyEogX08pJZmFHVh7X+HQXGeuqwaZQM/ooAICZ/iKbPK+/SfMe\nlDqFbLxgaxmXoOcFBPFbfNLYUSJXGYLbSXi+jbyqQon90GrI5leM1JB6RP7I\n4l93cwwozysU29g8wv3tibGyCjonN94FFZdP4EllCX7iAXGne3LybsqQ66TR\npyD2pKd3+564MJyJxoVuqg3Z0AKZzNyEtJCsr/SYlAGtUdnqAO1vpR/6CV8J\n3ksmvuJkQ1vlYvZBQMkJZTJLPErv2wS1tUEjuTuq5WcOTDApxGKnGbOo8iOA\n/AGyTTBvILsoUv18oy3kZPIzJiWJsuWZlp0Jb2Xf+mu8pPB3+CXy/1aD5H7E\n4DpKugGYyNuhPLKBvC8nekV6krVYCqWmBUkT29YBD8csdHwVd4cYS8DfmUcn\nPgKjwFiOqlLHB2vgXQfY8ALLyOcFyzvu1e4aAucM3XNnSj5P7WRtqqpOn50F\nAGPJFtr+LdcYz0L9bb5PNBTOlbujDLzfg4cyRpncgzR4u+ZGJcdtebYF9cP2\nxsPJyh1Yaiu0Xpn3hCbZ8fr5BHSPowyiJDBGmB5RpH6jMzc0RdrMKHhyBH41\nI4bE\r\n=grva\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9987341fcee9f9c549490bf6cf1a6ce57b5a83e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.f1432b5c6.0","@material/base":"7.0.0-canary.f1432b5c6.0","@material/shape":"7.0.0-canary.f1432b5c6.0","@material/theme":"7.0.0-canary.f1432b5c6.0","@material/floating-label":"7.0.0-canary.f1432b5c6.0","@material/feature-targeting":"7.0.0-canary.f1432b5c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.f1432b5c6.0_1592861162764_0.6068361368145532","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/notched-outline","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.4757a16b4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5bc92e84a2e99823adeea18a16c17d293a3a3f3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.4757a16b4.0.tgz","fileCount":34,"integrity":"sha512-AkLa3REd1LgJ/DPYbyXs9kOMrbcWysqhxFim0bGiFj07OAJmWd2vGPOFiCsSwD628gQqQEmZan09Zqs8rii0wg==","signatures":[{"sig":"MEQCIG7mjfbxDu4oMFP+NsbfT9TAepff+l8NE0vkQaII8vIgAiABbeykr5dW7Hk9EkjCxItt8BMOLvrUL4F/kjHQPsd39A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SiECRA9TVsSAnZWagAAB14QAJtLhpRqWBN3bI3mmjoj\nq0qCWQ/JqDj1QAiuiv3nPCUrkSBSzxwUGxyusmNK2yRwpsr4bWuCd4og05Tp\ndX0MZ7iV76OcWG54VwPr+Xo5T/biuyc/54sXa+1+pj7SpmYh8XX+q4egcgH0\njaNuPPcy9PiciOCiSWg/JB4MFQJx8R5jHbbIMgJOGyIlbLS1Gj0Rmksa/a/G\n4pK6KHOzLWV5BEVHKhMlsppJa3amN2TQRSfN+7k5SxWLTSG9a0reJy6wLDnz\nwE8yDVvbMDsgibjAXU0yVyOys86Nrjgj4pYFFi0PAIKCjJGZITzZxZTh+ah4\nr5iRAaufw6WHbC9LqkAPiK9jlyWeHGlqHfvupho73y2f4gjG0AO1aYcSKSx2\n6feYaE+gJt45m47HFsaAGnlb7e8OZSxXw8pfUzwRClaTwPs4m72SJnR3YYaE\n7KtP20Sk1H+A0pWa1bNar0jy3HiVxk7s/Obk4mf13ooU+zTR3FnPwFr/+tu0\nLICNpxXmamEA7Q2MyGMiJx98tUhRygLpEyuM9sCPPzmsucRP7vENbKsKo/AC\ngoXJvJPAMdCIegke6imaTp8m8MXKIpXEYBmskYXPXRbdB4cVIutMqNvrKjTR\nGQYumVzqRgw8IS8XV00spucClCt6WN4WHN7pq74OWw3TYMJF9aTEyG8H6xBl\nZ/ZI\r\n=5wzi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"50b08262743d25109a9cd3d4c87d82d0631d9c79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4757a16b4.0","@material/base":"7.0.0-canary.4757a16b4.0","@material/shape":"7.0.0-canary.4757a16b4.0","@material/theme":"7.0.0-canary.4757a16b4.0","@material/floating-label":"7.0.0-canary.4757a16b4.0","@material/feature-targeting":"7.0.0-canary.4757a16b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.4757a16b4.0_1592862851062_0.419767273692214","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/notched-outline","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.f8f472762.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba6e7e58f73712b1bbe296beaee2dd4b2cdf9fb1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.f8f472762.0.tgz","fileCount":34,"integrity":"sha512-Jj5brqBXpQEotxGtwm8ImnCnWpdS+PAvfng6VpY17rvvcBPSb50nsFyviFPdm0DTreR+RTdYio466TuOWSuDAg==","signatures":[{"sig":"MEUCIQCVtu7DpHrCBfnZbNmQI3p07w9plwSJDSXRGpQTInFOnAIgEzGYPxTEZDusZh5/GEG76INzc/htCG2J5FAx7fEI73M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8Sl4CRA9TVsSAnZWagAAz1YP/1sPwuUHR5Mk7oeB1+7M\nfTfc0YsWdgQ7qAZy34JZCEIKNwTrzuzPZUFsPVSAS5qTDFXil/39h1F+51Su\nPo+jFEQ5j4rXmHzKgXcKG6nwqJWI1tR24m7uyvgmHX1YywAS1Ra0SEXKCwhb\n0xM4ZiMkOz0sDDxQamUuYy6sWhTfsJTuAz3tfccAWHw41SBqeukqICyA66bB\nVijXvUplaU+Nz7JUSqQ1Xzl643ISWKptEuyhkyYWnCH7fQGrZYDVRb/v5H4r\nrf5eq2MEbjZxtCyOiTegIJczr8iWU8DxhVzlCvYjXRJkntc3f0+3PwCcu0nQ\njjQcelJr4VeSYFYp59sZ+WSrkQgRrdAUF+Rotfg0r2oIiErbcvDfNWMoOLxK\n3zDVT0J8it76mP+l6c2ckHcbpSg2JllJk8JdmesxucbB9V36GnzGI/F3OxDT\niPfq8zNiXStBxSItaY63tZ8afI+asyGwzchpvEpLA14FFQNMuhvjN9ODQtCz\n8IEKR+NNAb9eUfhvohr34uGs0mNHOQoE1xoX8zxZ0DSHFpM/dQHIaB0Zl3ly\nEIXLR4JlDitAa2ihcOAFaJ3kWlrliCXk98ER++cZvLs1rpqfKBxB5axTcusJ\nbSDfPh3ZvaMhaMIVCwPqlBWNJM2klM4PU7RlwGcrwvd5Wl4+pGXqPa8qb+RI\nFjQ0\r\n=TYcZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b72e40a4e5c11a670f3423da9ae1ab370f088535","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.f8f472762.0","@material/base":"7.0.0-canary.f8f472762.0","@material/shape":"7.0.0-canary.f8f472762.0","@material/theme":"7.0.0-canary.f8f472762.0","@material/floating-label":"7.0.0-canary.f8f472762.0","@material/feature-targeting":"7.0.0-canary.f8f472762.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.f8f472762.0_1592863096089_0.17643193276017333","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/notched-outline","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.7e4d55c34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0c34667d359dd0d7130252a6077902cfc9f3a58","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.7e4d55c34.0.tgz","fileCount":34,"integrity":"sha512-dOXorHTRFrdnwFg7vUU6isKoJz66K/ZFvo30acbZJUkFdFNVR2QFuE+M+0sNwesBWhJ7eLE7z6w4In/KLanD6g==","signatures":[{"sig":"MEUCIQCHHGy+0yLi6K3yiWhi6RUMh8Ok7RlpyTXXg5KGOGSdZQIgUyXx+G+CmwSggz5mKRNNVct7OgrKjdxGYOg12o7yYtE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TDxCRA9TVsSAnZWagAA6i8P/RlUd6Ri76Ab0AVFgNwI\nWRCC//iuU1sQMq1Dh/hMu6c3onFy9kgHDU2cYRe55ESCbyl869BLWw3CZb5d\nBy/3JwpRa9oj0/jhoXaw6Rja46Pu+SonhO+EniH+IiIkVc9JCB4RLYIAtsb6\nJ0TCH73Zzp+RRq8ypH/TNSDztjhusrpPjxLoBHj0WWzYmhh0WCqK9pVmL4sD\nUtjUj22x3CjUHxeVF7RoVQuJzKvgsMoKVqRSmTrxYTIz26nUEFjomIQQgUri\nU3hjPJEhSISm2ksrOLoDzbiVhXjikVKM6GJHXVhguLfMtws242fTXROabgOu\nfVtRKppIx0t754edbeeDHXzkH/kp5oIAFdY0jlqiFjKW+lGu+lF3iRczNeHX\nm2++LJ13yTW2hxUo8T/T10jIzYLrMy9SN3tk4dARD8f6teeXaTB8voLF1SVn\nMlYylXnbZ1eYR5mGQZJnpE0ydlrHBlPqN3qNT1r9joecQ3NveHaKTkhmNsN4\nj+kRXoOAmJhKQJmWvIfypXCmlK5ARn0C/lfJEufHdT2s4Gnh95LdCHPayVO5\n7YSPy9ITw6VYHXwQUQv9xEyhsDcXlgqALfgriEuxSP3y2o34xCk2u3mzVIaf\nKU3WFr3i6PLl+tLZPeGbhQlmfM7H2nV80fCquOs1BX6wJCKMQNC4c7hoMEJ5\nnGFr\r\n=MU1A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1dcee78d27cafcaab3b8f265b4f1bea83600563a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.7e4d55c34.0","@material/base":"7.0.0-canary.7e4d55c34.0","@material/shape":"7.0.0-canary.7e4d55c34.0","@material/theme":"7.0.0-canary.7e4d55c34.0","@material/floating-label":"7.0.0-canary.7e4d55c34.0","@material/feature-targeting":"7.0.0-canary.7e4d55c34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.7e4d55c34.0_1592865008888_0.3316583399162438","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/notched-outline","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.bd1dbc91f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cc50fa701f2751951323babafe0a6c56477008b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":34,"integrity":"sha512-fEeQnqHMo31uzox/ELNkbZhQAHszb6iNJjCY50UIZ9LtfInzlsbr/hVuBHPgp8ifZhi2IINgtru+AUEsc/Hmzg==","signatures":[{"sig":"MEUCIQDV6iLudxOKg6G5vdSF64W0iO8Dhx5p+DhAPE0VVlPHugIgH4fHsO4a8qRyUDfZV3wodVrj+fiEaGN5HBQ6d5weYZ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hGwCRA9TVsSAnZWagAAHkMP/0clQVhEA5FVRqySVshx\n6q6RgnjPuyiHvHJ5kaLPMTg9rKxWVetBYp64cysFcTmu4cUJld38slmm1Ij4\nK8ACqnS8G2VzeLtTyH1zfIq5p+B0CMCMD88cZW/uIvhHt7escoRPsXha3OuG\neYqzW3FIUUyFc0wxoBQVY62pFm8DgV89C6tnfKZC/dNcIz/K4YMgUnOAuKVx\nFDaPWTaoqFwMKKROT6nTEpsl2mnKUar44K994lEIegUsBe+IM7vjp/rHTm9v\nPzuG2JQ7NXXbe8w5xSRy4v4/WZk4STCWvDSK65IWmWZk86v6PBbf3liBkDpm\nwCcQ2RJQaJLfEeWN0x9CPOtCrysCNcdeKGKY8PXUH8VNMu5J+VUHanNz1dy4\nPaOHhemfdVDTAqBry+JgUs4if44Z7ulU8rhiy8xHMJRjtMPNa2WRdlIA07Ls\nrR4Qpr6tjqyDUZyimO9kgmNbiTroE7/HsYIwoB137CZHYuMoV+v8C17aVBfR\nMzn0heyMqc2EnjVt5ANctkkDPm6PI3JeKK97F1dUk5ecSvmFQd/AFr6iHWFq\nuCfUmGSXLVVGzNn9ObStqPrnKYlAhNdhEVBJ6lGIFPjthhzr16rioUxj7Eda\ncLBLVmQspzdIN6GHqi1JEBH0i3sj97TVwJ8OkXpbWDJoXuA/wIdgVW5wnErX\nayX4\r\n=Z1eY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b63b8059c82f418a3f6134124de3ad8bbb08976a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bd1dbc91f.0","@material/base":"7.0.0-canary.bd1dbc91f.0","@material/shape":"7.0.0-canary.bd1dbc91f.0","@material/theme":"7.0.0-canary.bd1dbc91f.0","@material/floating-label":"7.0.0-canary.bd1dbc91f.0","@material/feature-targeting":"7.0.0-canary.bd1dbc91f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.bd1dbc91f.0_1592922544303_0.4938953512083868","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/notched-outline","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.31523bc62.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"611b217390948eb30e2b2e3565c84a650f7c3639","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.31523bc62.0.tgz","fileCount":34,"integrity":"sha512-8QJEh+KlGVypO9eFnTvsyeKSVib111t5NbD8s+RrQBaFWZDZ7t8IjCOECy42HDZgDEk0Rgb+UYc9sh/jiK0LNw==","signatures":[{"sig":"MEUCIQDsiuAriOTVAcKf9It+IR5/bBlsAzN+hmhwR6TZ0NBEIQIgLns8kaMElaU8QouTuQDcRutraz5Y7ZML6FuXslrIP+U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hMECRA9TVsSAnZWagAAkjMP/A+c67RFcMTX3e4Szo2v\nKnFkrcHGe80agq8Rvrox7ZkKzzsa1JPJkNy4bECq/7hXiDTRZiykpWK/vAoM\nHoGsi8Af50EvSMBcaJxmeA64bMozYUBMBXH+ceZMbnZGdtO/Q8QIHfikIaek\n+6S2+sEU5zWiuzInVuaE8sfOq8dKuAsQjidZuo6YPJ1HTAcnIqiwO4mwE2B0\nbCj3kuDTO1FkvNUWcRIQAwqi8On7ZTdboxxXmZOAjeek2Aa3rc5US9aeJabm\nWFXbUOywUOlMpv994JImQBiIurBnbdu0WUohP2eMY9HeTY0rrVOQyVj8zwAL\nfDNKZwegfYtnQcABxCBKDHitDqW7yFpOgyC2DQgYWQSxvqjB/vfa0ThwD4Uc\nC1pzbEY68fKQsAk6nZdGRsI0/Ofvya5YbumjwWuexIwxmktCDAflvbgf4Toi\ne/ZKwiw2TGFIrDaxobvgKy/znX1n68QhgbDi6fVGAm3k/fJY1LYxEU5bthDa\nj1Ld38WComqQFTAZL2DBxxY4ro3ujUufP2cFxH+kFZVb8pweE21Eq88HfaI5\nUhA4FwcDmZmK3/fExMIvZ97shcGw5lEVYygBUFllrLO2HySF08ckMbWPkdEe\nDPd3wIcwd7rPSwb0648cDZRMZyLRlfFkHMXrg6Sq8Vd60yxOsCejpxcy4Pfd\n/C+6\r\n=wNci\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"035ab4d41a8c444abf721e44192fa6e10bed9f79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.31523bc62.0","@material/base":"7.0.0-canary.31523bc62.0","@material/shape":"7.0.0-canary.31523bc62.0","@material/theme":"7.0.0-canary.31523bc62.0","@material/floating-label":"7.0.0-canary.31523bc62.0","@material/feature-targeting":"7.0.0-canary.31523bc62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.31523bc62.0_1592922883886_0.8372333449735447","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/notched-outline","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.a96b6d4d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54ae142e560a4e3fab9ee15507732caca1af0d7a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":34,"integrity":"sha512-mBvVkUzIi3ep/q092MnNeI+DOJIqUawSqL1RiLf2c1x1kxjQ4KnbqYE+jxFxjo2wQXNgLDEzBuINIJkwndxoVQ==","signatures":[{"sig":"MEYCIQC0JWmiR4xmWGFGy5E2CL1oOxIvCCm0u2cVXVlBn8xBSQIhAOayMcmXWmyZZ/sReYA/m+vehgtCmATQZDyCpmWzFOSa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hTuCRA9TVsSAnZWagAAALkP/A7kVnYx92in/JVZaFp2\nRbOEaI93kxr4SnZ1FQZurM/va57en1FyrJj30SdrB7VGqcVJ/gzfCYuiC6LH\nCgl1CbpQHAgcbdU+lmYXZ0LkL5BjGUOvRDlpqSg/V5/Ff+E/hHFRhsNaTVK7\nI+upHpZ0+PRM4c1Td4r16yXG1fF/rscfBKY8rt/59z7WZ4yDmPYT4d8HMnLo\nbJUd+qT0l+ggLqcjr9JWJT45DjqT7SRY0sv3ccSQjNzxJuIVWrK4/Sk++yKL\nOnc8fQEsEewc8i4VHJp+PesDyN5IxLthUEObQrAfHyUfN1doU+FMK1pIwwd1\nyKysknzhm543LqiE87SIZxDtyV32MGkh0RhsrWdkgOBqU8CARvirysKLMziA\nAtzG0ejVJHHTi5xDWZIdbgSRLc5az5vKM7hS6afxYjbRl0xD/grhlaC/mXSR\nq5a1K8MW8XZL7C587dG83xwprth4ZkuI0QXiB2FZWI18Xo+WI1sqb0K3409Q\nmWVEzYGGjHODwdx7JzvBX0VTPKmWhzen+thwrJelHdIIS704sPl/At3O28u1\n5nco2It5ND6KRvYlxO/VTbT6AkqHxubgot7XOfvC4TlssYKI31ub9bt2gCsO\nk9215Y+WaaUY9zZrFQog3B1NCqPqrGiL4+Z9E2OrJCDj2RBcAv9copRwX10I\nVF8C\r\n=BmKJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"96a5767feee3e2fd2ff90ed98a721999f8cbcf5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a96b6d4d6.0","@material/base":"7.0.0-canary.a96b6d4d6.0","@material/shape":"7.0.0-canary.a96b6d4d6.0","@material/theme":"7.0.0-canary.a96b6d4d6.0","@material/floating-label":"7.0.0-canary.a96b6d4d6.0","@material/feature-targeting":"7.0.0-canary.a96b6d4d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.a96b6d4d6.0_1592923373712_0.9426653562298293","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/notched-outline","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.ef3a09533.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"956260ee83b48449485901f57d0fab1f17963804","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.ef3a09533.0.tgz","fileCount":34,"integrity":"sha512-yW2v9brEQeH/wlaS1guhWxBrruONz+fDmrX+nz6qzBBeV+Flcc+Lbk2incKWPOtcVzanK7LrorXD+ca097zmEA==","signatures":[{"sig":"MEUCIQCzZvNtY+Vziw7ZmejqsM+8Eb7+YxQZWNYSbQiIIa5hPQIgHRrWPb+W+BhHFvVpTxq4isvEmi/IwzPgzQD7hdfai+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hZeCRA9TVsSAnZWagAAZMsP/2iVr/NvAS37ouPDQM5f\nL+a+MEI6Wt4xpJPLP0lZ39jMhInbVll1osAXykmlzgcmTwn+NeyDXsKgqtnH\nmURNAeO82+cb8hRD2HOssenMop4Mmx9P7qW89APuZu3x77Nqu4DmMhMI6fac\n6HsMhOwz/ohLgX/XKyH+6Ov4h2DQWGShno25KT2jcGCX5Z/okn1a5XS5WMRa\ng7/VddxIxWzlrCQ5KNOj3TNDYgFzB1/+I92n212JGjb9dl6GezDyjvmkuZU1\neCejuNHPmvSCCcnx1+PnGS8FDyfSTbVTYhbVr9Bo0hCEPLqXa4DGyDl2xOI6\nDOmgNN1AmxA3uamlgJONkSCNKm5KS0lDfkQXKzTmvW3713wF7K61JywKfBji\nBCD6L9+JrhuJ+C72aYAzCOAmShML7MqkH5u4xjZE0QCKVnaUniYsjajoagWU\nv35W5pIiGe2IVWHEGRpSHAOSAowR9dMCghc9b4ABLc2UwIxizDOIz0oOMIAu\nO4NvQxdLjwOYnCkbN6RtLRSG9f5GTmoJhCzaL1X66bsBcTj2u9GuKp9Ik57Z\nR+sJ6jH614lMxppsKKCW0cUxhy0V3g7Zb/79L9wWK350Tb6xBUJVuqgpsDXN\nVM91Y4C7TeaUhElTvF041rAOaxmf6XUOXvD/GCepQaz1zg0Xj0biKPggogBG\nugj7\r\n=4k/x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2af091492939e0fee42736977683591ffc221f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ef3a09533.0","@material/base":"7.0.0-canary.ef3a09533.0","@material/shape":"7.0.0-canary.ef3a09533.0","@material/theme":"7.0.0-canary.ef3a09533.0","@material/floating-label":"7.0.0-canary.ef3a09533.0","@material/feature-targeting":"7.0.0-canary.ef3a09533.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.ef3a09533.0_1592923741656_0.42496764746889193","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/notched-outline","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.080965f39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4b66aa5a5c2ad1fbda672b2009ed457d4010bf5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.080965f39.0.tgz","fileCount":34,"integrity":"sha512-XWIWoEBy5ybXvAhWXwf+o77CEiswsKZpzzN49h1knD+JaxKNNjIWxdU/OR5D8aRQpgh8ZWeDZUbqj4WUKWTeOw==","signatures":[{"sig":"MEYCIQC9ast1vFgIhaHLl7nBspxQUZwvQODZ157shpAmKsTKmwIhAOFUKoEWKSYH0YVPBeUF97sML9kbC/wMZV1o0/BkiQo2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h08CRA9TVsSAnZWagAAZ74P/3Bk1HM0x381kwUsRTdc\nhXdj1s1V5sDrZGdsCvlxeScn34CSpl9iWSxUBvfgeGLI9+vBEpVIa6lGWncL\nnoycI9+C92xlhTbcLIe9Djdg1iTWMtdeavIf1skxO1qS4pZmmkS/SsBonwso\n9DChbDpFnCBsbbD7ghy3tMR65x10vbOd4D042RFrQn0yza73hAxU+Qwyic6h\nzGPWLU/shmoMKrRT/mu1dzLCwJ6B9ckxX2lCQ1QuDwzf/RGRSCcb6chkVyDl\nVFNdh4AmNYaEj2tEwMiYsw1pcNo9Usy0Bb7goO2HBi3eqUIGr/iI5Inbttv3\nsa+cALNblsenqLS2T2UmUZEjiAJWdK5gHdGYlcMRp5bl4GE6K4nyGA6GTeYQ\noStRWLdasR/Zpep46gQJ4hwPDHevCiWKB3LMDgmEP59N95BpmdMraC6LaXjP\nYFdCMwm9htQkvlKYSzfqzdK5FBq4xwfwU6tMRieAIO6oEcno7fSDeFd9dSSB\nHbgwaDW0OtqzdS85RfrZbctW/8DIMtiASbyimWK3f3vBc6QLKpiYeqefPAYp\ngHHTwW19TTDMWYYoRu2r02Qwc0XG9I9oxLnnM1KP/wMav/pmqj4dRrcwGpka\n5vYhR5SzaQ/TufrSqGmgii40EHADWzFJajwIwllWsa7UUGevX3KJ+JrX4TyO\nBqYX\r\n=mvT/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c0d7c5371df46e0114aef4ac9bc2b3aad1377f76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.080965f39.0","@material/base":"7.0.0-canary.080965f39.0","@material/shape":"7.0.0-canary.080965f39.0","@material/theme":"7.0.0-canary.080965f39.0","@material/floating-label":"7.0.0-canary.080965f39.0","@material/feature-targeting":"7.0.0-canary.080965f39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.080965f39.0_1592925499563_0.9832211896135439","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/notched-outline","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.1bd67b65d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c278606e245ceba552a639acb8dbd38649ac0ab6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.1bd67b65d.0.tgz","fileCount":34,"integrity":"sha512-H5m1QCmph9/hCZqfD3kbQKadX2RLI9y4pRBTDNFFkOYjpcTae+G212PZJOwqJpboBTybuqP1IK6DT6nXzX5mMw==","signatures":[{"sig":"MEYCIQDuLFNQvyj/mZEePN7GIXXdVzzoD9Rdw6IxQEpf8bkLhAIhALb/m75b4krmBJIx+xj26OhV/9EKinsJpzaYyhd8kLZZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8icxCRA9TVsSAnZWagAAQ7MQAJbQ3tyxlFHuJx7/iknO\nd/ppdvjxgr3n/rx5png3bWedwf3//5hu3ZyVEdACq6hHKci7eubdh69SvU/N\nF4AJIaabpO5EQzAHeal+eylek1VrBYymIfckl7+oUcpEckl8BdlJUsbpnVJU\ntl7lfSkP4RsAPC4ylrFPQwMsyCA83VBfSVE5COLw3gKGNafjRF92LF4PNc18\nGsZxpDgRSIU4j0GEujDd1kox6ApL7T3ztL9JNe1h2H3FCcYAHIir/tLWia7q\nO2aRNBhWGsbMULKeA+cQk2KO9qCNwcmsxSr49NIlizwqu7X09KNHPAcBlouk\nll4hJbzVlG3sF6JfGTyFJbvMPV8yS7pkiG56fw/REMojIrobQykdQ5XJF5vE\n0of0fy5uKSLDt5Apf0EkGEDo4XLGFmjbwDQAe/y2Aa0Vh/sIY6abedQDY5CE\nbzJvNgEoUxsSSUIwnIDQncODL0rJo8RLnbKltIBBqfKpQXGNkjgRp34zrEg7\ncIUeBgK3ZRmRen0zBnhOWvu9FnYGUIZlXPVfNK/RxjUkCJRKEnQ0vXaN2dMW\nXFourSdtpqw/TpgGkupSH+NWKLWLAhNrRwE2SN0Wq7ePEBzKtWJUJc/pHaLG\nIlgZM52btp0cu6wG30c/R4yb6cwl81S+1zakVyqKj4DtL5om4cZ2fI5mRcNM\nkA7g\r\n=Lt6q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dcb3206c3f6c1567eec203025b36bff594d66678","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.1bd67b65d.0","@material/base":"7.0.0-canary.1bd67b65d.0","@material/shape":"7.0.0-canary.1bd67b65d.0","@material/theme":"7.0.0-canary.1bd67b65d.0","@material/floating-label":"7.0.0-canary.1bd67b65d.0","@material/feature-targeting":"7.0.0-canary.1bd67b65d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.1bd67b65d.0_1592928049038_0.8655699286335778","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/notched-outline","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.18ca31248.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7de1b9f7395bb6ffc2ce329747ad52a65038da57","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.18ca31248.0.tgz","fileCount":34,"integrity":"sha512-c5r4mVVNt70T6VmowNvTIHoFmn8QW/w2Vjgd8KWixR7F8Dk3/HaIe8P8++AdVe17WpAuCE0lh5P9mf2dwA+knQ==","signatures":[{"sig":"MEUCIAV66mLqOMTCZ0TEY1H9WFa0mR4UolPBohqvemKz6xreAiEApHdTJloFZTm/pZQRIqNHmWipCPZf+GagSMQIXBIw1Y8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kksCRA9TVsSAnZWagAA8O8P/0Tez+wZuMJbLh7Ie/sm\nbE1Qgcx+sALV9zLbmbPVXdzZpTBd7Sz44lnJlTLmK7bMwMFsZIzcVzQw6ym0\n06eogVOze0f2VA+QgYfTqyHECz3DLp4xKQcdP6KAVB7i1UeD4usTnb7iZCfY\nUJqqejD48m5QPgX3/0n3NQpSNQFZhFqADccp4J5ArmbPTh1vseAjqgNKNt6o\n6J8PIjEiHDLNEl0xgkAOTrogtF2dQTCRzGayal7aYXT1/3qCzYBsETTwFEDN\nEBOnrCMk9l0yRE2SO5GwNIA6NC7KMJXfYlYT1zVUkNQ2zCG0b+7iTpjz/fpN\nCzMs6XvTD2Mg8HTCjKjEsCzKM1vcmWYcnuJ3AtOx560y3MtqdKkNzt2lYM7o\nIJUynK2JGR2KkhTno0GsyWoqJKHbKBnccYXDITnCNvaU+zqCZFAzqSAoSTke\nhq6g3KzXlmQThYHuDd1VTcFWE7hXLaV6qP1fRyQ8TkbPGMqhy5MAUkv9y4po\nlMvRdgPnkceaa5q1P23RV4GYSOh5vt15pl3r01qY+Z0x+dQFfFAIyoNZEGn8\nRRee8Lf4qJXSkCedWMpJCzjSyPck/NrbLp3XMRmSc4hvfA7GPgtfT556VXL8\nCL4n/Wl9G66A2uZf2fVkfR3tiQHD6L4ubz+mtI2JsFd78ZF8JzVSFqLkjICy\nr7LB\r\n=YVue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"34a77f9ac5b41ab1f71969d01fde32c58ffc08ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.18ca31248.0","@material/base":"7.0.0-canary.18ca31248.0","@material/shape":"7.0.0-canary.18ca31248.0","@material/theme":"7.0.0-canary.18ca31248.0","@material/floating-label":"7.0.0-canary.18ca31248.0","@material/feature-targeting":"7.0.0-canary.18ca31248.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.18ca31248.0_1592936748344_0.6135810205951653","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/notched-outline","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.39cf00836.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2273c6efaa571b187c90e874891a7915128f5d57","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.39cf00836.0.tgz","fileCount":34,"integrity":"sha512-JPxtfJYQ/2uyOM3FPIONgrZAlD5iDAxlYt+6tFkp/iO5CMvKN5JaH+iB3S7abiHFbcLkTwiDLDv9w9tUcIZXCg==","signatures":[{"sig":"MEUCIQCt57MYmpJEI3edRLrF1404hKSGLLgcjmlg2jEPMxgnDgIgcur2RPAE1q2q66rEf52wkV4Q+MMtXzUA8BFz1AOstj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k6NCRA9TVsSAnZWagAADEgP/0DsT32Zs9J757go1T/o\nI0QK3sxxnlWfu6/ZPbCS+DECCgCI64V3WeCsE4hYa8LpxlgnICtgfn06huna\nyqbttZgBWL7xbqi79pnyLD2CSS805EoEXlxWrVRYk3dqQo/SK6AYWCYkH9Vj\nFUPjm5ZdqBkxMXwKST79bHsl+UYBe6+g4gNFYFpSBg8KV88T+akkouWaVMhw\nxbqOtgwtiTxRJYr5nmRzOyEYnLXf7iLEFO7gv2e0wfvTYO7MPhZd5amJQJO6\nR84IcM+dMKDRwTAdZSiLtUtmGsYeXkI1aLYFo3OyU4V1IwDkkEeJwLL+/NQU\n1JNe/VBU2QTNGgZRUbtaVVYdrhKHmNV/L+W4waPA63hnHzfKOzflM09XBvfU\nwE227oec8/jhebdkZuObQl/ixxpmuGL4QxFEAWRw4nmBhZg9VkJbT9M15TG7\nDx8WVIIJWj4X4/eQOPboumWJ3QjDNcmf4tBY0XVSbUzRg5Na0BrOyfbr35p5\n0DaxQxZs58GPuoa7o+Vhk5S9boM8T4NcTr5tlKT4R9xKa6Q6IsajsyJFnegb\nnXLXlbkTkc1BWxOJHfbeu9x4MmfzW1hxqJhe4iAU7GZ7KkSsuwdJOZjOwmHm\nS8etn1pdeKLSKj2IVcjg39SB5NTSAxZj9ZmkStUjURW5RtjMQLLyLRUNeVqN\n62nd\r\n=7djr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"490def2a6575f8ae6a6151f024a9af3fed1f5215","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.39cf00836.0","@material/base":"7.0.0-canary.39cf00836.0","@material/shape":"7.0.0-canary.39cf00836.0","@material/theme":"7.0.0-canary.39cf00836.0","@material/floating-label":"7.0.0-canary.39cf00836.0","@material/feature-targeting":"7.0.0-canary.39cf00836.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.39cf00836.0_1592938125409_0.11300324257913807","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/notched-outline","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.1bfda9e05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f55e49c9f93acc29659bbb7dcfaf20fba9ad0a46","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.1bfda9e05.0.tgz","fileCount":34,"integrity":"sha512-IgqzZwwdEOzTze5GiZMkD8LLxpa9kC0fWfnAIyyoTSltUlTXsDT8wRdC6ZE/t6KF4WUpSo6rJztuEDBeEhA9YQ==","signatures":[{"sig":"MEYCIQCqp1/47LnXKNJun5+xP2qJUhYtdWcSW9vwOEdKFqr62AIhAI0ROU5yvcNuZS3PuiGpWfzEIVr/PklXE25hJq5S1kjF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lF7CRA9TVsSAnZWagAAAM8P/jvekKiGBmVjpg0eZZpF\nO4QKzO9Vqhc/QFUXAQbD332I0Au5GVdDCwNIH7YzO/yg7HpgsD8dQingp8mR\nc7HhoDX5LXWJqjBqAghAJo86nxb7IFSmV+3zTSbTIN3UKecIKOkEstHr4e4a\nwqmzdAHqZWQYDe2V1/hJkyz0qZa5uqgedXH80hdFasbmzlegPwIblIveYjeD\nGN3T3kH1eIickzDznPvzrcmq0z2CpujYoyWTMV57W4yjrdrQDFjhLGRy9JWX\nfqMcg34Ay25E5wBs1lvCKXjSVku44GZ4V3HjLN7WjKZ2PLBfvbdGqrM/BDtw\n34ph6a4LSIPBlG7TW9ohkAVLB9G36OnGRWWtvDxHCpkXUwapZDLVJYOFmAHS\n8ZwX5hEnQVcf+2OLGNYA1dMNOqgjRCb/JqInz75GMSaQSE1B6xUvbzeYZDhj\nkA4t8jWUYaNi+3LU3OtGK14uBia02sPV9KM3bpEjJz+0UC4V8o27OG/qLqoY\n0dD9gmbR0n91VWLMsdon1FIDuzwyt2wMSrSgGZCwVnQCs/oNnT82X8MQY5fP\n5HQS1FSI5x1igLsWivbQT2Xd8bWPDslikn0I/fFCKVyNdTiSnlnl92NtiPey\n1PnBjHUjeVf7oJnUOI5MoymkVb/p047uDX7bcUrP4Jp5Mh1Byg87CNi0OL8x\n9M2T\r\n=aLlY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d858287d263a004329d22036ef43b63b8ec8eb08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.1bfda9e05.0","@material/base":"7.0.0-canary.1bfda9e05.0","@material/shape":"7.0.0-canary.1bfda9e05.0","@material/theme":"7.0.0-canary.1bfda9e05.0","@material/floating-label":"7.0.0-canary.1bfda9e05.0","@material/feature-targeting":"7.0.0-canary.1bfda9e05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.1bfda9e05.0_1592938874884_0.2753643389722016","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/notched-outline","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0-canary.08731bd95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4fb7a0d0cf56d0274547d9f0779995a4046b1a5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0-canary.08731bd95.0.tgz","fileCount":34,"integrity":"sha512-x7yJNIkHtml7lYG8nBW7QeOYxdEPeWQbwIIEcAsP2Y2CCwfFuj/rp3c2gXhS/QynjpIElA40nFe8PMfz1mOO6g==","signatures":[{"sig":"MEQCIDw+xS3bs1awxQsLXp6h7FCn+osZyslkiOpbBZqmXwX4AiBQDUpX4wDVbkkrxIcFAiIzgNV50XH9/9ftipR9xjfo+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lISCRA9TVsSAnZWagAAOuIP/1dK1GVYruP6mfOOsnyp\nvMZqttOj83O+qzkg7atye5hBl2b2ZEUNast4fsKGNYl5HmhPWS6tmDn+Q4P7\nDi/nYhMH4Ip2nCKlzNIFc1RHiUoQecTNeKbIkEUgapn6u5UTGVdJ3AUd5lsj\nlmkmdCOIugee5iMoaTjFidl3EeSBmi3Gzh0HlKrUj+6qhZ/ohqSBPF6KSiMw\nm1VOdVOpujjgZo/I1DR6Z8UVVxarvIsA03GoEZgw6rVOB6lKYKgJRIodgtGd\nA4um2FM8LwzqB+vBA8AUvZPgY7Ajue7R50ekMvZJNaIKjG9xXzpmbqcMKM1o\nBW8OhI+/55xQen8sx2YYpWGY/mG3FUvmklv0LD8MNZhypyQZxR4PvhASQimx\nbAQ1JHSFjARWalMa1Ui3QQUwQn/nfFHyxtfWqIH/XrEFhycuu2jv1vbjgIlj\nTRQxk4FM23KCVV9V//zSLvXbIYRLIpKWcjfkLgnmGkRk5PGFmeGEjYFlQGnk\nUWwaY1Q17L7lrw9vh4KIOThr4trDuq+aTNANWGUk5p1Q82/8ps1nPPn3PCZ/\nT3rg6pDhslwZ49kADKD2JE0ejPvMAQbhPMvnAA1WK1PUHTLWuRYCejftZArg\nsUuiLYa2+P43uy5oT3L2Fis+jkrUuUTiX8Ar/uqGbd4IIhWuH1GSS6xA0AxA\nwS5/\r\n=/X30\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8e24a4ad4b32b05eb883e0de21ddbefd3c8f641a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.08731bd95.0","@material/base":"7.0.0-canary.08731bd95.0","@material/shape":"7.0.0-canary.08731bd95.0","@material/theme":"7.0.0-canary.08731bd95.0","@material/floating-label":"7.0.0-canary.08731bd95.0","@material/feature-targeting":"7.0.0-canary.08731bd95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0-canary.08731bd95.0_1592939026063_0.7010098654026136","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/notched-outline","version":"7.0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@7.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d8b45ed22fb245c8809c647b220d313d8b9e888","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-7.0.0.tgz","fileCount":33,"integrity":"sha512-MsOolYO71vy1auR1KOp7ipQY3WNa68FPC8s7thVbJXq6rZ6ZtnX18KJ9UQ+CI/7trJTej/IpGM5DKIQ4htoSVw==","signatures":[{"sig":"MEQCIAcCWAc7HI2CWZlckpjxizCX9sjcFVpuAauPq5wA2RXxAiAnvNqQ8et7HpdwK0DsSrM4hKwIjs8HD88tj78F6k0BgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lP2CRA9TVsSAnZWagAA3p0P/RaTofjnz7+EWVlWuhq7\nltLj+6nev+oXRz+xkuOg4bLFJnT3F4sC9x67Xpeq/0rsVKT0OZ6JQm7Yi5YP\nK2cHXQlhOysP0uz2Yw4Y5aGd7dR5cK8y+ksBU3YIPHnXlzCOHsFP9GOMut6K\nqVvEN6FQP69mfFG45QeQJmOp3kom7l5TjU1SMtCAsrUvRwFw+rMPXBrK5/ga\nQzYPNam1+/9f5u4ex42Q9JDM5O6KWXfV5WEspZI0AWuesUN93kMXO8qBpc1M\nHPyavuqKZP1559ULUqdy6u2ZERBC7tiitty8t2cfHGGmEGOweDNav3YmGkW+\nB7Ea243DACUipr0vJfQAK3fg1rDe2iIFeDwWxOC9+aCcTTLWK1dKIzN/vdVk\nLgKCMNjywSs/n2ABA73dzLlxgrrMi10hxkzCUnjQg02YJzHWAdZZ+vccVzjG\nOWOZOJbmPkq7WyOoX3rVMIoN4s7X7wrRg6SDOZUIOCG0p6NpXI5Sp2aekt89\nU+1r+J3SCG3APgaSWcrY0+Ddty8H7VYdAnlWr0ATVYlsmSco8r87l/yyq/Su\n2ZbmX6Su192XK3k49MBU1rtO2DpguRXrqw9Fh+NFsy/UblbZHni6S/N3ZBAV\nzd8o6buM7WKC2+LsHNwbKSn/Bg9vxy/XfNKLnuCDMIOSMtsmxS5lVWnQCuEJ\nfw3j\r\n=N+j8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","gitHead":"a3212b2099765947f2a41d71af2cd95fcbca4b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^7.0.0","@material/base":"^7.0.0","@material/shape":"^7.0.0","@material/theme":"^7.0.0","@material/floating-label":"^7.0.0","@material/feature-targeting":"^7.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_7.0.0_1592939509720_0.12053457786539368","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/notched-outline","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.a3212b209.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a761bae61f71fbeb3ddd63fca9218d80f76676b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.a3212b209.0.tgz","fileCount":34,"integrity":"sha512-ahTyMZoQ+Dz1m1gZ5OjkpU5G9byNQb7d5kMb3xGTepDs9IjN7+kI5AALIATDOuN1eqfa3yrV5TO4SB1klSSceg==","signatures":[{"sig":"MEUCIDzawbl3r3MHHtkvhVTd2bnmYXJo6oXGAQpWdDJTRbGFAiEAhzTvFJzJ2G7kVsBQJePr5yqzet77S+kTjuj9ok/f7Zk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lQlCRA9TVsSAnZWagAAq/YP/jRN0gbs2UdTwWaikSsd\nvz73qVowNloOxZp+x9cI/7Ruj6/9wd91MUBB642+dpMAsmKSHqtWUbtF88Bm\ng6MSGRM126rm92r65Hd7j4RwU+IkkPWueuf/GbaMmM4XXS7/zr3eP/yG9ntf\nhe9QsttfjD9DEN2CSLgkKJ6wdrXQKRtuDr+Z6tvKF8hbobXde06hl70YzjKg\n0H+lg7YFYZqZQgnon0mw3iYsrwEEMmm115nsacDCm/IaccKhTUH0Gp4qn+C+\n+ljjlv3iECLByajlxL4IjsW6yFAl9UKaveFq43HHOvzt9h8TU+UZhzxQ+ZEo\n2UBMIaJ7GMLzaSfZ4o1Xd+CoEKaR/FinlYePbl+B1QY7Ai8PkyzLMbHW7bD6\nWkcDKzVTvUg6cnzyqyypVyv32WmAFrV+Y+B3Ay02Adr1wx7sRZcuEdptmeWJ\nsIwmV+kNJXFDMugfzinIehCXEewIExO80ZyNnWHNxJf838xEIVlJf1L2AoOR\nC49/KUts293GawRggplgbNK4sH0Wa+67O4PYoJATisGQI9ijEfwz0ra9bfFf\nH4vqLfy4ccgYuI+XVaoIVgljxY2yc2uZPRbSxJ34RyLDtckILWlXaji2+uw5\nMe7wt0M4sIoEOjdei73rKyhAKm4cjjLbcAsnjp9aJ/OhuflvjXlMEqLO+ox0\nqJa4\r\n=kDxy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c48f67451e0470c28a2a044f902a31f9fca577d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a3212b209.0","@material/base":"8.0.0-canary.a3212b209.0","@material/shape":"8.0.0-canary.a3212b209.0","@material/theme":"8.0.0-canary.a3212b209.0","@material/floating-label":"8.0.0-canary.a3212b209.0","@material/feature-targeting":"8.0.0-canary.a3212b209.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.a3212b209.0_1592939557076_0.8789530905553093","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/notched-outline","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.15e81fe98.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b2260ebcfa74f855f9cc08e292a9b1aa83c8c4d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.15e81fe98.0.tgz","fileCount":34,"integrity":"sha512-9CnQAkZIUjBqxL/PtHrs6qkPwHBfaHmKfNvjhIxMuCB2Qh4dxzGuRxRuOmrYaLFwsQQdu29ofewAZHfq6Sku0A==","signatures":[{"sig":"MEUCIED3Nu/wGfgnZdgA/5gItXXlddkDbkypRKwq6xfVKkxgAiEAivZVsZ8aBcAqtkjQJrL1im4bbh9S9B211uvkOHHYSH0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lsGCRA9TVsSAnZWagAAHiwP/iBSlmFE4If+dkFCRqp5\nQCuJvj977yn4y2LLo5FRKtg44v9soQMPkqVkabbjEt7pc2l395iitWg+s3x6\nZ8tNGYtsOVIXSV4c2Q6mEsEe7LmyQKeGMxb9Ex7GJeQihOyDH596Fm5QRO3S\n2gNoRzqIY4oGEYz5DWY/uh/NJI171ZER4BXfj/BFS9qNh3fWJhnk+B/zrJzM\nF7MoGIDo7Bd19SU/vzheYB7h8cFvwcPA4/yID50kl65Rk6WI+BfUFklOdlaV\n2+gPNd27x9Y9+zTkre5unHVwYEHoE8zeS2Rjmc5g6Fh41EkR73l0lAilqqXl\nnWwIWiUKopWuLM0wI9sqvGiRV+Iy5xcydsJQu9UKw0iUhoGfS81/Bt80DVtS\n5gKHwTYO9jazyTay85hr1CRqpjR1Bgf48zdiSGmDn0Zi6blwK0NgTaLzD9qm\nnZZcuF5QqmthAX0+NOLmAvvUMSl6iF0L5LTlAlfZG3w0bo6z/3INImXGEsfP\nGsXPlAvyXZZQOdc/6rOEBpGhcX0I+62JiaGAyRdKhxe2QG6kbIDWESyVCqSq\nGPZUqB6wc9uoJnL71qnlo2M2XeA//plfsXrjd7kbE5NpAkrWwNpvw4QmaR7T\n8XsUy1ItoJLGim/55W1h9B2V+cx653rBnLv4pzQ8NsZeQ3lmkwdFjLLqRpVL\nnQuc\r\n=zzfw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6c7873baffc445c3cff5a006913ebf1bf53617ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.15e81fe98.0","@material/base":"8.0.0-canary.15e81fe98.0","@material/shape":"8.0.0-canary.15e81fe98.0","@material/theme":"8.0.0-canary.15e81fe98.0","@material/floating-label":"8.0.0-canary.15e81fe98.0","@material/feature-targeting":"8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.15e81fe98.0_1592941317667_0.8048018257482881","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/notched-outline","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.004c9d392.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"635a0740f776353f5fc17ababa009d9269694d11","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.004c9d392.0.tgz","fileCount":34,"integrity":"sha512-KoMoPoutb+BvEFsgnJEKW1TDlPh2JP2PCzlrnOdvYGCZCLaqVxploqRzzztQXmVMEezsjoehzCKhNoakfEtAVA==","signatures":[{"sig":"MEQCIDe2JGDJ4VMe2DLZodGfl1ULLpdDZ9DYBqYM4WtZe7PHAiBQBprVGraH/8tWlPkE+t7x0TA5QVjPqV/WyXZPaywzAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oioCRA9TVsSAnZWagAAYLUP/j7zI0uJbjaKLMrVyM0x\n35yVGmmGyLNBB/8bVZd/TVbq1moIb1mDxFdNBsvTLN2PFjdzJ5APkeJxAdmO\nK1f7leWBOiB6K6FC2tyhOZBCxXuI/+gDM02VlFSZxvQf9a1fufyWwRC9mhK3\nunr9BB9BxGI90WTg90m+4ABIXKZPnnR1Kmq2AyyhKIKIGlT0FHysVCcYG/rs\nKzEJfHFNyZpMZHW1kNeYo3M1PPEnIq+TdtZp5CXTIAMLbuVmoMkh3qTj7zf2\nx5BQBrg/U1fdO2rtQNlPSvv+oZU4gExOJVZjRvyUTo6iSs498bUWO/B5YhO1\n2rymf+jAROcsjNyhRIRSbflW+o/POJ0r0gY6UmHyGwcvixVMv7llRBZuVZ1i\npCHL5G2ZCnjKLWbhzoIOkIWZ2E/ptnsweeW/kRgYWbyleVOF/TJW9PRH24La\n+2kcsF332K5kndyicged3+8YxGhMXqH2vwFnjqcS+xryxxmtuqSQwS8pOTu6\npQtZNv5rHcMd5tXYjBfoUiIddYXsh1qM0C8XyFa9qNlt1bHCY4iSYt8NXfm+\ninWA174YCXpIx743/PkJPPfz/LnWkI/P8d40vK2LMDmXJLEm/xuvyADvokp/\nzqahzhNf2kBFyPN99RTmRjD8xkslZQWPFOUfnfh4pjABo8HfB3EtDH/VWW0v\n3Mo1\r\n=XT06\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"776ec8815215499686a6c5d2a13543285c30a7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.004c9d392.0","@material/base":"8.0.0-canary.004c9d392.0","@material/shape":"8.0.0-canary.004c9d392.0","@material/theme":"8.0.0-canary.004c9d392.0","@material/floating-label":"8.0.0-canary.004c9d392.0","@material/feature-targeting":"8.0.0-canary.004c9d392.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.004c9d392.0_1592953000366_0.1440396685382983","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/notched-outline","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.03bde00f5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"831b1a988fe99f75be8e1cb8c37590d48549845b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.03bde00f5.0.tgz","fileCount":34,"integrity":"sha512-UHPUI5oZafdYhl3YfYTFU6i1747UcfgnT6mymp4BXDaJrXW1LmK5F2PXB3Q0wNWt/1LwgChZrOoViH7Ptapb1w==","signatures":[{"sig":"MEUCIQCgx5kFN7NqOGKZV6GU4JLEM+/T0pqZ4mZExdUNzQW8NQIgZMTyuREDTr3naVA9ncQdAEont7AD4j5mxnuKo5gkOME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p8aCRA9TVsSAnZWagAAvlMP/jGTvW0A1gnSJJ/ctdmx\nfn3MGbSTYry6hyJgYti7PX4BNRmUnthqpUP9nzyuBmLvI0iHb1qU+oDLknvr\nmsIjBjl43h8eya10drumzRbmaOfJfYSSh7LnCDoGkM/gTLLIHiRkmB3OzG3k\nB14AW1jmx4nMD2zlp5Kj4nLwy0MFnx6uk0N85NkgasywbDL65+pgvxVYE8Qx\nomskaYqQ9slgDj0VB0rQ1jQywuMigv/ZF5jtxk8SKazBEB3HOKtIXfU+oaoQ\nAzOZcuj+OExAsNB1BCnSJspWoo6FyH9XjylgJFGGdPcH/+0/erR4oNyJ4qYB\nnKJ/aDQs5Iq5xIDJDvKFGrJrrAkcyazaelIFquvbWwQxhbBCxHLsxugWbhJW\nZX7R5B2qrXAtKi6+pDkqv6g89NwV4PoHhj9uOpLOtZCkK6TEg8yclPnrH6Z5\nm6qEC6WK9XijS8a+Ub43gAIUPi02MQpHL+QApeq16TtRoarGTuvQ8zz2Rthe\n4RYzmTUnAuXqMWZ3BfhYTi4PfXtQZ0BqmrPNAlv4dcXKQdKHYgoMpwokeV4e\nemAaGa8TN5ZiGzy61VIvtQ7uzlSmMZZk/Xq8R5UqGari4YXAEHme9mk6O8Fr\nZ/3axvz6Zxf+kXtqD3z8IxMTY0sFGhRwy9YSNlPwZmQGWOMQKBSUrn61Jpcs\nlmWx\r\n=xND1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c3937a4069800a251640cebe987bd7911de089aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.03bde00f5.0","@material/base":"8.0.0-canary.03bde00f5.0","@material/shape":"8.0.0-canary.03bde00f5.0","@material/theme":"8.0.0-canary.03bde00f5.0","@material/floating-label":"8.0.0-canary.03bde00f5.0","@material/feature-targeting":"8.0.0-canary.03bde00f5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.03bde00f5.0_1592958745885_0.39361175672589077","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/notched-outline","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.599b8c319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b019c1bb122916393a16aa8f9622fd8205142efb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.599b8c319.0.tgz","fileCount":34,"integrity":"sha512-c0BQHBIrFLaWt4ppPxDgIAJPuVlMmEZsmKmLiH6Rl6Rw5wjXpDTYFT/BCj9Hp5we92jlv/cFeQ7uXaRv1JbJTg==","signatures":[{"sig":"MEUCIQCT3Eh374tzcUw75r454i+WqUtUS5MBv+/I1tyu2HqYugIgSgbuEthYk1bTA2Q0lS0+qZn4y5cL6O1AuVbZ1vRXECI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82njCRA9TVsSAnZWagAARykP/1WPic8zm7LFw/cA9mdi\nKH8v1vTcNOnkPLitFgFng2zqA6h9T5rlvDLKwBYrM5mtu2DmGczaokvnDhHq\n/fpFOdfvLQgckBSIKmvHnDtYi89KdnfhT7vtzMJeFrt93/jrGVGShNf2IwbJ\nZr02WnPc8Y7GokhWkweGkbrxv89MZP3cTS0WuBQgESQ6J67kXtUgmxmrf3DS\nxB+0GN/wVQrDMSSB5XpB+BAm0sJ/9uXyDq/dJeMai07/f3amoPjKCooNAt9Q\nE48L6+wsNv22aimHP8BQTT/USyoOz8bYqQTrIygr/1UdM2svy0yt7sBXJleK\n63Wf2e6ypMPBay2s2giB9wp9zIJcSBEYkyj+MkW6AYyufDrEECuUAFxci302\nWRfFE+SIVaC0BwCtAtopVMHt85us/hew2vKyHEWOS7o6y/DlYB5+ZgTAcwID\nrFMBdbu21+8YD1BY0L6RYO72uuWtRM9DOUys6IhI8N5A+egerULLlzlu1cNz\nfMZcCHZ6+F3sjSOfyaAfpGAjdfMiSBnZhhB1y66GTFiot4t9rQyL+nqnHD7a\nUfq6bkPKsxuxRRYaDYZAs6NFMkM4Mm5HFr2qK/YSOARd83O7DEgnK3Puuh5e\nYs3/SL6irXxdxttPT9bih+7NkvRv7bi751+/2byCXWuS0aOuNPUWnuU0+oMp\nLS7W\r\n=8d5I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dc6dee1190cd8d60caae49aba599e9d7072433e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.599b8c319.0","@material/base":"8.0.0-canary.599b8c319.0","@material/shape":"8.0.0-canary.599b8c319.0","@material/theme":"8.0.0-canary.599b8c319.0","@material/floating-label":"8.0.0-canary.599b8c319.0","@material/feature-targeting":"8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.599b8c319.0_1593010659244_0.6742727164259601","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/notched-outline","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.87e3be418.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa07040868df3aab22ee13a327c0a2dcf115808f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.87e3be418.0.tgz","fileCount":34,"integrity":"sha512-nlFuk3SapBblWvclTlxHroAerAXZ/khDWYuLA30BnWaMJpC6b/WSlfo45QDtlcHZKXQUiq4h/9Qrj3M67yrU9w==","signatures":[{"sig":"MEUCIQDu5okLuLs838ZZ9lUg6p8oBSHjF2kTRPOTpvp/v/9CdgIgMKFtY0hqSI5KsEjzKrx5dvQUkm6BCx69x1Eit1AbR8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85M8CRA9TVsSAnZWagAABe0P/jQXe36WLuzdtxjAIP7q\nQAf6TbC1y1NCFNlQhJ4dIPYgDaBzYpyupmKtBEVrEakyBR30DrvINO502il2\nM+a9rMIDxEfzQ8o/TnNMqZ+/LmA7bRDgrWaahhPhQh3fxlO08FS59fKbbEpy\nKTYp1RfVWkYvKUL9fMpzuQSvkkJ1qKYCPByx4lgTKZ+RsRE0WNMfGUFqNLDK\nUv99OhUXroyFNh+vQWzxGhq4U3W0MUDqPrALdt+9haXWLlq1Gy5+gF742ciN\nPERXWdc5cHdrAvadRQRTPYVnWoDP7N+MykBGBbhrZQZGVH+dthS5y3+U1hiP\nE+kadWxXq9P26Uvvl3CPuqVY2VyTlZo49tNO0yd0ptgB/Aej+/kwd+ZUPQIv\nxi3lCVSgK7ob7Rg/A46rbqISl03dgBp+f+8Lb1X9dasbSUpRnkN8fNNObVNE\n2YE5HIBKjko7C4VaA0hFJGyy1mh1MrgaA3T7EDAXl9FMJ9KCOeYkVSanLYpP\nANf9QKHBFdSkUPvr7XHxzyGWCnWCf4Nx8Sb9TQy26vl7Em+03bkY5qYEvsC+\nVN+nNBrB0vL4oO8tRh0ShYbwBDRMKjBH7uVx1lknpWnJuuCW2b4EYGjMsJNb\nAU83JAwYUUFFTlpkULcvH2noVYRQT5Aj1dQUyALSJBPOxl4oHJvOdSDkYqvT\nc4po\r\n=/KCE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4f20e6e641b48a8ec7f7916b83272bb1322a3663","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.87e3be418.0","@material/base":"8.0.0-canary.87e3be418.0","@material/shape":"8.0.0-canary.87e3be418.0","@material/theme":"8.0.0-canary.87e3be418.0","@material/floating-label":"8.0.0-canary.87e3be418.0","@material/feature-targeting":"8.0.0-canary.87e3be418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.87e3be418.0_1593021243650_0.12081055449600697","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/notched-outline","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.035cf2a6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fc54be13e937f47dcb8aecac21a829f07bf001b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.035cf2a6f.0.tgz","fileCount":34,"integrity":"sha512-bPfXACn2avEjc5/RsJlyj1auM8jfoiSFHn7H+OFDC9T9sHiSL/AoRfnLnw/jlKu1FPnqQQMjyQMdfYK5g9XSrQ==","signatures":[{"sig":"MEUCIQDJUB2ptHgdggFBMVvXZwR+50PfE6NbOKb+xohNnZQ49gIgLWJvKsu/8xaPV1tUk0KwucRDHqLe3EOsFkEto3bNacw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe853dCRA9TVsSAnZWagAAQDoP/ju1D5A9xMwezhos6tJW\nohax5XI9KRk9sSBLukvaFr3RvzyzFJsphYMQEFbIpblJ1MgL+DhVGa59HURc\nR5y8g55PR9OgZ6bQMZbtvYiy45J2mMfaTTT+axaWT3ReaxMPQF01w+vfH9YO\nophhoDHIfxI1sq36CpxQX9kOSavMNK7yg+2uvz9mRRa2ANGyEjZ1fVBs23ha\nhR0XqkLuuU9PQ9+L/l4+2aey7AJbhxlGahDfKhUzt19fSvQjfxvXitKmo2R3\n4+P527NrMzYwaF7jNzwh7T8r/bgH4qnVvD97SskDKfPTUgBizKgjqnBnC6kL\neJIFhioktWSMValndJiPqKv2ytkbtxQHrZ/ilAWcME2tl/4VPKBbVmIp+HyC\n5oF7YyUMVeZXEGJF8jJdo+pClfNIkddkl3odQiy+K981m7qETo0DxzSQotBC\nRM5yhh3KEPpvlr7LNMT83Bdd0jgp0vaX1bpluL9AKeghObEvmsoUU16GVhlH\ny5eS4mjAFPmgj+ugJJZTQsQ8rXkdOGcNggGWXHNwmcxyRmbVzNM17JSocCau\n2IY7lp5ybT+4kuDdaHxZGRJjbbrGLZBNp/Zr77P/3f3+B/2pE0QQ5/5CeGd2\nZO+fvIllElk62ls4jIyylwI9LBhGgS/dlmf70grYFT8XhkJGyFlV/StzWoMW\nZoTg\r\n=ro0n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b41149a9f9767b120dac2367ee34f615761dcf3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.035cf2a6f.0","@material/base":"8.0.0-canary.035cf2a6f.0","@material/shape":"8.0.0-canary.035cf2a6f.0","@material/theme":"8.0.0-canary.035cf2a6f.0","@material/floating-label":"8.0.0-canary.035cf2a6f.0","@material/feature-targeting":"8.0.0-canary.035cf2a6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.035cf2a6f.0_1593023965113_0.5010338415914255","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/notched-outline","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.2fed2c12f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8300a0dc6ad76c21175c678577ffd021dcc11347","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.2fed2c12f.0.tgz","fileCount":34,"integrity":"sha512-1XmUWYMctp3m5kr5ypO39QOTwyHM0IL7l0/iq2ZYneFN4m9E4V3HkuwonHIVeRFGkM1sipFkU6IYU8Wpup2+CA==","signatures":[{"sig":"MEYCIQDBBCl5M0fVFRHPk2cDwfdiCwl0CkilNtHlbFUwEwdlBAIhAKfzl9TmuRiewHG5ktwN1F4ZeQOaT3RB/pUOLouYr1KY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QLXCRA9TVsSAnZWagAA9Y0P/1aCoG8FNoecjjioMraO\n8LrXF42ztYbSUWMDMN3gTAm5IzDpaG25ZQ0pg9s1p27oswN8q8X9LJ/rr+lr\nLbfUrTEI3cVPvXC0+ouI5Mzw5tWqMZyG/vz/ENwS7HfYmSTTY9WK5mtKg7yY\nTRXths5x/BaHZClsaYvZB6RQ/5IFnVy16HWKLK6PclNcgZSAdVVhfNJkbwy0\nsNAv9wmJ2jW71s3e0qg7z2kDsmQ9zUB0ILX/lD5LMP3HCks+vOa/LP3wt6gE\neFtJHcavZVbUVp769HIUPGNwChxz94xSpr4MmPHy8jKCpCBBwCgAKnTSjlgz\n4O/zvZDgDLVFWQzn5d4qGYvs+MHWCRKvIaT1ZGzQQrD5Eqset4r8KYvtGlSv\n7tNFOiCwd8fPGQIQ6d+xh+uoECEc9S54eTH53+xu2tYJbYNeZmRF66WHCkVR\nfd7oTgQlSTA+H0ZfAYCsxjHPEyTMspE2gtZcLxikAOC7W5PIjIIcFzp+L2oO\nyOrvnaGnS98IQln+veGl6e3D2apwNdR7g5Gm8YrxIZJVD1yV400zK/IitXdx\nv+XnFXNVS2mAsjwq2RjFPeaoYtDWok9KEHMtR3YHmJVm1jxgzef84/eWfaDJ\nWb/cLTCShNPh85JeGInDDnxhDwcb2JPq8HpAtXn9ynTgOPTew4sxfRQ0Wz2g\nbiGA\r\n=+noA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9c7b4d7bb8c365a3b1a4408204f63c124455f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2fed2c12f.0","@material/base":"8.0.0-canary.2fed2c12f.0","@material/shape":"8.0.0-canary.2fed2c12f.0","@material/theme":"8.0.0-canary.2fed2c12f.0","@material/floating-label":"8.0.0-canary.2fed2c12f.0","@material/feature-targeting":"8.0.0-canary.2fed2c12f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.2fed2c12f.0_1593115351083_0.30590850410578496","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/notched-outline","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.38197b443.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1416ee8c008fb89da64184554a44d2b45ae15463","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.38197b443.0.tgz","fileCount":34,"integrity":"sha512-EDUWLr3/J/RD+OMoWPI5SzS+WJITZs+BdNjhvrtmN6DacO9pLC1i+jdipHfI5gBhU/jS1p6nHdAyslkMBzTjZw==","signatures":[{"sig":"MEQCIGIEBIUsgXyv5nHsGdRoP8ORGtylHXgVcTeollKw6ZVuAiAGE08vT89Nr1FNH/gd2PNTnQLkLW5+hsRToJcErCnIFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RXHCRA9TVsSAnZWagAAZtUP/jqti8zs04Cu4gsfjnvy\nBFZqkC4Z97ID5ggf2+/zojn/SDypgbyBFFB1IMVsyHItJdyIFdDoPG5aHJUo\n+XVnX5DIDnmlpD+TQSb5vu4twwD+41eEzzan7iA73QVMNge6TphzIxHNeAX8\n7Wa6WeNM77V/6+popZPgsJ0w6Lqte4ESvGFFM4I4Qn4KxVxio3/HhiqnUP8V\njU1yk3p8GMRhhFCS40Zp1hPmAlZoXJqkgXXhvBLlYBekbq/YfEgRfZwSN4lt\nnIOstvqLvV+VPQmeA0vdd/l2RaCXkT3/F20pcWrvBFvZ6fyn4Jz60z8q/FRg\nw8YRiEL6zSe8ylUXDlhyXKU+vTFWbmn+8Gq4XhdFeHHkWNKSqv91vfiwHABm\n+TbO7zg8BFwDqZkVsQjVjVA/8Ig7Hz9bybkqcLGUGVBNxWCEaKrByJiVIi7z\ndOMqIjSyXUDaONcMOGihz4Sp7MpkV0EiND+l4kOH1ve5UH1hLN8dCHKPxPww\nqSfjxv6zd98tanZRF51sQau+qMRTD4MSr+52a4uqMRy2trDRtBrUewJTseDx\nt8kg2XJhSCO0fH5MX1ZR0nBfbY+X6hUKd1TCtGhHnJibmv7l8hq8uoDi6hGF\nwAyEtv8tVczUkwdFD8TpseSNtwCKEmxVJtsyfWqoLbK/reLsoBcc3xzIoeke\nNJ3A\r\n=F2s6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d5e18162ee3d69aeff0d489d4f3f73bb1cad7b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.38197b443.0","@material/base":"8.0.0-canary.38197b443.0","@material/shape":"8.0.0-canary.38197b443.0","@material/theme":"8.0.0-canary.38197b443.0","@material/floating-label":"8.0.0-canary.38197b443.0","@material/feature-targeting":"8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.38197b443.0_1593120199353_0.33608304385383647","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/notched-outline","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.69a35e80c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a43a50553c4e2cd853372ad8bdaa7e62ef4e026","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.69a35e80c.0.tgz","fileCount":34,"integrity":"sha512-yaWuGOjH5oMVllMT2m0RMgMDNGfBfWUMWUDB7C844wP56UJhAvzy2R/yqOhSBooUqK18qpggkvuZDxACx0H6OQ==","signatures":[{"sig":"MEYCIQDtf4odThDidW6Os1JF0mCFBRzwGqXVKLDQ6kgexDCg8QIhALFLMX+rIoOH+xyZL4wLHwrzberQeBbFIJtZlzxI5Yzi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jLUCRA9TVsSAnZWagAAIT4P/35nr5fy3oY3TmnLqfk1\n5Sej0xDteieAc871fPC8PsWjwWSJeHX1zidJxUKvkb00VWbqO/XmsEWQx1nJ\ncaaCqFIdhbToeY+8ZcB5hez7NUXQgJR6o74N+L0I71Qt7iU6iaMDAgaTPpLw\ncXp9GWpIb+aDSg74jViZS1BAJ5300OvmUB78JoHsGv36CUG4yHjS0P8jO+lU\nu0W4lvxmELCTULCBZyPDNTcsZ4rWueqhQ3K3ep0NaruPvEoKYgj38pyMNX+/\nsD9mc8CkobxGO8aSJNpLXseitSr0MzWS9eZTUyUXtFqjwsPZ0cRI7I3/KJSX\nc0wd6XlSIn/L10FH/g3dLNvrIlUQcZ/gObUixxpM1VlkFEHf7T7sJKQaabDe\nrxC4JOB5GcH0OmbyA9ZEBYfO2QryNy4yofBnfJjIa1NIv6n4Fyu8ft4qOPAJ\nwiA/wMiHvY03idjH2SAuXwwIPw6V15xz0B9jYmyAtbE8yT+OAiNeZrjKoUs5\nWPfwMtRMRlpsZ5VA/zEagsOpiGTYlWLqS0jJYwH/qrL6FfWMNxzdt4wnpwRc\nM+/CETCGBWa1YVUmj7sdMYLtcird+QnaWXEb4DrNERc4IOAD4TnGmVd5ZCRw\naPrC1woMpIomTbDDoLGDfA3KOLM+Iek88FPJMJAcX0ZXqkGpQcOZ57KXxEMc\nRfv2\r\n=OLjh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"35bab77d7ad4b820da5ee4944c2cc2b7fe1533ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.69a35e80c.0","@material/base":"8.0.0-canary.69a35e80c.0","@material/shape":"8.0.0-canary.69a35e80c.0","@material/theme":"8.0.0-canary.69a35e80c.0","@material/floating-label":"8.0.0-canary.69a35e80c.0","@material/feature-targeting":"8.0.0-canary.69a35e80c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.69a35e80c.0_1593193171855_0.35389353130839685","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/notched-outline","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.df7154fb3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1d18474b3f05fd66982b39eecaa62e5e65d9975","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.df7154fb3.0.tgz","fileCount":34,"integrity":"sha512-OfDZAxOPF7YVN9SKCEQP6Ky3G4xow9ia6jg9Jp6j4Cu7JFdvMn9tmPYFq9JpnvEMLIZfCZeqXVuToip9OrWxOw==","signatures":[{"sig":"MEYCIQCaw4NEB523ZB00sr7/70ZrthIVklbf9cP/lpX92tRm+AIhAPGJMwCQPvDRBq+27+5Lalo7GseYgoqx/l2lZTaHE88H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9ju9CRA9TVsSAnZWagAAuQYP/2dkKBJoJmi9hpOlqVQu\nkJHgda3NkayIcXmW4BOZ4cKzHpUaKP8mEKiAx2HAztBdmLo2utALt0Kihudh\nPjT5Den1mHnPkqFvEfhRJ5d6CxH/q8d55nABT8JJqimrn6rQkYZ62M201oyn\n6U6GQd7JCLxSD7CFQegIlc0kS9cU7/Eq1ZhoRbvTYtSY7e5QwWZQOR9NorMX\nA0Kqo6v4ZYhVEDq3/ZdnO8jlQjTJK5a9MZu9jskZmuuh4FOcC0wAl8ElPzKa\nuAPqsvFQRQv+CuzQ0vGLucNOuJOrxY0b36IVY/eChZ0J8nDhJWtNUFz+epsR\nNHlsrLl8KW7lvs08jWOsAzgdDANcu+ttHx29Lb9kpGWYhxPwvy2HdN+aJo07\n5YoK/oIMG7djbLCi7C/gF2lUZJ/DgHt1iIrElU0QXalIy794yPV4uKHmIul4\nWTU9R8cS+L9naEHDQk3Xx4Dok/b5m4uEvOyXXuLMgmdcCiyaR6GUX9+R1wyM\nuUgxuVpdJ4qrXzX02U123A0J+Yk6vMkQUTR97a2wiNz3DwkhY1lvmu6IuYg2\n2wsxvYa7aNnV/xvuLMKHxaDraJAgqgCZaR+fFzaiADp6vMMIV7z69550uCsB\nvLmNGacc4eQsQpKKPD9r/cTwV9IYXbAVh9btxeV9iCm5jHxhZ9s6rqQxFpDL\np+D/\r\n=5Q8H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9081758d517c13eb6f120c62abd9689f1fa99906","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.df7154fb3.0","@material/base":"8.0.0-canary.df7154fb3.0","@material/shape":"8.0.0-canary.df7154fb3.0","@material/theme":"8.0.0-canary.df7154fb3.0","@material/floating-label":"8.0.0-canary.df7154fb3.0","@material/feature-targeting":"8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.df7154fb3.0_1593195453080_0.31080597224446804","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/notched-outline","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.d5618602a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b396f58607a14e27ec705d7ae0a395ba519edd68","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.d5618602a.0.tgz","fileCount":34,"integrity":"sha512-fojZqOMgwrW4w9pUashVJGdGBwIBt0bPBFIWqdC0iHS3E8vcd9Hmd88aUHm4/SdhsmOeozmNfJkXIbfxbF+zqw==","signatures":[{"sig":"MEQCIG167ppdPQmw0Ffcad9+ITJIjBJCbrDX+yhwedZV5EQTAiBwuq7cS0pI9rMrCl2KrS58fG01ouk6kM/uIxEvs73CKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m1MCRA9TVsSAnZWagAAatoP/0V1ySewwQmxtG09MsBc\nMYVkTvnlxWK5dROAPuQMIptWsiuDXd/oxxyhdDjQMAaS+12vDGjs6P+59B2C\nl9YP/O9yqlASfVaPq65qok5ambUGL92/Ul/AEqskOfQoDXDFF7cHpYKU739s\nrvwHc4dnn3Lzr0fBAQsL3Ajb0+8r/s2fVWntv9zV8jIoDdzWJLukEBLZ9Bty\nnwR7eTUAybU22lvwBRmayB69PPVkry2LjxTPQImIifJrYxFGesEnDlzTb9Qs\ndajua6ueFirdbiK+C7slbeX+KktEUxjirVrovASuE6scVewBH7Z2/1rUeJi/\nJXTDB9sCc7bCxX1tk6LP/fugnr9ASm8B3rrCOIXI12F38ly+ODi0Eel+5GFy\nmUq7q+ZQHyPTwKVPDLyBE7IkB6iMd67elJ8hlvNqgC9KBl0QoaisF/J+ydI3\nkrdZ6cHIMKTAKLt3bBPvlWcIc4xKBtCQXzC8x5KmkftPYOInTwX2NisUKGNa\nwgUh6NPUVePnCOWAF4hgTKuPTyTzL8Cg5qprM/GfhBPkMFnVsGLI4JOXkEJs\nt+d7SECkXk1Bffo92OIhoxqT/bv2qdMri5+d/R2K/P6HRYjSKiUL8lCZbhIT\nYmT0bTrOPsnKG17kJ3sjA5C//gv8DWeGjP345ipFdoArfwZlicV0SDi8CdVY\njC3A\r\n=BlsI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ced8c184e8043c7ac8faa813b76b9661cbe247c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d5618602a.0","@material/base":"8.0.0-canary.d5618602a.0","@material/shape":"8.0.0-canary.d5618602a.0","@material/theme":"8.0.0-canary.d5618602a.0","@material/floating-label":"8.0.0-canary.d5618602a.0","@material/feature-targeting":"8.0.0-canary.d5618602a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.d5618602a.0_1593208139918_0.8047990260714386","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/notched-outline","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.e590b376b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cc2fd7b2b57d76b424dc49de999a4c43beaa378","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.e590b376b.0.tgz","fileCount":34,"integrity":"sha512-yuVMrKJr8MkUA2B5GmXMqWfcMamoEhCD4x5bb8iUEUmBSS0XRaWR4FSjkBpnfqxJeRiHhxKoMNrSH7bG3quR7w==","signatures":[{"sig":"MEUCIBhjVVzM+6UQnlGbPl2g7rwoyvGp/jsYR9S5tjVHK0TjAiEA+7kKctVsqY65FEgaR7LTq+2dLamX4HxGKGLhr6dTSJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oOoCRA9TVsSAnZWagAAN4EP/0nW+54izXrzT6jldJbm\nPx9XK2BOt3aq+rzYAFKg70mthSTLUCC4sGJOWSlD45k5oV7F0nHW+iAEoZy2\nZmlOofmw7KCJmSatNA2cRW61vgevGHHPhZquXbkcFBazgll9DliKbGe0OIVB\nzZnHzDvqugEu4abdMSTIBjrKfaZI9N/Sphw3GkEAul21KbHXH0jO89ilRYBL\nGjOh3qUqRGBiTvT0BxTU8l9JiuUDJHIAdejv+hSJjsGt6JXuolGBt+tmGPh3\nLNdYPwKSUaWiQxJCoA7sMCT31kr3zuEch9DlQvdpzKGUNqvUoJUh7UAJNHFE\nrhHj0yGVCzx+PuDbOIEmt9QvHun1F0pBWE9mVdifLfWhJEzTM/Fl6+m1bAnE\n/YNXjP+2SmkSqU0/MHb3rM7q1xKcUU39i49Y8LYrJG+LsCG78OAzT46vuKWM\n6hqYcCk7/LLP3bZVr+5ApBnPGNaR6G3FqAxKPeI3LbiIu0rG9nClZofiddvH\nq1dkydvVkmgaEuq9qFrWe9NLGC1Wgr6Vw0801wqESkjikHQY9CSrmt7uOAi7\nnFIJi6j7Q/vwq2AV2ID7EtYZrpbhSVvE3iIvt2c6QL5t5zUmKIfDWlz4jk/U\nIGdLAUrJBunyPzsQPvqd+PcmilFrCM6BluGQjqG1gDh8ofD+1KaB6muBgy4i\npGYc\r\n=03Bv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0ddfb390b804034a98ec0b8e7741dd3f3250b5ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e590b376b.0","@material/base":"8.0.0-canary.e590b376b.0","@material/shape":"8.0.0-canary.e590b376b.0","@material/theme":"8.0.0-canary.e590b376b.0","@material/floating-label":"8.0.0-canary.e590b376b.0","@material/feature-targeting":"8.0.0-canary.e590b376b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.e590b376b.0_1593213863618_0.47962220146455525","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/notched-outline","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.0c9d6bd2d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d67e5d18db40b5b13824558c7133e4460ab3a518","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":34,"integrity":"sha512-goWaRhHQFnqCO3DQqoUlmEtUbzQrBVDynciHt/fp+3eTxfykSSgQYnETnQnZbe7Fycu6Bl9F+K8pt1CX8KYGoQ==","signatures":[{"sig":"MEYCIQCvWzKRftXvdPFKCtlxGjUQl2kwyeHGHGNKR+j4euqfNgIhAO7RItG/oBlzdXKeQnQkqIpfxE3uyLEnuUOpPKsNoZva","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iHVCRA9TVsSAnZWagAA1mYP/23PZPFaeV65fML/StFw\nm68wpq9e2DPiiUtcgzuvrQUw4iRykn1g4yq2VV2du4lMcXzkXVafDatlQqeX\nnYcE8ceww+BMMhZS1BxnZ0JryHVUuxOD3ycQtP9o5tVrEzPcMpzzandiCrhG\n3wd4tbWlUudWtMGU/538gpWiourLb0X4KFUWyfpYOA8WZAGKyjKxFBAErHMI\n7pt4fXVkGjgTy5vm3OWPa79Fwa5giStO17T5ky/RFzovHrL5x9CGl4D5sLuS\nx7hyILv2I1owOXx7J+DCa5UeLtHUVDQo8lxEc078CdT5lDYPkxmgcwwtxL40\nxRI+JCpky+HzluKkm7Rf681ZOZKo0sP3UIwb5eSiu/oBOyMKHpKfSK/Lb1Kw\nFfQYF4usxCismoGupDZdLyLeo1o52nRFw9nYCEdFMjM3TrQ0bGhNQwBHh5h6\nEeGmYp3vOE04H5iBWADVHkIwt66f3RcE8JOnCx+VEkg8zPKCPLfe5Zn8aocZ\np8dJv3z2j92J/OtxnkHR75lqCAPN7iblG8eScFPAWSRulPpJJy0tcvJN7Z+X\niYklJnORP3itc7kqXEyJXWCQ42gGZQf2mPA1X+uN6mViaUbF/n5PJnCxx3B1\nrahtMWdFVTqafYpTfUxbcUVTCuY5vpSwmLlcmFWQ40uXs0EAzJe3cfEmssks\n+LJB\r\n=l1Vg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4f171433da859f637823aa04bc12d72783771f90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.0c9d6bd2d.0","@material/base":"8.0.0-canary.0c9d6bd2d.0","@material/shape":"8.0.0-canary.0c9d6bd2d.0","@material/theme":"8.0.0-canary.0c9d6bd2d.0","@material/floating-label":"8.0.0-canary.0c9d6bd2d.0","@material/feature-targeting":"8.0.0-canary.0c9d6bd2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.0c9d6bd2d.0_1593450965129_0.5921936300061288","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/notched-outline","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.c1fec4246.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2095d73206edd472ad8d7cc6c214565849b5dbef","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.c1fec4246.0.tgz","fileCount":34,"integrity":"sha512-Vs4jV9Zu2zcrDrmUQaBGHgS58jN6b4+s4ASWfczF+leVP2TwAxxUesLltNtZiyUfZh3Dyrhr4NtVPlAMD1GoRQ==","signatures":[{"sig":"MEQCIAmH2JCld2+SEr3OvWVBeKeulzBrCs/ryJ/A8t1rh0WyAiAXz3BO3ArM7W5HtQQjM93bkpLPyJY8xwVetcqAKKNPow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iV3CRA9TVsSAnZWagAAnzsP/1+BoP8Gk1UUPr9dJdis\n2wxuvJlt+q8YRtvUg/LpT2Asi8g7hb9xlU1oM/yfDf9Qv57DVsC7hbZH3Ds2\nbB2NkRxy55wN1W8QxZ8wK+ED85hZ7XWuaimgoh96t8U8XpKpD8XeiI0PZaOW\nTRWsomVdwDhmP4nVllHFwJ6kB/q/j8x8f/gPfn9TgNeNw53sBC+/b86gsMPo\nXmJGChlNu/yLEfMsL/W5uJt3V9MKod4ve7qsb/5NRJrYtprDpUqJbmCgrO9p\nPXUdNwJ3j8QxzQrNjZlYu2qC6apXQO4L4Uy2VHVLnuxFR7QXg7RB7tTUUayV\nx0tLgC+Hb0ukHlg/uaBoyHbolcPdLa2dVjaFcYXdVu+E5aYWj114jdPVURBB\nc+v42ThndVbzVmJKl94eRVI/kWd+qgy2g2xE3jDVbw8DLMliFCBcAwZ4pY+O\ni/KTb4s27dnp3JQe3eoD2rWKtkazeFWk058HPjU4A972AvTuJxrp6Bwe2+1l\naBsbBN6mxW8Ta/ArWAV+qqEGGpuciqv8U6lfnJjpTt4jKlmsm/rp0OcTU0Ey\nARMJqHNmo9BZl2+GP+/wMIOvVncAjrxElPa6IXRxS74hw/lfvO67oA/r0R7J\nQS8F3U01E9h8yrix/ETav9X+2Xa8qYNbTCJhmu1mh+NTJ2s0VgXxQXn4RfJF\n9v6B\r\n=9/7I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0a588e37208b314f42e946ab4add50d0ad1ebf7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c1fec4246.0","@material/base":"8.0.0-canary.c1fec4246.0","@material/shape":"8.0.0-canary.c1fec4246.0","@material/theme":"8.0.0-canary.c1fec4246.0","@material/floating-label":"8.0.0-canary.c1fec4246.0","@material/feature-targeting":"8.0.0-canary.c1fec4246.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.c1fec4246.0_1593451894801_0.1552662493820245","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/notched-outline","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.c678a9d34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6adf2b44c756afb2a940613cbbe36a28c77d2693","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.c678a9d34.0.tgz","fileCount":34,"integrity":"sha512-g3AdqX5ndHGbkKjbuGpssE9HQdZqei6J0ugj3FfKrg9IEZnkmV91oq+fPyJFSpPqaxrM9ZMQlutBy/HMd5UoaA==","signatures":[{"sig":"MEQCIDL/Kzfac57IU/tOu2Kni2BnsT4oQ0z5kgQmTRbriFe8AiAuf1YybTiy21ey1yAAOWfHiX9AnwNjtJ8lwI7I9vD6sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+ip5CRA9TVsSAnZWagAAbjwP/3VVcm118s1AdFbkYZyF\nUDZgXb9TmEJLZhcKzdJu8u10XEqAjtgSoqi81coUjIK0b9wNaTxyeTBifI5M\nMpvZgLdS52y6CmM/CqJSqqG7KpV2zUdk2iAKYAaiFas7UoynxylXms85E8N/\nNodEegdXWPZvdJmwNGtPp3ppeuEuO1tECMwW99c892+3Xim/W67EvgtjMnJL\naVAsJ77xbvmjNJyiX/zV72AD98DE1cEWJa7+JJwR4rEM3XYwGhfdfXu1t4gn\nkj2XfIInHC2RaiBc/eiuK0YBs9Rq3Xn1s6y9VqySif0Va5hW+E7fV5EkevMs\nBPrT+c4VwPoWWIFWMRAWQX+wDCIUTv1AD0iPyjlrzJ2qI0wYbae86kNwpzXi\nBhg4VObSYQWou6XJ0njrr++5AuM/v+2tB/v3zS87FIK5fr3J848TW3r823qK\nFZDOYb4a9KFM8bpXw7aK4NBHAZJwnNJ7KlvoryoNcTTXXKa5Sjyi4edusQbO\nj5wYJH5NrIJ/GmFYDaXW+tE0yOhOA3Dz/MSJ8G8AdPaI981FhNI9PAYC3ppX\nQri1C9qNJUYBilKob3b15EthAHyj34JKu1HdXDtEuEHapWxYDJEcGTpGKFHj\nsv7fwQ0pAIQ8tOVZIdV6m+FPT1tgiAt3kcQOEU4xUSTFjk5+QRE356Sq8/LO\niqgb\r\n=ADW9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bc361f7c6bcb498f3a6dbbe6255c06a66b7dea5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c678a9d34.0","@material/base":"8.0.0-canary.c678a9d34.0","@material/shape":"8.0.0-canary.c678a9d34.0","@material/theme":"8.0.0-canary.c678a9d34.0","@material/floating-label":"8.0.0-canary.c678a9d34.0","@material/feature-targeting":"8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.c678a9d34.0_1593453176860_0.45020587782005084","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/notched-outline","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.521afaf6e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae4587c50c0026078d5cab8582da89e927498a4f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.521afaf6e.0.tgz","fileCount":34,"integrity":"sha512-TtsC3wlUAj3YACp075HmdBRFKT84B9o/0RUIW+L2wa+xbrjzn7bJvy8EA0vCWwbZGkgMTS3HvHiWQ0EoKOMBPA==","signatures":[{"sig":"MEUCIChI0IwHxd/o26UO6wZeS6h6/OuyuAz1RhMIN+oCJK0YAiEA4nhsj3p4PyXvFcqCHSrEsoPsOH7q5YzeRV9e4WQnHjY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1T3CRA9TVsSAnZWagAA6wYP/jClfkYpoxxs8UMkvsdq\n6uFQW6aK0kMaDX/tV5cOwHesJQLyxVIATqRmL/dGryH+DZDIWDQ7nqZcCben\nof+vtTJttQLVN8Sh7RqKBpJzYipw4zK4A+dNuKfZYlstcGtSaL/6lcOlWEz+\nE142arjAys9LD58pZTbK4kmr4T6drSZySym2+z0MGKBuyQNCdGdTbMrvLs3t\nYlTWoarcxLqtTmoESxZha6NWlnxKjuO7vjYzMCGJkH7W3PKGyB47lY51HwXC\n+kACEIcsSopdDYwQxFlL/yu9Lz5fAInQt8by1SuGn20VRxPqjmxZkFMzVl9d\n0NUO6Z8dPKtK5ZpNuaujFCLWgNV/WbfaVD0GPzxoN1LPiQEaPCEB/Hm/auyZ\ntdGbia7KWxgiac5+TTifxt0ptAgQWDyXyiZMCT6Z1rKmv7Bb2946j0vCGRUo\ngWNz38o1VQBoIOD30ifWA8eskQM4TUcdQkGPj2mD692DEljhOLPiv6x7oZWF\nmT8vP0v7kIgATb2pZKYfCSABqCKx9srKncHt1P0itRN4d9PmEwYVIBfUEty9\niTE4prUI0Z/qnJgJHJbOQM3eVo9lnko76lwEEqrXlYSwC3N7kpauHFyZdWTj\ngUPOheQgq/sxH9+JTmL3hr07WMPowP040pteyHeCbDPdlZ6ilYcxYvf+EYn8\nodAo\r\n=GlM9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7ef14e207a6031cf299541a4dd72c2eafba3ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.521afaf6e.0","@material/base":"8.0.0-canary.521afaf6e.0","@material/shape":"8.0.0-canary.521afaf6e.0","@material/theme":"8.0.0-canary.521afaf6e.0","@material/floating-label":"8.0.0-canary.521afaf6e.0","@material/feature-targeting":"8.0.0-canary.521afaf6e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.521afaf6e.0_1593529591215_0.6476400671848113","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/notched-outline","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.a2ad48839.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eeb6559a0f2faf0a099fc0b5c8e5af65e56dd252","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.a2ad48839.0.tgz","fileCount":34,"integrity":"sha512-i7gateRl5d9XDLILhkbcTnf8jkYcRMrNxF2Zg1SCPrjZhk3i9AMW1Io+p4Ej+BNDF3Tpm+fYfJFfRHZ2hMD5cg==","signatures":[{"sig":"MEUCIA1i/WfE18cCP6vjV+gWrrop6Wl7ZHK8z0xGKQB9PpfrAiEA6DZYI7KyqBS6BF2gItgaev45vUFXoR7LoCGfYY4BPvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+49JCRA9TVsSAnZWagAAmIEP/1U3hdfhGn0X5QWERfE7\nRHgELizfJYCd+XJphRndHzZBwvRpFkhnjrn5B0C0E77o6lB3kv3nIlHIopqf\nwMCO78fns+/zPm1gcC/BdkSLMncy+uOMSHvq7WJxPuLLJPZ5ez5d+IdgJsC5\n9c8TfT7v/rolMzHKzJ0IV4O/K8LbLYKU3SG8yCB2gfiRyrZlTsg8+1OiW28N\n7Ltzgdyc3tEbvHwDBgijMvzeFsGKBc+EQbyO9X7QslFpspg1PPvoUssDs+du\nkHo6/u2mLNApAd4wJ4jvBbCXdkXzntBJUl1mw2YP3h+C0yTnc3PdLXPGzgHq\neQN6hxRSuvFAwgXUwUdIKqS4Kcl8uShQXjSulcYEE3EpYQI1QDPkrb6jRkcr\nu1MdAgAs9+h9/uW9sVTKvwVB/hJ+WrMHJh4ID2JD90lbc/OFdZKPDiRwkmD5\nCNkfrDP1C4TIPi+quF8K7wWKpU+Mk95Eb5aXue7GE+nFLZhBGnsDMMm7/Ecq\n8EcTLGkn5OfLHOpCFXKld2R3N8q7Zk1OZOLhBeWc8SZup6v48DIAzQ/vl5Mu\nvVEej3RSAN65FSkVvV4dxJ8eTvOGn0et3bnjtKkaJCvxuaTDu+EFVco7jlgb\nv3DiS6bNa78y2Ht0dKLSlBJlv3zuRv+ZFxpx8zzlWq/p4xcbd1MmLJy2GvGP\nfyrQ\r\n=fU9j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f7f949a98e604fd4cce2507e8d63c145d2f34e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a2ad48839.0","@material/base":"8.0.0-canary.a2ad48839.0","@material/shape":"8.0.0-canary.a2ad48839.0","@material/theme":"8.0.0-canary.a2ad48839.0","@material/floating-label":"8.0.0-canary.a2ad48839.0","@material/feature-targeting":"8.0.0-canary.a2ad48839.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.a2ad48839.0_1593544520939_0.7739787628679937","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/notched-outline","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.ec2385881.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"296d4c69731f043cbd20bb2ec8c5d02e4df5aaa1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.ec2385881.0.tgz","fileCount":34,"integrity":"sha512-iPuGmP1pUf46FqZq0fBrvifbDGVmMQQ7ma2U4dq884SrgZkvphhlWjTKcGYPvdMFMZGabn/fRS51ihv/HMDr0Q==","signatures":[{"sig":"MEQCIBXa0H0R6b8sKXGJDWRSBFbNvKPgq2RS/QQFayDf/8dHAiBEJYcDF8JWKd2/I+s+y/h84oobYwI0lkpnsWQnoxWxFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7MNCRA9TVsSAnZWagAA+/sP/1+va5c8WICFWKt6m9kY\n8koLgkA6AWPV5oiqwy0f0X3CkEvw8kbz9sFW9ywUAyGM9DysPb1LFAfx7YKo\ngvkLunN2sWTYe7mvmZ2iZqWfrz2A6H9HRPVQ+iHlaLNbsM8qG8xNOQV3ecdQ\nw5nyEbItMcL3h6n3YgKivum3zaYIozAhu0MQT1Wmp8k9Q/DYr5kXhO6ArWIl\n9qb/YW87o7rd0iqycLiJVfRZFW+SGFsIiwoxfAFW/VvCBYwD9b5lFA9kSv31\nni1eMano/hlngr+IjE38pjLAMqD92AvnsC+aguEDZaxb8Xh8lSivu90xIUwv\n1vq2USLIJpY3Th2O3NaThFu4Zwle1oT+0EWpvBbrpq/O/mnD4dwxEt/v5hen\nVz8+1+KunhDLA9VHn6ojrAWyPEumiuH3teoVlMXLPceMeGUKcHBvuZ8ihxKo\n3KdtFUNgE0zd9aRlV3G/g+cSYDanq6LF4eSMJHt4iGhHeHvg4kZ4hhDnVqRT\nYaEnaW5j5ed5k3LlGW7NO/eJdpS8B9/dar1R2h8oduiJgGKvzsSd4SWpUVwQ\n79nVagYBs/H516clarjqx//FCKZFXzbSRnEV0pIen0Jo/2FQSk9dqDLRzue2\nrBPTTkA5tPrPNrWE9Vh6O7aDUXp+HhjzFq/Ks/2OW6fiBM7W1piUXAh8Kl6w\n8830\r\n=AIO9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0039d314b5ff29856a2f17a5ede426f3f01c80bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ec2385881.0","@material/base":"8.0.0-canary.ec2385881.0","@material/shape":"8.0.0-canary.ec2385881.0","@material/theme":"8.0.0-canary.ec2385881.0","@material/floating-label":"8.0.0-canary.ec2385881.0","@material/feature-targeting":"8.0.0-canary.ec2385881.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.ec2385881.0_1593553676698_0.9099292720036805","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/notched-outline","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.610c26c4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efba2192790ad91fa7657b5ee1f6207ac36be71d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.610c26c4a.0.tgz","fileCount":34,"integrity":"sha512-iY0sBi5RMDB9ZpOujI2D8g0WYV7RzbFrB3JjJw6Ib5R6e/Za0w8x2oUunPpX+Vcn4FM8o76DrPZpqm4G2ZFocg==","signatures":[{"sig":"MEUCIBqNjHhEOFKtkeWt6wHfpvO+dn+iO06sKCMIh9D2ZerdAiEA+1JfcUhUUasJUm2SXLiNnvS33vzCveGhsNWqlA7n7Qo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KQ/CRA9TVsSAnZWagAAbo8P/iy9wFDPgDjBNlE5czrW\nVk33SUmcfSG5VLqcdcJFCuO9uCFjJaozK1iOmWH9uuLTSXipzHTc8sdpVzz5\nc/nKh3wCK+WtkxGvW4/dYWJAKt1KXmaT5st74iQv9JXK6ClQtNPLAj4o2sY6\nGtYqDZV57GJ3JUrFBdwEmHUVlFZItUjO5G9Cqlm69qLUGKsHlX5JZNLE5CmD\n7gE5ezf7MhvPcJ6Yirm7AfzaapY7yMV0AeNT2mhfxJYFzj7TBuBvNa/+/5TS\nSqLKdKYj18KFxEeNlleVvnde3agfcvQNHVFd7lBd4Ov+HYgK1VeASzHRY+vf\npAMDtLf/VIuCWStOHvHoA5UatTJSk2JjcJRLm//iTI0BHN/wU7b9UDAYfqvh\nzVqHtaJT5laV62pV6Ut7P/OPQmVJMNcKd/chFFSj+LyLLQbdNDfyJNY2bIHA\n64W0XHbKnQBJGg2TExnqMqhuVjpoexVbpc+k1IPL3sSZ6o7FcCnNUr7PDGDb\nWa0EnLjc0dVtQfTVIqhlH3banYJGM6tlOjj1GFIgD3zHGbl3Kjdst2uIBX2q\n7eMxDAqciEuWiWg8uOkzr3mrCMuC7ZX74+/q1KfdagrF8iBuy/vhAGpKOr3L\nNF35Ao6YlPrZFnXWXRSN+KL5dpVAExVPYKZTg6/94Y8UrZHXeVsMXigs5SzA\n9lHC\r\n=arEQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"84352d6873c8f275f890267635fa416189f57a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.610c26c4a.0","@material/base":"8.0.0-canary.610c26c4a.0","@material/shape":"8.0.0-canary.610c26c4a.0","@material/theme":"8.0.0-canary.610c26c4a.0","@material/floating-label":"8.0.0-canary.610c26c4a.0","@material/feature-targeting":"8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.610c26c4a.0_1593615422876_0.025875682497764174","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/notched-outline","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.e2ea4a99e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdfbd91fe5fe9689154b72f56905d845b9c5d891","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":34,"integrity":"sha512-fkusXKjd+x6nRonOJui5OUWaHGrHmHabOI6KOAjoZx8Kt7ChZHYoaAYu2t0VMHdxy1V/OodbmWjzAW481lWGLg==","signatures":[{"sig":"MEUCIFQNOM8Uf33DLIgpnly3jO9OQLoRLgMo1eTglR4bdsoJAiEAgb76kF4SXaiC8QnMLZx06NlTYWRQlDoigm76BdyAzOI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OPACRA9TVsSAnZWagAAaGsQAJCDufR/My5BVzZgUdUt\nb35lMWFu6gtfu5p3m0RL+G7MJn/q5QtFYTBgBbKGcPJVX2VscZK1yJtdeMqh\nfQwGaljdDqhSrLuy0NkLN5JlwwjfL9TcBZdayq7JiH4prhqDxaX0M057DlmX\nVbbK5wP/qoPPaIaS1+K3e7MMZOFGkk2XugLfO7wjuxq5d7lGGQb/y8OFnx76\nZlklSMWPkOOb3GIEn/REjcZhv7r+hBV3Pftqf2ZMnpLnKXKmJmDEqdQwQjXT\nsKIdd5DpYhxnl6CoTJowBDDO4WGvbT01fsi1joP5OFbFHK8v8nHOywHXSUmv\nP81jC1Pi29f2DJdoh+0xRwGfGBCjjv2oZBT4KllPgRFOYt1Gm4haPaekjYtJ\nzksYv/rw4Ed49buvKZtjM5+U8bhOWFQqkQmuBbpZdW2Ki7bG8oBD/iypxCNl\nR4YAYOG+8my8rWIECRFAacTs9ucJtgSfFdB2HI+Z1UypkvRNJ8oFXwD7h9K3\nKzWdnUdPLxn9Br0Z/hsH69i2vbvjGDjy+L5Yd7dMWOdfHGMqvMQraW48PnOi\n7p7pJLbdrkKxNf65s2Mbwc2jFcqXSi4p6w2QwdKzWzbU4EELKqPGhY6AtJ41\nLGMJR2dirqlBIW6V35RIrSp4AletvtA58BnbRwnT3LVwMjR0isat1GgvXwHN\naJFB\r\n=98H2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"42e9f40d91c643a9770e5a563a204c7f36196a3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e2ea4a99e.0","@material/base":"8.0.0-canary.e2ea4a99e.0","@material/shape":"8.0.0-canary.e2ea4a99e.0","@material/theme":"8.0.0-canary.e2ea4a99e.0","@material/floating-label":"8.0.0-canary.e2ea4a99e.0","@material/feature-targeting":"8.0.0-canary.e2ea4a99e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.e2ea4a99e.0_1593631679538_0.35766287957410103","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/notched-outline","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.a78ceb112.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e661c7f4e0a0c0ec0136c2d8498080045bf15c38","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.a78ceb112.0.tgz","fileCount":34,"integrity":"sha512-3z/ivz2Qi7bhxolE3yCYMxBeC+GFV4dtsXh4HBYd7ASI/8GPA4M8fFV/SdMMPHh0tvCkbLidGDOZI59G7rq3mw==","signatures":[{"sig":"MEYCIQCTPpeRjdJqnCRN2mZaEwsOfMhysELIH1hH2/t7VkIB2wIhAOURXgEG/OQo3negUl7PCgsz68APog0PTm5mxOmk8QYt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OaCCRA9TVsSAnZWagAAXZ8P+wV2d9qoOsYU1fFLhl9x\n1MMxmHERaX1u+SKelhtRXf25VDarnGy4fVm3QCu94Au9Cj9+5PSmRaWY07aK\ndRS9oeNyXojZcvPGT2MtGKckTTVuB2Iiza+GJy3B+M5ecC6gRj4KcOA6vggm\nNee+erOBor7urZhYFPfgCT7kWRBOMGxtC0bRJHQ82bcFNiQeMnlWQ/8j8jFU\n8aH+C87artRDIJ5r6XbxjfU60JyuOrHV6F7LxOxRlvqAnZJ8Yh1cVcw12QSs\nP/SUkH1bl3J2QqIZEXSHNNEDotiZuUUc7/DUsuRfF0t2ajegZn8OG0FRzQhv\nzYYroHCb6aQrP3MohibD+YaGFvviwInJh/c81dd9GKFq5wQb4NYbnAo2kAHQ\n6f+zIltNt9UF+KX7yNzLt2QjIENWwSFWumKIjzQehUK7aAfFIMDS9I7i+uXl\nnUwTcefNYZ8SFoYZZ3i5tZd+gmWWDcanMg7xzCkFW9uJ9JhYPjGeehMb589H\n8nlnDBxjXgMhKhz+i9GmV7QBiakXGssGcd+gLqTB+fNLfC7oDmF+apgu05Le\nGirbN3N4y+F0QKJIcuhQneWoC79bmK29csLk6c7PTBEH4glo1Lbi1E+M9CM0\n5aDDNYUat+MpDfvEiCNCUi8j6r3n+XDWGyLKJXIZ+asBlIt4oTVdRwg1zY6R\noiVI\r\n=uu+N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3a38e39f3d172dfa99254185d8b0d4c03dcc61e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a78ceb112.0","@material/base":"8.0.0-canary.a78ceb112.0","@material/shape":"8.0.0-canary.a78ceb112.0","@material/theme":"8.0.0-canary.a78ceb112.0","@material/floating-label":"8.0.0-canary.a78ceb112.0","@material/feature-targeting":"8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.a78ceb112.0_1593632386193_0.7318113928907557","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/notched-outline","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.b0c456d33.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"467b605d19669cb8aba34c49c1e9f48c575801c9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.b0c456d33.0.tgz","fileCount":34,"integrity":"sha512-HK6SSMtwZ/WG+u8zqnW9dibZQmNivCtyoWgyj2YFSEp130osVYIZ7p1MK1q6NCSBW2jynqqNczD28stvSQekaw==","signatures":[{"sig":"MEUCIQCtv6Oe47jePfAsAkGUUdhphblmbGYhd5HElZbVwRLo8QIgYW3wsVaQk8bIVl+jBOemYphCNxib4V5TMPtw69qjjpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6jLCRA9TVsSAnZWagAAhjMP/1+1iL5XRCkwxOFiONRR\n99ztu3q4qnvllrUqnvuOl2DAwK7p6JzmpCcFVNyTfU5iiXokVdHwwWbPE9UP\nDIyzOH+pD4bIPkDisdrCCz1EV3idjktFJziWsdnOwhPtqONQacLEgz/wCn8b\nFMLdJu1ii50YW3Y10yqEA0DClN3UnG0omo9Uobep3T9XpqgpDNvhdTI7FliK\ncAt71foQLQOd+pZ8q3NDqqMa9sp7K6xWBUUUQU4imtCVrpKIbbnMjwFqSQIU\nU/1h0mnUllDJwVQlkAZSyN9hbRkfH6/kYuS9DNdLUOwOU4cpvHAmQe/1Hs0i\nH7RDfIypfh9NbaB1yaI9k29utvIQX7uftaA5xDVwH2/BpaH2dqL+0so5O8Sj\n4YtbTFP/eJEuhM2BFkxKDENYo+2irGqQrX7d2ObJYZGYOk5eSO9Qth8GRJIP\nuBKDCm4FgONyCW1PD1rl6uFZhqAendkAX0qt3XZoHWaHDv8+B91Iw24cYklM\nws4vwb+tAtJ/itpBBtmEWvjgZjP5e0j1rKQfxQk54fIqjTqW5go5A+P1DsCs\nj9oWxKxKjLUBXqWtAe3XDiLCYvbAvEQe9CFWUyDswkPDfpyPY0y1c2lXZ62q\nS/Oh3g6llOuxgvd8lzkgO8ufURYLgUY9kJfEZW3ty17HPXjFr75qFXB7w84A\nMTM4\r\n=9u3S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c9a540f1489e069a2e5cd262f5daabc034039d2a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b0c456d33.0","@material/base":"8.0.0-canary.b0c456d33.0","@material/shape":"8.0.0-canary.b0c456d33.0","@material/theme":"8.0.0-canary.b0c456d33.0","@material/floating-label":"8.0.0-canary.b0c456d33.0","@material/feature-targeting":"8.0.0-canary.b0c456d33.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.b0c456d33.0_1594075339491_0.2046260663394015","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/notched-outline","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.2e5711e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d77d62e6d73cfdf4a9d95fde86f2175ed4e6395","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.2e5711e04.0.tgz","fileCount":34,"integrity":"sha512-hFLrB5FkWouZX5z9YuERmT0dQv3mWJvg45/gGigZjAzOA7+/sKugMQAtat+1Kvp+OU9iXuLQZZVwFe3zCIf8ig==","signatures":[{"sig":"MEUCIC32KjbXpD7uJYmqz1Bfq/vyBPU7EEkb5q6E/gQFSCndAiEAom9Rt9gTEmQinE2WXE8e4N81prfm+w+1R6+mpioe4p0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfkJCRA9TVsSAnZWagAAm1sP/1HSTvyDNTsgd16wqsfI\naFhxNNjiC7som/CcEJaoLp7FSMiL2nbnqdz0zi2xIPA+CSaaU7zugxpMpilc\nn42BB6baT2+hcj558r7c3EtEo3geGa4XgD7XZZxePt2K1cx/lmYQoZP6ix5P\n4IKKM74t/8NvgpqcVdIvX5FpcsNOEmD6YTeWWEn3Y/Vj/mLMT73v35Bt34c+\nWG2BkC6fboVFwjsl+ZUe+m0kpUncfYcB7FAdsKdK0PvmUUp6olxmANjlXgRw\n4+qSwJdyA2+MNzjf3XwS+lQw0RNkr11jm302Qs1KYBw2FYQtzoimaco413p1\nVcwiO8fjiChHK/ueVjgL+ENpvZJoHUee+gNNZDip3W9W81N8IL49woW/MCBs\npgPrsOcilYaGKgSoqOATSqqk5EZsq+mN8OmbLXfV3PvqXTq/4NppHo6wM4SF\nHTrbaCKLzHvWjRjszONnPTIrojnIQrRLqBiM+Wesnu0Wk90VjnoGFFbDSL4u\n0ZLEvZzHJYYwPmNaPfZcTE51aKrT/HVPnhcLZk9isvzWQvfZmsb47JCWzhv/\nWBV9YAM3i5CRr2L0ORF6elq8v39zE/nByXZtMhMhss5fl/6E74UsG6U7MH1S\nhItufus+Yctx8WzWYTubq/ihpfhLdZE3tI9tgQvb4G6dXK/P177XUns5FvI1\nBr39\r\n=YP7I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4786b99e99bbd4c7b7f10a9111b884c165f1bc7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2e5711e04.0","@material/base":"8.0.0-canary.2e5711e04.0","@material/shape":"8.0.0-canary.2e5711e04.0","@material/theme":"8.0.0-canary.2e5711e04.0","@material/floating-label":"8.0.0-canary.2e5711e04.0","@material/feature-targeting":"8.0.0-canary.2e5711e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.2e5711e04.0_1594226952578_0.37450062907483606","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/notched-outline","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.811fc5d24.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3d79d521fe030822bb17da3d3a88a900f6ac891","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.811fc5d24.0.tgz","fileCount":34,"integrity":"sha512-pS1GbsD0k5JqJfxc6Rk9uhZH42OJUj/rESSj7Sid8CqFOYLmnPtQekEme36f7LLCDofSHBfLDCJbu5vnnJ1DMg==","signatures":[{"sig":"MEQCIE9b5lNpZs0cs7ujjdaWRDbG/c6bZy0a2m8vwnkKgPUYAiA4DOfW5HtIx8Yi0SnCFeWjm0Ox1R6yrpNYwzzu0ptxkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf98CRA9TVsSAnZWagAAWjoP/ijAl6Qhv+qN/G/4iEpp\nu2+HiV3EH57/v6QWCYBL+EX3ETO6uoGiO+mZwtpuKe9RjScq5GQnZkKVxXzX\nryIuYaTZgpIsuQ2ZtGZjPfTy2SE0+STXHI6oi/mOzK0s4RHo1xS2tVnqtzK0\nRoYNmI2+aibKRzygGlz/uDHngpZodtQMU5/aoS9M+cbQwpXL1W1ET+bTrzmJ\n+WuAbiVfkZkR3acE5YuJbydxUQbAfRJ20jBur513cdD8kCvo4dTbzItpqzrY\niWSZl8CT1mr0r6N9/YYtUQrsclss622NfWtdDOlcIh58bGc3583rHdeYGqUM\njTDBFyFUJ1C++6Ah8ZX/aGFOodYC4zv79dQYwPiZFZ88GQM4YbLBUow5jogd\nHaX7kAduYGIrdvMG7Frdj5Lkzv6yjVg7YGSw31e3ynJXIzEMJjW13DV9/2CR\np/qcJKoqEV0PF1XGe1dhMRDWCQqOisFo1M5RRvCiomidY8hGDf01iH2RRk4v\ngPzLH1VgrMBfC8cfiSqA2u13BCeoNmTfFKQL3PUVBBH8HGnVFpufM8cIC/qR\nqXYU9iWO7EtooT24EZX+nOXTiDU5HanzdFB+70DwTMFYKL+1RQBKGJ7WUC5d\nue3ulo0Pa6e9jIFhhXmwfvc1mGlmK7MYLmEZAq/JduJkRBn12fZfDDc+mhny\nnV+G\r\n=K/pP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d1a1abefb8800a6dcc0cb20f74923403ee1ca66d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.811fc5d24.0","@material/base":"8.0.0-canary.811fc5d24.0","@material/shape":"8.0.0-canary.811fc5d24.0","@material/theme":"8.0.0-canary.811fc5d24.0","@material/floating-label":"8.0.0-canary.811fc5d24.0","@material/feature-targeting":"8.0.0-canary.811fc5d24.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.811fc5d24.0_1594228603670_0.19195221826266007","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/notched-outline","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.6ed717ddd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c9df1a30980a45558e04254d84eaeb2ec8162fa","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.6ed717ddd.0.tgz","fileCount":34,"integrity":"sha512-xg5y4/Je4GNdsozoEpkgi7By3SyrgusndWioxXgZkS6qbKsEqsciiKWHju0cYuXldcTfFiDF6IKxjxWmNCdcIA==","signatures":[{"sig":"MEQCID8BG5uQDkJiR6ERt+0Xd2DeX01hISjsqqDyuYQobA3rAiApy92fP1WCuqIH8hOeaEeD26KQtBhJBuCDf7bNtvSzvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiI8CRA9TVsSAnZWagAAg1YP/j4eETBGtVCwn3wTvJRO\nxr0d9w1bkHzB4k+6YvHlyG4Al8mWtDrArQWoNh6uCAgYRQ0xIztCmAYyyCKO\nmLbQ9/qBLQP0HsjBmsg6Qdg52aRH5ILtxpdh8oHE4tYM89NVUy52wNA2Oj3T\n5kWwUSNGJpktk8xeqVTTQ4mSgQLErD5yvWjzpcTCT4LQWK+4DB4HRYuQLYTF\nkq7ApRtYIV7DiTf9dkLKCsG/8XjiY71/eKi59mjEqgFABzejC/UwyEFFRdDl\nojelhiiRreLXLzcfEYz/Lm5afqeIX3vl+DxnsSodewLNIcYD8UQyZRHQbktI\nA37Bpl1Dn8waJLgrH1Y1EbzSUsJjJnyYBwcvQ1xTdCuiCtr+F+RZ4wXzWjv7\nHQW2SOOMi7xHlv9ft8tyNKzPBL7PzkPdijtuWxvsqwkewt9KYxppiTBHPBH5\nNQZhJXYx6HNBGnpYnYBUpuxW5neXbXx92rT5Hk2B+1FIRVEdrB8MRPpGLO/V\n8D0mgTy25nrybgiov9w/jSxLAWjWXLesFMos0zUdiKyoIp7y3Sr0QKT+La5Q\n/zCcIqL7ZBSlhSvsbMxlFXh7gIw7myDjr+h0/dJJGaDsmAMYJvzx7WluwWUg\n+AqV5rucQmq9wsy9W/vnI3xBZBOq8geyt7iUoXIWVqc+tWqK27nUL3JmBV46\nHI04\r\n=IWVT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7c9c6df731e0edf42938b11082973eba27e870e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6ed717ddd.0","@material/base":"8.0.0-canary.6ed717ddd.0","@material/shape":"8.0.0-canary.6ed717ddd.0","@material/theme":"8.0.0-canary.6ed717ddd.0","@material/floating-label":"8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.6ed717ddd.0_1594237499750_0.5473165130894881","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/notched-outline","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.d850de590.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41f8e48a23e1a61cb5c5a7149af168cde9dcb74f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.d850de590.0.tgz","fileCount":34,"integrity":"sha512-Wc591PAf1ufOUEri4kxSPyk9l7hFhlb/No+xVF9EmJF16Acyj8/p/23xbgy+pbXmR19KWBibOv2basb13FPnoA==","signatures":[{"sig":"MEQCIAUTvRtDfFWpQOQ3dPKGMfnv6vV3UnE3t1jqXMnilzMZAiA92uvf5GwuzFWfANEWx8g/0SBl/oIPsa1zWrT0B2ynog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1yaCRA9TVsSAnZWagAAZPYP/1esv7SdD1dkN8KtCUw4\nArVhhLipXPaDZV/9vlShhhN/WXKXD/L6iks3rgH0MpFjr6/IhdOwlFaGAdCe\nq1L5jlJ+EhPbpkNY9LW4Z6UodToDtyCJDXrdmGnXO8lYU+aA4/YWbW0gwsZA\nmrjFDu1DTSO4PMwuT9NkxTdzJFrSpS7jv91aSWBXqIuk4gtH0dQ9pJBU4i56\nE+4eIabDI4RLOpDzDCUKld4aRVgRf7qWmZ26qYg61JxGWtE5I6UP4T8VqBaE\nUL2lPeiGZbptyiIprUYEk5y1+G/H5uPtr0HUxnuK0mwEzxRm5R0hK4dNRJdK\nuwpGYumxpU3mF7sHHjnjnNu9sw8ZeoAbz3XLMa+WgLY4y6FDXtKvULZhG4Rq\nBobMvIziGyFHSv4OWNm58a1SbmQOzfRxMMGefnVf9VVniGy3uQ2dF/ZtrRbR\ndNgZNe3hotUPOcK69DiyPI5kx4RnkaZ4HKiV1SIqVffsJyXoJR58OM1Pc3PD\nx/ARiBqbwDgWjPxzocnKE11FjSIq4CEDKJhADZgILrsInmAg6+EvYNTdpwBi\nf+Tp4Gx/pD5E6Sz9IuF3Betiz3h+0W8RHsfpEuPqczr0xqOcO2x84M2b+tT0\nKHOVDLHLk3utxn1yFJwkUC9TCTehSMncnd/Al+zZuZWkn5vkpLkjrpHbGWfO\nAzcV\r\n=klkL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"85039ad97bde95db4d57918266320d54c581a680","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d850de590.0","@material/base":"8.0.0-canary.d850de590.0","@material/shape":"8.0.0-canary.d850de590.0","@material/theme":"8.0.0-canary.d850de590.0","@material/floating-label":"8.0.0-canary.d850de590.0","@material/feature-targeting":"8.0.0-canary.d850de590.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.d850de590.0_1594317978342_0.1771048776591977","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/notched-outline","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.e07a70841.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74330347a36cecd94ab7b98ec413babd6a0c0bfa","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.e07a70841.0.tgz","fileCount":34,"integrity":"sha512-KWEkRZET4k5rwhWua5JWHL9wbEj2nJlf1Uaj4Dy6QTX6GvZLxlUChsKIeKBYPeiDp7mey6DafUwumggrkMbBtQ==","signatures":[{"sig":"MEYCIQDduItf6ELbVz4X/weagNiO7SZukZpZD7KzctMxRMRSgwIhAIWjsMWnu/6Eq3KAu/9ykJmn1GRSRMSfmRxCv7JHjLSa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2OTCRA9TVsSAnZWagAAAyAQAJ9Kr/EfsxzmbkXxcxoy\nXx1lNsO9V/lox180h6rChFKneIApckGoKZ8h4aWJGY8DmbOqF6OLvy0fvILK\nUg5ApRTK1pO8cukXexmx64+Ge51FPV34ooxMWhtaFN0RTTgrba88/djBwViy\ntNaxdR/hl8H/RB8nafAIVffZwdvz14Hqe2ncqZE5uC7GfWee1wt0x6wEAyZC\n3EsfVoCwQBYBgY4PBSXJcCyVH5G1S8XjnBx/7iueKUou7Tflx3dfxBiNhlHr\nHTn89POvHchOPyhuDn0pURKkmf0NjlIxjgYTAeuY/IvcYcMhwNHtYvZs4ixJ\nqXq5vdhtaRKhByoYWhKpHY+IhhxF8NAkcufH6GkjVPcewnwNg2rK1il8i73/\n4tL7m+iYXNEO54d62K1oD0quluvRZI0btSHQJo5sizsoKEvfxEF4fUrSvKo7\na64mWI1ZIUDbGOohG7b9vVc8ATdjLN/vQ/D6MNGh5XCrgZV8xvSs0W32IaVx\nIKzvkhPOPOL++DXnTaU2J9zspJ9cJJumR85UQU/dAL/JwaGiS3AEyiarXEMh\nkGjyWnLGqQ7X3eCsRdGdndox41Esw2O19lJsKGBX9p1mkvsWogpjIpEZGvPR\neLOA9NPGGsKuCMurAxql4We7Z/LzW3p7da29sNqCNjJr4rWofBC2PKt+77WE\n+rj5\r\n=FWf+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"105e9fd32899b2c9a4309baf6e879287104cc0e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e07a70841.0","@material/base":"8.0.0-canary.e07a70841.0","@material/shape":"8.0.0-canary.e07a70841.0","@material/theme":"8.0.0-canary.e07a70841.0","@material/floating-label":"8.0.0-canary.e07a70841.0","@material/feature-targeting":"8.0.0-canary.e07a70841.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.e07a70841.0_1594319762707_0.7279527242321826","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/notched-outline","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.37947ed6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6f0b0a8b88b3d3ff8db794eed1933922c55706d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.37947ed6c.0.tgz","fileCount":34,"integrity":"sha512-ZTPyhruXGEodX74UeTrGLIg++lBx0WnSmw040aq2Q8oYp9GZI9sSe5x/jEdTyyCkXIYKF7GmUcGZQPEtoTaQhQ==","signatures":[{"sig":"MEUCIQDdOeUP3HPFtjFihZWLSqHCC41kmXyvbmeV86tGq+O/WQIgUXydONtXF+4uOyjnEwaoqk59Fm/npiT8ioVFIGfGVh0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3/+CRA9TVsSAnZWagAAPoYQAJwAPcMm461osV+u6WJc\nqEcAjc55m6k80odrUqdKzW36S1g1KkW0FKhoCu/V4UDOhHlxjhZbaU+ObiiP\npTbQ0005wr2j2+ALmX8byCFsXhJqkN19mUT5n+CEV5dUtGx8Oa6x1Ro+M0bo\nLiD8JOe5yDPqB8xVA9HZyV4p1x+xG4gkTxirqNOWFIMSYZxrQItLS0zcReng\n5i/hFL1Uxf6SVZLP7KDi4d29dmcar/sC8qTlLCoCQxEYl6vYM4DZQqRsk1XZ\n/ef4U9IsHuQIWxC4rJ5qrLq7QPEhpm44ddbXXXtYmj2YhQIIHeZTPJaah1wQ\nkCtzQClPpTvWnLaA0YVGKHLFUVQymW75QSywzhJs92KJjA2P8ZKHBm9fCSUl\nsNW2B3oHkCD2zUOvUbLWnQPrxjSo/8IBQh7jb7V/1DleBbd1A05xmkXyzgPr\niewbKS1ENWCAricusNdxdUvvNPWoPCb1aghOas94UPFDwGkeoDoH8agQpKaL\ngDAMNFeyY0+WSqfEpZCWCmL9GfKryA/r35ylbYYuPffdfk279W/ws/G5MCwN\n4Z/ExdNYO09CJBILnBrVsjk3oLI5jr+LmGNsOSBnNIE8DKx5J6CJCxfYDLrr\nyvsj6K9IhoTi4fseybRMgekbfAqvKfDednRz9rdKPdGZ2ahP56Ur28QTP2Un\nQ1je\r\n=lrXp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"80c4a00e688d5a2b1a35ee55744d879b782effed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.37947ed6c.0","@material/base":"8.0.0-canary.37947ed6c.0","@material/shape":"8.0.0-canary.37947ed6c.0","@material/theme":"8.0.0-canary.37947ed6c.0","@material/floating-label":"8.0.0-canary.37947ed6c.0","@material/feature-targeting":"8.0.0-canary.37947ed6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.37947ed6c.0_1594327037546_0.5835619618949492","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/notched-outline","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.5d443afec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8761d07946778dc93119ca67140962d446b1709d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.5d443afec.0.tgz","fileCount":34,"integrity":"sha512-UAPeyFSvjJb/c8TbPwbvk3moheR8fsOxFXrV9hMyc/cndvSGdvvueNR5I+GdkIGcg7goFrFOsxqVZZNLTBh+eQ==","signatures":[{"sig":"MEQCHyAbQurpDstMVHbBHCvnx57ENM+cahUmzbOWg1OgiLsCIQCyOKdmV6YiqfOPFHcmfLMusJlJcO4JjxOwMbDIk9GXYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4OUCRA9TVsSAnZWagAAsSsP/2qlp1h7vI/HMI5FOWW5\nvAcFvF3qXku7Ep3awJSfoCkBUJAufGB8cBpjyXs4yCOqC0JYoqQ90vfSj07e\nRt3FkZAQBTv1Ugy/WxfnJXMq4cruePd4m0MNV/kZg+wfipR2J7oYOWUwre6u\nOP11uxog8WiUzoSantruYWDmqEfqofaS8OB9cv1nQFxp4eZCSkWMQIbN3gcy\nbO4McjYa6QKTtj1rBBAYLEaPEo6BFKC7RAxWSkbWw2WlrsTtKlCHqaAWah0e\nsNp1tnpKnnDof/FlzaOrPgv1hmMXSyz97GW/iM2GYk+nfk7b/8NpI+acrOsv\nL8y+zwP2FNQ8r114HLwbCPm16LqXb8vhUT6orsnaf9UIUERlkzl1g89X6X16\njKWrzJ5Nzz8jik0BQ2ssn334Lkzte7nFGasaUPgSB2oBs/lNw85OCuzTNmFF\nnlQK4S5e5Q23PwJ+32G+WoXXIIcnsQ///bG+5qfV8ljZ86Z8Nte/7NjajXgo\nOLz7Gm6VFX3khRQz2BR66j1D9CAWkoUTd38JMeL3drgHcfJjvKCs3to3SsLs\nWzJGp9Rcc/sjBg1qjc+1CNUEMbS+1tz+f6b4oNJbNoJM/2Ec8Zco05bUAnTO\ndQZEe+pOEkOQj/sPl/PNFILwBnoQ/09BTPNV+lQARP4ZWqPBlAnDQP9OragE\n3eH0\r\n=/wH+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5c493d15f89898617c3127c53145bc51e8e60930","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5d443afec.0","@material/base":"8.0.0-canary.5d443afec.0","@material/shape":"8.0.0-canary.5d443afec.0","@material/theme":"8.0.0-canary.5d443afec.0","@material/floating-label":"8.0.0-canary.5d443afec.0","@material/feature-targeting":"8.0.0-canary.5d443afec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.5d443afec.0_1594327956257_0.37444203713864366","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/notched-outline","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.9ac1ed914.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"709ce9bc831704a48965d1ccda65d662d7de6d54","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.9ac1ed914.0.tgz","fileCount":34,"integrity":"sha512-wlS2glKP7me+nLJ83XerbjtZ5W7UVRZ7l6ppeMapvAKeoZCvQbbB/FHsoBtpo9xaqt6k4mp9mBuh236AG31S8Q==","signatures":[{"sig":"MEUCIQDFWZNNF8v1gyxFeGJGuyhqLfrfeWD9NVHCLgr3YofT0AIgGUtK8hIr4Z/+t5NOoayN/kd+3tgoK51TbApjpAxzX+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4pWCRA9TVsSAnZWagAA3QgP/2VCSQgYyxBkpj8JLEVV\n99lQwjGiee2w3dWic7SVeq2D3WSFice7MjZRyI5NxteQBJt2zcKFCEEFrQL9\n9mHik91kBRQTxFTVUNbLcPO0ok+UcDsQZ5ztMgkcgW8H4BitMuBk9YGfw8w3\n4MF2Htb6jQuKUyoxkAuzbogzNjK1BpBAkKBwICPbAiz1nZZ+YwOIcsqvRm7k\nu5BCoAximGLPBYKPOaZK/s8d7oVLbNetFM2Tduu+ix1fDsZAkWfv5vV2Bh4z\nP+aCFKeh9Qkwd9p9ce1kCY8lK38qsJTepIcjDG14dQLIIsZmof57YlEO1rgp\nUE514ynxl374jJY4bztfpI7bdKvGhXyLx/GC9up6dQuXqGMkvb+CLKZDtU6h\nVpGI+s49o4/X4oFm0v1AAtCOOCW7cRidj0mKSSarM9wz9JNLiK1u6n7u50jW\n611bsLANjQ1l3H/uAtVOiSIkrVCad3aY5HAK1IcWuaqlfb3/PELk2C9Gj1sR\nRKmKrhYyeY2MGA+D/OWh30DT95ya6mM4mBfAfJHE+di+0hRhSAlf5tbf/nph\ntRr/6mTO7BSXYgVe3ioAH2XhftibRASAU80l3Ow8EsJxvbfHAdjZEtr6lrJ1\nq2KKAFxftMXkp7zY7zywQF14bnKnNh47KpGmXr+eTvLXAOntVHo/uBMfKOHz\nUIdR\r\n=Mzdm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c08d3c600bb022db1bcb4efe520bed724e653a77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9ac1ed914.0","@material/base":"8.0.0-canary.9ac1ed914.0","@material/shape":"8.0.0-canary.9ac1ed914.0","@material/theme":"8.0.0-canary.9ac1ed914.0","@material/floating-label":"8.0.0-canary.9ac1ed914.0","@material/feature-targeting":"8.0.0-canary.9ac1ed914.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.9ac1ed914.0_1594329686357_0.23833412599581383","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/notched-outline","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.1e7cb6198.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05bb0b638eb2d694e9c5de94050eeea2993358f4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.1e7cb6198.0.tgz","fileCount":34,"integrity":"sha512-aC4vnGIeN0xlUZziYRs4qF/ZxoPpOwUHK3ptL8b6PJxky8IM65y/EAS9SVnusAvEajKzzlDhb7sTagNB2Ez3kg==","signatures":[{"sig":"MEQCIHCaQpPdGLD12kXM4ZlcbM6wXrE5AKslwvkSdxSlSJ94AiB/nx1AtBifWDT1Zca5Zkedt3MwMqhnOW/lZsT7CuEC1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5Z8CRA9TVsSAnZWagAA0zEP/1/xuYwKs76Psjh1azj+\nybOpZa3IZ4qmTVKDfHBiOkw68cAggZMEK3eaI+IGR4kVuSKYnEQdSEYp7uv1\nVCAsmFJHGnZitqXiiffYUP+lh5VTv79rdKD/zm1lzwYkZHcr/nd9Hetcu6rw\nXfknXoUdsKiI5Su+AaAw+kruNZ2JZ9sXImOatkKgR7kziYTnlFr0VwXrd6pp\n0aiFHiIRghs0JMtDWctpLWyuK0+24c7j5gKm4wAO1z4UaUqHKF+PUTb/qIZR\njB3Wnjs6H9oJeyd/uRTFOqoBa00VSZIdiaAzXc8OsgQzEwc7/RVVNdoIAmnO\n13sWselsdlZBF9yl2fN2iv4na94GFNQmssSpGNYBrXf3L/Zmf5oQxPHhS0Ad\nP/fAu2OdQ07UVaZiTQa6PhAO2f9tZTXdiF1lnA6e2kCFcLjJQVuhTctm4SbZ\nOC1pt/tQh6I2e+KBLIcy6a5+Hc/x62Z144fEmgCAezzA8aCfMTy9WQ4+N0FV\nO8ubTY4TtRyC8CTfaoZugtS4qeGFPy1J0flhJFgKaT50lOd1XcGkgOpFeugd\ncjnUaBNatYiX1+FQQHh7p8t5aAJNOzMMuiwSc/0TuxZdxYxO93GETZt+S1b4\nxIuRPd43IGs+IiN0TyK8ZJpAe8sFjDgA49tVuey6EqCUIIFtvCWHaKpV6JTb\n2jOg\r\n=7oEN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cbdbb55d01ed2f63aeafe8d77fffd1da5fcfc011","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.1e7cb6198.0","@material/base":"8.0.0-canary.1e7cb6198.0","@material/shape":"8.0.0-canary.1e7cb6198.0","@material/theme":"8.0.0-canary.1e7cb6198.0","@material/floating-label":"8.0.0-canary.1e7cb6198.0","@material/feature-targeting":"8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.1e7cb6198.0_1594332795714_0.45154104859923305","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/notched-outline","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.843f636c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f07a904610ded7e18764d5a2891430b6bad6b5a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.843f636c0.0.tgz","fileCount":34,"integrity":"sha512-UFyxk7UG8DhowTgZ85SLxSnSQYR/hRDfNVwuQZ9wfHH2snjOrJhqj2Ie+Lx3E/N5EZAVq6fWi6Bl7dlHWCVsPg==","signatures":[{"sig":"MEYCIQCZkUyZ65ikWG7PXUQ5lXhqlaD1dS2zZd5VPUTCHUEG/wIhAM+ggyI/uC/I1m6bJG/O6R98l9qClXR/GUeKskh5PAJA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKjICRA9TVsSAnZWagAAmjwP/1xY4GWkWEXm29K1oa7F\n6Ma7dhv+T74eRj5GbEevf3yEd+2qecsQZj7ZUu+dhCnfoDdBXKMZ5+9fP7m3\n+nEVbkRywoJZpHcRzjOojp+0MC/xXMJh3ZLZFky8fPfOFE879oOTV71t+ELD\niALl0IDLQjiMtU8kLOkokxeEWXrv2xfgOkCGkLEWaU1A1yelC3vg137JMetp\nrYHEC1jRBW181zmPF6prXDDut0M1lEa/1wuF/jHCPEL67ZqBMebJFGy4D95b\nm8j8999cNPeMbEMrMWLPKXC2xBYOlHRSqRHPM4rMSDlb72/0tUC4hSr63wT2\noRkmNkPEcRTpvfflTcngBO53wQHlfCdLUTha5Ac+dQ21pA5Wtxmd3OYRyu62\nAd78MkR5AL3xLMTGOnmbtvsXGSobc1OfVo8ESTTSh9IeLnMGqWki04AoRRHW\nYomu/yoqCgsfGvaS50J0yWCNcjhSOIR+Eb+aoJLR6cMMcBu+UwBDbpOQfPpJ\nCai4EgG1Ylyejh64vTv/Id/A46o41v1VW5aSWnKma3ZfqyB8xkZncCwwO2dT\nZmy/+w3EpE+LzxqFv1jpt4k1dfjc+ULMaxo1DcJVw1+g8HaWOvPsdjKZvFh8\nf3gj15XOMNlzUIMcKyFsGtS3GyeienyytG35P74fgpAiHMQmAF8oYMDc2Csc\ndvvo\r\n=/vhs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"641b40da40cd73b439cefa7fa18c86bfdf31e497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.843f636c0.0","@material/base":"8.0.0-canary.843f636c0.0","@material/shape":"8.0.0-canary.843f636c0.0","@material/theme":"8.0.0-canary.843f636c0.0","@material/floating-label":"8.0.0-canary.843f636c0.0","@material/feature-targeting":"8.0.0-canary.843f636c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.843f636c0.0_1594403016439_0.9455409345113879","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/notched-outline","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.b2edaeead.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc64ce17389d128fdb9b09af69e79ae8652527e4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.b2edaeead.0.tgz","fileCount":34,"integrity":"sha512-64nIS8GB+02PUzbbBoXzLJJ579X0GEp4b+ZGOf7+YH3VCnlJMS9kFSsfq/epoRlSFcAkGaue+H6JROOg9d+eDQ==","signatures":[{"sig":"MEQCIBwZSPg8kOE76gHB7soD5DiWIpVxAhpnUAoF6fd8UMUDAiBZuVG6dCWVicYI8t8y3wyD0bv5vs99oBpJCvFM9WLbLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK6GCRA9TVsSAnZWagAA0W0P/ApvggtWAHXuNFZBfYko\nk+bXswP5O/kDHH667pSKoJPIg6vRM4PZ2uErkjtnSe9J0tOi/Qvp1s4H/Tit\naf9dUij1NaodiNvCobzjWxC3ttBELi0/L4pMVL447va593fh6NON3VqhzTpk\niwpYgvFcgnh51nEkiGq8/o6IMCmZBOjqJdqbQ9hugTE8n4p2+ZvH9GwLV7Zn\nH4zz4Gc9E99YpYsgoD2hwcMZSuAus0o1+RGIfYnpCbSqhAP9EVk3/eLdEd/e\n/N2qpdFpR+nwzByxPrxGA1NoXb+F4RBkGg7inzSdRtngQo3nMwcMSvTNJ5k3\nKcDchR+Ts+JchuRJPQQeJhVku4looInGtJtQ0K6AkUwMRpIzujy2GoNto3IK\nv1nbyYA7M4sBtl1T7orgsyPpBMSJTU4L+cOAX97iZ85ijWdVo3gWAJ1SPYwn\njqhhNdLMgcqPd84+lkXMucgg+8SM1jreR4jK5B3J5nxHLtHIBl2L/hVezuZY\neWqaXxSxYhLzcMrkwoynvdfCBf1SrJH5944xQ8R55ekzf+vtr3g22fk+hvg/\nUQnB0zb7xConv3hyFBeGjf3C21vu1zf7AFGcYuPf2a747lq4E4p/d5+WOVJP\nAv6fKvWNTicWoOBMGAZGJkBfESacaAQ/WIMGrYxkWWWV/V9R+6cxo62c+MNJ\noZP1\r\n=I2yO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"874d83aed6fef221001b68d44bfceb30072cc18c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b2edaeead.0","@material/base":"8.0.0-canary.b2edaeead.0","@material/shape":"8.0.0-canary.b2edaeead.0","@material/theme":"8.0.0-canary.b2edaeead.0","@material/floating-label":"8.0.0-canary.b2edaeead.0","@material/feature-targeting":"8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.b2edaeead.0_1594404485861_0.19236449741604922","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/notched-outline","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.5dac1f624.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b5465e9c3d6b2c98e3f5d3cc295b37aec9ae08f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.5dac1f624.0.tgz","fileCount":34,"integrity":"sha512-GOljZZX4E59CqQoZOTzbchB3QrFEwnt+I/Mmiz0m9eW24Xw5GMFs7jR5wjteMD59R+yMtE/IPO7eVWcSQ5sFGw==","signatures":[{"sig":"MEYCIQDyIz1qTKXm3LU4BhDamMHx3IbFCYvJkGahBUfmCf539wIhAJeROzCl6sIwk/e9ccZu/rXTOkU8XM2syBIqZbHVUcJr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI08CRA9TVsSAnZWagAAWAcP/340iAfjyU4uoUdshsyz\nPmO4Mh/nK+qThM0ZbwS3L71qEIQvhHK/10NBwOyzv75F1m7aVOp3EXv76Za4\niFdKGuDBr385K2aWeIiXE6Dg/fjookQO+/t1sinHIMrOw3/KO7nClCKWtFk7\nzYhPlS4Y2UQJf8aEsfBL7C1HiNvB1v3iqb3GIjjdAABjMJUMbiBkDWrIMtV6\nuOw1UY8N/9pLNMOlWCQPAHtQuPTcPhBCl1K3pDUA1Q6DF5CBI3/maoVFzXev\nin7eWyoSBOHulPZskmsczzAQL79IF73/Fb9K14NlPVUKEHjNaCKeCKkg9T9r\nA+KiXO0H5SJMD1O4z02hETjQbMuTvJVYAQsIlOoId4Iwfx+ATO1Z1WhdCInw\nfR8MASddqSayexXt2IVx2Q2zxEhEo1CM8s9PDHqOc9Sa4Q0tTCj7iIjVo+wo\nlC80HbzQk+wZ19NdoOT2JCzHDNTtWU5ooiOsEFkTYw52zg2LNHmNNz5FWI9i\nzCaKILPOf474Qhee4ZyfyvpBiCI5i6cM533I3VsGkRgc6JiK+87yqCqdmjJC\nxc57mOlF1BooWgbE1Ijd76ehknUsvHkACiXx/g/YSo2APfjRtz4S2/0xeC+H\nZo1ZxX4cI7RFQkodv2xljJ2+UXhY4Z5XR9Ys6eUBWEL/t41ZYmd544nuC3FL\n7jST\r\n=IJG2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3acf16b30fe876c0d319f5d1681d177bd0089cbd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5dac1f624.0","@material/base":"8.0.0-canary.5dac1f624.0","@material/shape":"8.0.0-canary.5dac1f624.0","@material/theme":"8.0.0-canary.5dac1f624.0","@material/floating-label":"8.0.0-canary.5dac1f624.0","@material/feature-targeting":"8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.5dac1f624.0_1594658108093_0.49556093375805066","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/notched-outline","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.4497acef8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5363ae51665ea3ffb7bd8d9746a2c1ec5f374950","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.4497acef8.0.tgz","fileCount":34,"integrity":"sha512-2iDGaQO6mmpEO85dPwwBCsrrhwi0QyZlY1xZSUw1FgjdbrHOrmsOkkA4wk8wtgra1k3J+VWOb6FvnTsE8aoi2w==","signatures":[{"sig":"MEUCIQD1CZyAkMCoXj+cTXshrpFMOntVaExIklhtLt0tkO652QIgFckbwIoRZsKVBu5czB164u92Ky2xUna+wIH3YHVN6/8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb9QCRA9TVsSAnZWagAA208P+wYOu0jZbYMTDZ3XuQdQ\ngiGsweQ60nZSdi2EwN0mpoQR+A+PfP26UsT/SZp4UyAfLzqJCmLSezWZN+h+\nC9QYpgZM+aGcq4c8cGSh+mIaTlVFGjn2JnCOpesEo1XfE+zDSTSrrC+AemCN\nOgxddo8H3znDFkGW7ZKgc8Igo9J0L9XLV9Mt4oasBCRwu2fbPqcKqv2Siihw\nZDYhHCJg8XUTkGZmNLlPxiXa21nr6PjYCTBcQu3N5jpwLg4Ly/N3l8P2qUnf\n7lQW5XjOiNOAdYmcErVSdJaaeo9VKcu6GkgbVNWTjHhY56fGnvtGMk3bPcTl\n+eg1tSZFAQaMQs9k5ZzFsMjrGi7vVLuTrxVAIeBRkSny+cCe2KlE0Km/l3fO\n3jNuUeCAQowfgSj4tC+/18pMcMJCyCOgBU38dmjPBRHJUi50CSPga8hWlRil\neFS38GeBr2CeuT0SjjvQrhs/FhcjMs3pQgyULx0UJqmV9BWW4NVMWtmJRWbX\ndJTJBegGecBn5XX9rU+bgK5lOF4yi4UtNAM7auSLWMtWGNZga0CYN7m5BGUI\nP7nNj9tQJLVfzRvU6uY2FQxk1Z0AwxW0Ex8aoUiNYYIhkadJNdg1XsBqUm83\n0gvcdo1UT0OxF5ikxtyKSB5PRQrjXNv1wiQYYspQmCo2wlWiA7hWDaKP5tGy\nLD4B\r\n=n3+a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dc90b63c1737c63427815af4f6de59841a57a1bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4497acef8.0","@material/base":"8.0.0-canary.4497acef8.0","@material/shape":"8.0.0-canary.4497acef8.0","@material/theme":"8.0.0-canary.4497acef8.0","@material/floating-label":"8.0.0-canary.4497acef8.0","@material/feature-targeting":"8.0.0-canary.4497acef8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.4497acef8.0_1594736463488_0.45362395033412284","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/notched-outline","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.e6e23019d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fbd9bc1a6b38e2f57844115519af02429a9579a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.e6e23019d.0.tgz","fileCount":34,"integrity":"sha512-oBpnG85C/8cIyhl85ysTAFVun7WL751Bsiv3j3bWvPo3UB3HskQg5Ymolr9zbtgQrX3AVDbAjxaU8KoRvM5KgQ==","signatures":[{"sig":"MEYCIQCIpYq0Fy9xg6DjSAwBhhjwEwwnj9mF3qgEi6FgPL0mSQIhALMG6IMs5vaByM76A3Ix8ciMr66x5wl/jlVJSrkXClOO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhFyCRA9TVsSAnZWagAAg2QP/AsLP6Kq5viPrUescxy8\nI0Mc2TfRm4FhUrPAgiQ6cZ+f5EU1KIIC1LRO9I0/9m7Rf4uG46GlV0eHokcM\n8aqytphR8q2WzGZ0WXZPnd/KYCOwGoWtqZxho8QBm8yZJQh8CV78EWizLHS1\n6c7r4oPkjsuS3Dka/J32L7ZrhYSuCl+/ps/vdBMFxvWfxcbz1+d5WCd8v2fH\nO4uJd/CaMTgvJXtyFziP9VqeAZWjBAUuvHazIGy+e5eZhwRQkxpRDw2ZTOE5\nddvtba4TYNoJtXg6sivQo2taXrle2xkRsLztAq5A84XMOBTlL8iXkxaJC9AN\nUoJurLoUC0PrPUZQLZOpTkeET9ixrYHcLGtBSQYCHaZ7k6qpaIIcppeeZjL0\nQLg6GMv8K1+QQxMbxgb9c/gLLBQrKFApHqjNhzZsU3HRpl2CqGpZzwFlexEZ\ngSPI3sRsNQAWDIhyHUeSfcdw8rqB6y7+tdIYeCDDptqFXVO1b85pfDT+OZJl\nrxa+WbZyf+7rmohek1kLzg4zFxeuL4w0sPnD/oGhUgkw5tqbgjz6v8Yc242M\niS4e8GSmEtkwkENEvfVFWauXcWzNcebZekVP+0wzpI6WvQFZ3NgkypD1cKsR\nCHJnnufjDO3tvD6Sa2PrdL79RO085/576a0EVa2Bgu6fODLk8kYCmO7X3nMG\no/Fq\r\n=K+Y6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"db31520d2bb46404d9d5c364a2db4e2bc564e4f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e6e23019d.0","@material/base":"8.0.0-canary.e6e23019d.0","@material/shape":"8.0.0-canary.e6e23019d.0","@material/theme":"8.0.0-canary.e6e23019d.0","@material/floating-label":"8.0.0-canary.e6e23019d.0","@material/feature-targeting":"8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.e6e23019d.0_1594757489605_0.04165526694111321","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/notched-outline","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.d548d7a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"741043075ba98397297b9b7334df95046ebc5c98","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.d548d7a92.0.tgz","fileCount":34,"integrity":"sha512-jygi90S3VtZW5ArLj6BBLTz7oXPe+CNTTSGAyYryBMxcxbfiRrppqYKbwjn49pSY55RKLhKPJuvwgu33XNFNSw==","signatures":[{"sig":"MEUCIQCzZXqexhxUjbvCmJ0m95sWP6aQjrbur5YMkt+fq2y24wIgJacBDQyGdBeJk9fZXFZYIY2LXYfEBCLgS2qOgUztNSs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiAQCRA9TVsSAnZWagAAorIQAIBVNvOuH4QWHQ2nIqOZ\n7n6toZ1G+cOl7ZhhDX2BXlz50kvJ8UEIT39CD+yCqU+X61M5FyNcbzCuW6CC\ngV15S0u7pG02KgSC/jvak8+x/j+59dO9lkUEO5n+Vl95gHNDfXBPv0f196R3\nZWgOkO7xZ2dzCyjNeHWHwnHjYI7BkPvVU91fD55zutZe67dbuPWJxPjAB+cM\nPkzFF5/VJWrWY3Z41DoQpJSWnhZk+HYixMlFBPjgNtyCaSz5lAxo7RS6mqqR\nUWs4Jc978Pk6kbKrdvTIXZmIa5bEnxfdeys5mYkyMQH375neL0fsMiziSXSo\noxuIVNwSAZvFCO/LEfqAiHWFhRz66g47NfTem0HYOxqleYlxoER0Fe3CiOYF\n7a6MIOOd0l01oC7CK00RCC5zIevJsH8k27WSOMw4sZfVRxg8f+Up6OW30ZMU\npTIufRS42I46G0jP4K22ZbpA80H+YCUXpjI6sL2TscvfVoCr2ftbhWeXQj5I\nOxy3SmXwzZ4LLcygKm+u9805GKFl5YWCDi0p2aQZElRxTPg8Sq99JIJSPLtI\nsukK8wwRbS9LzebjHH8Ucq1Re3F4tsiO+XGLI2eUR9bO+anEgUhtbjdjT5Uv\n8sY03et+o9YDk4E0fIxW3/6yboE/xJ/sPVlswBhnwzrJfM6oq0BYwHYjeFkJ\n4xdN\r\n=DgYH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9ac3956fa3f0b35d113404de60048e8aa1c1a0a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d548d7a92.0","@material/base":"8.0.0-canary.d548d7a92.0","@material/shape":"8.0.0-canary.d548d7a92.0","@material/theme":"8.0.0-canary.d548d7a92.0","@material/floating-label":"8.0.0-canary.d548d7a92.0","@material/feature-targeting":"8.0.0-canary.d548d7a92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.d548d7a92.0_1594761231284_0.1391932278739172","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/notched-outline","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.58ce529cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4541dc22cbffce79ec85b3409394cc64b488cfe9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.58ce529cc.0.tgz","fileCount":34,"integrity":"sha512-PeA5SVdM8nOypmfXYNJIOG1vuB3V+VCl5yKJ3fPar9vJufugYW8QIYSVdermnGRTRWRer6P+AfzMta7Wqs10kQ==","signatures":[{"sig":"MEUCIQCHxtpEF4/AJuV3btSt3GBPqRNMCX/cHfd+S+fsFxzPIAIgdC02+iFNvHDTJD87MHGHPma3bdl+ZhiNQNRiSyxG5PU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiCJCRA9TVsSAnZWagAAS0IQAJeGH9AGEwS4hYMoE+r1\nBnCxCqVP4wtO0sB7t44wWdi7A5NbeccABy2LSK2l2HZkRCFuNYapZ6uFDvw6\nZ7+nNnvOnHQxomTESHNt21dcKXy1DmlPbFXFLkfwe8kJQJLE8woVbpo+0K82\nHBc1FFN5YcaoNyFRwrsFxuzMFLKzv7fXhH/dN8TAQ9pC+Pcwm3ozIzakHHGu\n6kwlFCO5jeEnhaozGNENL8dFwsitisOogTcwF1bkpQ6JWld+hui0qq1R/NLS\nG+P0Tn0SxKHXLXIJgebI3Hc9LTvRvx1ZmhKdEAlyjJeXs1JnHJ46bswOjB80\ndmTXYBKX0LxjHBZ2xuGckyoxaQOY6s/pI475AL0d9DwRinwMcwn/H+DpqlTv\nTVJkwl3d7kRqX7hZHWgWT2n53pxDVmtp9sX9CD+c/9hKBfX9sj2d+3TsWosM\nJwcxcXafpYyE9CyuBtE4xvjP5jb7GqYk69loOVLlV+47nTxi3weDWazOM/PS\ncnVQe+vDa2iCZCTNESoEZs/IDeOPatFTaODZf/h0SvCvw3RXGzVuGO9HwdkP\nZwhtvEyb0USbsNjjwXxUnwUF2YDQV1Dz01Um+NKokY0CJoWl+4Xv2ySWeTuq\nf62oCi+2iKaXz4YAioZnmN6TO7+LvKwW4WnRpWafmAgufSAMqhlHX8vvPCOd\nScSm\r\n=h7ui\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c45eee764d94f6c07b8a5b3770c89c8bb4ccfeaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.58ce529cc.0","@material/base":"8.0.0-canary.58ce529cc.0","@material/shape":"8.0.0-canary.58ce529cc.0","@material/theme":"8.0.0-canary.58ce529cc.0","@material/floating-label":"8.0.0-canary.58ce529cc.0","@material/feature-targeting":"8.0.0-canary.58ce529cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.58ce529cc.0_1594761353101_0.5326140892970732","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/notched-outline","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.a0f1202dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15e0bb98248b434ece141c193b4fc247aff5593e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.a0f1202dc.0.tgz","fileCount":34,"integrity":"sha512-ohWK32pdzG7DB0ypTzMsacqHu5JUc9h4Jnitm669McUT0v7GLvXHaxO+kLUNV/3bILup+XFn7e2ht/onN1cWCQ==","signatures":[{"sig":"MEUCID1IsWctv/0TJLRaNzgKR4Y9xZpiOK19F4lIRSarUvz3AiEA/lgsGcUHT57k8zou4ox+oMWP1FqPzjts+1isKPkRORc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiUaCRA9TVsSAnZWagAA0aMP/3q2w1E/6pUtSwC24bg8\ner4odvSAINy5T09daV/ddILplmwx5LoOuBgnChwQMQqosiarofY48uj45SKT\nofkiSqdLK/x0lH7111J/th7z/R/nZ1R/Jfpn2376JzkssEqD8n9S47MH+hJ5\nzVhgRW7aS92/FWuV9531Et41Cda6Rw8hczkrWPTm3q8XvH7Oj6TS8At5b1xA\n0g7bbDB2GoIS+S3TwvJwDii6emUBCvZ1YDBDMqXkVY0QRPFa1+/xj4MFH+fD\nnMuedml9MSlFAAstbdlMkH6gZak9esga4rmTyDgFRdyR3dr6moP52xR2YzNf\nNPOBjU5rqsaeDV/TBZJIkqZH/tlBDvHngy82xKYfqiLR2IetZeyTo4yl1YF3\no6YYkJw9/Gq0j9VI+SiXM9W34eZ7LheFwnGe3m3lrY8kjOO7RilsegM7zdAX\nXzz2mn8b1KMdfFZ0JtW0o1Lz6bKEVm7PdyRk/v/aNlu8TXEY90SSRzndCb8D\nppkWUQFBoczoyerXP92WeZhE2sxR8juPWpPqK8cl1zTnqDjpGSdhc4wuVwtz\nivNVQgYLrfdNUlDMtN5Un12px8EeY+8TBp9ze7FgvC8ehk9EiP4mEI0soAXn\nwEnRn/SFZA2x/UnDyfRQW11Lqi7KsuQO+zEi/DZ/zfQgNEETp7lbYJvWzRU4\nktdz\r\n=9aAR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"93fc447a8bb5a55abbcf4b72084f1c65147f3cc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a0f1202dc.0","@material/base":"8.0.0-canary.a0f1202dc.0","@material/shape":"8.0.0-canary.a0f1202dc.0","@material/theme":"8.0.0-canary.a0f1202dc.0","@material/floating-label":"8.0.0-canary.a0f1202dc.0","@material/feature-targeting":"8.0.0-canary.a0f1202dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.a0f1202dc.0_1594762521705_0.9943761901492338","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/notched-outline","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.ad4df58c1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cad424a7aee329524bf4d0f925d3d5f3135408c2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.ad4df58c1.0.tgz","fileCount":34,"integrity":"sha512-9E5pYZ32ewpY6Fdzcfe5YJ37MD1F8reYgdvjavsLGhiB0fSqNoxyVb+CcBZZTNOAxWXUrIkycYwB4ZroQAO6gQ==","signatures":[{"sig":"MEUCIE3U2dml8dqNf65lpd1R6DuFkOhNcq4lTa70h5OiWjzgAiEAv2bZP3Ft+wF7iFWJAXSm31s+wo4DDg8OMtOtJmJ5k3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDkllCRA9TVsSAnZWagAANHIP/23rDMgvVyx+R41ObCL9\nI4FahlxIxw+0xGU1Xkc9Pv0tnp0mDlPHdammQqD3+0Po1WNaAjyBrD9VUI0o\nlC975VUjn+0/mmxkhx2uJq6VU3OWyj+Z7quOqEM+kqKWHg3Q31ON82b/gPam\n/zkwoBd4nVy774wXGFEPYqogirIqxHbXO5Ps8nUS4aNBQh3W8ouFmpXh2qRt\nKlX/PdPHNILV5Yv/Qu1JSKrrJio9edYzU6ugdV6j3Jxgxu0yWlsd4GIT4WRw\nRU1Si8jVJoQyGRqEr+6WVqVJIGNAO9KJlv+AxlNmqbzz59G0NRN83YouYSk7\ngHmE+W89mf0TXdYjybyFFPF0rnMXEmKNtLyDllh29oS+IXB8e4T4D9JlTAoH\nuTqWoB1TQ9J9ThDkRAoWKE7qmXmRtSxE+D1sbIp7xb5ZOGLl48LiH84BDvvW\nncn7D5H2Y1iu99OXRNktw35WKD0Q0AlWvCpIafExUJAYqx8L7i8IbhTrXKQA\nFRfwKCxhJmcs+sPMPhDlL80M9ibRCMRvkx6vaI7uJWOuTJj9DIYikHvmSZVr\nTbh3q4aQpvAyQwR7U8emNSlPnzGxAH2IDumppCxhfTJFPreU+wD7jCwzLkjB\ncVEp4jy01uYDyyun7LoHYiMDhmGGmhCEB+R+MKxqJzCd2tyL2jLM8+Wq9APE\nEN3k\r\n=fM/W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f3541b13d081357419478232ca7ae0021f2a6b43","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ad4df58c1.0","@material/base":"8.0.0-canary.ad4df58c1.0","@material/shape":"8.0.0-canary.ad4df58c1.0","@material/theme":"8.0.0-canary.ad4df58c1.0","@material/floating-label":"8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.ad4df58c1.0_1594771813013_0.3078094598092129","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/notched-outline","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.01db89053.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c4a986e463040af2c1c4de063f2b7e89697db33","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.01db89053.0.tgz","fileCount":34,"integrity":"sha512-GcDDouMFiHCtMlVMgo0rrq9HPPtQWUTLdzljGsUgPjNTKmP3kwkwd2q+mJTXUj2TDenQViPPUBIwgf0Hag89UA==","signatures":[{"sig":"MEUCIFs6Ifi7FEzMZAa8KBZjT3asxOcCgXXlD8wofDcREZCMAiEA5mQiUpEDV8iCBspT9MbaVtk2InrppOsMUcVyZv8PJ10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIMBCRA9TVsSAnZWagAAN6YP/AlhPp6gGfgm7ZhZrzqH\n5BIebGWNdyR77z1+TX+Y88IcCTUKC8UX9OwvBtN4wbif95TMsVz0PgUmAXsE\nVX6IWswG7nIO8wnwXf7wtguCxRToFQT5Fdu13avCOwyumxWPtC+/XQWcTTbF\n3tGnpe/X4Z4jH/kKFxe9a3WCDY7nlrjxwh32pI9D0qfSmUuT+A9KEpnXtr6/\n5En/9ytvYwKN7X3zFQj0VLFrxh9kv2reCOA4XPxDNz1EjT4eePX5+C3q9iyx\nj5mnSRxu/qrEvMtuetuwq9qHNrJflCPvU12jvqf/TNohBH+yljNLefAUuq71\nhVTBji7c8gJICrOQoExMjJf0vyFAzuomMKA90CUMFtlyiKMD2E/V1ZPQ1zCF\nseOkAriBC+G1JMNS9ZlSxIWtESz+8jJin6ugVwaWRoowCl7LdDExJ9mpzoP/\npJR5cP7lZ8rJpE6K7dbChpLBpSaN8BZIxEZonpE1oMKnZDWoxbtDSL/RQ0rP\ncWIJFTvLlCS0LFq2JywhEaaKv7bKCmFnq5R7iazmAL43iKo+DYtg3yk4hszI\nXJVyKAgXXhJf/dWOke60qVlAPKrqiBAT9sZxrJ6z7oCVqN17tBA9+ZmnH64Q\nAYHWVBvdKPYxB/en4OAqPAfbD7e7rxPUGjwH8txuigfH1IomkUMpKiJYKYzi\nLdTd\r\n=8Kk2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8780c29a82c64caee37ec22f279b264af42412b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.01db89053.0","@material/base":"8.0.0-canary.01db89053.0","@material/shape":"8.0.0-canary.01db89053.0","@material/theme":"8.0.0-canary.01db89053.0","@material/floating-label":"8.0.0-canary.01db89053.0","@material/feature-targeting":"8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.01db89053.0_1594917632924_0.7189967594535212","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/notched-outline","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.fb5a4cdeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dde2ba9b4bf591949606be0c748b8561132eb103","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":34,"integrity":"sha512-4zU9t9p6yoF0i5CTHgsgilxdto7Vw/9TsiuAPiWQwCqg04WbBcFG9+GpG3cCMLCZjJLjDZgVyDSHK0Cec50Wug==","signatures":[{"sig":"MEQCIAaoYC5J3V5xzVVjp3iwAhN0G3yT+Us1JrteGMOL5Q8WAiA7LmvGGxdZ8nmJ/8U7yVxNpxdjB+iF/2K/+WjlnHRO6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe6UCRA9TVsSAnZWagAA5ukP/jNxv6B/S/FK/XqfPk+H\naufWh3ke0gIbpGAv4Xp9svEn/THSX8HiGGUGInkYiZ1SFwJ0NRWx81LZdOAF\nrCCD7498nL4gvKU+hxViSfwDe12CSA6jhh+qkBfd++D1fMEHvt5Y3dDUfaM2\nV/UooyrBwZPh8O2l9h6XHy5VmM8b/WRwahb60VO0E4D0dumyTbfdlv1f1Rb9\noXWO3D0ad8Vsl8w0LRHOYvX6R7XZIiDLxxk0NwYStv5/cx9ZjwF53owHK8wQ\nyggek/OpCH7CrFPh7dLLFY2+fcYgDI7K5JBzQoGxGvzCCb/3Ch40F8+GwMpB\n/fh8pOj8L4WnyeDDwhwA2fQA3mbklpZ3vYLdznTgShpxeW8+zBwWFb4vdvEi\nEVYnj/E2AFJWb/pW9kjpZBNtDHr06CkVQYvyHZjwMQyJpDl8MmD4+Z2GrG9S\nCoZ/5q8R0UicEKxbh55xCGHQdAxijawZkorwpKWh9Gl2HnH1fnN2qdvqVxqD\nai2M18hn973+vVm0trYerJJ6q0kpk5Ij7L2k/G0bbpqSYxupDs1xVQIxr3IX\nCinUSWO21TVAK2G0IgQC80/hhqW3LjWz7nAAxsYoC/RmmQ7X8znZ1S6/v8ch\n/VpHBIL/b1lmx6ULXVOqa11xRrXlza3GElGQpcfHgKlTW1umQBgzngSlXbez\noYvs\r\n=MbO6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8e80295b6b3e0ec36934f8d691b193c740458d1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fb5a4cdeb.0","@material/base":"8.0.0-canary.fb5a4cdeb.0","@material/shape":"8.0.0-canary.fb5a4cdeb.0","@material/theme":"8.0.0-canary.fb5a4cdeb.0","@material/floating-label":"8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.fb5a4cdeb.0_1595272852507_0.8298838624963423","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/notched-outline","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.8df0f517c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"480ccebb34f2352182ac31dfd5410006bea4beb2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.8df0f517c.0.tgz","fileCount":34,"integrity":"sha512-IgYK7dc88r451bc83UbVJ46xIYkSiIrL7rx2x0uZwz9kG4ZEOj16Do7Riii0k0rDGGgRGvq1zg6YFNzZNQgBFQ==","signatures":[{"sig":"MEQCIFsM3Q+9URYgcpzgC2LvWB/wz1XDKLIj3VWhEHVBYci3AiAMLZY5zHe17CZJqlRiLNsjCKzYBUOyU2pXAKAl/GQynw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi8vCRA9TVsSAnZWagAAZkwP/1b8NxGa9PAyMjWrUN99\nCqdFRXId8p2JrnguIZCE68u208u/hK0FLH6eVp8+eduiEPUS0QkOvE3RRxd5\nNSFfJsZLWSvTFU4dDuKQKzhjt5rpQyQOu5BggC9mBiLpPTh5O7DPnvP5Wn/O\nFuor5KI9THJoS/22WXRn+8cQQ5rg+AIsEiT+5txoxIyotmJhvxovmN1HYdJ8\nRlL7n2l5IaPyRZ3b54u2XV+L9oM3G5jrHRlYd4lPyofaBH80ODtgEcdaBab3\nMQXkI7cpkp96eTwSY9d2h45izPIuUTirwYTHAyCYnAuapug+MU002gFz93T3\nrsCrtCDf2Yd9KKKufrkOpXYCY7bGyvXa1cF2FPYtH4MR99TSt7JEwlv4FvVM\n1Xy6ArfHdsyAMcl5WGSUBv1oVBjjQ9R28t++JlkeUeLoll4EzmCwxT4C7208\nqNc2XVef/iULCNMSNNmQzHeti+hqiCNcod1vxJ7SDKVCcRJM28wUMl+qrYAm\n+F4C6VGNTpnfGz58ZzeogSuuRns/94W2E/8jOWeU93Bfia4NUC/TU/x3l4t6\nx/JIGnBvhgv1kqZImXhCSlPZaIqd9AoY/iHS0HiR0CEVtsKHNJtGRtAXyio1\nQ5awa/Nil5UzAZxvz1GrkP4JeuiRTnV9OgF0jIIx3/42HP5q8k/IVPp5Muto\nIy4/\r\n=yTLq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5fca8679b0dad51628e898ac223795eea8e54d56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.8df0f517c.0","@material/base":"8.0.0-canary.8df0f517c.0","@material/shape":"8.0.0-canary.8df0f517c.0","@material/theme":"8.0.0-canary.8df0f517c.0","@material/floating-label":"8.0.0-canary.8df0f517c.0","@material/feature-targeting":"8.0.0-canary.8df0f517c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.8df0f517c.0_1595289391166_0.933041596424155","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/notched-outline","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.abcdbcfeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"379d0748529d8abe21176f7a584ff14c452a9cea","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":34,"integrity":"sha512-7pQfY1gNTIE8swGVv1YN30f9NpR4MNVhtHJV3X+OPBc92j5p4ZYTebfvjPDfZ3nVIpxwoCg6hrpvQsPhVkfr8A==","signatures":[{"sig":"MEUCIF1HzsRqpGSYmqHlwQyXfpUZh0aGdgnK9nZTg4vZy1emAiEAkSbmuvBiWa7nF7aflTQlihixxFnLTnuTslBGgs4D8Fw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjv2CRA9TVsSAnZWagAAsAUP/ilBfQzDdJkq3fgkR6fr\nfzQwiBlLTFhdRY5XXtt8XhqgpjMfulEweUWeI5xcbb1j1FSkVWSJBNr8eeMO\n9C8m1s4JUsPNa7ylaiLQ5IG+wF3fsMmtMudnY5TJhiERPQMg+4800Qnc82SG\n5prQew8R175hwHJ1Cvk7FoeL0sdRkuemZ7ZpOVHlcshhfjLEIox75OHpdQGb\nMA2G7TIOD/odWWYtc3y73fa4F4br5cLz5DAa1bHqZswh45r8p7GYCnBDtW3t\nUEoBVuOXctM9E9GyyCDboOZRG0VJgE09t7Y/z2RMvw+s1CQ8XRV1ScfVIzgB\nTQJ0Y/VH4DaW3M7EKPdOAdGWuyBozhpdnxeMxBOuNn+R/aGpJOiFz5A3LEPZ\nUbn9JaB9gYKqFuQmv1OwKSHJhC1e0SkEt6LkXQAms5S+fOGc2b8AocS6J6TX\nw9VsgiNDfiqLEk/0GxLkMUHsXcMcAFe0NSoS6OQu+Imd+aHfZRHtZQNrPENp\nXmUr5WTWTODSTVk0K76D/rtoztOfg06Kchfc+mzBDd0E7D6S6i34lLqmTD3a\n7OZ/AxVUE0+B/QEhGgK5gVlXm/NkwmrtPFEFMiNJD8IM3PhDbes1ibnKS5td\nzUXFhk6cPPmgeQbgGdNfxgVJNqexYn3hhtOU8RllKq0b/HAV3jzDPTnMbocm\nPGX1\r\n=NTKr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"946720776dd73c7539bfa072ea415124b3e08a55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.abcdbcfeb.0","@material/base":"8.0.0-canary.abcdbcfeb.0","@material/shape":"8.0.0-canary.abcdbcfeb.0","@material/theme":"8.0.0-canary.abcdbcfeb.0","@material/floating-label":"8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.abcdbcfeb.0_1595292662286_0.9982083786439042","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/notched-outline","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.7bd5075de.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f27f96e2fb6c2517ef0e916e76ea8e92c3f4c25a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.7bd5075de.0.tgz","fileCount":34,"integrity":"sha512-JxTs9OdnTKtkJwWbBFUA987x74POf6NrEWSaRcMbehJWewzCINPAbCOmaYEnVHEEnje4QdFncXfo4Axx/wm6+g==","signatures":[{"sig":"MEUCIDdcqmZu4nHKmTiwA/+FWYFFqY7oTDyPbY/2aK2lie/DAiEAyypQ2y6MRXI0fpRSx6EpLQwproTkgE+s7q1AnqxQmQs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzhhCRA9TVsSAnZWagAA0FUP/iwiUq4J9eNOR5QoetmH\nLKti8gjLxeApbuElOLuVhbBsBDlpzqEsroF1DoIkqwCeINjbfsu/F2dA6Uvc\nynvZGuOq4LhGB6eEhkGjGnj0ukWtbvYb1LvyiaqcNWPYwnHF1Y0QLBTd8fjh\nfvqQMxG12ehnu4D2hPlrITUWBKGja4xXDI790TZKt6jRxwzTFPvr6+qMfKif\nc/7LdaVFoX8TxQu6tf7nuxguYQua7cU7AR9WKkLIVeUG3M9HzwZHZIJyC4ra\n1vF0xj9J/drQWNHMUqkHiuLgRTXJgKHXx1kYiOMRS1Xxqon5ojN51Pzh+16t\n0yWk6zcNVuj6R/Tuipr00CO36onFLb+96bOiAZB2NAI41RWSMI0CmnaKJoe/\ntPNfUIvsKLW7Ssbr4x6AUKxzNcIzv3wDHlMxjbSDt4TKK4zNCAD/PW7ezsyn\ncwUiTyQ0Uy2ltJHhq3EhvO4zYTt8O48VYyTGBUj6SP0yaynOvVMjJmrYVQrk\nVZTNmkjl06/axfI/+3Uiqnp/3MxrSdXsZRG+poRdF28OV0i1xd0SlNHPkCbd\nFnTIp36lztuP7ucoSqD/Y+8iP82CGmiJ1d+IIDs8C03H1xa9ma3SJ3FD2RvC\nKRRQJycnkHw1kfl50vSsqlQ/PBbidnzxO3tnqz+PnfdqWOdyYBe2Ne2yafnp\n5k3C\r\n=Nrep\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5ae456e961b208e98164fa21047b3ff2e3f3d8e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.7bd5075de.0","@material/base":"8.0.0-canary.7bd5075de.0","@material/shape":"8.0.0-canary.7bd5075de.0","@material/theme":"8.0.0-canary.7bd5075de.0","@material/floating-label":"8.0.0-canary.7bd5075de.0","@material/feature-targeting":"8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.7bd5075de.0_1595357281188_0.684467903413432","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/notched-outline","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.405a29a20.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9086f5ccefed6ce4c167eea4dcc580809bdfa97","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.405a29a20.0.tgz","fileCount":34,"integrity":"sha512-/+SuSK7UES+JhpL1hSYkPqW53Oz9fXsMbewU3aKEtk4nW2FY/EMo4su2FxVZs2f9S9Ui0wLeh7DVczDLdKs/yw==","signatures":[{"sig":"MEYCIQCB1+vnK1I9voWp42PXWfTTktKTJg38E+Cp8MIn6zzlgwIhAMs+mLaesoQrLuIv7L0ZHA8hsHNibjOzDGk9Wrt/L5v9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLyOCRA9TVsSAnZWagAAilgP/RF7fAVQ1HGXKlPLEmDe\nJ3mihvhdo8275aiKLkEY7q/WFMtABDb1co7pX4jzg8950FHX6j8MU6fWZ4N4\n70SQ8E80bNfV8CosB0TSozRFv+gS+dwPiebjqHqg2yk1Bl1ywCY6Q7OU6TfA\nrm2itOxs4gvMnVk1923PkJCVtO/U6JK8XuS05ZMMWxjeYs4nVtirYfPcQfzM\ndLpHgreBVVAxe+rHFVTtyetujYiuhT3aBT//7fYb3835UHRVLmnFX/IrT+t8\nMRvYx3vnzarW9dRvmOK67vbkdITT8hIa/TQbV1/8+Jch7z9SZ3+KJ2Xmnr9F\nfGcJcMqIMVYzW3Hvh0DH9UYXrUyXkGu9iDPynYgkDH7L3B2iUIdkmHWZz9SI\neQjBWkNybPonZnmaQwTgWc8tD6kg2dPQ6iWvZ9b7WICU47c7KbNnDuNp8wZ+\nKwHqwFfbOgxeUCXns5De1NxSdIkQ44sHycvMOlTrotmOOptJHLEFPuJ4sr+4\nsnDkmwwEJrU62Wh6k/BBPSTICZTFLugYhb/HCxnm9bwY0JfjvbthyYMa/UZq\nEfVGG6GAcfdSdu5XXrctuJjgk87PEJzume7FmLV+cr2CfB5MK6gq/5rhjs4S\nsFTOmq7TlIw1gn3Pp2bT/tlKrtCP6blitrYitMkX6MbV6+vONpdsrc5OC1Uk\nimc/\r\n=H6LS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"02c4f49285e8229cf49d9e4a0df213ff914b949f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.405a29a20.0","@material/base":"8.0.0-canary.405a29a20.0","@material/shape":"8.0.0-canary.405a29a20.0","@material/theme":"8.0.0-canary.405a29a20.0","@material/floating-label":"8.0.0-canary.405a29a20.0","@material/feature-targeting":"8.0.0-canary.405a29a20.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.405a29a20.0_1595456654465_0.27533074762528376","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/notched-outline","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.f3693ac4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac1ffe8e686d8dd15874d9c3a56769d9046cbb58","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.f3693ac4c.0.tgz","fileCount":34,"integrity":"sha512-cuwYjbffsqAWF20F93td5RlG5aEUBItDOxWSJV6PX2cy5HRklWNF3YCS0fBDyClcNQLqoFYp6tJxi5cMK/ZK7A==","signatures":[{"sig":"MEQCIGSgkTib7tAWs2RfCN211992F6JOw8A14eo5cjDgzuhpAiAw1nbJZ/4S3Wjb32yuRE3VbT70afnk5e0yPQnRJSutsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL7+CRA9TVsSAnZWagAAOdkP/197IhcfLk+8RJ0FComJ\nZMQ2M3gEwd2NtwmFwzCg+1hagP2ULYS+scUPZBUcxwXR6L4MLt4wo7oxMQaO\naxl3WNezmbewLe/1XMppIjiowZftVTdB/8QpztskIK9BmwwOjjFDxJn+kbms\nWM5xDVzQwJkjOyLqOMWGliilYYQm6fh79Mz9Zcs82zc3thCREGlo1+UPO7GA\nEI1f6W/GzW3dR5Fo6hDCml39HLuHhos3KOnSuYx6uUQ9s+Ib+VNG2SoRw6Xa\n5VcQRhysqRzAp8B/7r9xNQDlMM5HyStfFKLxxvEVTGTVK32dZJnyZgbQazL8\nYjj6YM+254K0DMYWe1uI6Uej54o5UPPfLzk1MQPMAWestfqOBy6tvg2uufvH\noZXzX0KW1KSBPMLJl0PYNFx2tXgoFk++kNVt1m33TYh6tBOABQUctBILbkUg\nh2t8eUxvtvlRS7Ojg1N3LiDrAfQefgJFRySw2JENtflLbPtEFfNwLk7PsbDZ\njRU/wnhpd0/RMohUofKlUffhjUs9q5SFr/qhxtwJCf/7YrqlnHO7sEAZnZPu\nnKOo0zcq1vVBzkGSvR1fdCtQ3hn/5FbTFOIE3qBvS9ht1uiQzm9yxGTBVq63\nj7Ete/28zfPsvDFRk3dfDeOALvAm7ROnj6yMgYhf7Cs08L35AGaD41/9cGr1\njZ2w\r\n=dU6j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d3170e3936d96d26a6ca17df46c1febcfc33078f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f3693ac4c.0","@material/base":"8.0.0-canary.f3693ac4c.0","@material/shape":"8.0.0-canary.f3693ac4c.0","@material/theme":"8.0.0-canary.f3693ac4c.0","@material/floating-label":"8.0.0-canary.f3693ac4c.0","@material/feature-targeting":"8.0.0-canary.f3693ac4c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.f3693ac4c.0_1595457278089_0.8848719750174681","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/notched-outline","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.12a109680.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fe8380836875e843162cd1b1ece581253b2f576","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.12a109680.0.tgz","fileCount":34,"integrity":"sha512-cWIN9RsJT0ofDDEhYOjLIIXJPj9jceCRgKZn1Tu9sPXH7kCK1AWv+1cdXanEzEUXcZ2G7m2ajSPmNVGc449GIg==","signatures":[{"sig":"MEYCIQDzGg4eGP3EnStNa+A977GKmYh+fWDX6thMctmxonc1UgIhAMwa8jTYXYHcUcf7GTxVPEW+d/kimBaZ3+GVHhCDmrzq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMX0CRA9TVsSAnZWagAAwacQAI7XoDaB1wu7KUArevze\nhNtOZlOW80nRXReYIhYsoOlf3r8l5w1NkjUCVBzx43T3XxBFUHrUcW49edH9\nDXY7zftexdB1jTgMEjqwPsXLZHfZND8n4NGiq/u3EBQgWzI0/f6kUkXeqMtw\n3f2R8s/TlbiNt383kF7E6cfQ2AwSgh/xv29b+7KsflOHpP+O0F/nOWQ+yUdW\ncEwP7CJgTJkrUOBCDV36E5OfIK9AiNoUjLhwwq+kvv/6T+JiFP6W4+sTo7Uq\nYPJs0WgRm2eSFWRh9XqZER73fib2Fs7d+tlDezxgSO9zC/xu+b5y8z3M5Qrn\n2hCntoH4TdIWf2H1Dey14awCzxs2X7Avjxi8VELqDv4U/5mf4IE4ESR+XNbf\nxUbK+JI9srXTiFqzriChI6oJtfgiTqD0cOPGu/ghrJitgzW27yqigZnfrNG8\nHaAfE5yHIpyMirRMOOIubbHzyTJboF4Kxke0GRbYdCO2dCmN5Qxe+ur9SM/k\n8nj+Vl0LZqpgbVILF2DrTf2kxZaJeEEtd6JM4aUIOFReHvfvpZ8nWUfcnA0j\nm5MmSQuEssaxl0JNngXDGEkuxDAtfGdeBsxAIEUqjYPCfdbejLJXA9yfb81I\nsUXD8z60ZZUwkX55d76/LYQJagugh6tqL/wNfkD+bfxUnjpfnedD0TkYG4Ns\nkvBj\r\n=5Hlx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a403e743d7da095028c3ba6d0a66ef2f7812aa8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.12a109680.0","@material/base":"8.0.0-canary.12a109680.0","@material/shape":"8.0.0-canary.12a109680.0","@material/theme":"8.0.0-canary.12a109680.0","@material/floating-label":"8.0.0-canary.12a109680.0","@material/feature-targeting":"8.0.0-canary.12a109680.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.12a109680.0_1595459060271_0.09924564851128626","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/notched-outline","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.bbd06696e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de84901c03775d8883930f764d6e6ea6777539e6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.bbd06696e.0.tgz","fileCount":34,"integrity":"sha512-6xJXZvdlch4SQbuAAlO+FRMJJh8Ctpib88J1A3IVDR1ycpKzRvbGmItzKosIFQy/06Yt7WUw0Z57DlI7f7m2oA==","signatures":[{"sig":"MEYCIQD/fn81GozGDFDIDwbwnN6TWFFpdI4SaDSoBEcSJhHckwIhAIDJO75OTvqHw9gbSIYnC4ub2nWu0vCyC1zg7mNKSOYk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNGOCRA9TVsSAnZWagAAGSkP/1cQnmJhlaWsPgUV1ZfN\nlkLMIqocH5XGQFv+XB9CqVjkAqRGJFXHkNXyyunFiwx/KQ8ps6CG97IIQ6fb\njH6dpVRQMm7bNCY+Ej/g2WHQXPOCZLlBz+SxAPSSnd2M6QywGbGGAbXGQ6FE\nV5jS9kEAct4aUKm5v1pATPNdYEMWpPind4m+cOmMxbbCRwffpTiMWTIAsGAU\ndyRN+jJiz5DVnJ53O5jtez0HVwSqRDc/4qQfcfUWqInOl3RSWil5LKcCEekk\nFkBaUC4PlNHeeVzrPRjLn+JvN9K1r/QtmEV7aU+1+PVw2UboRpj7V3+N2xin\nvp5cazr+DxlqZ5IR36ELyhholqIJtg00MxEIWOvtLc5tIG5Yh//OTT3tUfpJ\n0VBzBi4+b6VFIQWVi/CDH7zlTtic2vRMa9nFs0fzGbk8QidftWXMQJeh2yQZ\nExsjdj/MO17YuchoJwQRZmmNx9PM8jv1n996v58Wa7Grz7E1gp3uO6gbFBz+\nyMPkbBQHczJm7QA7BhVe3GNON9EGj7qGD0FzkpQA3JYMb0TWUIW1Txr2i5pP\n7Gfsx8U1RVJaZHdCWnaNGRpKSqJsjbhrb9vJXFTKU1RH8cGH+4yhKEZXfEmW\n8H/DhtFADvK1qCP5pbM0umkokClwk+u8FsNVIkb8VfKKkyBHwkSKkfRf9PJ4\nWI+m\r\n=Gmse\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1d34a386a37996e326b9ca18440ff1cda261f3aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bbd06696e.0","@material/base":"8.0.0-canary.bbd06696e.0","@material/shape":"8.0.0-canary.bbd06696e.0","@material/theme":"8.0.0-canary.bbd06696e.0","@material/floating-label":"8.0.0-canary.bbd06696e.0","@material/feature-targeting":"8.0.0-canary.bbd06696e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.bbd06696e.0_1595462029592_0.6310537381070149","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/notched-outline","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.4951e7651.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f4518d2ca41421ab93ac84f37e4fe5985ad7f7b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.4951e7651.0.tgz","fileCount":34,"integrity":"sha512-xLkGozlArtdalXgj0nQxdt/E37Xu6KH7TQ4s30Pw+MnABj4tT0793LQZoQCSD5dhlvZqk/4C6MmlzgoBoO6kaA==","signatures":[{"sig":"MEUCID+bEceLyBRKjM3sV/dQCpfmq3Rlq/RR6JHD8hp1VceoAiEAqVyhhJScn0bdpj+c9O74xbSuGDJzjOWDruYv+NOAFZA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOzsCRA9TVsSAnZWagAAdy4P/0VYUJBJSLKIneLpT7Us\n1reN67kComDVRyBZChl3h1oHvFZGuejXHbMtyG2em/8G1U2ZTP1BpPbbAl9C\nU0FYIQt12TwXq9+Xca4GRatQ2ekZj4IECfCRNT+F2hpaaRGEbOqxV1LxbHod\n7kfhbeKzBqqJVA+lgVwWsB1w988aj12Jou5nNf7DFkqsZLWwBxt8bm/02Fi+\ncB1TIUqn/9Ktzhqj1Pz5vDRLnMfuMjXSyLjPEKcX4RzImlOYSXHl2GfQKRxK\nL2wRAPrlPLfg2N5TZgxmQJwt1TWsYnHqFC9HtWV0B61+Yj/gRlASTX73uduS\n4jxjY0ev1ACfrKfQmPUy+wCgmUWAH/xYs4koWPzb8PxoqAmLZnRz0kD/bjXa\nC0VqGxL4+RyuveuMU+so+B1gMDMjEe/r4JEwtczOnqLXuGgMRDldwZU5MP3V\n1AxS0yr+5g9Gs2hPrPLx74lQ0vTrf5OncQqY9KXVruu8rP+/1w5M1xv/Yi2H\n5HQODyHgVvcsAtMiTAWCEXh309bTd6AQxdGFeWWnfavMTfK3OJeuF2IzVF1r\nIcC6KvicB6/vgC5KhzHWXqqZhSRIce0FyVYgUiTOeMszUGob1DTlhTE6OCIq\nBUuG8icM2zCFppULmVkoJ+V2dOXe3qg4e+MNK8tLBXLW9eHb6morKjOco8Go\n6tpg\r\n=kg8S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"32ca9cc0ab948e59f91965e96adf325a142b8336","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4951e7651.0","@material/base":"8.0.0-canary.4951e7651.0","@material/shape":"8.0.0-canary.4951e7651.0","@material/theme":"8.0.0-canary.4951e7651.0","@material/floating-label":"8.0.0-canary.4951e7651.0","@material/feature-targeting":"8.0.0-canary.4951e7651.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.4951e7651.0_1595469036436_0.04480041067271823","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/notched-outline","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.75deebbef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c6751dca4d60008bcc796fe7d5f5101ac3f5f22","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.75deebbef.0.tgz","fileCount":34,"integrity":"sha512-PTtZzEXFi7jN/wDN0zMs5VlsHyhqgMLJK4vc9TlOEbOc43UuKnuUe46IrOBWAN8W2qnTQhvhHk12MZ7i2ptgnA==","signatures":[{"sig":"MEQCIB0O3a7miLvOeESjueMtZPzR4pqfWr8jbEnw5OHk2VwGAiAsd+XZEzM1Ox2JHnlmuO7mDZoeNRdHWfKnrGS+amCxuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGc1SCRA9TVsSAnZWagAAE1sP/3tzLiRFjA5wU17xkwDz\n7taB6IWXjoxdHrQcId5OKFexj1GGBQ43hxWqqCoUfyfQVWN7Vgg0MR3fh7jV\n79iNCnioZFfBsx1Wd6HicmdHD+2CoTnnSvnzQtiM9H91X20bTNXU1qAnV8UQ\nx/zZ7o2sJmDLhf/Rvzn2RlpAIswibkaHU1sdKiAob/ui4vGl4iTQxYKv5OSU\nJq2P+vmEQ6xkbDvPcCbjps/9xFrL0OD31HqLB/FTPgklNmLhJe2zaQ2pFT/U\n5Zgxf8UPaWr/Myxjp5CUBYUpGWitsZ0BkLQn3yWrwUD0sB2VPX2KKHjnVPBG\nV5XwfaMp+aRqM7fUpX1+BwbGhCEZry/gI4iOQKbg5qu6Huyd3scegin4tNVn\ni/O4wEcI9W02Kx1GcMywYM96gcbs00FJUKVu1Gn5g0as2xY7kDC7stqtB0ST\nyAF7kosD1KjBORG6fE0ikMaMKsQPI6I0cIehI47N0LqPBeOeN2m4xa57L5aq\nLoCuEVLNWrNfyCOh5R9EybeqlEDDdwiyhw2qcQBAlnvfXKPYi/gswYuZjsrV\nPB0fy0dD04BUfBO08uqzn0Idg5uBjpiO85EzMCYZkkQoUtq+NtqLnug/KtfC\nnndHXjJah2IIsPCQxrcTWr/k1iaEEdK8uaIhIIZg8HMGNtdqt7mjKZZA2XZ5\npXs2\r\n=Gnhy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3df5ec3c8a254202fe3ba9017528cce3d5d906ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.75deebbef.0","@material/base":"8.0.0-canary.75deebbef.0","@material/shape":"8.0.0-canary.75deebbef.0","@material/theme":"8.0.0-canary.75deebbef.0","@material/floating-label":"8.0.0-canary.75deebbef.0","@material/feature-targeting":"8.0.0-canary.75deebbef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.75deebbef.0_1595526481889_0.7181476373914344","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/notched-outline","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.95aff33ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cb21b7a108cc008a7fa976700f10245beed0841","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.95aff33ee.0.tgz","fileCount":34,"integrity":"sha512-SFKAiyNrhR4Ntb5yhwl4oNXK7V3NVxlgD8Fwg/vpF2zbaexxRxigi4ZkoRI629RbQjW64okYKwUISHunXSBbuQ==","signatures":[{"sig":"MEUCIQCIGtj5mhgHx1MhtdrJklTQIBnnfdS7/FrCBvuf1ouG3QIgNnjS4VHcaPbkJHgAAUYj2OdkQdRLz2c/eHOFD/0m3To=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGdtwCRA9TVsSAnZWagAAvdgP/RhK6YvOZrPfstpgwsqA\nu7Gxw1S0qCzSQaT3Jy0HCYuNVQCDxFnl7SmCESicD6fAbH1SiTjKi2wCJQ7O\n+82D5af/IBNHEN39P5CVT2my8Pp9dCrG/gu/22/dRBTDtb6zhKSM9xI/YuuL\nLHHLueusGaI2MRXuzET/BjyMj7vuizY7Qr8bZkPiA7msdK7QIHNLhUk3FIH2\n0F1y8f5SLUBHq6BsWtrVrSRSSUMwlAupLHGhHrh6sxA+lxpcnmvj9dpKR7nH\nJdaxkgPnlF15VFyLcIl+hI2EpF0fvPaTySy/yHLJ366hRRzauaRNK2CahuIg\nukb0LiJfTScKmprNuoh0J4KBQV/tGNWgW6hx88fLmx/yJQfMF0M2fpwqsK+c\nRsBDxXA4fBx9bGpiFForq8pofZvfU/s56oQ268SnMLIsiaZBPqolcjImoSxX\nDECQQM9RCY02foOue0YDyLlXnOKVHPFzpMS+JolfYrrjSJINoMre+5i9hr2p\nZgXapeEMJgIOIc5A4kQ9jsnzehi2GBrBFfFUfdOxjBRIn8gVSo2t6eIZvvcv\nREd8Dp31mjX1Z6Z84d0RfLc7J5WJcn2/tCq89UuZI52R6n/bWzl+f62OctZQ\nutR1PaDpA4LIQ9ks3iBf46aO9TJwxlF3lROJs7T2CjnxcejTB79O1X7duC44\nF2Fi\r\n=Aejx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0343ebd62969f5d4315e249ad81f2837fdbaa096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.95aff33ee.0","@material/base":"8.0.0-canary.95aff33ee.0","@material/shape":"8.0.0-canary.95aff33ee.0","@material/theme":"8.0.0-canary.95aff33ee.0","@material/floating-label":"8.0.0-canary.95aff33ee.0","@material/feature-targeting":"8.0.0-canary.95aff33ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.95aff33ee.0_1595530096553_0.6426785547372433","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/notched-outline","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.9d9f47473.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36bcbe60bc981893d25509e2bd562adcd994e2e4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.9d9f47473.0.tgz","fileCount":34,"integrity":"sha512-/SsHzfNh4Eovgx09tk+xnZf5A3GRNXJFxUU2o2jltHLP9aqX3in4fspJRFPtanewFQdP9Ts2p2CNeOvcur0qsQ==","signatures":[{"sig":"MEUCIGY0amELDcpol651evDqL3lad+EEdEEAMnLwGTLiAsADAiEAmo2XP4wHPBY12yuWWnietFn+Mme233jc+wNH50kAV3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGewtCRA9TVsSAnZWagAA/9QQAJc8x8CoGwd954TEvpuz\ngecTrn7oOqYR5myn9XhjTbE2hGgiZeYMvuwglRbNdqVszTJCvn3cLd7uIQAb\n/ntq2CjVq8+yW88eD2v8v89hgA9kZowusb5zOSyHGlzJQZrVyOeKOJp0lG6G\nrbi1Ph/v1K18kCcuc/avjxnwyChPQHOID0u46eJpEYRAEOJUP2wkJ7YFSs6K\ntohYUm6mfz6bXf2xUsfhUN6Sa3pdQv29E76zZtRrfv6fRWsXYlgg05opOFDN\nMIXvtOWb0jDAphDh4oB1qgw8q/+tTKK7nmxYuxwQF9ULe7cyiaIaomfToxnI\nAjEhvG4awqwuHp5KA2drak6+jkS72acsOJrgeo6pmjHAvaqCFz+Xkb3BTAXE\nOK/cTEYShO8ENQkxvJ7skF6nhICEJR8+6+qc3e2uGRwqWFbPtDvlQmrDSChD\nCbA6VR+LUlGSDh+2C7+i+0tGTl3vFm/FrCkO0DJbF+xfIcfxVsFaSZOqM4TC\nWiY4k8WZuaXf8fkI60UgsbWCVLIvDOwpkrk+UZdhbrpeDxOknjtTh8xnbKhU\nlpIO+MTWJyDBBCynzc0PXR+rJiUcew+xjUAYYZqd37/UibHIP1BmF1xtS56q\n3+oOX8u/H1BPlbShVTyMEhZ24E1Fc3K1LUfpenYtf/VY+9eN2MSEYOh2aSww\nEcAc\r\n=Gds1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b21be0611a45dd7df8e3b48a3fd0aab09d6cb236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9d9f47473.0","@material/base":"8.0.0-canary.9d9f47473.0","@material/shape":"8.0.0-canary.9d9f47473.0","@material/theme":"8.0.0-canary.9d9f47473.0","@material/floating-label":"8.0.0-canary.9d9f47473.0","@material/feature-targeting":"8.0.0-canary.9d9f47473.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.9d9f47473.0_1595534380697_0.20695893728118597","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/notched-outline","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.00dfbf6be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7df4f173dbe58d64004711b93f189a972e6aad53","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.00dfbf6be.0.tgz","fileCount":34,"integrity":"sha512-qjH9hBKWjPuCNyZ8wsXQpF8GzMudRxpqUlb5JWaTiRzqVj9/8mAZnqRzakULQIylL84HhYi3pZxZhFz9/9+7Rw==","signatures":[{"sig":"MEUCIQCS1Nk5JNNC9ujCxUvULjPjIRJRUJvL/xuYA8FOvmpOLQIgVhCHQKlvADqNrGW0IFP3j6Z2Iso+SLYf7xykQFMJpk4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfp2CRA9TVsSAnZWagAArXAQAJ6NxeF+dZ4r+IXgB+dM\n2hAnp+PQvEll04x+DzpFQKwb+SH9kHLzB75xT0V3mgK13J7ZDMSfCEiYT2fO\nGMRJqnvS59nZuFPEGlK1hX2u1+4cZr0gpsNAKGkT5CU7nWff98gP1D/RNOXZ\nsyo6L3pWV4bcNBO8JS8BmzlWQvq+Yi/33ZQLa6fMW7vfipoDwgkwCNRslUDm\n1EeOc64QGSpglmWGzZT91StbiFAZUbQtvTNPT0OI2UXeO0rxOH8X9fjcgWEM\n5dvf87KdNHLqyIdDInfW5XrE+seLv5u+6pUAWy1E5zxcdYBF0K5x0nIj6t3N\nHVbFP8PgT+ZNIzNpLo8lXW5k5u83HxoHaCAdy/ilAaGGLFw35zamdLqmYhSq\nZZM+3gfVJ7dNdn5tUUULjlsJBMJf1f3t9GzwnrG/zmkLZT4jV5V6sJ2tgPvv\n1IrAQFC23qTb9RMFTxfwmszcLefJcWvQGk0bN3fL+7oRx5nhBuF/qC9c/vU7\ntL6dYbNpiRFFg9l4mHBzwQpG5lbT5Xqvm4LPrtE5aGarOWSRXmYH0liL0C0M\n6+uURQgq+lsoqHgIQb2IOXGqu/MqWXlFyMUVSpJClbhc15/pLT2ytqAgoi7a\nMFVOO+jo44plSI8y0oxAkA+wShWhqe0uc89CUirfoFUhnY+ZbGxnjhORdwO5\nnkik\r\n=G9ue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e4a97455c736fab77028e52beabb53323eb60ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.00dfbf6be.0","@material/base":"8.0.0-canary.00dfbf6be.0","@material/shape":"8.0.0-canary.00dfbf6be.0","@material/theme":"8.0.0-canary.00dfbf6be.0","@material/floating-label":"8.0.0-canary.00dfbf6be.0","@material/feature-targeting":"8.0.0-canary.00dfbf6be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.00dfbf6be.0_1595538037683_0.984288312084105","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/notched-outline","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.b87e522d2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1cb5bd9b6dfc522125e442ba7263addc3e3a6b0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.b87e522d2.0.tgz","fileCount":34,"integrity":"sha512-SSzBpu8wYT3MiyDac7oMjxw4TbINTHRhzjZyN1QxuTLxVpHnzBcqZWjT4vMP7KW2D4KY0YkQtLYF036DVL7/RA==","signatures":[{"sig":"MEYCIQCVv0ECiqz6AW4qyWIxX56d3TNzXyXEaj8grlZK4NJ62wIhANIK517ZjFyEYkz6347k4RwC4feyn7TX8fqQ1KcT7oDE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGgAUCRA9TVsSAnZWagAA1UMP/RgBTsp000wINuVkF/Az\nGoysJmVfKybtrCs2SnHbxk7w+DLxlsXEaeDxcMuTypMy6h6tapPnoMmsb8Zu\n4Uen/VMtmmuW91UbZLiluFkZlPNcD3lmUHMtXpWcpB/ynZyE2vUAOAAVTJwk\n53Lceyk155Bogdf8H7LZ/LvM8Z6muWdy9quRMzu1BxhG+S5HAyeki6YHbd2P\n1TRLUWwHggUEvs3IbABOb1KDuyfhRVQeNTIdibfAXbK8BaKdBkzPl/4oIFYe\nWiQkJaKD8eBi0k1mtH8mpjj6A1Uv2S/zz2CBV2uyasOspoXmqmLIGLzCDyJg\nbI3LjMUHBAnWPrh/rZM3PKrfQkqR1wUCY1zl1STl5IMw/WXpGsNVG3DmFDA0\np8zVu3UNFSq3GD26t3ZeerW4AdlX22aNOWMik5rjVT9R7bwcFUSkcGoDgCLA\nE5utygFnzFPMBfpw2HxghaE8S7hVu0SqKkBz8gnrbG9Kw0KxNcqJgc7OtpRB\n4e2QKnCVD6gYK0nknRhEYaufLrd4He0VofzHElGeFx5EVGsgTnF2eGzZb3Xt\n1e+JpNtDIXq7U+UXGVIvuEue89hhAo1w6iwJPeULAN7gTHsEHKiiIMefbvqQ\nFJvAci7RPcjYno7sBjazar6/5nUpI9CL2wc8MptWRe18dk9dNwoZWags6WBH\nF+HW\r\n=D4vL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c6b4bba75848a4cc1d6ee29d1b67848ff11a8ba6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b87e522d2.0","@material/base":"8.0.0-canary.b87e522d2.0","@material/shape":"8.0.0-canary.b87e522d2.0","@material/theme":"8.0.0-canary.b87e522d2.0","@material/floating-label":"8.0.0-canary.b87e522d2.0","@material/feature-targeting":"8.0.0-canary.b87e522d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.b87e522d2.0_1595539476393_0.17256030584695647","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/notched-outline","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.5b3e150e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6535cb5fbc9c78c36d5350d560f5532ebba04e44","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.5b3e150e5.0.tgz","fileCount":34,"integrity":"sha512-rG2XkiaBMUa2SAzfUYQj9caVPn0HZ7c6+pwFvHIUgU9MdDWf6rNfO/xS6u+oM4na8qg9SgwH/1XuqX+lB7MAQg==","signatures":[{"sig":"MEYCIQDQuWyJD2vbAQI/Cr20GIT1nfxnV+ObBi3YsVldj6L0pQIhAJTd4tvOoc6lyv4ieRsQtk3u6fJI1EXP+kJMqEbqf04T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjhlCRA9TVsSAnZWagAAhqUP/RKMNgBJxJT76cgIIbs/\n3qebrdgaFv+Tp9aH1VpYNFk4GHTZGzEOFrZVSzZJXXKNy5JgQURk3+6D7SBA\n6020ERGu7l+EsehTMrZJRVTjhst5GI5H2Gy6xfAogKdVsOXLODNxynLXXxP3\nd+9ZHGJ7gC/VuPuOQdAS3DB1SlkFu+N+W+lcuG2lRczx1QmO2jka5PUziEMg\nUIfseEUMicWTpWhk/qd0ANy5XTIzuFN4wM+wgZ0H+yZIH4CWznfR84qpgSK+\n1qOASI2HCkxsc7B4xATyy0jYjkaoCcnNlbCAnKfn+Yxhq3B0g7RxqfDZ7B+v\nLwmMWwzsfSiQsm4YrjZhI0BXCEjeTTAHlqdlhumHLoi1f2OquYTaU0mUQy3c\nLeah1jJ+zLlZiS5LSemXPOD0z1OoO65rObJSYYYrBTPPPzDFCWIC4au9aiLF\nPI4KNkBKXdIbKel722s4yfJXnOr2rmrUeXCd/lJzBvhjP1RpKZTtNuoybF3q\nbkVjwroaho5esSgpO2BE0D2/lQN/xtgGXFxd31ESJu5yGVr0/wiRXP/MIf1n\n96jSqSt3zZV6TwH9U1IIde2QptZB/vZpHrL5+SegqVl7/pOa3Jfu+VDD+pjG\n6GEMYdil1oZ36HclGBpKkvMNwQ19V7wR9xGZc36vtErQwmFoZ0Hrhc6Gg6GZ\nKKfJ\r\n=8FQA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bdcd04000450742ddf94918c2953ff0bbfdfe9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5b3e150e5.0","@material/base":"8.0.0-canary.5b3e150e5.0","@material/shape":"8.0.0-canary.5b3e150e5.0","@material/theme":"8.0.0-canary.5b3e150e5.0","@material/floating-label":"8.0.0-canary.5b3e150e5.0","@material/feature-targeting":"8.0.0-canary.5b3e150e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.5b3e150e5.0_1595553892846_0.6915096645982513","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/notched-outline","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.f0ae11786.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3d9e73ff7959ef15b2d2fe012632d5ef5291d89","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.f0ae11786.0.tgz","fileCount":34,"integrity":"sha512-aTjOHgt77oeAUzBUUimUD+Ym9suq2W0UYwziqAYkSlOpbPr4DMVMDUV2PItjrJUj7nkc95aJ4NpYTo/C9Zbppw==","signatures":[{"sig":"MEUCIQDrA/6Qqmz1VB7ZP+JjLR8wIxW/aGDPHpo1FFLRQyUgeAIgTjlpKQz+ehAhYHU17uukB3z5UxAQnSVtQZGPW1DU+ic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGj0GCRA9TVsSAnZWagAAeMMP/1v17Hqs/JSmI/u97MGP\nHDjUYXd+P2Dpm+IjAQ1X5YCRfsTs3j/7uO1cqSRcBOAr/KQFsFBlL0bUR45V\nFgpbVFRfjXEkUiFD0LJBAG5yD+qOHIfKVqHITUuIqC+g9g0yu6EdLYlgZfcp\nzQHrMzozQQWxrL7n+2nm5HwAoXcTevhpivuHTsjZjrMuCN7dicfyXLzZ33Da\nDFopTh+lc53ylD4N1Dwhq0WIJYIW+a80L8iv3rP3fe4uyAFZHCx6AxWdeByN\nEBMlkQ1MOgDNlJpphDylK86dEJwGBB3XvyR6PkKLRedca39T02QfIXfr9twh\n7oE85CkSuCJ3UPQF+eCa/qM/x7aD5z4sXi0hPgOtV2TByjmpzi6t42VP7d2b\niAY27vjy1ZIUozVenuWO3hRmyyj71uDjI9T+bH0Ct3KrDktULvsegQ2lKQNm\nOHubG2LOXZ8iyHGeO7HnANZRetrmK/PsX3kihP6OXLSXcI4EkTUL7B85tHlF\nlFIrKiZM+KDetW2eylpH3RyUMxj4eAelq5YdIHdjkQvnga2BYYbzo55Ca7eE\ndZAdDiGcXWbuu4c/jmwqiw6wFQBYF/6glr2UsiI0Omz8KnAtxNteMXK6yr78\nfKPHMhwWBo0bpZprL0pj183DHr4IXpYGZc6qQPJFObpBOFBqKQyJh5bP+uEh\nWgKF\r\n=7TIk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2f6df990a3e45b1985740da9e55bce17882e69d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f0ae11786.0","@material/base":"8.0.0-canary.f0ae11786.0","@material/shape":"8.0.0-canary.f0ae11786.0","@material/theme":"8.0.0-canary.f0ae11786.0","@material/floating-label":"8.0.0-canary.f0ae11786.0","@material/feature-targeting":"8.0.0-canary.f0ae11786.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.f0ae11786.0_1595555078432_0.6324336731512945","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/notched-outline","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.fb4ee66c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02b9899a37c76cccf4950115bcc2d9454917ed1a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":34,"integrity":"sha512-vA9aXXstsTGUMphG6CjIdF3N7Rj+X9k53vnT9sIG9rH/Pku/OfbzTCjMhSbOFSVWx0u4z4Y9BC6M2jcwCqy0Pw==","signatures":[{"sig":"MEYCIQDbyTeZY9vd3s49iW7UE/uUkH2bSlbFFPvInXkb2o6hVQIhAKkFwCElWSjaCaNMXlhftZ0sQgDsqbHiEblpiomv0alb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkNYCRA9TVsSAnZWagAA5JYP/RQ13+52vWJfhyqpia2h\nEe4iuACd4DybCJ0RWrDtjvwUT3870Aw/i/K+zpgXcoqn3l9b4ek5DUwH2Vyr\nr3txRq2i7izpNStNkBn764rihjRHaYLY34UMu1ENqgzuLAcQluDqLtbPaEN8\nC+h6u4aIr9+eKE5P8S0TGru3v5NsS6HeTkhi+bk5S4X15DglpS0tn5UHNWU3\nkyywZYNYHRf0hfWh9wp2aEGD+2ksA+DEcQzY8ViMHUL9tiehUDrIBN7SClKJ\n8NK4znUCO3uCdC55tSdUj/vP8b87kQDMjXdsYVAWi7o02SttBpED5OZHacJU\nBSNe313nv4knBMrvZglHgXGGnINdNNDXOuChNHYlQeYMovRGTB5Ua8mRLYWY\nQA9oYsvYlhIA64Keh6ifAd5lTj9LDMi2diZnZWxI/O5jtlx+XHP5pDkuk1d1\nwF51Dbor4kQHDTX5epytDZUzmHPcCv7k8gvwVojpPj/+9IbBMAlK/TSgKbHo\n+WW25hmkgOtsBHvb0byucJUyu2w1ibT9JH9UhUO8jjXNq1xKCd4I71Mh3tVi\n4wGv1Mio7oSmZekX2MPx7tiXqMAtUhD4NGt8wu4ocVopAd29ngWIeK52GGWI\na2iIM5pW9ev+ztcaFPKGvgDjK6olceN2S3DoA3rArhP1dPGOs3JhRvJiFumV\nbiLo\r\n=pO0X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"38a9d8f8bf46aca600cb4ba84272480ece6c67bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fb4ee66c0.0","@material/base":"8.0.0-canary.fb4ee66c0.0","@material/shape":"8.0.0-canary.fb4ee66c0.0","@material/theme":"8.0.0-canary.fb4ee66c0.0","@material/floating-label":"8.0.0-canary.fb4ee66c0.0","@material/feature-targeting":"8.0.0-canary.fb4ee66c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.fb4ee66c0.0_1595556695569_0.35936970920193256","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/notched-outline","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.5511e0aeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad103c0613a7c372268785ce6f506c45941e5792","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.5511e0aeb.0.tgz","fileCount":34,"integrity":"sha512-nkRRHTKeEayBABYzYjZBEyIXw2K/qHA98YW4323HPDQnstwGFhpud+0Opq9euOX8f/t/St5iIN/IC8BZKvz1og==","signatures":[{"sig":"MEYCIQCaWOhvSLev6BFo2GhWE+1WOevjdXo7ioPSJRArPAPbgQIhAK2uU3kQboOurj2iSrDmbVxDzuIspUWVnZ1TsTH7AYnT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxMGCRA9TVsSAnZWagAAARgP/12sZTsoqzFeatyDb0On\ngUi1e2v4ZX+a3K9MtgIlV1dmYiKb/EqunOWQS/12cxVTBdr2vzpcuYeeaPsD\naCy8yae19CS8IGkv9T9ybCxU9kTZWoX6U7dH+qMzi3BQ2xDsarYhTR+rq6Sv\nmv15ldT3N1zw7r2p8k9qZ8ZePqmlSaL24uv109oFGEDG/hWpmbKWfI8FOcfh\nc6iSFC1AQpvzD/qGH7AWxcDenphmnwJO4/WTWedk89G/ImBaGOj++qQQLNDN\noYCJXCT0AtLQkp/1PCpb8VmtPXg3JI0V5vzalBsW9Sk7hESkjwnmuv3D3Qo2\nKAg6Ztj/wzCdxDrzHgYscEN1vGOUHhC2szWPg+wXgYzY4HikMLNDuxntEPpi\nTGl9KM+7KqsMZ1Kla/5wh+1aA0wE/sk8NpDUFeci8hOW8QCa8ECb4E1RawjA\n+BKM+Wao+KuFAUNA4v3ABZOuBYQhRmZyv+5SHXcjNGHxAHOZrxpl6oyXpltd\nRh7zfPc2F0PcNZoMB8eaY143sNOXhYM5jSZgqvHmY9scD56RaZYFs1eWCIBt\nfQ1eFFVMz4OxqxqwBTJroTG94gnaV+Y+Byuc6EAQ0nfiHZ63EEVHznGYH6s/\nWUUvh1+W5H3HnDYxg2jv1bRwC91tzBZuhzeD9I/dYPQUwbVlCXxAAsDC2JkK\neEvo\r\n=RM+D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dc830dbf81ef9cb796c66b2d35b70355ca46a37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5511e0aeb.0","@material/base":"8.0.0-canary.5511e0aeb.0","@material/shape":"8.0.0-canary.5511e0aeb.0","@material/theme":"8.0.0-canary.5511e0aeb.0","@material/floating-label":"8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.5511e0aeb.0_1595609861575_0.5863574032847472","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/notched-outline","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.8388a9bf6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15f4a4d6faa4d68de519dc19433203f4d3c7dfe1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.8388a9bf6.0.tgz","fileCount":34,"integrity":"sha512-M65nTbUuDHHrThpv5sVEV+gGhLUp9IG7sEn8BmF1Ln4IOZH9eMvQrvpxSNye6Ek7oPwBHlO62XMf/5o2/XhaFQ==","signatures":[{"sig":"MEUCIHS21/u3l2s5pJyrAvRZWug1morOip6z6AASwBfpN9+IAiEAtWsMVgoI3J0Qv7J7C6sAJTNfC5zAyndHlh1fKJeriNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0EXCRA9TVsSAnZWagAAJcYP/3dc1u5c/LjNJv1l+Pzd\nvTKYvasCMaeZgSjkLLbNJ9FTITJleOl41CWU+lFGszT8gXpZL36GQXIK5ifn\nNWe4122N1EiTXEShmYvAzPqXNozy/TOK5oWW9DJ/HM0acVs+flXEiHDAE5MZ\n2T2AjNULzvrip/Ve4r872OmzIOaozKAHFZ6ICZ/Ry/FMZVt3tHQF7FweGz7E\nrOhnv4xoijOkY3vO5WFsSyInrzPXD+kv0liohG7dTfaNth5q+UkU5LptmKet\neI/rTt+KOszlvUbrKhvdQoGD20zeqw4jBrwhoXgWE1W0rkR/BiDyazqKxwVh\nwCQxKMGy3DpSPbasxmmcVt8EnpUy6cExB3bRFO8VXgSWx8jd4NkHhEl7Rpul\naHak8pxe46JKPhHucbFQ9vQYHSNVqgg8OaHoIhJxzrQkKFDGRBOnIshaCUVG\ny6cBNbA6mBVOZmPlJk1nD+rjlPWiRy3uVFP2qiPmyoZhHtugxXyCk0Lge09p\nfyJX2x4a90aP8NLCNxXv4DMz/pWUsfKpR8dcw+Fvys7TSdlLtEnp+0rdqsKZ\nKoYqhCh1CD6zWvx0p404V6bVmxSEvwP8snxDN4/orpMuxANHUqqdLHm1laq8\nZ0nCZMgLzutEW5XZrQsb1tpniL3mys/BONDnhIuYTAJA2SZrdNVaAk57M5Y2\njQg/\r\n=l/Yc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f2188ad8c46b8f947761bceed0fcdfd08019e97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.8388a9bf6.0","@material/base":"8.0.0-canary.8388a9bf6.0","@material/shape":"8.0.0-canary.8388a9bf6.0","@material/theme":"8.0.0-canary.8388a9bf6.0","@material/floating-label":"8.0.0-canary.8388a9bf6.0","@material/feature-targeting":"8.0.0-canary.8388a9bf6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.8388a9bf6.0_1595621654774_0.7111743011985348","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/notched-outline","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.ac405eae1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5d6f4820acf83e78d76723d1ebf52044219677d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.ac405eae1.0.tgz","fileCount":34,"integrity":"sha512-JGnKv6/z2naE3wCOWuFxo2L4w9Zn86T07Z7twzd+j0xMLz1yK2gmX44e/9c0QbtUpmserIZj+feYzNBjcEM9iw==","signatures":[{"sig":"MEYCIQC708s9nY9E/5seveyiOGacvpHgUFU8Q0RW3YS8TWlahgIhAKkxLJqOjq99JGB+w7leDbmwrQxogQ0JDJYCeqgrvK7B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu22CRA9TVsSAnZWagAA7ycQAI/vQLv6n+Qm++H/AV0J\njj3nKMaTv01+7w/7jpPzP2ughEG9UuDeVYejLCH2GZ0E7HvGDit4u1ACgfzv\ney/aQvpTCiZNpRc5A0Rj3ZJicW91QHYUeZbFwBUfOMRMYrPp577EeF2fcNUQ\nBXeVveucmw3iq+RGSn7AWHqMIwaT4tbOOuWZFpS+6j1JsM5Ezh5svQ9fEPM9\nNdF7aKeiEpUwxYz7Stq62rL9Uml+fehEbiVgfrbblmCMlbV6DozbV1IPFR0l\nXd83kvYQaRuiX2gfoqUKJ3Ch4gx3atKx37qDolsZecRGcPkjxeNLMkenG9LY\nYrkb3I3MXp6WKQxookgIRwcBU+e/c+21Wy3x69FF2WAcXDY4SDYq/UI1hF4b\nGM/QmBFvGoErI+wgVvceWTicBlkG/JKY3tGTBH23ZshbL5EHN3wJLGkeqbvZ\n2l9n8UBGAAmxKiR3e+L6gg3ne45bX1j3afShEXcIc3A5hb5bZ9dITV6Z2zSj\nAKaiE7Yj3d8Gf3q3VxSpJf0wsa3ZwPVX8GoUFnd12XLh3+fzEf1zsq+7pZ/f\nsJhANaL4hBohjbDdrRoaK+fjGSAaQpdVAF7zBQVJfnjNBQ+8VgGaHcJPGW0I\nB6rKluh402rnKBAPeMFMmYMoffTGy0JYYOA1AjDIFLo5fBD8BciV8ecpVUHn\niGZ+\r\n=R6iR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c4f229736a36f17b97137adbdd4b59901eeac852","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ac405eae1.0","@material/base":"8.0.0-canary.ac405eae1.0","@material/shape":"8.0.0-canary.ac405eae1.0","@material/theme":"8.0.0-canary.ac405eae1.0","@material/floating-label":"8.0.0-canary.ac405eae1.0","@material/feature-targeting":"8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.ac405eae1.0_1595862453979_0.33231559464939897","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/notched-outline","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.75553837c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1b49cc975b68990fa5cf42c39a34a50aa15204c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.75553837c.0.tgz","fileCount":34,"integrity":"sha512-bzlOgau5kZoV2hPWygFoi+nNvN2kK5T+ScQK24ZNczLR2oH58gamhghOhBOHxdIrXS5qqjpG31tsfLBq8bR8SA==","signatures":[{"sig":"MEQCICT7ZJzCeDoIvUF6R5tAesVWVyLB90KcC2c30eDP9KHmAiAuXjQmGmTmHnFFDnCC5WWBmHG5kph3ZVayZloP80kH9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu8YCRA9TVsSAnZWagAAcFEQAIFZLy2PN/xR7kQsOxsn\nnxE5B9VzNnnivs6mMV84rmkhLcqvbEorb+9jazBn2X2ZV/n0IgUwv3iEPife\nrZsRdii7ZPkZdedLeUXz2BZaXqfBt4+zuHufW5u5qnTu5sVcxjrLW0EINsR8\nmFDENZ07RCFo5iRKG57phivie5QlDMDAjiv/IJByukQntjeNPqkPE/dYhF3l\nJ50TfwCLqRTrGtWmJ1DvxGq3sikT2FEz/dYbHr7KCfrqIIu+A5ZYkf044r8/\nsPoJwBu0ekuxEZtC2xkAtcquCp6Zh2MBZxtLo+O+nw3owdKEB1uE3ErL+hI8\nVrI7B0fSs11tYcdcfqTAFXQKtycYJq3JnNLD30e9iRVV4GiqcnxKeMUF0lfu\nVG5hD5R8TgZcApeYn0G7+3vviz0DHJPowheK5FaZeMExltVe0HUrOPcltx96\nMxAsmFnGZmbAQlb0jOXwlemIFIcTL5zR5zQihzntgUjwx3j6NVCymgdJWqob\npVav4RzMtJTP50cg7bIbaH+qUc+xj5ygEaEYi6bpxyUC6OB0Dg5obIzljceO\nuw8teZMxHzRNoyDWJaYR9FaFIlAOE4+z915dhfBrcD1VZIM7VwhaFsJK4TgZ\nKO4cQ2S+fMiBLua2HNyuXOXJSuKN4I4oVqyc2bZBCOnyvTqFVD33qMijrAZu\n0asZ\r\n=DMKD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"18c0e52ebb63979ca614d6df13d96e2c1cc93216","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.75553837c.0","@material/base":"8.0.0-canary.75553837c.0","@material/shape":"8.0.0-canary.75553837c.0","@material/theme":"8.0.0-canary.75553837c.0","@material/floating-label":"8.0.0-canary.75553837c.0","@material/feature-targeting":"8.0.0-canary.75553837c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.75553837c.0_1595862808157_0.09899578336212733","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/notched-outline","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.b96fbfc7a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50f08d955e4770860e66de32de8be09be1f7dfbd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":34,"integrity":"sha512-WU+/fpiFCfZ+H4EtXmUkAxGHyn9vLUAk6JP8zNM1Fx3iGQ2Xa2ETFixd7UjnNUu4b1vFdGOg3d0izQ7/HZMq6Q==","signatures":[{"sig":"MEYCIQCOlgjnKDMEvhDVIIk2GpuOQB9NZiIbxmoSYouEC1lv4wIhAN3mSc3mbW85TYx9s3lTnXhSEpOWyLCbVHzwIj0aaYeb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvUTCRA9TVsSAnZWagAApHgP/1VLKWFxX0aT7olCnv7c\ngzRn+8iB602lRZuRhxl3zCPIhARWtb8dsepUlSZLXtJuC+2PgF0lNF/ItPJt\nZ1qhWCW6yq8t/XP7vEyzI0DvF9b/4h+JMpqG59DSUfKdD8u/1nLsH8RrdGtX\nq+VFjQrgFfxTHyik84kSztdG+CNYjcxauoYkdcUuGlaUe7KfhfHJ9P4aJVGu\nXGHIxjJnKuIGU23JSR6w9KXxucpkkiJuwTmPVE/bdgeihl3kY+cXeLDf0C/K\nl8dqb7VkifyVRZJ8zftFBUruVJDTdYktmCGRykve6fQu6MKEhGUy9Ispl/Jo\nUF0cSczssm6jxqcTzF6U5m4byKI99eMtt1X4FEnjYIoXxYUT+kJampl0jxa2\nT+hHCBUmBbUtmbH3PKXD8Yv2btbiawpcgWq5FtLNnoSvjqWwmxVRi+wSpX9r\naGBb4alJsto0w/9cwy5XuEYDtXWsXHMAx7AwATmbNjeqyWBY0Q+5s3ffreF4\nFNOviXdLO5icoQ3j+bFTmWmktZq743b1hTMK3iHLR1HZMaLQE1m1wvWmWHgs\nqKKEnKDdU1Rg+mriPQhpVzubFBbiXJCFkMui+p5In95j5/YwAhXu9Y3HyvTL\nZowPCy8weM9+kBTyLGIBAGgVs/tBy2rmlOatqRB8tJg5HtzUgzcXlZ4rHf1o\n0Dno\r\n=tKIy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0e9c13ddacae3f3bc09bd4f168d276110fb5677e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b96fbfc7a.0","@material/base":"8.0.0-canary.b96fbfc7a.0","@material/shape":"8.0.0-canary.b96fbfc7a.0","@material/theme":"8.0.0-canary.b96fbfc7a.0","@material/floating-label":"8.0.0-canary.b96fbfc7a.0","@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.b96fbfc7a.0_1595864339250_0.4451059821380421","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/notched-outline","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.61f1a8d85.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6967b885566eee33fbc8d9ce963dbabd211062b9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.61f1a8d85.0.tgz","fileCount":34,"integrity":"sha512-AUryvAPjP1nAjOJdxGLfnc5DG6vbK9uE4hKvmi2+M/CBZ0rydz8zp3XBj/4+LJW7uKAI0+Rda7nN+NhT730jBg==","signatures":[{"sig":"MEUCIBUCRJYdvgtvMyljeyH7xwfxIrVUdQNFi5O/8pTu3b9oAiEA6xn15hmSHG9EKw9GO75OvgA81RUjVZJT2S0NqgyG1zk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvczCRA9TVsSAnZWagAAjfcP/jbajDrksiZeB0Sj0QA6\nkXae0MjRHlHVNhPEU1/GkG1+c1BatjEbi4sjUVPWksxPRuJv8YuT6IyEsXV4\n6dbPIvEqnLLYZv/L+6CJKsphTvuunHp7DNf+MeLHbw5+EGYEZySs/304rDo6\nGl0qDwx4lSwRcIueHtooiw5w0vYRuj7+NFVUW253isfp8e/pldqXSbGzlElX\nssq4R89FlJOusGaBmomUFG66EKSKczGnQHlondiiHgANq4M7VYwLf1LY5QDz\nPQrVeZ4gU3sATfQ3sKBBcuUNZLMDWedXqpTYeA8vcYFuX2NwfOPTGoa/Lomi\n67oFcprT4aZyQZdbNg4eNJUIhkdIYLmXQKBcjLpn1DPu5sWmkYRp9aMWy7IV\nmo0E6qVJRL71+M5FzzP2tqR109iZSOFL/i+velbhKRfbKp2sjRlHkq9Qut1E\n+vQIuMdN0T2pArk9MANnibf/1kbq8KtLTvqYef+UcNf1+h4KrqkBN25t0aGi\nzE3V4uBJ0C4LnpkXBPuSeFzBd9L0a8f2GRa6IRJ//TGX9N0i6nf79JTC6L5S\nOeFGwQ5P9aH5XBe0uvUXHHs/EX3LULDt0ortY0+KDeOmXdl8EC5i4Z12JaJF\nycoETf666WwxG3Js4QeNIoW4M/d7iqkWQKA+NbsFckV4P5qcwKq571RmpfcH\nggrH\r\n=1d31\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"71b0bdc987ed1b1b5ad827abc78149cd4efadb89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.61f1a8d85.0","@material/base":"8.0.0-canary.61f1a8d85.0","@material/shape":"8.0.0-canary.61f1a8d85.0","@material/theme":"8.0.0-canary.61f1a8d85.0","@material/floating-label":"8.0.0-canary.61f1a8d85.0","@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.61f1a8d85.0_1595864882593_0.9379461092149004","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/notched-outline","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.81dc33377.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83c6413625bb05b2bbdab31ff81056e5a2addac3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.81dc33377.0.tgz","fileCount":34,"integrity":"sha512-cKWdZL6kYn7wNK/y44ilpKzg6S/5OJOHU77Kqur7ehd+PqSW73Dlrfabq8Ujlu5XG6Le25BiNijNA+lzanxhpw==","signatures":[{"sig":"MEUCIHS5jFkJnjLIUVL8RSWYTl6JZVRU34vyqIGFREEuIMAPAiEA124GLXNOU0d8NVXXvY+WmzpA7gsH7lmLOjD08OAfhKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvoOCRA9TVsSAnZWagAAd9AP/3HR9J2qzKMAK5IpELlb\nH0vxDWL7r3/bZ9/DrEDYEVpjcK7AQ/RR0HkRSGv2DxuXH/4iwAFk1Am7zeI3\n3q8UgGxtrlkx6G+rSWbl6EMHv05EmYLClvuKOOrxCb2ahj/kA67MVMgFqFho\nnN6ObcQlI7TeWMsI5f2uRhKpsHHKd7r0Yf0YhiVMI8Ct45KjOsYr8AbqytEn\nCw//oy8XtSX3rk/s90/pwYpEUiAyh+ZMbJw6v0n1TuTTiVZeRPKiRR9Mxddt\nBhuuMR6zRU0ZmbXHAAC8l8kVGZuM+JVI1/leGx/c3BoUedhT96XFTbDCPJ5A\nG6r1+OnjuW+n9nX4exreq3OOfSfqA61oV3kmKk9p8tcprjBoxdYN2zrpPsUu\nJHtmOagp+BBNBSzkt6/JcQCU1mOCeiWoT+Xgl5Yg/KfALpNj9pUZ2D0FAU8h\nY6pxq8CWp2dugL4pnT7lSfuUJF2wbRuWgNRrBuHp0dlIYHQ9On6YJZehb8m9\nGzFvxQG5i43L1XyAlJigND8WDpFQVtuDFBg6jJuHUrUUKKc49Hyye5y6i49V\noyYKaNOtJEzY+bYu9Ep03LfFNr6fOWjS6uwNeDaKf2EcWRAViO86trEM1Bcp\nT1GhI2duO+DIoK4p4cb/Gw0th1KcG1CnDB0fYXU5tFkbD4yLg3qcolH2SHEm\nEWVd\r\n=Pat1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"14e4858d309a20ecb69620f07c8f427bda0821ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.81dc33377.0","@material/base":"8.0.0-canary.81dc33377.0","@material/shape":"8.0.0-canary.81dc33377.0","@material/theme":"8.0.0-canary.81dc33377.0","@material/floating-label":"8.0.0-canary.81dc33377.0","@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.81dc33377.0_1595865613591_0.48563641332186913","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/notched-outline","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.ffd9ede58.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29c3542b002305371fa90d2363e36ab1dc6930d9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.ffd9ede58.0.tgz","fileCount":34,"integrity":"sha512-AhsF/yC+7TQVXJ4g5jHJBOV0Ovt6Kd3/Fbq8dZOqylsPzK7E8Yvs0UxvVsWnTJag+sTX0KkNyKGFaHDZH3MRig==","signatures":[{"sig":"MEQCIGher+PDUi9y/+D6FFOW3M/gWZLqOPGwLan4DEE4heoWAiA5DjWixgzvg+3ekxyjjDvddCXs29kKG0yvuSr0A3w/Ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwHaCRA9TVsSAnZWagAAGXoP/1Z6zdZyNFIWKyJwJBxk\nFQE0tnD+2GtYNRvJxa9Lb4nkMQOfxCNcdTLgd2CcVv75Wh5Cse5rM8nKKlNI\n46ALs7+hw7EMMV8VWBi1DkcfVo2LZevspgi5TQNHoF/8fcCbC4s1SG4PxbC5\nUpSVCgS5fRUsQWCDkdvM0z0gUbvcRmW1V7cHmbiMZSI3Ho0GYs+XkWkyCvQY\nwARuWYTOPrpnwYBblfSBmfho0vuwNYYDUAh5whVAqSUzdIfMxmjMri0zaZcy\nKu/04MDUNPaBRX+94bb9hlLrCkoK9XhdjyRlWIcZoGEuZtbLF9YCLXOaSEhE\nXoMCeQy2I3k8vNUxCTrips8YHRGuSyOa4q1gBLb9Hy8ORWqWkKC4WYwJwda/\nyeXxCZbmcbJWshw1beAX/wnjOgHzHnrPpvotuUKIPRJftcUt31EwoF4jySsB\nNyvlUjETELX2asIEgmPJuCmbgdeFn/7f35ixb3jmZoR4oYgkIxE1WyueuAia\nYDodRjDZ71DOnBBNjWxQWCky3dHiTgCh4s9IQ2Z3pQaIauZ0bYhhqtSmzApC\nrQT7Vas4jUkju7Pfa+lCfsQAbXvnRMl37LZsj5SppGRI1ht1cR/h0gTYXtU8\nwd0s6zTpIfY8PGc7npwaRb86kBBpj5dhkcJ6tD69DCdDjclLOYdsea1Qk07Q\nInAG\r\n=7JeR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8a029ef9963cd4799ffbf7dd03908a696d110f7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ffd9ede58.0","@material/base":"8.0.0-canary.ffd9ede58.0","@material/shape":"8.0.0-canary.ffd9ede58.0","@material/theme":"8.0.0-canary.ffd9ede58.0","@material/floating-label":"8.0.0-canary.ffd9ede58.0","@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.ffd9ede58.0_1595867610261_0.024361867943987425","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/notched-outline","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.52dc55acf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6feb58753763e8ec9cbd43685fb1c04f4f41c04","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.52dc55acf.0.tgz","fileCount":34,"integrity":"sha512-SgMYeVOqrOCNEaior0RB0Afh2LielAMVTfT2+iL21AekQB/myZxIm2ll6K/eZmphCIp+er9066muEm+iqjlh0A==","signatures":[{"sig":"MEUCIQD1sNRa8gR8k/HVBj1gBz+gns/VwsKNofP86W4b+PwBYwIgHk8RsJCfhz2DTjPL1sYLTK5EaElhsRneLGjIO+17Mtw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwpHCRA9TVsSAnZWagAAZhoP/25L0Ce58zHrSw+uKWw/\nFt2kLFYA/FCjIN4Xz6Mi4manFsWMm1q4dCnOUopdtcQUmu4ZnP59N4ayRcCu\nJVJ6euVtYxeGu++zRC/zsHJ/dG8nlJ2pKiCZYqLQg9yX47xa3pbMeOQYb4eo\n37wY5IOtie33/cUDc75loc3KRnWbWgYAZN4C7USzy9eUde2of7+6E92Bc9MV\niiQloWA//QthwiIddyN3k7ZmlM/l7B4WKcNT0wgKQCJTr/CwtGZ/t4bAObpd\nTGAHVj6atwEc6en+uya6CiAfAhAC8AZz7X7HrYbh3niOm3dFrGiDklDIjN2z\nv6pghsgpG17lDW/dQ4EPn+A1E1JIDZ+mrPCUrox1DhyzcSMXhqvWMoQZhvTh\nAATDJRxz2gQRePYm2Z+oeTiB58kGKylTQlKhzj1Z5vmCjZX7s6kTj4ZpkxHe\niSVQu63FPtd5p0Y85sXgDlx/l/IGh4u/N8xNUbvpQ0mGKZRUPbReysTxn4yw\n72iwC4vv3PY+gsYA32KN1tScSW6vrPhPgk19+E5j/X9ZTJj4mVSGShPRc5LC\nESvqWtvEywYUcKC/iFaH09d8otX4+NvlZtQw3bb2V3LzAh4vbiq5CvirJ5IU\n8d/JjV2yQKeeBqQTkKQrYu1CDLG5MroISIDFGpj/RyPPKxW0ExcJWVxvBWOY\n9dkg\r\n=TdsB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b5253c9af3b0721aeb0cd096ac48b4c113801757","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.52dc55acf.0","@material/base":"8.0.0-canary.52dc55acf.0","@material/shape":"8.0.0-canary.52dc55acf.0","@material/theme":"8.0.0-canary.52dc55acf.0","@material/floating-label":"8.0.0-canary.52dc55acf.0","@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.52dc55acf.0_1595869767192_0.6463682126506656","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/notched-outline","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.d4274ff05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1269b8803de4b1bd2bc3b8c3bf8ecec1658dbde4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.d4274ff05.0.tgz","fileCount":34,"integrity":"sha512-iBGM+EpQXvDAt2QlazEsaByfxGUM9/4gRaiw/4LQa9hCZcSE4hvtCdlKn2TURiEa7/9BmFrcSFl7iaAZpk8oGg==","signatures":[{"sig":"MEUCIDKLRGhR0QekDdKGbRFQIcbM24LtwDSdDRa3QfDYjXMDAiEA4I5Lle1wpLAj3Q3gnlZh073u1TH+iLo4Amk4wiaS/xQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzA5CRA9TVsSAnZWagAAcIEQAIIOWf6ux0TShh/OIltK\nn4mG7cW09Yztq4T+LhK2ka99qzrjkS4ONpyc5/ck2ibZThXWfqoM+zOl7UeO\nNV+tstrYAF0UHx30WQOIOmSW+pIL8Vfw7rqmctOzgY/InxRDO8R+5q1CoMGQ\nlQB2zysWED4Tr+/fx3nAVUNRDCQU5s1LXA+rZRaXkfR7n7APrTeuuTsxLrWZ\n/MSLi21UXN/c8BM1YD6yj+YVJIoBeKRQH0j2zLj1jIPRLKYY+zw7ErgHyRml\nqDvJzbhWyvZASOqji/tszU4AMYyar4YqcVHj3rFjvYoXmQioI7kT7lJNuknu\nh6d+89e3jmY7sBB11E/uFnLjvPpEk8Hg+6W2azyk8c+vrzIHBdTMrgrJ71tQ\nHzUvFmwPsD4Rzk19QA/M0PGjMmfJKXKogaTGlI306ceXLcyeXD+t4CQuJ3w4\ntyyAyeOXgmNuictZzOH+DmOJBJsbt5Ao1XUyqEO6I+8c1v9bXm7yK25aYJE2\n6qmTXduqP2lTTzMfbn8GdmCi4GX/Yxs4rbnfAPipB6Rdv9JuTHf9qA+/AswH\nvXuzEoTObb4fDMNER17b7pPgBqObO6HBJs+qydzMFBF5N2QtFF0sL1hJklZs\nienXrRXYI+60T/5vdehWvkDklfaUcymOG6N7Erb7zFOulx98G9m1DJihYVp9\nYBIX\r\n=ZTFf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b4607e708cfd7069d540b1fd6042775c4599855e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d4274ff05.0","@material/base":"8.0.0-canary.d4274ff05.0","@material/shape":"8.0.0-canary.d4274ff05.0","@material/theme":"8.0.0-canary.d4274ff05.0","@material/floating-label":"8.0.0-canary.d4274ff05.0","@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.d4274ff05.0_1595879480955_0.7476036813964213","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/notched-outline","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.b82d0696d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a5ef28173c3518cd38990ecfcd192a9dd70341e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.b82d0696d.0.tgz","fileCount":34,"integrity":"sha512-hgyGW6O+y00SWjgiE0V1Jg3XXexT/3Vgs9hisKQ8xX3dSGICNtgO+uqLsbM/mx0NwbNbZ/CJmaC3cdSeAjyfeg==","signatures":[{"sig":"MEYCIQDcF9U1dzOkJeidwDZvY5sADFpjBFxCixToQ68u2BhB6wIhANsZu9da7y9Ew8Pp69O0HIzp1UkLnz6zTpIoNXqaVf9Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzILCRA9TVsSAnZWagAAd3oP/3P74LcHN7pvsvBkhvyI\nvxTx/UUW1u2VPiWCjRn6xFRo1wW6PVkxOKjUBQdK2nKj0ahXGl4OmjLaEd0q\n8DFc6SiJY4QyV5lSHE+V5bkE4BW/nPfRWn2ERlo+redyJSKsy/nrbmZqCiJO\nWQePGqfV84oioqpQ+uF22Me/oii6RtXIIRAU7fWZGGSAeef8XkZciHHjE7An\nF71sBrpZP9fjSSkac+eDHQ+haQCGEMjlhTZIjX/GpftrShyRSQLiTi489dOn\nq+uKHOHAY7JLDFpz9IvsNU1mp+Zkmn5IWuqZlKD+8HZAsWLL9xIL1+mRiFof\n34aXMRzN4ZhGSvWBvOqZUTwMTegkvUt7fSYrmslpJtUPkUXU0nf/1z4Yjs6h\nYb2JZGslYFuevr6Z39IgQDD9T0C3cVdUhLhF/JPI/Z/pHJH+apy7Lwao3g7H\nOZlgdDI2guGfms0dyYxso9F+zb/gBu4AmLuNywI4+Sj0N8dKPvsIc2A+S/Tf\nsJTQlcbRSGCt2DAGDnWw3exquGxbN01mZat/OYJNFq4HqHSmv1+L4wIagmwH\ngduUKVl8TQ/dDKetdLbrFmswHCGDkosxyj1TNra6Cg5INVy0Tsqid/Iax9Ne\nzrDT3OH3DQ4hxPJQX+QGlX9MT7SC/4rVQ+ZVkCr/v8GrkNKnyYVH4OjLWbj4\npy2B\r\n=fRXW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"914e71226c9aee0625b5bd1fff56b887e3c924d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b82d0696d.0","@material/base":"8.0.0-canary.b82d0696d.0","@material/shape":"8.0.0-canary.b82d0696d.0","@material/theme":"8.0.0-canary.b82d0696d.0","@material/floating-label":"8.0.0-canary.b82d0696d.0","@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.b82d0696d.0_1595879946848_0.38220151277847836","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/notched-outline","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.c2852000d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b88932ddbc672d6ef932bfaf9c7e2e5cddfcf0c6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.c2852000d.0.tgz","fileCount":34,"integrity":"sha512-fnoHYSnXBDPpzNyxCcxADsKLgvQFz9EAnXG6NcVYLhL/1frXNwQZbNkzGbHCzgvGDcUjp1CU+xILJbHjMw+2kQ==","signatures":[{"sig":"MEQCIAnu41WVBele1uj6fSi8O5MZ9Gn4yY+sK/QswtXWyfqCAiAKjNyU4kwJPBgO2OICjGHwfKhZvg4Wv3BzVAz10M0ZUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0AnCRA9TVsSAnZWagAAyQ8QAJtBg+bWmutquqL3DZvv\nZjvbP9fL4JhLnYY08t7DIICXFr0wdT9c1zCeSWbihT0hDxeDMAYdqqLjzZBt\nAPTHYSE0AflUyHbkDfEllNnKejYhIB5Hofpb/3+Pv6PvYSL6YZY4kmNfZApR\nOLcwAuXQTCUSzpotgZNf+UkBzQzb8cxmdMUqLOIatxA5vT9+U/LA9twmoVQ8\ny61iJwFyOhcHk80dcgEr106n4kvD/k8IfnHMZ6dRd4lyZ9G6F21ofIQwynBT\n+MhAjvdqaQZFtCUDluOQ8wg1dG0CrqXOR+IPdl8TfgGNXVLaffKw27HErX8W\n8LrLwjG/uhcByEFzb11ELZkrtx1qlYD2nML6U6FV4smhqHkYIOmUpYOxZbqT\nSmwdjOteoFFFb039TZQooV3HDlK18xgegREZqGn+ftF/Nrg6Vubz0IOqzp86\naBzCU/9a8Zcb/wvglhERRL+Grs87NALYy7S4gyjAUgOSj6mISi86YWigGGik\nFYrtXEAPzqD/WHgFybXa3nBmasQTuqDUyr2leZDIogpD9QTJz2q3CguMF71K\neYA99vD5xTxqeV30AuZjwnTVFnekhSqADyEzi1sI4hdMSfCTLq3PZGqcdt/+\nB3YVkw1O05HEM9SXMwgSKXggxDtFkjwFJN79GR+V3jos39iKB1lmdEOjdLxK\nC06V\r\n=a5ed\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"53080ff99f83ab326fefffad16cd09e449e79f27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c2852000d.0","@material/base":"8.0.0-canary.c2852000d.0","@material/shape":"8.0.0-canary.c2852000d.0","@material/theme":"8.0.0-canary.c2852000d.0","@material/floating-label":"8.0.0-canary.c2852000d.0","@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.c2852000d.0_1595883559058_0.7414604268144411","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/notched-outline","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.f86f83f54.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"684194caf595ab8349be8f4e027006095259a68d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.f86f83f54.0.tgz","fileCount":34,"integrity":"sha512-5qhQr95gFegriPrfdZeEkfakziUE4wIJh0//cIPJUpzbYbhMBHoyB6lMFOJVzuRc8KDRIXpGR1279ItyYuXW5g==","signatures":[{"sig":"MEQCIBQVhw9+OOsYHZX0h+WApHoAgZsMO4jDiX4BTnvMVQ/mAiAqFzCdkvs2HkuxGuMO2MfnV10f3LQZC+PQtucP41Z97A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH000CRA9TVsSAnZWagAAvLIP+QAidP4/QLWO4nvbdvIo\n+plgEf50oTKtBnFxlhdbmXYWX6kkf3HkQHcCrulug1p9S4IrtYtKR5qEYLW/\nBDCY4UuPxHxnImIJISIgHefOOavk+xNKjSIafWaeYoxlngI0V6HZdHMm5IM7\nTwFTFOBVk+rC5DBG4CsYYcriy85PRCcDmuA/iJEtMy4sQ2YelyQaloYKlQoj\n9Gk77hIDxSEOGmVxv/OJNYHSqe6SrLMepZ5A/OK20G04z0klXHer6qvyDuyU\nMkY9HAB1GQ8Y9gNFsdv5cqBJ54rm7tE0/SZRrc2EepXvYCe2KRtJEhvcPG1m\nW+JflCLCI42UqOocHb1vQ1mMi56MCFHTwWt1fQf/evU+XiPFbnPCrCXIRO21\naoqzXxgajwu6XhzbVz6dJxe56w5O0CCUfPJurkKrtqyOm52Uq7NWpPEVUCa3\nh2k14CiwqxCuArcJcEd5G1VSpFUpTu5rAO6rUWtf3eSYuNE09iH4SjncTqYn\npbhzMo0ru74nF1qE+0D3LmB/zQfzr4LjxcQF+CGxQluaiii6BD0KsqNLL0pv\nL8/tRL4dln+vvwQIjwVEmBvofbivssWalsSYXQ9Yl4FfQSyzVUBO+kVZa1JK\noo9+pvCwcSD/amIX1Qh7vMlhFvv2DPn9zedZvZpcooNhGb9fKJusLij6oEzQ\no5m7\r\n=jp1B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3c8abc334934dd33ace7aec681868717a4e26d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f86f83f54.0","@material/base":"8.0.0-canary.f86f83f54.0","@material/shape":"8.0.0-canary.f86f83f54.0","@material/theme":"8.0.0-canary.f86f83f54.0","@material/floating-label":"8.0.0-canary.f86f83f54.0","@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.f86f83f54.0_1595886900050_0.708618298344408","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/notched-outline","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.41eb1684c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a694345b197e3fcc4d5c57f636be5a90ea048a67","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.41eb1684c.0.tgz","fileCount":34,"integrity":"sha512-4INMdUU8eKhctS5IpnLSdQ1YUaLvexZuVUM7RnA33159klWKbqpRzIbfVN4y1j6VJBBfUsFlMrOTNM/RtfJ6rg==","signatures":[{"sig":"MEUCIEJf4ySLVChZMuzkPqGY1c7jwpPY/xyTHetZO8OsXOfTAiEAkT+OmOEaOrSMeXsG8hV9zN9Pp7ZQkF2ft54WC2LiRjQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGWfCRA9TVsSAnZWagAA3G8P/2yXV1avYkjtTOvCITQ2\niticpHvLkvcfqiy7p+CEzeVr/ru8bP89tGHEzLwRASjJqTCApM7Qc/drGITo\nQ+cwAfOmh9rzXK77ZX3+VmQdzlEYgSPqCH8+9mtD0fLZflHwHNpjzdaYb6+x\nA47Hs7ByHKrZoDGfXnXKxhSVUYJTc7xPjHZtM5xLWhzbPuRLJtgHMjZSNieE\nGSozyf+Ie8P8GOg4OzOtRkj2TEufMzbH9VCK6IxbhqvwLRvf2596rAcsGlKw\nTW5qT16cs6wPMu8mkKO1HneIh/5IQA/v3VtWUlIF85esC9aeRWHIYfypOqtd\n0nj3hFbPd1CLEjWrGJyica6t2K05sJlWVpadxUd24lkFklgG9PLC3sa77PJp\n2BGjbZw6TrTJpYnpSVSzw164jMFrpw2oYPIdV8eMO4lAY6YRYhYoP9tstA3R\njanchzPKuZOgutO5Ajp/058ZfR3qjVJWZdvcPPirTi8f3O4Vw90a9bHi+tYM\nHFkFjasdvYTZxjFX+0JCYDyC/KG2ulodF4HctYCzzDydZc4/b6qszocV4wrF\n/Y6djjwfG+TWMbk28Mq0ASrmKWsyDA/AKDSxHMouW3NfDlQzCtTN7YPsxZRO\n9aSv9clZSeZSHksj9obOcc9GUQD75gax3r8Upx9R67qTenMOKJZSzEzldZ2N\nSrmR\r\n=gk32\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ca556c545f0bd908ba57eb0e24e99d142cc05b1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.41eb1684c.0","@material/base":"8.0.0-canary.41eb1684c.0","@material/shape":"8.0.0-canary.41eb1684c.0","@material/theme":"8.0.0-canary.41eb1684c.0","@material/floating-label":"8.0.0-canary.41eb1684c.0","@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.41eb1684c.0_1595958687293_0.28297265468793653","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/notched-outline","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.9e2f6c450.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1495cac8c7b1c2a56eb39771fc2f9bfba22636ae","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.9e2f6c450.0.tgz","fileCount":34,"integrity":"sha512-rKbGoYAFsP6xRzbFU+ZXvg+I1xplGUiCbU+Zwl3JNH7i4/09XB4W5FAKnYZwe7vfDFlUhQ6lydk95tRWHEdSGA==","signatures":[{"sig":"MEUCIGru1U35MSkN+jB7DRLl1+7BzS4700gcJ6FcmTXS9/sSAiEAssb2eHKxmHif30f+YXL9xMoxqnwS8QSV8U8E3G8hwTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKlRCRA9TVsSAnZWagAAjWAP/AnBNWC1CmR00dB05XlZ\nb5DTALLj51NvB5eGNOGs02d0T+ouSxJ08KEJgb/6GbL2IqsupNHSqmyb6yuz\nYIiMsLlfnWZwKeZaC2JFakE5LYBzlEdUCSSjeIcaIgw5becE1pPzePL5NQTE\ni735MSXyjblAI0SJx071nnGKnfSWPj1f7U3DvWrGZP4W2rF2xExDGLEi80j1\nd790ytJflOGryLL4aTtUfaPmEqDyofUjUC7dnfS3jRSy0xlMZQl3I3gZiuY/\nQlS7e3+koVzd0B5rjH89qumsxLznamzx3TDV90m1FT44VkOC7BLvHa3zgmgN\nXqfasiHHHB/1DHSdNkdLwMxlDURwXn+GgBGH61at5Tcj7XDL78grcrCXm4HG\neA3detFJO1H4MMosc/LMoZMw4G5JGJtowhhD011f9yzjrsivPtxTORQsjA1w\nDNz6fxonjdsyr8BAu+UNqJJPjNXUgEIo0Xia1McIeu278bjj9DwCWd+dnGg/\nFtR9tn/ayPuKxQoVIYH3BiURSJjAR9rZsM9Mr/a4L9A4DxW1Zq0LmvFp8xbv\n2hTsI4sOi9H3mBlmVh2Fs/k5pY53NiTSzp/tp4HtBNbuYaO8uTUjxIr3/Eui\nbd6LHBa1LXQk9xBTw9G+zpCWAigLjeXzQbtLbdtKzvPEk6hxkZwHlhjCPe2j\nDlxa\r\n=k2Wv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"20a3870f861650ab884eeffe1d7657aa376a8ee0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9e2f6c450.0","@material/base":"8.0.0-canary.9e2f6c450.0","@material/shape":"8.0.0-canary.9e2f6c450.0","@material/theme":"8.0.0-canary.9e2f6c450.0","@material/floating-label":"8.0.0-canary.9e2f6c450.0","@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.9e2f6c450.0_1595976017089_0.3862875131717374","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/notched-outline","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.e6950b55a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0a288449614ed132181121a9e07b69a019f241f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.e6950b55a.0.tgz","fileCount":34,"integrity":"sha512-mX0AjbX1XkfKxxhP4EEOsBvuYN1P2hy7wF4Wy/vn29uar9ACUKRAKSCgnoJ0nrHI5WqTo3gI4n6H00g86iyrRA==","signatures":[{"sig":"MEUCIHd8Aa5A0AquAzwa3FZkSYj8oUNOlf8vkKWucLhvGhJLAiEA3c1UriSiT3gEcD5D4oHnsvWesGWZo2r4h64xTysprcA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKx3CRA9TVsSAnZWagAAeyYP/iPWhvZ9c5r6QcwK1/IK\n//P7odsdWee55sEG3gbm/l9LZE4sa2jGDTc2NdAjWlVtpt73FyaCFYCTrRzC\n0MpNtH7WW4pgd99bgc3vTrbFwM9ix4k8+ZlakTA0XHONIFo0ohtZzL/c+zPi\nj6A9ztFI2oRpMANzCeeTP7AmkU1QCA65RHOwAagXcj9zkDJOfyBxVoOKh7C7\n9ZV/bx7x/meXUrRjsz4VGM5vSelA0r77k7fSeNDWdCnyRbteu/Z3Oa1A6shD\ny0AcY/g2FHQ8gUeKrDOsEcYNQFdTl5ygRrufix1nGfimzbAIAUl7Z0urGKVV\nBL7p1N4Hw85UEQAixhowcFd0K2gChsF+uCcDwJAv8xYC9t0y1sfY1bTUL2l0\nFueXqBVMpS7+W7VFg4WCy/cqgAfPU6TarhZZvqCpWgsr05w2GH6mYeNUmbt+\n1aqEuJY55skXBgN0fCl5B/bWyUL7h0xWq4o6qyjiMd5gPUoEp6X0vkn2t+MD\nnoeUqVGTnEvgIY6ZpmnNo6LcoPhCVvZBRDhtz0njp6qtCNPQyZGcf6pnFM0Z\nWBOpoGz9Rs5gBVPnL+pNX64fXY7G53lllxg6cBJb7V6RejD5R5cYUdgxD8Ng\ngp5Q6vB8ssspUhJgudN4NNhL8JXobBuNFbWLhZFt8ffq5T9p6y7fPj1dodW7\nF+JK\r\n=1xeN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c71461d7d95f313de3fe5609fac67c2302432c36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e6950b55a.0","@material/base":"8.0.0-canary.e6950b55a.0","@material/shape":"8.0.0-canary.e6950b55a.0","@material/theme":"8.0.0-canary.e6950b55a.0","@material/floating-label":"8.0.0-canary.e6950b55a.0","@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.e6950b55a.0_1595976822779_0.36842506799325236","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/notched-outline","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.5e51ee38e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7afbdaedb3cc54a824ab92b60392b7edd444a9de","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.5e51ee38e.0.tgz","fileCount":34,"integrity":"sha512-kIG/NHD4xceuxuHLsHBxwX3koqVo88qZL7cduklz/NsmrIRhzTeCTEnxQBszLoetAOaKIIhbVwzY8fFSUxVscg==","signatures":[{"sig":"MEUCIElZngvkBn9ifu84ki8D6l4vd1o3VwJWp7vlZDoa+RssAiEAgO95dKDf79zUb64LMBfx9/hPLCCcKbOXrt9UBblAcYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILHrCRA9TVsSAnZWagAAl64P/0yzCvp8T417g7LCpj7L\nq0mu7Zecmrn2cgKQtOKRgj1lp6UoWgmZyZZ7opwCUZptDvUhcdySeNMwG+zy\n+RwT4bi/E/CJMJ4Hq7eKHPSgn02oB6Iw5zDGl8wuqhvWh/b7CGBnM16RUk/P\n8u0nIfXQASvN4YUmY6OiWln+GQh/UR9jAQU3UQkDnGwBL62oR15IXIwfRr2X\nikXETSPNvhwZPGsgCVarwOgtmsVE7MBqyY1bQHkVgLRQXtz7Lq8YrM8gq7XW\nnYLP8r4Q6RDKOUMc01xYZYN4RlUehnpDoHTqVNBBvUJ3IjKUyvigii/zRFp/\ngzmSGokda8nbieuEUwhoo0fu1YW8HQIRyF65zhPcnvqx7ppWzHB/Ff0P0lo2\njFK5wKw+hU6jaiAV6zy+KapT7Jg3SiVdHu8QfMZ3Bnt2D6pORxD0bhQYpTaw\n4FrfNRrQEvUvi0ER4F4bxDj+LE8Bcn5TT6YoXx/0PxdmgVJQM7szozh/22A6\nxcPRt/49SO8O3kHbPUeDgabQRaoq7R/Kh+X4CboqLyPJzfJBBX4QhEPHxMpd\nOv/IE9dHpMJhmJjn524SW2kgngYnixMPO3m1H44PT1mQ2jslA2pCRr7SbM/H\nlayvS/Qv9zJT+zzVXg9OK6HkkfxdHm/StJEAoNIriqEOhUZ0GMn0lBVw4INx\nXxYb\r\n=6bnq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a7ac25d06cd849dbb8b1620235e913c46f5d7849","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5e51ee38e.0","@material/base":"8.0.0-canary.5e51ee38e.0","@material/shape":"8.0.0-canary.5e51ee38e.0","@material/theme":"8.0.0-canary.5e51ee38e.0","@material/floating-label":"8.0.0-canary.5e51ee38e.0","@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.5e51ee38e.0_1595978218604_0.6671636176904285","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/notched-outline","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.a3898ffcf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e84c4e17e3cd8fb47b8d40b832fe21e8015fd57","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.a3898ffcf.0.tgz","fileCount":34,"integrity":"sha512-irYMCa/pxjAREbPxNAEAY/7Vx+CKbhnNcGFCpCIIK3CAaCTOS0pM1lKuuH3CuAJvCcPKS3ynAnMYl/A52ocZKw==","signatures":[{"sig":"MEYCIQCF57naF9s0fxBauVrD86HVPG/VsDJXn2Tv6BjHfwU6gwIhAIvXoekdXSyGi6d5yJC4eOuP3UgQR+PNTKspLQedJfs0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMTBCRA9TVsSAnZWagAASMEP/3YOG7iEhmR/EGWnYBIN\n1+s7+yajyqZw3h7iXfcFbo8cSPcT9pk1sIcGRGszytVRuxRD925xy7UULSEP\npPciE+luun8QMeIte1xDQJ/EliVgqxAJ9uJCpL68TtKWqqw5FMMCXs4dLJjB\n29UM6Yhy68ZAeQyaR8KPQfc/qYlfsKIZ/acG0Tpgn4BXKXjcHQbgOOO3Di8/\nxSShZHshbvwgl5DVKAT7XcnanvMyaDz8bjGl86ucQvty9sR2e+Y+1rKXobaF\nYLM2E4E+23rAQaeQ2luu9pBQEvKiJYZEZoTxjE5hKA7+uZs6TIa3lerY6G0N\n271M7w/FXlPIdbD5kuZRyvYQgDKpVShLmn/gZy1/eEf6G4ykvBGfVY7zArMy\nApFnExjazClKucMwUzT9Iv2x2ipqMYNA2cyo1ZXBumLCYK7ddLHzkirlGJyt\nqGnAP16foSwYNBJTckfrQdmQImNCQMZmhZUVssvegYm0nH+hWJZ8DtJUFwCT\nUI7iyEfwi3HMokPxIPMa9IBTEjcoy/yg7E7nDwPZNPrLS5ycHccsjdn74s47\nls+JPx2vNip1UW0yXiMVmzzVcOFJxxxoHYrjlk0/bxwCW5ws3py9/Gtk5yrY\nFQhFuqMO6EBq0fMltV72J3HGqmH6cJORTZ9Athcwhg+2JAUGbX08ecjiEC3F\nWjXW\r\n=8/Ml\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4382580dcbfc3da31d5107a92231aa87122f3f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a3898ffcf.0","@material/base":"8.0.0-canary.a3898ffcf.0","@material/shape":"8.0.0-canary.a3898ffcf.0","@material/theme":"8.0.0-canary.a3898ffcf.0","@material/floating-label":"8.0.0-canary.a3898ffcf.0","@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.a3898ffcf.0_1595983041467_0.9054445877261474","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/notched-outline","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.bc5cc6c96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4651b97f75579bd9008b791060b435f9f7455504","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":34,"integrity":"sha512-3/6bnzSFj9GVxtLUDwcbTLhl1ZVZ1rDMnvK/O1JmQoH57W4c15IaTl4NNsfarIAY4xs9zkCLiQUPoYpqkp2M2g==","signatures":[{"sig":"MEQCIFXDw0S1IYDtyegngAbtWgfR0rUlfVxa7/8OiBVhIyN+AiByYfacm9V12BxsWA20cfVmucfFAWUObfaPU2FmfRn7ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMfGCRA9TVsSAnZWagAAFugQAI1v2uUvvDcu26RQn3gt\nevmZzCYiWXfAdKJDDFHKJBgcor5ybbB5wzHfRO0qFoY9dl83aa8UA+YAPArl\n0r5iuXvkyLWuvcnvNSNLQAHH3Tn9k43HfPEiFeogtKj11dtbOEe/f73CnEkK\nO1mVSkvofQCPLwyZQpNn8A6Sn8cPJUvXvlcxItlE4cFxtve52kBi7RQqEwrg\niZ59v3SrKgh+zAXaWtSP43BrLSqLE/jJxaNMil7B88cRSjZo9auLPQYJid24\nLIf6lRc0VWrrzHsc97TefLtvTl+W3wcvvE27T0eoqJ1H/WnhTxuyymMxGk4x\n3S0jGW4LV1aNSTqqqmyYFV9gZXnGL108ojQ+LzeRUdo7igJUv5SGTGa7raw7\n+iWy/ES0MkTN9xQtQZkelLO+RhijLYf1asl3pH20XPeHssV2mH8E6aRVB0HS\n2r0KxG3vGoc1xYE2Iw7k6UQje8zG7tvnjwgICpedSXj6b/g7yxzuoP73LaEH\nznQGIvbp4Frr9N0QEMAgwvwPPXqu177qx3KwuFTnxI0aE4XNx/TMSH37Ywcs\nKrq6PFqP9SiV5kpBGKuQ0ohL3HUoPiwAmf/8A7BJY+wpcEMk0LknGHW2koAk\nyWd/FSTzzs+vluIrnFiZLgAPDEl1uyvDCClVOWtwBMUS3kmHplTsv7dL7BOr\nvMas\r\n=FEYC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ef5b32f85df29f3c19f5f6960f0f2e58025012da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bc5cc6c96.0","@material/base":"8.0.0-canary.bc5cc6c96.0","@material/shape":"8.0.0-canary.bc5cc6c96.0","@material/theme":"8.0.0-canary.bc5cc6c96.0","@material/floating-label":"8.0.0-canary.bc5cc6c96.0","@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.bc5cc6c96.0_1595983814511_0.14219059627292574","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/notched-outline","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.9bdeaf928.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23cbb16c9d491f577b8e9c44bede553bf1553d21","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.9bdeaf928.0.tgz","fileCount":34,"integrity":"sha512-1E+4iFus7y8y0VUjwqqmrKsPsqAOscbWKBFs8TB90UuKtqwItma6EjfGFs/AFNn3magvWIeNjgHeE9vJh4KoDQ==","signatures":[{"sig":"MEQCIEPV0Pz0rcRaBG5dAUAEMRbbDD1BRoRzOAD0WgXOoVz7AiBQztLuBjpd15dJ02wlcLjxZhwOjkSMZu63fE/1L2BUfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM8qCRA9TVsSAnZWagAACgAP/2Wb+LDSSHZE5yoT7+Q6\nNdvBqUnHc6wFMP3a0TjecDroU0WEu91AsUmI1Yxd626+2g2mW0vM1kMW58V9\np4bKD8wZT8rHZcRfmMbpJSuIlZRoDDhLs5JjS47xN9Dd/ISbnUcHrydjF4VV\ndj8IgAqoi1X+UvWUWIJ91MhtE6NyuLFwp6S93kW4KM55Iv2ONuIlNHbT6aB7\nFGOHuxlIQcFWitWoRrKMqnsF0hCOh3qR2GlqLAIAi0HwwWhv/ujYf481Ob8B\nOt846iOdmb32g0kPDEGAHkOpxQQ9/gmuNQ8PeNqQCx5URgxKjeT4yP6Sdi9I\nub9tNN1CywNNOH8GmJ+QCyTJJrbSNh45sOaFORAegmkF59gSyLUsSh8hGyeo\nkp2uUWnMsbjwTF6nPljzAT46PhTj3BWhP/g25Ev+NKkrha9TqXR6ZgAEx0dK\n0WG7ZN8gcTfA2+eiJ2Y6Da1lYgS/3ikIXhVaZvMI/F1AE0LtNT9L3ZbeP+LI\n4UEZqIogyc4sAEv/z9ZuRMvYu/jmS1aG0lOwcGA9lVnXm0dc7XgdOlILABQs\nTL3GQlrZgqVRqr8TUahJfVwGOav04VdKu9yBku4TN0fjl9Oua+0wREBJhcIu\n+YrTXJJSypCEwij4RsCn6TVpkKe0hNN/WYX8rVJc6ZUZjxEEoJgf+uPXMcrW\nRi+k\r\n=goka\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0fd3de7a6a462365d56e724dcf32c2c1890f553c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9bdeaf928.0","@material/base":"8.0.0-canary.9bdeaf928.0","@material/shape":"8.0.0-canary.9bdeaf928.0","@material/theme":"8.0.0-canary.9bdeaf928.0","@material/floating-label":"8.0.0-canary.9bdeaf928.0","@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.9bdeaf928.0_1595985705745_0.9181938557242182","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/notched-outline","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.fde2c1f9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebb6d7b3a8bf3f8635d8fc8ba060f71973ae7c7e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":34,"integrity":"sha512-KZTInSe/9gwF3sPKGbGe9LmBkfYx9xKBP9BUBFf9mqsPVc9h4/jurJyOVsKBDXI5HArICWJclRnp/iTmm/aclA==","signatures":[{"sig":"MEUCIHnCocBhae/sNUvIFqXOQjAPdRCREeDu7ac5AcbpZPG1AiEAq2fym4/wLDK8GVMr7nYZ9ONJ2El2FaGUqsnxZ/oNX+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINKBCRA9TVsSAnZWagAA4lIQAIW5YEg/erl7aV38lwd1\npq3rixtnULag302Nsst/6Oq53kjgR8QCQ5XEncotioszoMUS0mmmH+6lEe8H\nAGL4pumQ4QEo3Q1/82K8DSFUveqdjdsvLFqJhWnfOqnA92a6zo4j8FCKdq/H\nXJNMxIcPIZzytFrxk1j2CrtMsP9+hmXd/04SicORpLtfJv6pTohvLLI/pKr0\n1D36JQr3jLjgipf7LGyXR5downn05FW2WzD39oBSkSTJt0cQIOLXqlEFY9Pz\nDi4FxwneUAXGPLzCqkCPy792so7Wry3UuFUoCdMWExaYd1GrokWWtf/ny2Ti\nAbO+gQHoa49jJZsy7nHR5L0xUi8HwRdXmxGRnyW78L8gq8uXSyucG3VFKfvG\n//a/cgoYmxCqkpIaba3tXSGy2vbrX7aqanT8Edy32tBfqcafF1XvXRdoZbNs\nABqZGAp0Dwul06DrC0PYnnWslpCk85QJRCyVAWTzYIj0KwasYOGd0ccWCWWj\n513F6yvTQJXHmteEvL3Hc4SYedDu9n45dI4H2xvscNg/qpeUs/EtsH9HcG1y\nNY+oL/gHLxuJlAWOqdUvQ9LPt/sWplhSheAUchNNj5+QWoutLwaQzaL2eN/P\n5geuqr4vfWIkaObAhs1p7WiEBx/K5YPvj+LTIGk7I4qkCy6NmgT92wyq+9QJ\nwg5N\r\n=t/Yk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f2de51610533bd781edd8339c8555a3c03546e3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fde2c1f9d.0","@material/base":"8.0.0-canary.fde2c1f9d.0","@material/shape":"8.0.0-canary.fde2c1f9d.0","@material/theme":"8.0.0-canary.fde2c1f9d.0","@material/floating-label":"8.0.0-canary.fde2c1f9d.0","@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.fde2c1f9d.0_1595986561308_0.31800009688291353","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/notched-outline","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.6b3876d5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46d7a5f3ab0d4858383e6ad7b362a52b07484c2a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.6b3876d5d.0.tgz","fileCount":34,"integrity":"sha512-8lxzM+vmYe+02dCnAOUJJQVXxnsV5MLguHK5AkbnfEHeymAdq5VutJQsjiQ7VUVSjFYEcV5SDr2SymRnr1TkEA==","signatures":[{"sig":"MEQCIG9Udpcdl+JgSxIK5NQE7vXz4nWMDkMd+mEyCWjqvexiAiBORZZtKQAVL34IsgxT8hWqls+u5Nqvd8MhwAxZHrQ+fA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINNiCRA9TVsSAnZWagAAraQP/jxeBao3SpYMXh6mMwDJ\nupMd25yVvCI9ithOvg9Og3/UuRxb7DSJiIat02CqCTNaoRD9dAWG8sjUtY5P\nKk2n/QotxBUH2XTLQWIe7vK+0BLo/Mxqqf5UzrSUPB59tyf778h3PgrwkwlX\nlccQcb3DPFmQQQty6sml6tVIW2oAkig7jiihIDVV+bVMXw9e0iJeHCp6uNG0\n3P6dvHQqyVx+Gz9HPa3P3HwFfjEMYO08h586GbX76I0JUmNQuIIjXOGQFMcK\nrb/YG5f0CcvqK4mkdqZIPn8sWZ+tMnAdA4LS9mRARzKpnCmUFIKDKGComzha\nQKD0vegzHOJUBRTH2W4NCCmfTz6KKqU/8axyXjp3TibNqv66MrWE/9NBlqN4\nTVpJvmf7cFDxE9JwOfABmRvRRgSMhA+oHJ4D11SPB9nbQ6iTwM5T/OyoWi+K\nCiRIHzYyAbJ3aIj6kCWXJoVVLaQnIiDfTcfnwH68TBRyQPtzE30tx/2AjUY1\n87JzaPXP8eYXxhAK6DS+q+HJUAVYpgNvjl6e8+u4htvxU4lH+3f3L1B9k0yr\nl6CAYTIpxe9nCgI3ZCeZT+yWgTHtvr5ectpScctW5O9jzfDQseawE6iPU8P2\nX/TXaV1lFRcoZDbxuN2vWKylgWz7CAFlws9s/yuhoFLpChb93qScc+PZSyXE\n4xfl\r\n=supz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3559342f661baeb39f2e70f1172040aba07dbc1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6b3876d5d.0","@material/base":"8.0.0-canary.6b3876d5d.0","@material/shape":"8.0.0-canary.6b3876d5d.0","@material/theme":"8.0.0-canary.6b3876d5d.0","@material/floating-label":"8.0.0-canary.6b3876d5d.0","@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.6b3876d5d.0_1595986785659_0.3063760880179105","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/notched-outline","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.30ce17873.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0addb1f0b1dac352f8bff675a23fedd5381709ad","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.30ce17873.0.tgz","fileCount":34,"integrity":"sha512-NIe+R8znmdyxKrJhXngFDWu1H3i0VIm/ZwxCSyuZ+jizMWKgAshU172QdDNI0wotNqiMHDISPjliKdmfHZfT1A==","signatures":[{"sig":"MEUCIBczJbfi3MLEFtwCiJbkxqxrsD4Q14zuc0qTg5N0ydQCAiEA8XebkowogbHUgGT+SoZmAu12fhymM74o+qvDW8i8Zw0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa7QCRA9TVsSAnZWagAAHLEQAIPl0pPVKOhzLetslJFU\nQchUOybev656Q7qn4sjehY63JSbnBo6fgkqgNUPBSCCo09EkPsVM/WqOiNEh\nxtARl93wkFODQZPfUb8hLjYFVD7hTQWvX3lHLGRLAcV6t29TndfHRsMkoubD\ni3hIx66juLp8nneCiwmCuD7xcGI5vBGknBVnMic0cG4hb6nnxNOR6Qdy+CYy\n1ozQNaNE1Ni74eoqC3yIel5aopfwPhkCkr9OqDhwYOXuB3eIAJU0+YzYjqdp\nWcFcBTUF6F8JObe8DSdg2f9gO5LQK6cdGAFXiHsFW415tqNN1PN8SXCcedOD\nePMbNNa6+kZ6fCD3rpNzZsLaZ8Aec4pXoYAf/7teC5+UAl5QhfS/+s6+Vojf\nIgvOJM4vHyqAUTpCFuIFeARtYSXr3NuNfR1Vd79S+Thd7azNXqatzink6Ua0\nbtqpVzk/b6h8MX1Lg9TKmd1+geZB0gC1RDhxM1bGv6wFE3pQkcVTKYcu3wJy\ncHSO5b1GXaKaZiR5lrg6c6NuV96orfgiCf0XOTzOEY3RrOSl0XZyoSnVJ2RZ\nFSf4fvOzty+smydQrpKQ7jRVewebdXVKBv5EKd5nAj0qB2szCpmnv6t3q6oe\neJAUXmyDIqJXltxAZ+7AkIRbFgWXNe2w0rQ5Jhxr5z6iUG4sFgr8sTFVQCVY\nA51c\r\n=iikX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"88fa0309b6185f09fffdbd61d0c3e16f53c2530d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.30ce17873.0","@material/base":"8.0.0-canary.30ce17873.0","@material/shape":"8.0.0-canary.30ce17873.0","@material/theme":"8.0.0-canary.30ce17873.0","@material/floating-label":"8.0.0-canary.30ce17873.0","@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.30ce17873.0_1596042960151_0.42958104564878297","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/notched-outline","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.f6bb43bf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fb719432589b25ec76802e0b9806cf16c66843b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":34,"integrity":"sha512-IiNSfFP+cy9QxkkMUuvBYc2GSantN4o9SVMP32qFtMcz5LF3dBqYU3OBGnUtCA0FQomlO0Cw7CAUlsTVwlv8aw==","signatures":[{"sig":"MEUCIE2P4AGDaMgp2gf38Zeu1aQcR0EQ1pWkFu1ehEzXOPrNAiEA3Exo8fdJe9FtYhVvSMS7g6/6yKlvvW+qzZmT5jTnCzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb9SCRA9TVsSAnZWagAAE3cQAJo1ofsg6p38FUe/UIN8\nIaSKAaaSNt9jD5b542LuxWErViv2Lur6yRKw7szatZ7S4VhxwjWfcbf2PN6g\noKBBQZPqVw7bz26X8ym+VdYwbPpaFj45dVdEXe1hPmR1ySQ0ABaxUMqJXqej\n2iQ3pnadc5Ruf6Gm9tJsRVS57eEH9xw8mhsUjYx1zcHoi/+jZStjIw2GvDaN\nbB6/Qgq1Eym0etY+QT4Noj6ydeClyBcC3jG54+Pd/ct+YcjTxGYqlSiLjNSU\nTZUEJEIwBJLE8xDOKHSE1KMYk0bRnLEZ9ZhpwvEDj/E12io04jVfhBSCCp5y\np0/hfKNznu75MMugzTDSwiXCzw3Oqh5Q9xvgd1v3r8Xw6ZAUAy799nDshMWy\nO1Z8IXPKPU7QOiarZxl6/PFS340D3qhKpsdJnBOJbUvV57Aah0KWgUJYTPhX\nBXo1b7bAaynaLeAc5M7JvQub/A4/QatGEI+JbyCySWxBW7gOh9pzFu2jkAp9\nMP6CltUe4zs8M7HAehmAenm3vhnr7Ardtl6vO/VprYWjCAasA6+rLgynteOl\nXOkAtLvKMJ86FJ6mYz6HJQeO2sZIDYsaCaLcsu2gu3s6Ur1uGjy71TfaI+co\nUNsrTUpiCnTzyp48/giU/LVBzKGmXLA5zfUEXbGnhvWRnmARp9YQmOvfv3uj\nikfL\r\n=DUTB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d511f86ad9ca4460730b732c04ab497fd558d515","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f6bb43bf0.0","@material/base":"8.0.0-canary.f6bb43bf0.0","@material/shape":"8.0.0-canary.f6bb43bf0.0","@material/theme":"8.0.0-canary.f6bb43bf0.0","@material/floating-label":"8.0.0-canary.f6bb43bf0.0","@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.f6bb43bf0.0_1596047185602_0.0912002774414633","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/notched-outline","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.6af75f6ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad4becf049ecb78731721e5c457232014a45cfee","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.6af75f6ab.0.tgz","fileCount":34,"integrity":"sha512-7LvnKEhsm8MpAJVCUBbZCmJ4I5S2kjce8m2FcFmRzR7NDcJKyU1krtP+9SROveeZ40juywk3a6+9gy0HVlEyFA==","signatures":[{"sig":"MEUCIHYu0Xc3Djxaxt0CC3xV+SmG2YbD99hrK7EpJq8eYHxhAiEAvURuhS//RI2G+AyRBXB9i+8vKPOqip2KxLmdjipsDW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg4QCRA9TVsSAnZWagAAiMcQAJwgFs8Gj4ToMYOI+eOE\nX9R7ThnPCa1yi22MOKfcHhB2Inaenlh78FDsClUWdzgqjDUzGDkoaNEP+34z\n5Ymwi9cFZYs0MSgyzQO/SpF4/pjn3ZLlBzSxbMWlXFOqsK9b9S4GBGRpMR1E\nbxihCdgZng3m0PB0SZyZy7DFCOEevr8ehrk6XBz4gZzaTnk1Vlutk+nBnlsT\nHvOQyMSd/bZty7uF1xFwFLxBpC9fpKjj4HE1NR+lPYP2OHb5ozdSZGfpWU62\nLIiC3Do2aFrnypSfLQE0jt0Nelmc31lAl8evqTP4ZeuS7Mvfm0SooCL27E9r\nOgl4GQOrUZapZbC1xAe+KmFdv5oRliIGOqRSwma/FbBdOl3I0D11TVxgFIH1\nX6ScxT8ODLzjJdwWgdf5QARbmlCT+YINpwkvSVyFwh6u/eugsqwYiG9UMrcy\nR8t2i9tOWPbkhXIciAL4wdBlGeKKq5eWDgAxCpPL4+9DoiDPKv37kQR+f9yx\naIW2EQ8P2XP43ad/ElFmIbjwoZkohba1mgSC+GlsNCuq0oJYGBRk148G6YGa\ns0wQrgWX+Jz7EL4vzTCKHZN0lmb9tG+58fB23B8zIc+bNjc9EOp6/uRyc/3H\nFkLP10r0gphZYeq836Jv+vwKp0yj1vdpj5A9aC4kOPZK2+bb4fkBqHlx+/fH\nUHDh\r\n=3AaM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"44ee60f895715b8f7c0a7da67637babfd33452cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6af75f6ab.0","@material/base":"8.0.0-canary.6af75f6ab.0","@material/shape":"8.0.0-canary.6af75f6ab.0","@material/theme":"8.0.0-canary.6af75f6ab.0","@material/floating-label":"8.0.0-canary.6af75f6ab.0","@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.6af75f6ab.0_1596067343613_0.017989001553396555","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/notched-outline","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.42d7a65aa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"859ad58aec0968d4fb93a2ddd4d6767b43a6651b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.42d7a65aa.0.tgz","fileCount":34,"integrity":"sha512-tpRGwSqUxDx6At8h9QcHrvSQ+6xiGUJYTSXnLivXyaIA9q+SmtI7miIMYFQe7y5QAtYfSaW6H9qerEmo/3KLfA==","signatures":[{"sig":"MEQCIFWoJ5Qb3odXG0gDwLEas+/wx4OHvtfw83zjV+agvGk4AiBnCvoiTZJv1B42HKmTAtkGQfyywNgMnl6gYoM1CUAgvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhA2CRA9TVsSAnZWagAAFMEQAI309wRh/EIJU/+Kj/lf\nHJ5ODZwjn2Bcl0rw6ULjEXalCZm7btki+gLpYObjEwcnEVTtIMtOGPzEMXPu\nz6EzaxI2OVBqCjFAKxo0zki0Lia1b7V5F/SwTLfppT9d6qCq986D1JJnXftU\nJ/7vVqR94SOdmtn003PbPaaMGfok6XICBrMDFSm5teb6SYvTQYvWnHaMDtaP\nz260+9gKsp7fyEWZPk4g+SwqNrHl7XnFL1PEOprDW8A3Mw5VqhT9wt9i6h44\n14cj3Q58ungTFymaiNt4Tdd4V6OcAesLANGLFbfneOpBdhwJHeyP3eJ2pMKS\njYSqrF/3ZgzZwwBz8xZ68ePm05zlnK9k60luvMsE9HQ8Wa894gCx6LvJRlq7\n84qeUn0A17RbHJoZh1SiIlE+/OhjnqJ01SQ/yVva/+78ewKALqA7ei3n6zn3\nqeye5ofiFbf1I2kyk7No1/q5L19OKtEuZ+cYwqoatyt02H0y2Iv193f24Uu3\ndwgt1LQ12K5ePHs5keqK1tOUwQHgJp9vlczAaABh3bricPRujr3JAy5zeiSb\n+UIOyxCUAwH2phhCuE2wTbTkBCK3UnSUbiyFAGjnuLJUZiniUz4+1FXfOjT9\nHObj2C5G6Oe5BII+tbAoH994OXBdFfkS30EfPEJg70fzScRFanc3dDmP6/4U\n9HEI\r\n=yl5o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b6645573c0460e7bc8187d1a21ef306b674e1017","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.42d7a65aa.0","@material/base":"8.0.0-canary.42d7a65aa.0","@material/shape":"8.0.0-canary.42d7a65aa.0","@material/theme":"8.0.0-canary.42d7a65aa.0","@material/floating-label":"8.0.0-canary.42d7a65aa.0","@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.42d7a65aa.0_1596067893571_0.7784849209258491","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/notched-outline","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.85abdabb7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3fc0004d6b052a1d7dea142c6e5c3e07943f19b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.85abdabb7.0.tgz","fileCount":34,"integrity":"sha512-7MifrDStY4L0/ToWl2rkhocK+T/Fz/FtJVJ5qJrkr0tXHoH6BXQ1nwUf9jvDt27kUWCHNOqO/Yx1iDBhDVZygw==","signatures":[{"sig":"MEUCIHwgd3YlblK2SqsI/O1JWNUQ8q8Xopw1FzU59Hf4xNwWAiEA2zeidzL0n0DKWa1ZEC7BTsV/SACKXk6oOaj2gdDGqA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhFSCRA9TVsSAnZWagAAGWMP/R8SebcozQwO0ZETdXf/\ncC/ikEqv3YxhiIQluylBonb8Y9JxQfjWW/u1nybgkwc8PLQWG6htEqoU86AB\nj3U04WWYle8gRaou503+oZp5soDcesOsbGLH98ptb9fYXBezMoXfhLJNjqgA\nlPIlav5Jna/XDJoNnG/mBTKmhKdPCEDyAj2xVzQFF8RfbiaAqrT4vYZObgVV\nf3cwcYTOIpcjb90y1A+5kpiQiXgnRGsAJWr4w9MwJKiB8l3UfBBsGz/nxpd8\nKKlI0Cs+ckYOi/J3vXM3oECZhCDWb0Aq3RRYQoHwomaQlukMpQnpUd0I292C\nnevtihy/dovOXyGR53c5q+rYFq3+35FX+DLmpZLaHjrwwuO3X5Wofk/cLH3U\nw+FcAy54Jjxxy3SyxCYZU2c+SzHtxQ/8l097g1N5/GwyUFEXXcQfBRGzm1td\n9SHAY6BXP+k09/ax45nIyQQYPRcgU/2+nKMbeToK6RWVGAFLIWMCvwBWfBJP\n8hkn8McR6dmclsByjSA9FRuJei7allMS34aKcITTfi38BKkO2y3UK+58WW1i\nbeFJyTPCMZJ4jmshc7nlFUTB7ZfOeDYYcvWyWL1junTWlCCfWtpN9OzZbAoA\nYeVHunecGHejV+izEtnNyQf1qQlHMGQqL7DmDv2LNACrhpWTeKBFbEGuNV2G\nr3Nl\r\n=jd0b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4686052ff6039efa085c0d360393374ff4b2143c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.85abdabb7.0","@material/base":"8.0.0-canary.85abdabb7.0","@material/shape":"8.0.0-canary.85abdabb7.0","@material/theme":"8.0.0-canary.85abdabb7.0","@material/floating-label":"8.0.0-canary.85abdabb7.0","@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.85abdabb7.0_1596068178201_0.5080114016320603","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/notched-outline","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.49fb20ca3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f8e5561de9026e3ad327c3cf7608643672b3395","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.49fb20ca3.0.tgz","fileCount":34,"integrity":"sha512-WX/3HMSNikdu6WSBKoinlYvz5ksESk7j6vCWHC3jXzgfSbh4hhbkPnN+AAM5z7gqO0srFfXz8k5FyFIY37Qe7w==","signatures":[{"sig":"MEUCICwLg0RAEiaqZp1qkOyf3W+VG1/iMHF56JWCyIKnNRwQAiEA4OBBU0s1ZDfvAkPmINZo8jEc9MeRHFXc8JN2w/iQpww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiJDCRA9TVsSAnZWagAANB0P/jaNY4ooA1serfvY9zEC\ntePEjvcOgjr/ue+YwGJ4GWC4ndM7fUa4Cfkutv8mVclxNMOxI14l7DIlBAuW\nx3Vq1oajKUR8ZickPxCM7hweTor0rWiIsaHDHjghIzcanktpSnvFHBDxBG6f\nRPHxOzQdbkgz1U4k+eJ4RSX6EogfMJv8pqvnmpNXnu2Drr2N2Jz9tLtxxudS\nZwI3SijxJd5lPKqPvEY+Zr3lGUqZwjvbY48SQVcgL34rQwtU1BWVwrj0/7sk\nuwYJ39pax/HQRriz+qcQiqreEtRvdhwsvvfDCT39vz88owgYL3Dkcrsc7qg3\nDxtYAkPA7YCNjUArmkrX+NfD9UUiXwkiV09fe4Un2QlDRlLIwQaVHLVTvfXn\nb4cPk+IXi9RmPp70F8c3BbuBrXsi8RN2oJSOmZpzaSRIVoZ3/sL3ZbkjQJtC\nHrFpCGI0YMnVlB6tXAPANpa9hjQwBi4bzXpIyTVkAEJeQzrHk+1vY0t3ytKQ\no4EygcS1jxP2rRuCJ9mZ4qzG5hwvL6Y/lfjAqrdNr7GV6CGQE6GtjRwr9xkd\nI7jN/IlXtwf7Pm5CbwSt/yjfWpNPOeplkSef3x6OScngvSmcwPXo4VN8pcK/\ncLQjCDn6+homYjY1916DxSbp/SzIQhmQ2hQykKX2QtIfJsemwkiC3c+3AJAs\nJ+Ks\r\n=uDle\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9c66ae7fdf6570d9cf334102b5004c5a04b628fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.49fb20ca3.0","@material/base":"8.0.0-canary.49fb20ca3.0","@material/shape":"8.0.0-canary.49fb20ca3.0","@material/theme":"8.0.0-canary.49fb20ca3.0","@material/floating-label":"8.0.0-canary.49fb20ca3.0","@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.49fb20ca3.0_1596072515196_0.1978220503904249","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/notched-outline","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.962d4abbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d538b8226bb52771a7ce6dfda8b8bc87d1144aba","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.962d4abbb.0.tgz","fileCount":34,"integrity":"sha512-LEQLZQAOECI3aM8vlOX+8qiCoI7Cl9vlAOR6CxixuZ8a1OvwdH+WhKVyxbTvVp8M+OLEsIwE6KY3KxjYteBlfg==","signatures":[{"sig":"MEUCIDEWe7fOWRU0b3bR1nufs0atJ+rYnGGIu5e3OMgLudADAiEA8DW2tN8zT7zWx0s0xnpcmFBtWD/U246g9rkoaYnqVpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvEeCRA9TVsSAnZWagAAcoEQAILOiVc+RmAHxEysmVL1\ntc44lXwJEMu8AwwDLLcymuwJGPLUSnPwjyhHpONmvU1c4sKDKLjJIQoATn27\n5GGFLtcibqeUxhf5aVka00kdeybtBUg5f8pO/6ceKH1rD28Jcv6702cMgvdL\nXS+CObu6TeQ/DxEYUJf3kqthbvWWSFcflrfuG+uFT6RlPFVQvcwwFC1gqMLd\n5NUw46qExvCsXAoRM4zLkL4EVnIiXqAqb0BW9bJhiNhWmcbBdBSOXootQzI+\nVkHfY/iAZwzOielorUMBabVvVKPCalLJmk0KQS/EJtzNtBycZ+sUzZcZOdt+\nQ/tuXK5ZVd8SOcYGdhoNFu2AWXofS3e0OhSr+knvlPmSAkeN/T+ZnE3cD7zu\nfovCkSJ+lqyjPFuECQfqdxucOxYS71loRnH4nMd2qMMOt38RPDqL9K+P1M/J\n3KElsUQn6B0bJ2e97Z3IAqvdMQaimmRKuFodlI9NPrWsOIx2eb1BYgqrx1pn\nD2pgdRfp1cO5A5pqWcRqjhIvouBDr2WZQiAKT5l6/z2zhnu8PgLH9eP48x5s\nfAdnt+KOR7FaB8JWorQcIK0uHDkHazxzx+uNfHG4rhfqtgE5rG+/76IES+J/\n1ZujPptALRQHi/podzBUaNlocInPbIgObULYc1UFpYy7CACXKjtgShL/5cE1\nthny\r\n=fcl/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d373d2867180ff5f61fc4d7afb88a8825cb5cc9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.962d4abbb.0","@material/base":"8.0.0-canary.962d4abbb.0","@material/shape":"8.0.0-canary.962d4abbb.0","@material/theme":"8.0.0-canary.962d4abbb.0","@material/floating-label":"8.0.0-canary.962d4abbb.0","@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.962d4abbb.0_1596125470496_0.7172481262271517","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/notched-outline","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.2fcee40cb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a68dc16c769ba3926b797df4ac28ec9c6c23c52a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.2fcee40cb.0.tgz","fileCount":34,"integrity":"sha512-Wzu5xdDOQ1pK53MMwyEGoDK+syFtydVndyNWBdFcAyRIRSgcYleRFQicRku+yEYWXYkw7ZeaHWcfCizi8nWptg==","signatures":[{"sig":"MEUCIQCpa36BfzGwQMC79xe0Iv8fAQI9EgiAcc0ioD+hHqjbawIga+ZrExsnr+3NpYII5+bil+/QW2bVEPHTWrIgxX0f6ik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwHRCRA9TVsSAnZWagAAMeAQAIvRW24TEyYDf28hitoZ\ny1FgX0e6VHRUIFsWMg7dFQW8eSiqQWehjAn0rJGGBHduPuiUatm25a0xCpb+\nYe2L5BUbv5oj3KNmOk2PdG3t9AvAHDt+Xnb6IH97yaKEFTwAYpH1KlWTzxn4\nXgnbtpS3SoHcGMhXtBnHnCHrQXfLCLFqkq1CotSG5ofwETs8nbtHPmuYZsWA\n+XH0XiGpVxmo/8wOa+WLeszYumUKnbKTjY7V8XRNiKTvpUYtHrW2N9lDLelm\nApiRZOHWGAhfwOmORbz0wgUJAp/3SRjDugmXpsj2+tctGtVpXR3NPE92eJaW\n4ImKODqXpWCxf4T+41Ej6eV6Fy9VBzgFecn5rkHYtDZI+Yv0b8DPI8X2tlO1\nqb3LARTjKB18dIbyFw+fxQI80Y8tF4rJneFOCYm7AZGccoe9mDb6BSwSdklo\n3/Qmb/xwkKUQg6fVRR6pZzbo/bfQeEIi9Eo5Kg4MPAqeOpAtPJcvyZaAhUvc\n58EW7rFLEhc4uq+nM3HskodQgbVUI0LAXfzf5uxvQtkeYWsY8C+97FitxsuT\neGasYdYfg3GzD66BAepR6tW8U554Eu89V8xXITOGZUd6Mq9hzlxKK2fpGL8C\n5gzJm1IpbAK7U1UWvVfXFR7G3mYd2IvQF4/XXARHB7c2B5jW6N8a8ZzHtwL7\nsqQG\r\n=9uSp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f769a8a60e9cefb9e0e6306a96914e8e4b4c0c90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2fcee40cb.0","@material/base":"8.0.0-canary.2fcee40cb.0","@material/shape":"8.0.0-canary.2fcee40cb.0","@material/theme":"8.0.0-canary.2fcee40cb.0","@material/floating-label":"8.0.0-canary.2fcee40cb.0","@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.2fcee40cb.0_1596129745261_0.0643566409735048","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/notched-outline","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.bd5987f5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08431c70c53891c95a9c4263d0f9591677ed7fa4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.bd5987f5a.0.tgz","fileCount":34,"integrity":"sha512-S32LZ+Uv5aVeKmkHSB3WQlEM6wkISaIpO1DmWjJrzVQvEJ+kolmZxa9pU5JQ0BUY39Hjsl6iy/qD3jFyiDWNDw==","signatures":[{"sig":"MEQCIGf8O7dpnYTFbQv9u4j6afJAcJMxoMl1PlJ30prwo9zLAiBT9J47Nm+w2Ev88QkGsfVWklyZrbl08HMm0hw9Edq4NA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwehCRA9TVsSAnZWagAAVH0P/1R4sbRUdoZ3n7gh6DGl\nE/zB/qPfKyegMcmzcpUtBx78odoAj5XLAi1WMbgGFgfQXNExt+53AWsRGe5F\n4eRhkLrvvxy66Kf/PI1Kkjem81HmTCxzppr+cZAwAmzLG4gQchTZ5fQz1YRG\nqLdsnNlrW77JlHfSsKi+s67acbMFF8fHeFJNRWi7pnxaH2aBPqDJYxHWdmuI\n0g2F5OVqCNUeHEQGo14UGOPeMk3KXlvEdHOsnYM9c4HwsaoQWAoPO9nj5kRr\nVWCyPjDKp4Co8wcZ/9X1+lguP7lhAolrqO65NQA3tefhY5mTn3kdpzoUCuB+\njeElMZfEDAoW6YYW/foiaXoO5i1SGQbj0IqwERu1v3ur3ysYXAjENskZNMRC\nUh679UzcSO+8aBJ1iy1iA3mnx9O3uGt+a/SyVJLS62ycwOIVeDN82h6eV2pw\nAWK6ThuBq2hVpHQSw/9AY/o8DaC/uqUpVQCSm9qU9PafmhoH/d1ftOougyAk\nrKQWu6BoqFUGY3XCP2MOz/q744WpKTb5tRwuEfKP1YzBp3DpchfrkbcTTwG5\nFvByzIp8ayWZHpzn1xaF0Y9judOT3ZOs0nxh+leF0q5QrjcIMwR1K//nWyEJ\ndMTy9wCMVy1GPKq9kArZSJMpdoDqXG0cKltX5c/1+5PKdIdfEWr1s3Uy8Tl5\nFik2\r\n=fEvI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7825c698a6686a8ea967272c1f150363b3845900","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bd5987f5a.0","@material/base":"8.0.0-canary.bd5987f5a.0","@material/shape":"8.0.0-canary.bd5987f5a.0","@material/theme":"8.0.0-canary.bd5987f5a.0","@material/floating-label":"8.0.0-canary.bd5987f5a.0","@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.bd5987f5a.0_1596131233473_0.7059365820885202","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/notched-outline","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.005e86a9b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f4cc6b682a63f4b39de8e576a9b87a30ca0e2ed","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.005e86a9b.0.tgz","fileCount":34,"integrity":"sha512-HwGajf2TDtxruIAwkvZVufwTlui28GTQ0gCLqhQn6/M76DgbeTvo6zHu2tQVRq2lQwIjfTnh++Au/viQ1CFxDA==","signatures":[{"sig":"MEUCIF9lkgZXdgFonrmUTQBrLU37Yc0e7I4TAVlO6QywreOfAiEA0eUtrU7vnSQJBoc5usGlC8HZXUlFsGZYvbQobIMA0Jk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwreCRA9TVsSAnZWagAAuQ4P/3Lyu0228StzV+j/rPom\nOnuIGcMFs9Ukznu7GGaC10UNebuvDroBAPotWRs43C7ujvktX67CCsGYhC9W\nYRTE5O2zXqcom3xA8GqZ+RHPnrh4UvrUdwKMkjkGmbBWVMruSyfX8w2Jn5hz\n9m8QaO3nA+ikpx/Bi419HlVKruwO4dDjMz6lzENz63bkeP3spNT6SYBd74yS\n1gXsEit1QNcY3S1LgVhT0g7wU28drKwAqZK0FpOBK+jT7mTwEb8InXMnKM9i\nURlDTmVVLJGRkLH+RNR7TI2eeWT2KLsDXqeBxYPf/Ar8stFZi6cf/q0t80AR\nWbBzlpMvXGYiS+ieX7fqqlY5fMteq4qoa3Hsg7OUo25M9jx1ytb308WdXyDu\niUYMAE/JDQbKttbi2AeWJwX8GBwkT//LKOMjV3LlLwPLc5a3LmHwues2SD7S\nlyI+0tNg/jyH+/sbTA+91h5qA+zxDI58zlaZGiKOA2rxDK7SagEDFD9pSt2V\nufpAD52B30mvVtFoQuqtyrlP+iCI9/R5eRssoFrfGoyCJ0r0vHFkzrgC6n2T\nWp61RtR8OocicIx5ZV466kiwrdZBWC3m9w+c6CSjFfkEQ7KbtGfq5ka2M1Z/\n8p53OpU2cmHhzWxTOqdYTJvxzmJpgRETHcFatu71r4Bq29ie5jklZHNZy0Fn\nuvo0\r\n=L9Ey\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1c429f861ddbb35ec8588ea55cb1845296ab0218","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.005e86a9b.0","@material/base":"8.0.0-canary.005e86a9b.0","@material/shape":"8.0.0-canary.005e86a9b.0","@material/theme":"8.0.0-canary.005e86a9b.0","@material/floating-label":"8.0.0-canary.005e86a9b.0","@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.005e86a9b.0_1596132061682_0.46263979307197256","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/notched-outline","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.e309c7c68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebc776df68e5da63039c2342337d97fcbca849b2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.e309c7c68.0.tgz","fileCount":34,"integrity":"sha512-+ZCTUYe/+0InmdvA9HI7kI7ALOHtX8JLA1YnMqgtqgQr6MKvCLeP0kJUcdL4Brw4mm0s/DTxCx5ca+3orYrRbg==","signatures":[{"sig":"MEUCIG3tdA+4eP7pgnYpsT974IoDpvfXy4xrEdoGdh4FMEtWAiEAybbYQzQ5MSumgCE81TqWFuEJSKAAs62dXhTCApqJe4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwzvCRA9TVsSAnZWagAAtHoP/16Kqt0FWl1/cBzkFAbZ\nsvNi7Be4rTo8UgR2NSfvvlTLwMJNHm/k9o3EH/GhyBBRCVuAB33H0pnCrbYX\n3kDNYaZBcJoxeV5rRU2Gmwxd2kCTxSLo05Muy/LK0CSaWmXZ2+UqoanF1pAY\nSn9g+Rbq03U5eaE7dnmBxu50hUxadKNeE+5ONmFmHJozDLOOYLrAiB8ycWBz\nO5OMLEHI1iDb5tbWGSpOkrJXTUS70b4YnGPLe5rUSKOTU+C0S3c5yWKpa8Mv\nETQj0LIvpBYzZ60KBv00SP3ypJ9BvWhG4XD7x8dWjRx5av20HdodpXEErgH4\nvell82KRpt48wDk9s01RHWn4cEgV4WwsK609pEI7OBikp2CBf7CHRG9UZ0y2\ne7Lpp7HRvpAN7J8j3G5cA/HWgsd8h3tDrMtgOmX1+OyIoL7N1RDghG7pVQ+l\nDFiUwJUGFoMqdrskw0J3/N0W77NenDEQXZJkRQPt8h6IEyBV76FiLrClSAmw\nBg/dHZIuvmepQsIFOokIXqLARK4SvPpv/HWH6a2k0kQmIsARnd7CS5PalSdH\nGQRV+9niijxNT1OEOlWMfNwLO0sXwJEUAMDf8Sf9FgQkJvCjiVLk0r+7g6aW\njq4skQCFhA+JuLlSa+VYd/HqKcXOUrrgvD/0cE+MrQ4MX2u1KdBbifm7T8gy\nwdqp\r\n=Lk9N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3ea460933f859061781daca3ae127802388c28bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e309c7c68.0","@material/base":"8.0.0-canary.e309c7c68.0","@material/shape":"8.0.0-canary.e309c7c68.0","@material/theme":"8.0.0-canary.e309c7c68.0","@material/floating-label":"8.0.0-canary.e309c7c68.0","@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.e309c7c68.0_1596132591032_0.131178855021993","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/notched-outline","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.935a51cc0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"228e5315dab819aa1b85676d37d514edbc988362","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.935a51cc0.0.tgz","fileCount":34,"integrity":"sha512-O/D3eJ8Qb24fVthocD+76auFeQZmtM6OhTF3iGn/LOAQXiearjieODIp4L1sMSnCnrRgBkXe8Cre4wPzcjjh3g==","signatures":[{"sig":"MEUCIGniUy4TTk+aJ85alu3uCKwJdZqh9BNotRorSIbgDegrAiEA7MERx8Qda2SZ4benIDu5MC9HRd4NknjBP2KK/csmB4o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw+jCRA9TVsSAnZWagAAbL0P/0LnjIqi+wQhlV3L3sXu\n6j6FxjM5lypMFtFN4GDapcCrRiMRLkIvuIdSZ9tBloSO2g7LILCUGRcFKCvW\nmUys08Wo7TYgTyRYsBGRjf01Z7acUN5GaCwtCJfMoAKcINeGKHcRXSnkPtAu\nhvphd+lIsLci9/3oLbLFcOZSSIhXz7xMlpm4JgD1EWx3YWhJytzw6bi6BFw1\ncAAECnaltAgcyxlB7Q06ZDzPTrp87sIqPtaNf2ZCIzwQT5nT/aB6TaL+Kpf0\n0LVkglIII65x08XTp5wkzOFKtCFrIxEV3J/XpJoYQMB4QhJMbtnRkm4CW6jc\nurc3ibquZAhynGMAtGb6a/uZHsvDR7Gy5h+ONkmOBG2IvWdDCx+MLCSIoNvu\ndG5WwJstrIfPtKCKnBq5ZaaiwckvR4kfiNsp6oXz66oz4/NoherrWqRtHJ0I\nRSLkENVxBBt2kcl0N/2QxFIPfXGT56pp1S0VygnW7NGP26L+SrsIAwXEMEYE\nJchJfJEBRA4RN+c8kjVPFR27Z6yTGlw1g56C3GVglGi+y5tOQ2G2T2NrESDl\niwETL1btjFhwjZgX0Hl4NXCB/tIMVsvo8rphrBH3/e/V7zvh7QgXt6PuJu2N\nJuUJ2ROgKqKeHoZxlJZP50EyFDNaTNEFpZAUfmGX5IM4IB1ZShzqGmcVCYUm\n8WQp\r\n=NLdV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"79622070723d97d5c4052839435f92189e8fb6e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.935a51cc0.0","@material/base":"8.0.0-canary.935a51cc0.0","@material/shape":"8.0.0-canary.935a51cc0.0","@material/theme":"8.0.0-canary.935a51cc0.0","@material/floating-label":"8.0.0-canary.935a51cc0.0","@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.935a51cc0.0_1596133283515_0.2582478323569519","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/notched-outline","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.74839da7b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3b4bf6858d7c3e57a7a8e9adffe3a772186266f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.74839da7b.0.tgz","fileCount":34,"integrity":"sha512-Po/CsVQ3Bch9AQg9nsNHmZgxA105bW7P6WUdFJYYjbxFdN/4162nnuj9znCeDCE8juD0BTjNrIKXocoG/+/HZw==","signatures":[{"sig":"MEUCIFmT9bucqbXrieGNZItJoIzLwrlQbK+Tfr7Hy+2kVoxzAiEAhL6Kwke7toUAWFcs44Q8SP2wJuWEA3uHWCDqdqKuHIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxI+CRA9TVsSAnZWagAAp70P/jbUKvPOYk5SHoS/J+PH\nvIgA2rKanyV38aWVJV7SiI8h/6y//MgCv9pbFtEV1vbcUsenAyGeIEOQfjEJ\na/kbsnmH43rDLUbMVNBt4qQPvxpb40TUUYYbHsqcpnHnb/ljvreiK3HXWntv\n2faercMaVJc17PK2sQ2Q0EfC6iIzW7pbqwcSA979g3zHdE7lDJYP5p9sONEr\npwnWUZ8Yz1cZcKEIC9r8WfPtPUvrPnS68UXYXimAbnGsHEVgVowinxrpMUfi\n/CM4/s3v7PT9peyiuggVTHUPnhrQrfcOHYJ5l8pETx11qUZI+n5h5kYa1JVo\n2cseosF0ZhbQk15N1unm8x5r3D1wP9bDMV42xbr95tDebXdm4RoesUZCfHQ9\nGM776jFVknt+FfYSy2A7+OTHPlU2ddQ95C/WyfD3BRiZnRyklJDEVxw/UOpR\nWbeehvgzqMapmc05pYnjP8o+jLU+clz34N8gItjjN36Xx6cMggCHEIv55SeS\nU2eugcN15NjHOOK6SxeXKySqrut6k+7FNg/7NZbNpi+aP5qgJCj6hN2MEfk2\nGk8jwSLM/XBNq+VlFPGIPbVC+Qy0L3a1D11iJHJOWKUJlwT6FWHN5xN4Vg7n\n6wx7EAzz14VO3gXcaHol5FpD3ouN6RTC5GzWt7gos4Zm67PfNG9CrZT5FKHL\nPpT8\r\n=Yezv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ad186768bb65467a86f70e827e74fee089e25811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.74839da7b.0","@material/base":"8.0.0-canary.74839da7b.0","@material/shape":"8.0.0-canary.74839da7b.0","@material/theme":"8.0.0-canary.74839da7b.0","@material/floating-label":"8.0.0-canary.74839da7b.0","@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.74839da7b.0_1596133949561_0.7847940403547553","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/notched-outline","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.f041a48c9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8c13ca463dd582726a77e33c1059683b4bf39d6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.f041a48c9.0.tgz","fileCount":34,"integrity":"sha512-2enRxAoAOAqpUJYxRlaNGF/aYPba6/86GXbD+t2LlwOD/4kx32RDfnx/Hg9dqTDCsSlgOkrsMfe8gz9Q7PefTw==","signatures":[{"sig":"MEUCIQD3/UMtwoquCeKJBv/z14k0wN2gOkuC3fHTeNEF8k2fQwIgPc1Dy8RbMUSmnJVzuB5VOG2Xlx8MaNCRr/w7KnsF9Os=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1EgCRA9TVsSAnZWagAAilQP/ivyHrIW3F6jUWFDd+Dk\nr8rQ7tKjI1itV81FEvcf2MTPZNYkZ1eBlt6Qw1EU23ByZeKsxQlBpJdPlJQh\nrCNhMTN0MRvnyxJKm53jnLVz3m311X3dYa/T2K6hD5sXD0xMnzZ8Tpb4Kn/8\nDvgQ6k3TXuOZJFUt43XMISmmI+1/FseRdTk+4eNU1L2jzcHcgjYz/zpWNbBF\ndnslqyDaBSAG2E5KSj6t7sBVFGfkUn3G5sR8SYgirthzHEIrj8PgxAngWE12\nHKRW+GBKmc2sFBkT/MM7e7q/cmBabuTf5V/RRSwE4tkzDqQZ/KTQvNjUynDF\nLmzIrpaRRfT8sZlALNAJk/GsfL5CL7XhQF516i+OHPs243AcNpF0RLR+FeEq\nOhucYmNunGFbgk5O++3hDbD5QCHf1WOLQsbgGgaxrYVJ8OvC9LK8FdXeMxQH\nNCGWqEM11aSJ0k5xKp29hIXuvVF3YrVcBN7b9/LmuJkRi0zcSLDnmHxXV5o6\nfzOeb+wIIx0h5siSzeOm46JiQQzIKfvn2j3OvSTMbAd3jDqmfQnTQhVgfZGM\nt2SpwDOsZ8vDG9d2OWv/AblbiHpjxmD7NpFGYiqspaKYwisG9mzOr1Z+9ze1\nU7UA8XKLtTzZHfh4MpgDPzPpOiiV6l4b9zBPHBTOgiQ1i0kpEW7m3uAAY5gv\nkIZF\r\n=/8sk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e37611a41628785b7c1266cd53abdd9da0208c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f041a48c9.0","@material/base":"8.0.0-canary.f041a48c9.0","@material/shape":"8.0.0-canary.f041a48c9.0","@material/theme":"8.0.0-canary.f041a48c9.0","@material/floating-label":"8.0.0-canary.f041a48c9.0","@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.f041a48c9.0_1596150047627_0.401888455185605","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/notched-outline","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.fbb1381e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54bee968e70004ba2736221cfd9efe146aa2d865","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.fbb1381e1.0.tgz","fileCount":34,"integrity":"sha512-VsqyJzPbwx//4p4O/JRGkUqnhTNuLaxRAl/8d7aBjbNi/Sn5VGTJou4wEFV0zte9V75vsedtwm/WOuCe/yAjIw==","signatures":[{"sig":"MEUCIQD2oUYqGygYPPRnyleX70zs8apUm56r8oG4ROKPdgy5XQIgRtMqVCZ2oI0uRILTidS0Os0A0eBRA8SX3r6ANs/IdQI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD38CRA9TVsSAnZWagAAoVoP/jI+3ly/zHA58T/p+ldT\nF1a9+nrsUE4/lwILESGU3rjCM6DPEIk8WB3u+yj/p98fXb8xObBu7mqhrSvf\nVMtshf+rFdSzuxMPY2uDZuGcuOfjjxFA/VRyFi2sNWIcxyKrFoVqP4J4FjZ0\nXOkFe9J4DutRCQV9RIfeU6NGFPmm04FgiGO/J63VWAhtUOhbNWgLsieYGDk8\nVmp9YpZEeAywCAhU3XaL5XurC86c3yijcWvc8ftTr10A0wW/Jij+cr9SUG6d\newl0YLkjQoA4z2BV/P/TMlv/JbcIW1EgiPdUGZl/gkLHiOrDNocjd/d3wJhC\nCMdqFO7C6vQcfiAW2ndmfuYAN+1Ru+tfIgv21edsqnPou4BGCdTarcXC1UCA\nuX/CahIk94iL8DaK7/IV9OgDIY34CUHI7KFarwYMZvrXgFKR46TmjPiIV3gq\nVGCsuftsOx4CQdT9/7oqgJcjhlhlIli/s3nj4f5P3tj0zHVXyjxwYJuxkGPY\nLJr9UwPyblb2M/mmCs6fIygotYpu0MfvDt3jqSk8xBWkHktkt6rvDRgFGTtP\nFcxGtafZPbZ1Kp6J7iWf+Tk/2z6Mwrgii3GwZ8CbppCrLT9CZOOMJhAJBPKh\n+tgB20qSSGREkMczfzLHuAsR2u1hfR5B/AFSwapMR5xtlZHhNZ3gzp+nv+H5\niDL0\r\n=eJk3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7c42a890f9b5f1bce3c7986f37f806066e6e30bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fbb1381e1.0","@material/base":"8.0.0-canary.fbb1381e1.0","@material/shape":"8.0.0-canary.fbb1381e1.0","@material/theme":"8.0.0-canary.fbb1381e1.0","@material/floating-label":"8.0.0-canary.fbb1381e1.0","@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.fbb1381e1.0_1596210683966_0.9239641586698881","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/notched-outline","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.7f61d5785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c6afc29772ba2b7d2e2880fa1fa025c59fab2e3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.7f61d5785.0.tgz","fileCount":34,"integrity":"sha512-fySjQjn8F/RYDWz1q7JR29cCYDi9eswJibK5aT6ZxP+0ZMhRrbVHS/1yULT9hL3Gf3LC8SscJrpQDbSwaxqyBQ==","signatures":[{"sig":"MEUCIQCWSRLOlQojAPtIsusTA+DT+NsT6GyjAaFiVg3n1t+dmQIgRK9FnT8Qe4nIeA9pMM4fEHoF5YrSH8J4k4PBRSOkjwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFOsCRA9TVsSAnZWagAAj5wP/1N/dAJmeQZDdonRjBnG\n4eFXseJh7pQLN3lHx/jmCyKJtH/LIV6bwxgXQ5FNV16HSqQ9+IbUgpSX6VKK\nN67NWJBRryhxNuO74zgMtjsAz6mOMh2sm/3Oh5NrdglBsTMqsHu5b/RcKIC9\nc7KulnBm0l+JtXf5Dx9YOV3jsFMw9yXGbuqVX3KMxMueq6ZdPOFbheFrjb2y\naOqpU+VClk0WuzkmEmihvBpFXuREbLx06eGja2egUNqgN98KjAkZ64Y8MskG\nua+bmw7jHumlLIgr+CS6Hhbc1Wfex4sVAFuOGV+flmBTXvWKm3E5WyyCXlh3\n11C59DlVpUncNo6FyG0n83VRHBjRgIUc819qq87fWaB0FtzQDc4fIzlk/xqh\nVpneMgt88fbsqu4JsRttUqOBhn0SalMGOMD1VZXqjy9IjngRdsJFHerIqjzI\nUro8FSoM7R+0PWzx3MSdzhztz2vAHDjO0UDEAskEzB3bbA/NaSEw3rCwNLGz\nBdpdRNDlusHuh+aoIrxaKA8VqHikeb5hQuPftJ8UXfq3HdYGBINvwYzwH+dp\nq2tbNEjo4SHVdPTXJ+kEEQfqKcE52VXrC7CfpvA7Oy54M289W2vgyk+1PU7i\nNWWu0AcI+3I8cXYjEKkCTiFTlL2UBI7nh3bgxy8rbbKk6DNvMML08GQxifyO\nhKJY\r\n=JJGG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"beb77eaf7ccf3f03c6d830f96485010ea9e3d47d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.7f61d5785.0","@material/base":"8.0.0-canary.7f61d5785.0","@material/shape":"8.0.0-canary.7f61d5785.0","@material/theme":"8.0.0-canary.7f61d5785.0","@material/floating-label":"8.0.0-canary.7f61d5785.0","@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.7f61d5785.0_1596216235873_0.8495293400158219","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/notched-outline","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.e1bc84d10.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1712998fdf70bd32373e81d57ce8e561210f738","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.e1bc84d10.0.tgz","fileCount":34,"integrity":"sha512-Pk+jOf+asfD6lahsqiptJoTQ6Sr4obbZ63PE3e/cdyRglEdf5NqinXLU7VLghpLy48u4gLRKcX8JnyP3E/0F1w==","signatures":[{"sig":"MEYCIQDVxpzjXDyj2KeyIX2DB/8+Ok4Zhrd/D6JRxvvxm/uqcAIhAMCGtFQ1kbodKJmmvwokQe3xicw8rt705LtK5YtzmWIV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE7BCRA9TVsSAnZWagAAGmAQAIshyy+HF75plYhFKI97\nfRd0JqMuRUt8BEBMXXJWsOmzAL6C/tBpTEZdZJv90TwaWJ3af8G0J/PKHVgz\nb0kyVlenIOI+Pxyo3pvGPg1HSWGKGnOOl+v1wHePlQLOwLikHEkpHBydqbPt\nswsn2DHgmarKkGnbDL7cIdyYrCs3DDYtD/A62g49UjM8ze3k4BaSxgDLcexd\nut4I3A8I2WB83Eh8HX4T8Z00o285OIAvn9lPnAm2BWxtmB/+DKrPE1eYBpzh\nsncgn/27hzrrMAXsAKceVVVz9FrpapGWcJmi3uP654/LQ00wAI5kff18OxpQ\nu4ZuJoxOM7P2A1Z6aajB9vo+hKj94OnJjLWUsyjMiu/O/BtxznVmE5u6h3mU\nFty6dUXzScEnRS2HYiljF/vnhsgKzFIWJmom+15U31yaRNfp+vBcX8zFUW5c\ncLDECR1CgwmgHtw+wDtf/i3u1iyPkI9yx6TsLGhmGklgPjG4qiA9PKXg8jdM\nVtg0k/RdJLd1ZcdZfSfdARdLZtEW29e6xRHZQK2afT7DQo1HF7FKl17zTSyi\nvku1TUNx9ODp16tiKNxIgZXSpVnIVIOnx7CFPhY5/o9mCkYiN+x5PhF/MIlT\nm77Dr5cQUu6KI8qbkDj/Bvilce/ee7QILklRel0pCD5tMB8T0YZ7fX6++WIg\nXyPk\r\n=agAe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4752dcadba6adfeb006ee3689e295db016f4bea3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e1bc84d10.0","@material/base":"8.0.0-canary.e1bc84d10.0","@material/shape":"8.0.0-canary.e1bc84d10.0","@material/theme":"8.0.0-canary.e1bc84d10.0","@material/floating-label":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.e1bc84d10.0_1596477120569_0.8738671656631343","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/notched-outline","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.096a7a066.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"328359baf10beece0dd9af74725333ad3565bb4b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.096a7a066.0.tgz","fileCount":34,"integrity":"sha512-BKJQiHuWEQNXgrTG8AVg4iPm3PvuZ/5Bs/bvW6cBKGsk1Ki0mK1hl3RWG9BqzQ3BR9NV5AmPog6gfnJfpBaH6Q==","signatures":[{"sig":"MEYCIQC3WH98b+/TxzzTGotpvS+2vQY7mEHi5X5qsBlFhpFOtgIhAOiDWDUDY/zcqvmAS10ad483e31lYA1xdlEAe49uNvBJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9tCRA9TVsSAnZWagAA0CoP/1DceuKON0x7QwBWxv4e\nSOE0HuIOPBTvWJ3Gb4jjbZwn/uJ/umQUJJCIv5qeE/ArGIZgTFi+RBmE3T6F\ntknOxlXo/+M6Eed9HKp1wzQXyJ1JbOUtznbcAWGLKOnbTIWKLeODZzLifjAU\nJ0v2iCLnPtbRfadTPwqKFohtEMr4SX7H8UeODPC2MNYnAP0O25ztImiPKEo/\nKvAL84jOfQo/sI1Fo4TOOrG27OlJ0cSM/IHz7SAWsj0eiS0ZgRVqbYQM1Wk3\n8XG5Q3kDXFa6aG+Klh5+lMqHh2ZMgjvN+0pMYgjc2s6mxgtI0zHLUXSnkD2V\n5uS7meDeqV8wDepum8WmmdMZfhTHA3AVDS2oa6vJwOfVDFybO/FUsQDYpwc6\nOCy6KZghdkoarVAmSViji36u+MR4rp/fxCHa25ARDDmAOjcE9FSnbXAdkApi\n4rRoPtrU9Gzyrs1a2Z4Uz98MDbu7++2z3T+OSQGGIcr5kvroVJP48gEv4Sqf\nn6LypleWvyIr6S/gzDXnjKh7bsRd0kY/bijyBDTn3eON3yVMbAgRxK0caTG6\nvq6BE7UPMWisVxRHo2VxMpueNwzrEdSpKf/U7DdltLYPzA599rmUpsMn3Z0i\nJqfpKu0cOkvMkZoS+OkjYefBPg94Hqw3/klYD+m0yq2zJoAM54ck4ho0DyRF\nJGqS\r\n=F9CH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c1f4491c464cef40f62d03f687af7b443805fb7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.096a7a066.0","@material/base":"8.0.0-canary.096a7a066.0","@material/shape":"8.0.0-canary.096a7a066.0","@material/theme":"8.0.0-canary.096a7a066.0","@material/floating-label":"8.0.0-canary.096a7a066.0","@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.096a7a066.0_1596477292871_0.5306446395035567","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/notched-outline","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.aa3a3e5a4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"128e274c7f9303342a4c9206e25249e678eb942e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":34,"integrity":"sha512-dX7hHzzKiVh3OaMdX453I5OiR4q+I/t8l92/1jXUjvuCriR7kXohVXE/hKJTZgpQp64G2ORcZm7WnOwCtcP5Mw==","signatures":[{"sig":"MEYCIQDFIpxM4wRqC7499ONN1yZUyIes6O/YfO2oAQPH6LS3MAIhAIxCA5GVOvgwo0Sl1y9SWxX4iFYzoukS2VkNFc3o7HwM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+TCRA9TVsSAnZWagAAMOwQAIYnnesOdaqGyPfvcMtP\nWc0Q5ai1QX00eZJYOcRpWbJ/vwpYNbXwiDrvB4q/PpNbK6EI/rs3O9W67+4X\npbcS27M5gypuIkrGAg9K5CujtwI9VBkZNaAUSTaElegn4bnSMA4PIz6/yZ4+\nne3CJKPuKPg5VTBm4icX5F45YY8vvY6r0L2KbybHdC4EorsFu0qufMlifLWl\nK1BhOA6aKK/3yZrSVzfjMn24096K0t20BP4yhhbI3M+qz5GZI/SsKkGC1ETH\nmp9O/zDo0PKrNa0K44R13RzS3gKU2dI2wmL4tEFHobnls8ephFQE70I8jjPH\nT1s2ypPkmj4F3AiKlZq5gwU28qM0heqnQM0N1S5x+EFleiSRLX1YCud14gHn\nQKUz1vt/P7lhNWXfz2Aasbt7Gpm/DjWDm8geePLUdBbUW5HwyZ44QWmQ+BDt\n56sx1SII7loo2fSqKTPYt5YaRGT5qhbXjRLu6xj5PZ70yBd0o4ROT5SD9YlQ\nnSO49Xj/hGdD119CfkHM49PrOblbpSXBXn8ACIgnNi89NXa3HpgpfJXp8iBz\nRqZIkoZky1Ror9QZBZ9N7aL7ejx0KywqDiulRzSMLZ4lVG/u0vqVqVj7Hbew\nivLo/R3XFtm8fHpzk7mcZpATN3SZzo1EFCQ7b1j7hD8TicAhXPgipn4xUuW/\nwRwJ\r\n=sBkY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8e25515e9c171e19310cbb58630a760408b78c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.aa3a3e5a4.0","@material/base":"8.0.0-canary.aa3a3e5a4.0","@material/shape":"8.0.0-canary.aa3a3e5a4.0","@material/theme":"8.0.0-canary.aa3a3e5a4.0","@material/floating-label":"8.0.0-canary.aa3a3e5a4.0","@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.aa3a3e5a4.0_1596477331138_0.11616471341526569","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/notched-outline","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.5903d39af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9467788e055f194e40fed8c19f9e8705c45c3c3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.5903d39af.0.tgz","fileCount":34,"integrity":"sha512-q7HprR2CE7ucKG5bFJ3iT5F72drCVpXlNOQ+Faq/DaT2ch/Q7MOojFKmD8ArP5ZlgC0DA3qT9LL8xzFl7ZUVlQ==","signatures":[{"sig":"MEUCIAdaHv42KwLq1VJu7RWYufZkW4keyXXFhC0HAuyUQrBcAiEA2xtfltVfEHe5QQ8RXLwEmRS4WqtuEbw3GtipS12o1gA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+pCRA9TVsSAnZWagAAawkP/j+LvFUiDcXjO+ErYGeE\noHYLMAFmQH2LoyOz2M6m4T/3RDkaHPnK6Wm2wKR4uPziqV8u1ko3QBD/PMlY\n91GnNNE2PxwXIe6tWhABdPZ0ELPhUgtYikQbYqZnStHd4b9nbfCUaHNWdItz\naGpqSrvgK7Kznd5dmUZnTGZuJ/jsctjkfdhO3qUHLmrNTOQGfBITUWgTOwl3\n8YgoJTh9UGZlbPX4aTrmmNnFiYQ+txQa35B3wYhaewH5JyNt0JLpxAP6misL\nGMqd0oYapAQ4NGa6dXSAYC8VgkKnlA4SF1sLt+06HOR95QDkLITfnWpMyEzN\nuHINSHORacIHDpDNWP79/NQBwEQyu4nzOuUlXheZhFqn1xncnWYgW0oAQHcn\niO/D6hBgxkQhnBMf9cTzXVUsIp8Wxt9JYYRgvY21BLkR2GHDvcXgR85xskOD\n7GvKJ7ZaRwrTJ9nITvy9yDwSRIi/N5jJBCxDwjTa847ZuMSEfpP43q8aMxR/\n/plUcFNK6YNIzyfQmkHrO4Hw993ooQ33ZslgrQjj+SLObH43ExroASy9boHv\n9aZPuD8nlzXMrTNx+7RVyG1QfwpXeD/iDIGy08Ucjkbbq2JaTAyfbkRXSkEs\nX+Zr7kT5sbnXw37sG+zsuCxQMgbCVJEil1ZeIDTk3IUcuAGQqdaFuBi90ENe\nWbFT\r\n=HyXs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8a4f2eea8ac8483e7e0a1c93b141ea9dfaebaf4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5903d39af.0","@material/base":"8.0.0-canary.5903d39af.0","@material/shape":"8.0.0-canary.5903d39af.0","@material/theme":"8.0.0-canary.5903d39af.0","@material/floating-label":"8.0.0-canary.5903d39af.0","@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.5903d39af.0_1596477352914_0.6050067861258082","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/notched-outline","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.72258f898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70c355b88e764d7e0c8da8fc95a287bf1254f8cb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.72258f898.0.tgz","fileCount":34,"integrity":"sha512-1Te2FEDmi7kic4d8Z3PbEATyDycmHQOiJ2LVJ+VNmPXyBsReJyVKqNDuc/yCKS3oSL3S+SvokmCDzPIb6++ZlA==","signatures":[{"sig":"MEYCIQCNopdA+unGKDx+CVYgQETqTrNMqHwPnLV42hFxDA3VHgIhAIvJBqzkMyFV4jRrSTya3uF8xPyOaOlIZGFOK2HO1Eff","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLdeCRA9TVsSAnZWagAASNsP/27z1MuEODmv02iOrE8h\nY7JhXZKNeRoEm4283CeuZNS8fwuNkaQb3SGrh1UiCOQlbgwj0E4qxw5m5L9b\nJjW0oEA09CdwpJmFl5ZdM6OyMBNoGqQFBsp8vos8oin5mrBrj8x4bBzsihKS\neajik8AH1ZeHnIyXzWvQQndBcZ0oIDqPxg1XvHMkBd9xIp1evrxeQN8musWa\nrXVTRjay55LXDck10TjsoHMwSxZxeAiVSbGjkJqqdgYqiYtHHdEa0u97hHRU\nmcT0du8O8zUbIAhqMrDf7AU1Hfh3sL13zJwenMVtMU3kSCJ9ny0iyvoAXt5U\nR34pGGAI+uH7jlaJaUBVRoT27UEmRWrc4jzyYlmwId68Iha1CbdRh3EMClne\nmcmllBqkGgGPrenOQY6PcmJcGBljCf6RU4xyOUsAxS0hHBonhxc2/GPK6BlR\nnl39nBIX7GkMIeZ3ZjEJLO0tJVwu9+bLIqsul9qKp/cdDfn/EDn2tALkmoT3\ni2uNBXwRmQ40GD4vQ090euXgg066bIwAEvaYDbxfHzrk/PhY5OA2rzuFNMa7\nbqi1yUIsKC88rktkiblGydnl3VMhr16t4BAcqlkK1OooZv8wT3875zAvd1E6\n/JDGYb+9CSvHgb1x0tdNF3+yPM9k+YOekORWi/OJXDvP+rqT43yO9XY/VawH\nkqh+\r\n=0x5c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ff2c64799ee2d684ba36b9cebd15fbe0d0ed17df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.72258f898.0","@material/base":"8.0.0-canary.72258f898.0","@material/shape":"8.0.0-canary.72258f898.0","@material/theme":"8.0.0-canary.72258f898.0","@material/floating-label":"8.0.0-canary.72258f898.0","@material/feature-targeting":"8.0.0-canary.72258f898.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.72258f898.0_1596503902452_0.04236815156705953","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/notched-outline","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.1b44b43c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"834d7f56ce1ac2c93b54de681a26cbbfca5e051e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.1b44b43c8.0.tgz","fileCount":34,"integrity":"sha512-HAnX7RHqDEYrNoNfuvxvmz+kFmS/LW8IK3wH1edU4JGmZg82+KFM7VrnAvj5HVETApzdVyv9NtSJPvGXM1mggw==","signatures":[{"sig":"MEUCIAK8ISehBQsjso0MlGR4CcKIuWxuDt5jL+jX0JK6XX+oAiEApgDS3Usmv81Hi08ZlKZOvlN9PcYk2fgZ9O6PEGTwF/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZGaCRA9TVsSAnZWagAALFoP/3zG66d7xPSPtjGe8eyx\njU51qZIrl/8vDY62YdLZrSxK8EDdptog4q5OghnVABcxuw242zcWMogFVabC\nFMa5TRaT4UQ2e52s5TUQ8vRS3DJXU/wDNhyEn1UoTrU8hY3MSmeMiPGlPWGd\nR37o2yE9oAU/uWqU6mjsWxPIiqRwm30TCJyRmI9jJ+ujUCpBbfr6EeFO174v\naeeOVbV7NwjjK18/HoOrcSVpk5tMheoFwUWVZyQCYG2iA2hyGvo6zbM1O4rS\nX5qcsZRtW0Te8QiQxmcxuV6iQ4wf81w3ILgkAVxKVBL/k1J+Sh/8+qdln+z7\npevkWF8BqqRsi4B8NChbqVNy+/SlBmSZglPNmL9QOtmB8Gjd0GsU27SZj0my\n2hvXdwlzZ1QDprkiGCs/B2kPOweLMBn2xnKGn5Ok2Pb9dC2Mx9C7F++0XoUw\nyX0AiD1k1/SrIfC2SqSTBcaRaT50AeNhy2Lf82OQHjstDx4h/QuO39oLwH0z\nxSaPNqZ69VqdyxoPwc/VzA/P55C8hy36Q3Tz9CCXtXK/cNLAGfktpDHKcur/\nD1wflBgtevxuOckof3KJMLEFkOdD09KogNZIfubFoR1oEPqS+nlA3qs35e8Y\nQHRDY5/WWT1BYGOrd+eMK6G9YlxgyCSVSNzpN7UdfyW5w3z2ZC23as/FoAhZ\nv7UC\r\n=WHa9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"69ee70c646249b45b57e59e958f1ca6d8332dec7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.1b44b43c8.0","@material/base":"8.0.0-canary.1b44b43c8.0","@material/shape":"8.0.0-canary.1b44b43c8.0","@material/theme":"8.0.0-canary.1b44b43c8.0","@material/floating-label":"8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.1b44b43c8.0_1596559769775_0.8394198246527973","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/notched-outline","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.e9d2e2f96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41ec1949854d816d8d3131e1cac367446fccf7bb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":34,"integrity":"sha512-G/X5y16X9pc5MfYmlO74JFhJ1cN9fClquuOoQbAX+mrYKgl4APrs4zHGCgKcMDLUyMZQ4eEcqYZlC6nF/r/GlQ==","signatures":[{"sig":"MEUCIQDEk5nmw97iZbN+869PBzCrpNkRyjCnlXRv/ijVhsKXLQIgUUuKg9kgOq/bQVdtCv28MDQWvAGZW/x8zAeK5rbtpMY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcQnCRA9TVsSAnZWagAABQgP/04mGeu4LdK5Dqy7/wwa\nhE4ayouSJSTkWwllFtqE3w0pd0hnzaX/iUHJIdnC/LIuWoKMNf4pRJDLqPmj\nKK2GjaIbjQdNPDeOb+2iG1u8gve2nKQRM1evo1LyWUF4B4VPIi1Rm72lVl8T\nzsqxKU0NbXlKZdnPtYPCKpc/7xulQEUo8VRzZJALMNHae1DAvY4ZtKzleKF5\nln+g9zFmqAzdApFO5R9yJJE3GtG/ScVj07EbFP3Uh0Gsn7eQe1LT7yBSo82u\nk9pOS7nIGuCIrZ0dLEnhQf6uF4PsgMm3jyaFEy9APOSeegkzw57CpJyAWIU3\nqjKAj4jzaN6To/c4cDDxsSirRld3kjeUrskxZms2ng0ziZPCV7ZfUGyvDjn9\nZrJve0wgXGfKUSSnSE4haHO/VaAZBzEmVBglU62o/RqX13VnRn6DSsAcMsug\nlvV0YN4Bb1CBq5L/pHnB2SmGqYy0YMM9hSucqRT2LUC47FW+j0gIs2VK8zrn\n/v+t7Bx/7eP34W2V9QVO2P4VaIPdFnJpNBD8awG5LEo5rd4YAJEUeTZvNGEY\nWhuKe6Ij4e/L+mg6pMvYSVPEqfS9a2GpwVmfUuSJG+T1pX4X7mVhaES4y6UO\nx5VyBiZa2Tv79qaMB3NC71WSRUnpktA1rUw21SnkJNtHYxNHmVXQf9pp1p+p\nifbZ\r\n=v2e5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f6bf51788bc1f39067fcceced79dcc12b2c59caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e9d2e2f96.0","@material/base":"8.0.0-canary.e9d2e2f96.0","@material/shape":"8.0.0-canary.e9d2e2f96.0","@material/theme":"8.0.0-canary.e9d2e2f96.0","@material/floating-label":"8.0.0-canary.e9d2e2f96.0","@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.e9d2e2f96.0_1596572710804_0.07697112970873521","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/notched-outline","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.b9dff0a19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e5d4edea2e10612e011357a13cb6b1e36fb1235","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.b9dff0a19.0.tgz","fileCount":34,"integrity":"sha512-rVC7Pj7FSQR3FnVrIKjdUj83LzQ6/D1rdxmAeqS56Y9r87odrvahcp4fZ+79lHMYullg41XTesPtXKjctfqoUw==","signatures":[{"sig":"MEQCIAbLe89uiuvBTT026r62UZ7SnYgcIP9ecV7hdqqYMvaNAiBqsyCyMVw3/bJQT88qJDTqDGcUMCVlDHnFH3rJ8dcA0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKixkCRA9TVsSAnZWagAAcNIQAJR6qWw9SSqItD8QTFoa\ncdXax/1iu+eooCYvX/ffe+XkQgGiAsMu5knyAy2/AhQFydu2X8063C3FPjsB\nqwzd7iLDYE4Ue0J3A/j/qUHPURG2WNPC36hcftTqtSo18dG2y4Tgar2Mdv1U\ndo0yf7GYzfMH4/Wfg3A9Kxi6+Ev6Xc40UxMCBrWrdKNHW/sqJGwTlsVJTbTp\nKc6tr2AdGHIZLxzScfjnYUBHtePfyx1NGlg7Wvk277j1ujPMfjeYQYkPlaN9\ncMxSCqOEg36CgpZwvQA8TQxhSawqifSSB5y0wBHI8Hz0Gn0tpPSsa8ytlCdR\nomd7CBlPrcQnO69h2GswcJHYWmeKmNf1klW2V6UrtB55RKF4d65bPQTh7WLD\nHCttJyF/tA0lUvtKgce4qN1MDYJ0/eKKzU8ey5z81SvmhOgMcUTmqO4Z5Roc\nBRZ5etFMCY4HAlh7/xxBOzRTOC9YkijxU0kjeviURdcef/tDLz54lXgzJGVb\nTzaqiLW+aO7kl7jB2vrrbdZ1TU+BtXW/c2Ttaef4Vj2LyxiTVcAeMjbeNa1o\nsb5wIi8XP/slnQUaREzgL8BqDLsMm83XM1kC/xtc8Dc2ZEQ1vqSRr82LbEvS\n00iYxHN20+qJk/Fsnc4IbVFPKnryZ3ucgD4PRJbxLBAqd/BDxf2Ck2NgWbTh\nv6JJ\r\n=NvZP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dec2f9fa4c83e98bee860646fc2a65b134a7900d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b9dff0a19.0","@material/base":"8.0.0-canary.b9dff0a19.0","@material/shape":"8.0.0-canary.b9dff0a19.0","@material/theme":"8.0.0-canary.b9dff0a19.0","@material/floating-label":"8.0.0-canary.b9dff0a19.0","@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.b9dff0a19.0_1596599395807_0.5805722512255034","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/notched-outline","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.2bd09a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b238fc8d4b5fb084d2df5096e278e0ccbaf2e7e0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.2bd09a706.0.tgz","fileCount":34,"integrity":"sha512-Lf9O/yNvnoAvhKRGLaifP61bz0z+IWPTjBdrfXam1JZ5CbHfbBqpVX8xwalyG/SMdY+Miwp0DOlJ7Di794ST1Q==","signatures":[{"sig":"MEYCIQDtTBsm+XKdy+yC/Pm5m7SSSTsPtGTC4/YXjrC2wuFM5AIhAOc8HIoJrBS195obClZ5K+K4SlelNR4799bUB779v9ww","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi2ZCRA9TVsSAnZWagAApHcP/06Lv9el7zRhu/OO3Sic\n2o5sC/mLCd5Vdnla+peMTWMy2ZgelkD1bXj1/4gjg1puaXMzvqcqBNJmpL1p\njhCOaocMh8ZU1zcM4ZbqLMbaqM2h23bNQBm4oCTqbzZCUJUICH5OiQXPLvqp\n5cB0HOKQ9r4BAJUpKtkOaZEu9ZXDTRAmZHRNk73LD8UniZxToa9f3tePVER4\nFzW/D54E7tKv1h7oQrfXX26gvjO0lkIQrd5kcZyUcEc/GAIsQca2pRN5d6Su\nfNl7m+GgRV83dHS5kN5gaN4lnbLo5+VayKY2lWivGDF9AUTHwoH37INZ+i/x\nQqO3KIWvE1MB9fhE2+5VxuZRE7HQTNTQP40H3o/x7yFC1oCoy5DW9hZv4dEP\n4R1HDI5sL5is3IpqbjG6WyACuWNd4JVo7PMrdyesHsYDhkZlKqtisoScpgbV\nolrZnrtI88S2v+MzeGi2ldA0h0F7NgTCvbD3rytg4ez/IKazaJkwzBT80z5b\nLh4gcDN5V/V64YfdSM4lUJ3dNW79dEdnDalDK+dre7aJ53xkOvEwTQhc2A5M\n66lQO9f750XH2hkPjQBvvpTZWcd/q6OOCcC/sN5KDand/eLQZoSCFaoBpTAy\nuIvIeai49gxRqPIeUVqK43qhKOgl/cZ4SbrDGeT0zS7Z1vwQSFDgfnvncwmg\naeGF\r\n=GWB2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c8b061f3fa8ffaf5214e79fe44f6c575216a1808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2bd09a706.0","@material/base":"8.0.0-canary.2bd09a706.0","@material/shape":"8.0.0-canary.2bd09a706.0","@material/theme":"8.0.0-canary.2bd09a706.0","@material/floating-label":"8.0.0-canary.2bd09a706.0","@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.2bd09a706.0_1596599705362_0.28686952614252714","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/notched-outline","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.e0560522f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35a5812475310af31f82117a6cc57ce50ba3c9c4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.e0560522f.0.tgz","fileCount":34,"integrity":"sha512-mb09VMnhegO9SnRxebBcXjIpotbJ1bl7YozOwAOsbtmLneYu7O884TQUf7shmsDSngf3TwN8cqw3+mAUmSh9xQ==","signatures":[{"sig":"MEQCIBN8pd9giG+p7/iyH2eNeMDrtimN7rheV2pvg76Th01yAiBghVa7lkZT5S87eTZGiBITOAptPkaY4JmNDBWTpZzz2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKup4CRA9TVsSAnZWagAAfjMP/jOnyoIgDrReXCn13uuo\nxoj2Yc2SF8XhB0YabPTAEyHrWmdxBtw/JdEg/2M7+JhHHOO4TMDAzZ1eoJxB\nIMx0VhzmSf8Qvt2nQBRkxBMcCV2atfCEiVTzfk/tpLB8tisC6D2ymyDosD9J\nsORpnyuROaUyaWDjKrcZh+fZ3Bmn/ImSfmds/xoMxdYyf3wajbF1+clhfv7y\nzUtHxwGxPSjUIURA4DaOcM74Ueu9m7zJTdCU8jFHrVsaciT8A6cwxGRRr1Ax\n+rM1z31t63SBgos5NnnDe8zfyTd+ddvUkwJA4NgaHe82SEsj4oUVYUCvsEAP\nxZ08gKMugIwVBQhPb9AcmuisIWCtDjBnkwnAe42BqJPDE9yKWaElGqeO810E\n/VBQPggy4hLfrmwzCpb9ePzN8l08kS2TEZskFnDPzTeszMabf5Sp6hRt6sUu\nSaTj0wWVCbOvMd4XIqrCAOsuQfdnSLqYly97P3GQx4gWhlOFKh7PiKF9kMb8\ncKSCXvzC0qh5mtgL4T5J6+tgTUC9srwowrgx97BB1pOt9cUlI4F1sbBXT59r\nETEbLKI3Y3LtfPtPKyJ5RmdhzeU1jtT+KPlI8qYNMghW5PG5ezEW693RAMvz\nsEzJuKcSYkLL2chSJj4WhbM7GT66m4tAMttDz7AFQ+KDnKZAj39VDu3u0j/v\nJ4MT\r\n=3Kly\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f4f71f168da3435c5dd1bb74e7ae0c54fcc45746","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e0560522f.0","@material/base":"8.0.0-canary.e0560522f.0","@material/shape":"8.0.0-canary.e0560522f.0","@material/theme":"8.0.0-canary.e0560522f.0","@material/floating-label":"8.0.0-canary.e0560522f.0","@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.e0560522f.0_1596648055800_0.2919147597373004","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/notched-outline","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.08ca4d0ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9ec58d9db6d4e0cf040194af1567156434052f5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":34,"integrity":"sha512-pHT2dcnLwY5xqrvHACCX/OBoup7WlyiegiWDeuwuvADSLrRvm4sLOLMfvO0HWMVLFysplFHrCoh81fMsXhR3ww==","signatures":[{"sig":"MEUCIQDVqABCIXM9mVa+FC6iH9ZRTmqDNe86E0dpUFTEMfCEaAIgOQcI5AfSRao2GdGQRRMHuj3/uREEgXk+v/XfrfY3qg8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu8DCRA9TVsSAnZWagAAIB4P/0TwPz3RO9q1R7bNU7BW\njzqa29bdTprchOsNCYIXJhAV3dFK9oX/q+USveyXNNRxqAnmsE3GEnaP7ple\ngD7+9qacf1tMHMnixa9hxsiwqJkIhBqBEQ+Ihy/Rvja6PoAy1FaHDobZgvq/\nfu7jUmNABdpxGjorQVRMYHd7vnJPcHg8j4KcY8l97m+hu9RPtZ6O8KsGA493\ncrAwOjW6gGiZVfdC4NKhFt063dLG8bLit6w0WRUB7o+6DnJMP6PUTnUw04S2\n12gSrCSUcLknxOUquiu+tSQ0925p/tRF3AyJbR7FM2t+zTGXMQb8g5stK59F\nIv9WQ7JyIL/A3uOezRqupeIZwll4wxGpHXbMqWySqgbFJJ+rXoQWV1S9ACkK\nAfJPVOmExIEM2ZI3bT0pIXwa1RdQG3xWi8pldMdRkY7SlEW8gJqB8zXRuB1W\nBJExqGkQ83vM1zKBovw2cDRLzLrxf+tCT/Y64Fv1qLDkfpE4t0j+bqhcXojK\nyMQYQ1aiT9WH5vyxQwwJE0aNKBYAmteXewu/EeaO4c6Z7McD1ae9ZJ3gutzq\nKL7Le8aqSYRvT+2ZGbievsIO4sr4J3iACt3bOUaQKjCilNqzSU8KJziL3Blx\nrveP3ZcaeksbjzKdbQjfsnmmdWfzF3vPeoSGck0/kivZ8Kmke3PGkwdsMQ6i\nRect\r\n=DSv/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e525a44ae67401224e06885b43f10017ae70f9af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.08ca4d0ec.0","@material/base":"8.0.0-canary.08ca4d0ec.0","@material/shape":"8.0.0-canary.08ca4d0ec.0","@material/theme":"8.0.0-canary.08ca4d0ec.0","@material/floating-label":"8.0.0-canary.08ca4d0ec.0","@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.08ca4d0ec.0_1596649218745_0.9890463677589261","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/notched-outline","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.08090126b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5abad094fdc2be8fbe4b8ad7043b4d3c1fdcbc5e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.08090126b.0.tgz","fileCount":34,"integrity":"sha512-I30DOZGOB7gswkdhKY/XcUUxc1f1pNFOBDY2qK5Cd+48m6mU1xnu3cBisC2I+GKB1aHo2PhwkArmXeFrCW+o9g==","signatures":[{"sig":"MEUCID68ohdqmaSmIxnawNLYTq3j/qG0cATt/FXrSPmlb7i+AiEA0me+Osl/qvA8JDCFJpSzdGBlH7anuHYi5Cms1D8MhZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFsOCRA9TVsSAnZWagAA8HgQAJ7FooetLtZb0rggJxCm\neaETgZUuJYp32NqZ31nVG45aT52stDGeH2ThCW/QThGC3bIimM4oQuvXopZU\n/tM8SzSpc6680mWZhGdtprwrei0pbIz7F3t0f7j5ICZ9jBfqhW2JMWqnrHe7\nrxkP7p1UjPhwf9IsBgFas66PdJqMXMDdTGbJVJRm2YXil7GdNEURN5Fe025h\n2AVe5TI0YwVwwD65IQufdTzKu4BULpYuiHjn+7KTKWfhslQ67pK3kbwJ90Cb\nUZGnD1epXj0SuHm5DtwAMlHxoa28RQ9RRMpU7UKhHx38hrlXQiSSDqxBmQNY\nxo5bl7B2FB2z1g7jIzdysgqgwiPRyI0nOXkTDBRyAA3JL3rlBWKLN+mkdbiR\nnUSborXoFIzId3Uaysp/eKmoWpaDyWJNsI5ioAzSHdAl+48U1z8fOMgYv7Xe\no315D8af8NdG5Ie9un/Y2YFiQmoPUENrzxO3nCo9lG7UKozp9v0MUZAQ4POH\nFqLnuhXaPIBaEjOYASU7sv8lK/wuQ8lRWIuWJd352HPoz+eq4wCnx8nTvzqZ\n0ltJmM1icESFiXLyOn7jeJbWR16m4jnj0fAWQbcfWghDriebKlqCyzjTGcs0\nVFeVckXluVnc3P0xddtjC5t84G8ATy42vGlsTgWfNtKJCKYc6tTzvWGlZy5H\nZ6QN\r\n=/fbp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"92703c0a9dad96887725176e28a4ac83640a3b34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.08090126b.0","@material/base":"8.0.0-canary.08090126b.0","@material/shape":"8.0.0-canary.08090126b.0","@material/theme":"8.0.0-canary.08090126b.0","@material/floating-label":"8.0.0-canary.08090126b.0","@material/feature-targeting":"8.0.0-canary.08090126b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.08090126b.0_1596742414476_0.0793724219281926","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/notched-outline","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.e8bf5b2ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7398928c55c94096c011c4ecd3f734d1e9a877d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":34,"integrity":"sha512-qGksnexB+4JGtXk3W5R3QZzn9zE6sXSeQRyqJTpidghYCjNbObWKk010e89a/fmCT/luyvOwq7z9+w9CXn6q9g==","signatures":[{"sig":"MEYCIQD2TsiWFmR7TPas+VTwMNm9QoDJDaPgGwlo9VVt1LVZKgIhAN2KDC0UEVXmhvLotWDdc/y0MTHwuPFdiRlPaVPcBApl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHtDCRA9TVsSAnZWagAAd0QP/1YphgViYElFBLeMqw03\nNHIGtwrysqXZ+Iy9DD+0gBT5lMVNo3MaixETYSFy3dNc8Vx28IQp46T7H2hp\nOG42XG0KeaN8n5Q3u87swA4bADS72sA8iB5tTnAoEuKVLjh3fUniP1NcOcam\n+SsQVgSxPaKng/WT8DcFzvAdK/XxARnInDJoVRTgdsvVPGXAPLxM2sndQ+AE\nmKWt5CSv7d6Em9N8jtKydM4NoXyPu5L1xK+SVxMp9kdPoe/ll/CvxGQCyU1M\nAxeziv+CwBDKjb2++NS/72fO8sKhFK2GN/BLaoL7J1YwgHj6EDio2QhC34XR\n7GT90T8zr+XtY4ZRG6lkwz9PbnCJfV833L2AaH+qAOKLUIzEFcsIsLSPHKnB\nek7emo7tdFgCM1eU2+VbFho2GuvsV1MMdfckkFKaqPj2l7SotkufuyN/fL+I\n7qEkDdPBCNKiFN/Fb29q+YuJZrwF1TJfzh3Uncnzx53G20pdAfxuZ+dqnjY8\njYEvmXjkROqJ+OxD34Or774yXiFIx9M0JkOVUXyjRkOmWdJWPd2PrMP00xg8\nnDdcfdxLTEOl6uGrmRyw6Q+NnMMHx2YXK5SD7hC33J1S71I5bs9QXKsr/cmF\nJ42CgkZAaDNKOXJrt5rmStSOiFaB75ZZpEE3ZFcuab2FA47fxw5s0tkid2dV\ndI+L\r\n=iw/J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d5fe47cd91dcff7cada8ca9b587eb8a924a211d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e8bf5b2ac.0","@material/base":"8.0.0-canary.e8bf5b2ac.0","@material/shape":"8.0.0-canary.e8bf5b2ac.0","@material/theme":"8.0.0-canary.e8bf5b2ac.0","@material/floating-label":"8.0.0-canary.e8bf5b2ac.0","@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.e8bf5b2ac.0_1596750659159_0.37151709321144","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/notched-outline","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.e3b746208.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d00953010435d774bbc134d1d3ab49f0394703e8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.e3b746208.0.tgz","fileCount":34,"integrity":"sha512-y750WW9BLMq861V1KbYUh4KziwG49dhF2PvwiSMLIKALy2diUviwQUCZXViBLMjzIbY1iSjJ5d7zlHpLTFu/mg==","signatures":[{"sig":"MEYCIQCqK6NQGvvEAQ6rDG37jyClm+Vubr2hZSsLkK6UHhWy0gIhAIXRYPtrvbr8XnXC2+eknB0P+M6Shqu6n70Rbpdx70xh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIPhCRA9TVsSAnZWagAAXwAP/jep2IEISjLttrxReZ1w\n8MBB8xXO5D3ifTql5MJHY5dTAAAJOAWpRUxOO/navWXpI9neYnPx47zVZfuU\nvf6/sMHYcWpzoEOmqo6zQLf3NJmydtIOlscezo2z2lMha58ci3EToli3OjUd\naXNA3J0fhrtKcyie0f8uyehzTrI0xaGgYKLthS87xv4AfHsLZz0sv4P4idwG\nlE0KtM4FK4vq5HF9jJ7Qy4SUZmz5/eAeEgyx6ZJdkCiz2hHBAz30pGLCy5RC\nHMbl5hDw9YKvAi4aYqTGJNYBWKJ5kgJxLNHNp0d6WiBq80JmsuGvoK/Mh1Pj\nC0Shu13dw8DgxvtnOP0Jqq9RwHZVrMcJexw0opy7hEe83pM8FP+W5WN/pi1a\nSTmt3iZOfPjhsfSWE9NKJSCqndsuEFZk3hwAu3Y7v6SDbiPTjFUpPdB0HXhq\n5jBihU07C+EQNp4UvXroBN2ud46eYx6b7aDEZZaDYJPJxjsHGtUHZUjQ2nAa\nQuYk0vxJqc1BndJnkYdVpzTA2C3bwBpaTuXVbOD27s4Gq5QxuEh9WZLN6AYB\nt4iEgjr0ABVk6qzAKyqNoRikpXdNYMrQq3yEh/qexhAp+PgbZH0dy5EsY4iU\nDlDmoQLVSKmA7s98Dn6SNegQlR/PBoF/QgBq89S9g2i3mngNpLkmwUfqT6lX\nW8iy\r\n=lzyH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"565f03445fdfa2cc653bce8f5c730176a406e5d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e3b746208.0","@material/base":"8.0.0-canary.e3b746208.0","@material/shape":"8.0.0-canary.e3b746208.0","@material/theme":"8.0.0-canary.e3b746208.0","@material/floating-label":"8.0.0-canary.e3b746208.0","@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.e3b746208.0_1596752865007_0.7887754766905077","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/notched-outline","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.96a640534.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9b9254864efc27a42e0f62a7f43244c45647aa0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.96a640534.0.tgz","fileCount":34,"integrity":"sha512-JltRkgPWGUqSi4hZaOtHKwRwlSDQqTzdm+cnpElWuAzZSz9oswLfoAZaxzzrYG2Zs1KnZqRzMZYu7KuW030j0w==","signatures":[{"sig":"MEUCIFuQpYauoJZa5EA6/B6E0g1OJRNhrztSGD2QFKa+uur9AiEAlvK3f7QKwrbdbLGvyNoAf6a3Gz0whFtrBPrEV4QA8l0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":203391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIdPCRA9TVsSAnZWagAAjkUP/0txq0H1vq9nuMbGVqY7\ndoQuBpdiQh32YBmLbi4GsgwZI2BOMHCM7vHDVtF0zwTZbt/QgFFFnJdQrbye\n+KclvVboqYYl8tXGcSg2cwijSIm7jsAKLO7ptYo6HJhSyG8sUoewcf1Gqwhq\nfHgFglp9Qn4597a80DM5DUYEtoLykfmj0mGK18Pj1gAkQQSxRZBOHXFrHdir\nC6KVUdeau3DZvOQ3AZ2qcBa4jfpiXSsqlVFnLtv+oCiw2Gsfy4QoSuP7dnUG\n9NNtVVr3AkpatrIA7/tIhVC22cpCa7pNMCDHNqbsJmy0Wsl6UqcjB2Ozgx6a\n0ZJzZoMTzTsI71GNsESkcO494OgGflSh1oTy39tjaAvWX8R0ClmcAwkQkv2B\n2hMEYx1o0Fq9pAaegwlZTBSrCEJJghv47jnEo0LzOn9x/NLHlJ6k1te0vZOb\nai6hup9NMJW3tTVS1vbQdeAlTTRUAOcFJ3X1Rzst9xQuBQBsnCLBEL8EIzGA\nZYyNZSfybLrQDTyihK3V02hHBQQ7qrRCNgIIncu3pb10zZslrMGqHn7Eti88\nI96wrcjaF3e+6FxxOSFyRcJQDnT4f/4wHz9LjLyLacIfwMO7LxbIL4UiJUBj\nfVZrJgbOksIgsbkxMKVJKP5sdDDoCYJFzzRlYWxghhc57HyY2EBQoylPMvjS\nFThL\r\n=vfs+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3363a6ead1437d646dec8eb21cb2d5c5323e8986","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.96a640534.0","@material/base":"8.0.0-canary.96a640534.0","@material/shape":"8.0.0-canary.96a640534.0","@material/theme":"8.0.0-canary.96a640534.0","@material/floating-label":"8.0.0-canary.96a640534.0","@material/feature-targeting":"8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.96a640534.0_1596753743202_0.6566028791148468","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/notched-outline","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.9f9aac825.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de90700ec461c32665c93860d189816516411c2a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.9f9aac825.0.tgz","fileCount":34,"integrity":"sha512-rKHLXZ2aYZ9DBTp6yxfanx8MLGyye5oA4uVJE3xDOLtrAbZ1sDJbuU0KJOFZOfXLoL34AVrHlib/uDaUTYSfoA==","signatures":[{"sig":"MEQCICMhEHGNGuF33vVZg23W01DaQZpYO1+OWP82csHKOh80AiBWDJh+SVxQf+6p6ZED3Md45z3JM1VlySjEV7HYaj88Qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":203391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb8CCRA9TVsSAnZWagAAu/IP/0p4ojAhKYYEhJl80u3K\njNDYQOZRtkp8VaPBznI4IbheeEGGA4s6+bVvj3ARoPBo6CJZx4ob9jX1hA9l\nqH/WVJAJPrSx6i+zxSR2zrN1Itgt4a2FX2nDWnhTVQySPrVHfGbhIsCm0YWS\n7PwUfVKQjXIrvKQdV82A+glZRoEZ5JDBq4a+WEqeOVEoiKYNRRLKuHe5XaN/\nOUqfbMObIYWb3riJrLWXVQJPbU1tCqT9WTaHShVivLGni0bpcEggPSq5WUUl\nMXEeO/gMVsNo+DSvtVfQwmxzR64cMZDpVPyDKC524+D0IrKJHsvRFfjjYVWC\nhsxM315Q2eEhRKZvlHdFhN4GFW6w6+bc+0bQlfPXolVw/bmC6NAsoY9CfKhl\n7hdAMK4+iMMakbhEBlf+ouKcuPLyHmvIAH0dB3OKDvgnVm8Z1+4AW+F7iwLG\nYXKNnMhaL800KkXxdBGv9/PFzJFXfqwq+hhE7yu6jiRVA1jxEoJjO8x6XnnN\nLA115+IMRHk9EziifvBRJgOY1a70A5ox9HqYTLECLAzbnUpWxrI4SWpToIsK\nPJS6aSnDC3RG2yyKRYlyjfhoYCWwgvSb2v36SF2vLwvZUr05OkcCO3UHe7Qh\nCTW7bd/0yRLuU/OKRlqqDL2U1Oa/uZD49JJn4ylC3fBA10GYseOJsUNuJRde\nuItd\r\n=yBH2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b417a722353dd60a63448761d24a06d325b83f7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9f9aac825.0","@material/base":"8.0.0-canary.9f9aac825.0","@material/shape":"8.0.0-canary.9f9aac825.0","@material/theme":"8.0.0-canary.9f9aac825.0","@material/floating-label":"8.0.0-canary.9f9aac825.0","@material/feature-targeting":"8.0.0-canary.9f9aac825.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.9f9aac825.0_1596833538445_0.9441519841275727","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/notched-outline","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.fc65fd00b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"945f686df149b241a4efe7f9f5d7f303328021a7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.fc65fd00b.0.tgz","fileCount":34,"integrity":"sha512-CGAJhkHs18aB3TwXg2TtKFefMlCM4/6UPFP3OKaoEupPMUAyHBwihGSUEx4DH7EdopD7GjyMWTofGYA/crXZWA==","signatures":[{"sig":"MEYCIQCMeRl+GaJdf8YxVpy3GnV/zbNQX0NbodTgGFuYEEj+lwIhANNFth/JdnzlTTt0qZl+kl5fltFiQ5j0y01jU1niJS08","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":203391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWYXCRA9TVsSAnZWagAAK4UP/Am5WL/YmvkGESn/D5rH\nJaHoGJStZoLrt7CjuD4JkMN83r2kgKCKJGKyOGK/QSrfu7N895ikQ52iEbYa\n3JySWTrjcp61bLCi0er/Hn6FLzmimlRcsD+0EyQBgHtKoU1ppLlpiS7lW5Ou\nXW3vcmfIL8WXqEvddtWhe+5apOdPk7Z8kqsQO7CN1H4hXLBw0mQ7+ijEQ0Ui\nrl3AWMkoE2hCNRXTDxjiPzdZ6rTXI/UaGImWXIfFGon7BullJEZKFFGs0YcL\nUC//cMbQpQU3vn7PJDC4Rtd/P56KcrgbUGRDz+8S694JJYR+gj3VWSTshTyw\nCQ9m5XuC5cFo7AlDfKYHaiz/BU9wTcVkSuUsgxQsSklkduYW1x14MZpyfX/u\n0tvRyXZcqzn1noUuraIU4CUKRyKRAB97gKf45ctbkYaLYxs9xTflhIxB7Vd+\n2+POcTGb8vrADQbKr/ic7pz05AC+hInRTsRPFhKfsY999DGS5gMLfhj114m6\nlwo/vZp2rPpoEqVY/i0biX4C/qAVpURAGXHWdsw5aKzrKtzSusrZ56Qzjnkm\ndaRxYu9/UWWZCqpYawFD/ntvRVtfJyI5j15eBONCfAuZXcc45lZIQ5ZhtA8R\nL2FMoTobvRjFCBVaumc6TTVk9bmWcbfqGj9UHGyl7YqIUW1+EQhNdwxrRqEo\nHmd6\r\n=ZK7G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fa39d9d1e753796086537bc71b6fa2d2aa21a3c5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fc65fd00b.0","@material/base":"8.0.0-canary.fc65fd00b.0","@material/shape":"8.0.0-canary.fc65fd00b.0","@material/theme":"8.0.0-canary.fc65fd00b.0","@material/floating-label":"8.0.0-canary.fc65fd00b.0","@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.fc65fd00b.0_1597072918515_0.41788564461111477","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/notched-outline","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.02e372c5f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55d51ba5b3a08d65428c4d20b316a13a7e527d23","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.02e372c5f.0.tgz","fileCount":34,"integrity":"sha512-5cuds2filzTPRb42Dp511mXXC3TZOPUWhPulCq2vRXydtnzq7x7HEvNFSJ3uloPJ+f5s2+67Sct5k6tFnARarQ==","signatures":[{"sig":"MEYCIQDjk+f0RfRA6elUXbNQ2NRMHg8AGCta6zv7uYk5iuor5gIhANyF26y+M4fIHArsUaciYyEFyVuuU/DL2HNRwhFGPjOU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":203391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWyRCRA9TVsSAnZWagAAhTYQAJjnfsIgYdbZgUE/re/T\nengAP21CthC1oUifRGiHvc1BM7UJuc8HaeD18wLgjatxE1dUb/mFtrSIIX0W\n2BC6da5XF59eBLbLmuQcVClMzOQEkhodK0erQN7nGjz4RSfEO+WdirSt1suP\nSmlvqdnkQ0Aqh16Cmpv+7D1wg88ssBXuVt/+r9/A9wH26gRPWvoLBo+Ioh3R\nX1owmowb/wntlKrKPWPoxp/jXCtaRPgdKEvnJVULW3+D0U0K6UiuVR8w6r6B\njzUSugAyJ3Rrem/Ca20SRXbTYhi3Pp08G0ZQsdO8X+4Op1dtLJwY/QShzob5\nIViCn9QleQaFMGdlMCsli55gOEewE4gOzYI2ycF+AHTGi5+JRRLximXhwOQ6\nQdY1/645MRopFFCtmH4jN1BZoE/4AHRrpcV/1gJsZeqwNVQGTUiiWVah5ZO7\nygiAWZM/GPCeSyxOeT3y+d7vWUXjWgLvC6NkbO5y3VgC+M+xC7Sr/Qd8PMEK\n1FPQ9IV75c4PzFfLf0kNuFo2SbgxwhJ6sJDYvTCXi/wfVa5u3CuOaPmE9Bpt\nPjNmeUnP6DRo9c7DBFq7XGfnGpATVdQpXOoZL9usg1/M9LhXJOcpnZSI7fgs\nEndV6tjhiI/gUz65fyl0lMHV0de7ZezxrKQY5eRlxZgge865fQQje5LIs98y\nez10\r\n=bXAL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b765f8699fe12742bc2032a8df7cc23807ec94b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.02e372c5f.0","@material/base":"8.0.0-canary.02e372c5f.0","@material/shape":"8.0.0-canary.02e372c5f.0","@material/theme":"8.0.0-canary.02e372c5f.0","@material/floating-label":"8.0.0-canary.02e372c5f.0","@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.02e372c5f.0_1597074577531_0.8956602241509832","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/notched-outline","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.66669e3b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1caddf6af2ed5235bc690dd2448f4a3e54a74f4b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.66669e3b6.0.tgz","fileCount":34,"integrity":"sha512-pBZW80ceioM0NUCsxg+FMBCtbKd0JiYRAXiUYSFB+40sgXk2nwuk1Ts4NJq/L2vXVz2WX+sL82gtKwF1wdOJfQ==","signatures":[{"sig":"MEYCIQCeVc26cUB/T6ZHSsSEj+sFY6whiqtHXN37zjYL97jWqAIhAJBSHrCuQAWonxSG+Ht5r17fOrqzftPBe/lGqy1JeNTl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":203391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW2BCRA9TVsSAnZWagAAXcEQAJvMHauNuo7HYORsgAN7\n876srrJWyZW2sn7ERcHfR77f1nrDCa1diYLxi1NVKQJhAym6DxXtM6Su8uBw\nR2X4IVrFr+g+ej2rS9opGYUV6dszu9nMoNK7oWnwf8L4vTRCWjQ2x0pQn0rQ\n+bG6TL5P8jSySE/h6v3PnGkeBNZHZ2cByPXiPGQGOQHmUClL3kEkblWxJ5I9\nl6CBXycUSNn9KjI1OH3tDSvITPcmOexsaLnKkJDrch+oNT4O0vwIp4hbjWx9\nhpVqoj+lbLcyTxNr9szYlgyGcHqTV2VL0VHZ8KpkJUYmAF1JjZRc3erSfFvQ\n1tOZtuizbFCj980mk08Lkuh9FK5d23WF6XQ6Q4iDC0R4/FJUrY+NqdlB960G\nAZTYc5x3Fp7MU7uhMi3k7pZalsC6qFC4TfWWHpX4hLtSmPryFNclZlP8PcgI\n4lQG40UD8EVPqyiJy3llmEeLhAACMMvX/A6TUisvgOYvLHqcOZiLVXPVhrMJ\nKu85CgCS67spV30yS4Ofe1cwjguiUfY/RrwNDTItq9auAsbZB0Y2O4vE9yMq\ngNLFeYXxf4451oL+rl0yWlmorXm8LUMsBHCLxcAwvs96BxeKNeOouAz6A28Y\nHIQRJKgb1hDLpLTG8GnBY9bh3yP0x5vmoYZtu8p2LtzKK9UIQf85qLCsDm0v\nGuX6\r\n=w2Di\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"96a6a7d492075777ad5f7692328b3bd50153bd16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.66669e3b6.0","@material/base":"8.0.0-canary.66669e3b6.0","@material/shape":"8.0.0-canary.66669e3b6.0","@material/theme":"8.0.0-canary.66669e3b6.0","@material/floating-label":"8.0.0-canary.66669e3b6.0","@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.66669e3b6.0_1597074817371_0.2916845432365178","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/notched-outline","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.6d1ea9761.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a43cf6fa875c55cb76cf14cb1d7985bcf2f5af9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.6d1ea9761.0.tgz","fileCount":34,"integrity":"sha512-xgnm27AvxFeZNDwG3l7N5NhfXMafGZ97+Lnipzv3xD2Y6UbOaFNm7NQ8/gz5+xdQ+yKRJfbdjrdrT8VnzbDBLA==","signatures":[{"sig":"MEYCIQCRNFvInKSw99LCcd5SPVhdBR5M4P1syQ1Hx/5pKRg7PwIhAPAOMVZjVUE/AtShdgvuOKj1vPePXy3nxp9Ur3sNiUQX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":203391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMqvVCRA9TVsSAnZWagAA9/UQAJ2Qk/jWd8D75vHt5Jlw\nShMwFWba41R4QLxkxHIGz8E95gVGThQjFUZ1eVh87mTh6B8NXlctNrgX6uK5\nx/z5+6zR8E8BqaAv4ri/tjnmodaZDVYO/uogad/080/r4y9MkS/fYht2KmeI\nSfqdZ9erTGoBW7R8FMMmXHTCdQg+oS1DpMOtJ00084ciwfxowPuNz8+recNT\nK2qebjByd062fnzdl0FpikU3UE/qV0FUxbO7N3e50Pb8E3fOkgba2eVLZ8Pz\ndXS3e7xEQmLqJI5qexiXZGgn8h7GCxsDnBbBWG8UHn548R8i30wiBt2MInkI\nPcleOy9gKHOCDQ9DMvknP8GHOf8n63qjPUqmKa8P/En/hA3smdPSTEpGsV/m\npkGXUAPqsdyW7zvyB2gWb6hYlgdt+1GfIQF0dTg5zRd5sVX9FyY8GFWpQ8HP\n5Y3VHD3FJE55y/aPtXgHcp0hACDa+SXCpzTG53hrmPJpSXT9zEo7gwU/Motu\njlBblHq6Xp2MJBPBvckp+MqnXVTk0ae9NEn1K4AZTqAAWlCKZ0bw3VOqHxCG\nHgZaYuIJFZyYFSV8vuTWHlWq9U+j8f0wesTQEqyK/5fZ5yuUJqnjNm9pWX/C\nLB5gygWshelVCZVstwHLH3FgOr+otLMIswWXHa4C7OaoM++lX/j3mI6EEkgM\nC+Az\r\n=mtb0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2539ff1cdb03aaa0365880e59b2705e6f6ff4229","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6d1ea9761.0","@material/base":"8.0.0-canary.6d1ea9761.0","@material/shape":"8.0.0-canary.6d1ea9761.0","@material/theme":"8.0.0-canary.6d1ea9761.0","@material/floating-label":"8.0.0-canary.6d1ea9761.0","@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.6d1ea9761.0_1597156308859_0.93775717711803","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/notched-outline","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.79414bf9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4460560868e32845e8548c23a236eade516eefbc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.79414bf9f.0.tgz","fileCount":34,"integrity":"sha512-r64eTPP5yWAn1UvcATQZEDayvT4n3PsBqgwsoJ6fnovhrHIfBFVNNs6ZkYCET36ee1A875Pi+iXlkk+PF6cFPg==","signatures":[{"sig":"MEQCIHX1GiYwJ1LXOMgZQhul15J8ES/q7sPi/wp4ePvkv1RIAiBx99ufJqjp66LDRQJHGvq2ypPe1muH87kH5AlY43kQYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMutjCRA9TVsSAnZWagAAHmoP/31ot/AdXn4XQdmmqQIJ\ndKP3rRVuaIpMgP15utGdybcUU0RVySbz0vOGj9HAcoYyJh4aGhTo4OxxylyB\nkeyY6ZRAmsIgQLv81VKRIGI2Tjr1X8uLrm/tp/w6PhSiJ1JToxQwe3b/j5CO\njvTT+YgULaEg4fGKhXgVBoCFyNPRfG3Wz6WNrB770O7Nid6Ey9Dl4Q63AAVl\nwtFUxK+LtVZXeholK8TD5r6ML57ig+XgzYRtqcWhc6/0Wy05z9zBqE53Fftw\n8y2OR8IAXs1qk2Z8Zci1sVIXuEEuB5vT+vji7Hwh1hEtOe5OlBrGAP5n7Afn\nR9F8wfx2zMUtdXMNOZgDtZZti4neCuWDQohAprI5LRcSldvDPFZKbXXMM10r\nP1mM1iI+Z73qu1oDrytkdrg2tF4hi9XVOXwsvYUjg3b+K4Qg7JotfWHcCvbV\nMoijmBSoWV2+eCWl/0slO/UXffnX8bfMDGbqWc4RtAuqjTYY+YxKGD2IQQLQ\nJ8cAtyW0f7v2gkWLfZ2/MvEg42zq9aI28rEWM3loJMgPssfBbSPK2KrqWV/w\nX2wgLX8ZxZZpsRL21s9Qs21bMkSFQE4cqZniOrfYkhsA1MKq/4ttB+lcbG3I\nktovnc03N1YLpQe/qpA+1gpz18hol1heqc8LplzwPAk9WWelky5YNnGmBevj\nheRr\r\n=qCtl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3101c6ef84c1ef8d9afdb44b6b6b3067c2f5723c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.79414bf9f.0","@material/base":"8.0.0-canary.79414bf9f.0","@material/shape":"8.0.0-canary.79414bf9f.0","@material/theme":"8.0.0-canary.79414bf9f.0","@material/floating-label":"8.0.0-canary.79414bf9f.0","@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.79414bf9f.0_1597172578563_0.028110880359110135","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/notched-outline","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.85a5272df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de755f5da1417eceeb1956cc17d61c6d09349b52","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.85a5272df.0.tgz","fileCount":34,"integrity":"sha512-wgAUsTfAn/q3O8nNfXuqXprpDxHm1akERtRqkGjN+01d9uXZz7DkkHzJA2VRzUSb1XUilLCKdvzhSQacjRABAw==","signatures":[{"sig":"MEUCIQDUMSXNBwxF0oQRmKWi9DafZyYQgns74QCJmFgM/p358gIgb6m2MDr/FNRfvZ5zPvI//ASBy5O/SNHxEYgpCaQJxHU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvrmCRA9TVsSAnZWagAAO3sP/RAUGOm4cTHIVFQ2uPYK\nOxYFbtcnHQFtXpmDY9hR1HNj8kWb+Gw506OFvKlosgBCPEqVKSmwE1vKbzO/\nCvetbEYExnaJezRraOtcirk6LKuJyk0B3+uqGyFoFoNLiY7N0ztpa9Ktlt4B\nYsawRgfi72FsZgRceVgSHfNl8lPjxJBqjKs1L6UYAagYAISNLGoJ/NrbdA1f\nzlv4/OgBG0aFmGLyQqWIyfYkgN8yS8oUjOAhBlPVe7jpIn6t2OgJkmWk9hkT\nxVDAYgv8SgzuPHh0gq2/ATGXL5Ae2NzgYyxHWq67tRJF72tLc68xQKTYrncI\ngJoy2nub22KjChE3nLOmicBoKAI/BbMyKN36DxnJZJVvQ+vvu0JKACrIcDKa\n04RUh5BMZ2Mv1HzQ+H2G3JM02JeoixzmJS8U8La0SkU0+6jAxhs7jueY5aCX\nU39PTClIVr0BSiWgmCNXdrj6ApYg3wpY6L/OWQK0hShUkElE6ZBSJdDHHlpp\nnyZqw5DfMGZki+/Ntxey/drazJFGQ6meg1ocQdV2CYEL3a5yFJOl+Zr/vNON\nO7V/VvYahnmdnN2ItTNxvHhpBIiQyvtx4C1YQO6Ox73S+aGjMeL5Q82smsmk\nnm/YxEngUv675p0sephjv8rSQE1lqXNY6TIAJJCmv0XJAatm8A67BGrMlz4H\nDSEK\r\n=862G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"070016d39c8d62feb1148d71182053d37bc35fc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.85a5272df.0","@material/base":"8.0.0-canary.85a5272df.0","@material/shape":"8.0.0-canary.85a5272df.0","@material/theme":"8.0.0-canary.85a5272df.0","@material/floating-label":"8.0.0-canary.85a5272df.0","@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.85a5272df.0_1597176549928_0.8933012605330941","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/notched-outline","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.fda053eb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ca498d167105dfd8ee0463c6be5c1310a1c553b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.fda053eb8.0.tgz","fileCount":34,"integrity":"sha512-zp6USQt7OqmYSQlL7RNuuPQTcshmEsPX2RaImFtO+q06ZxXfJjAPHN0cAuWEwP27EqT1wLQ7dwOmWlOjT8azsw==","signatures":[{"sig":"MEYCIQC8OeckMfAFFMh/inr16t8i5hkxNov116CzDxGGKdlSHQIhAKyEts65An0OS7Gdz5hGacpUKda1erOnqDX4gjEbd85d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEt2CRA9TVsSAnZWagAAFL0P/AnozK0r+RW0qBzWI1La\nxaK7jpIPA4s7iBgXZSo1OghOwtK9c+40aSp9sLpf/+IIIlenb0nGA5nVNdg7\nUxMumqtT9c9UeI7Wj2G4WygwWvkYBiLczEjMeru7HEwJ+Y9BCPPWcvrZS2SL\nqKosLGB9Ixt1uQLZRDBFlBN3Jc6A+D7qORTm0iu0URLSEw5BtCU6JlKf46EO\nz72f6BM92aL/lpoLxg8kgVpriL3+GPyPCP7U5McbwE3yumNWtTRy7UJFYlWs\nhQDFwtf1TE0o1VKKqmLQQzdB/TT+OMnLCWJaOJGdaqLf3xWU/q4pFuHCYYYP\n8o0bE0xb28O/aWNfKc0omZEBMPEsSC1B/sOzCU2iKjhbo7BgatklZjS6RBE/\nwMbheRNfFH/kbL4+W6GzNR6AFQ4aMgLwIW/3y/Ih9hA9Rld6eEJXY8bIV1Kc\nYJ7FeuNIBaiCbnEWz3vdZeyMXKM4m0Mue+Cdd5Bn7MFMOyLHx1sos5J0wAiI\nGt7YimvN9+SiG8TAc2Mp4Mm0l+YXCBJBI3oOH1dPkxWm5Ipeko7YEYyYlQsU\nmyo0iUxGGeZgNYJJ2fLB/xvfDbwEjsxtI1WkKsr2ICiccrelRpPNiQPLnzPV\noKO7DA+8XKRAKxxjiT9LL52xq0kHY6q548hd9D7u6/Ng1/0MLaFrPaayYJmu\nc+D6\r\n=OnWc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b92b594784940e2fbd248c33d60198f7f2e0ff71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fda053eb8.0","@material/base":"8.0.0-canary.fda053eb8.0","@material/shape":"8.0.0-canary.fda053eb8.0","@material/theme":"8.0.0-canary.fda053eb8.0","@material/floating-label":"8.0.0-canary.fda053eb8.0","@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.fda053eb8.0_1597262709626_0.15491000258677934","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/notched-outline","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.760873445.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0c041b024f23b8c3a9d5900b2d2208aea053343","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.760873445.0.tgz","fileCount":34,"integrity":"sha512-879Py3PPpMq6Fxc2CVXQZyIo0G642krTGzSQ3lC+6O8s4/xDZGjaEGkhV6dBP/Tj28DUnxtheIYagwe2aS9AYg==","signatures":[{"sig":"MEYCIQDf+2t04ses2gTga2wTwwq8ThPoKJEsnFOwcn9HjBOAAAIhAKipGmOoFAiAdiahIqNJXsghQjvgyxZ+eVFGX9W/rzY9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGKtCRA9TVsSAnZWagAALEAP/Rw8z4SURdHF8eel1wbs\nZIeob1xfz4o5qeKfur0NRIKUheAfgNoioKwRDRxDQeth1uf9lt2byNzc+k5S\ngkD6xDORURH3yHHqmlbmVBj8sjkroGRrVjkQQGidaSPxUqrR0tyu4S8g0F74\n5SMBS4MMtNeD3uvaM4pfuLNBqLyi3047XSvTUFtYp4avJQfxcyerQEz1uRMo\nVVT7Jtv7DBUHodXIJ/gkJqxnNrqycKpMxyLQDV0902sLxkEiZueLzFOgbdvr\nD7QTyCdFvwJAK2g/U/slnH7rkZCkR8l5YWkIBrNfDoesYHJN49Ma9b+7K0D2\nK22LFCa9FavP9UYcnAoeWSo0URmoLKCGYF0+dMi0ChsvNvcHldONpqq5IDP9\n+6y6b8a2lJKQwMAQy9ex8J5U3+77uL0v4dbBFDVSYpV1aT0jmjGmBKxT97gI\nw7i9gErDVt4w4pcTAApWYOjWlYeR6vRmazEmF4ElnlG2k5IeIdmiaR8s/lLP\n7PZStdcd/jpHT7ShlIE9lfjfydUHCFSZ3U91Evwt2sO5jAgwgpSXENOI1/0c\nPYa0vlauZl2DK/osEOY+aXZcx6Y5nLWaXG5ze2UnXfRSssBizRA+mOIRLQO9\nR9p3HAp1opuYWUGOqG6TiQcM6ybAjJKTn1+mNueWXg7nOstvk7FyJVpC3/Wx\nRUPe\r\n=uysr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a830629b92051950e9e15bdd288ad87238b7103e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.760873445.0","@material/base":"8.0.0-canary.760873445.0","@material/shape":"8.0.0-canary.760873445.0","@material/theme":"8.0.0-canary.760873445.0","@material/floating-label":"8.0.0-canary.760873445.0","@material/feature-targeting":"8.0.0-canary.760873445.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.760873445.0_1597268652565_0.07397012307149065","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/notched-outline","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.2f4711a30.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae49a6a558f867a875449a2942c40445ebef9134","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.2f4711a30.0.tgz","fileCount":34,"integrity":"sha512-rphGqdo+0JEwfxXf/Yf+zGFcl5UHWDHFb2jogqH7mm7Z2S3elaQuQahKQsM6skBiibzZVKZhFMlFNC7npaet+Q==","signatures":[{"sig":"MEQCIDuTmMW/7mdUZ83U78ZUZC7mYyODTku7WZRfIFzTUZUkAiBY/RU1xAJu5oSeFc+sbLithXzhHcFhaZ7TXie98tWAwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGUHCRA9TVsSAnZWagAAeBAP/ji9BbvsGJ/EWu0LO5GG\nVBWeM8IOSOvdr09qHLlC/cj8spsPSmXnRl3XJCHEIyHdrOc2UJql/ORaUDVu\nVPhXWfeCq3EHHYj8QFy9yPF1EZc9phLR45g66pmmZ/3K7TvU5pIol2MeJOyM\ndEmYKYWgMxPv9N90qKjBYDe7rV4eqy0r6zs79afwsOyPIHKxfVngbyOCOwDr\ntPZzNhbJJakUOLbHZcao7wqEk/++r4HJc5s/wpMXR5fgUNKgXyvJ1IpcrX7d\n89aNgf3NBI6wNpo4PREhh3fjBjneF1Y4tWQggh9u8fAo6qTEy1BvQy7jv5fV\naI8nbDCEZ8/wENnxeAGXl+FvUVZwxlAnlthTazdzac43ROxBbR+pHfQKkP5N\nqcnMxKjiaUUP6UxyGiK6aMZuTyfMjdE+8cpJsQqtP04OhjnQcBR7pmgB9gRo\nJKq3tZgsdOd6Zuev6K5+blBO0B9powzHlsLKBBNU5oOICikETvsAZGiqZj4K\n7y7KGIHzVBSaq9yo8zRzlIg+qTyTvDQC7ZwWuQbr/e24I+yrAEdIkm3uNfB9\nq+IJpe2D5sAAn8KkllAZ5sQiEWLgC1ZcRUR5fg/VXOPX3kQWFK+Ral88puSL\nMV+Oc1lw3OV8wUzs2FNitGJsNjHHeMNp50YI1drbLk93Soh3o8lBDp7Z4oDo\nI6yb\r\n=f3ap\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1347e5c15ba848f3525dcbd08fd0b11061e94116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2f4711a30.0","@material/base":"8.0.0-canary.2f4711a30.0","@material/shape":"8.0.0-canary.2f4711a30.0","@material/theme":"8.0.0-canary.2f4711a30.0","@material/floating-label":"8.0.0-canary.2f4711a30.0","@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.2f4711a30.0_1597269254865_0.9797929564368439","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/notched-outline","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.2d72f3659.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7655854ff3412f638c07c2b518802725910e9d2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.2d72f3659.0.tgz","fileCount":34,"integrity":"sha512-qMdwKgxHzygDw3zUFFaf4ffrt/Tt9KnXy0vs0t4QvV2CiGZIUmm2k5plcIoFoerTCcLgPjRHkVGuoEpAnICZjg==","signatures":[{"sig":"MEUCIF0OQek+ADoNggUWwawjMrX47zcUbo6S9iYnBTJbvtBcAiEA+flZcsWSZzdQ8kTA8t9kSysip5/6dDUzrW6xNjkhdA0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGbICRA9TVsSAnZWagAAY4AP/j4tGR6EkNaI3MmqyedW\n+bl99zs61KoV5N3aG7USxhg/20dAYJWH+v7ok2KJageJsNV7mIlliyFbgf7n\n3GRZQhiIP3kJu+UqMaNPRPkp8gKO0vQSR2hhYI8Qx55aWgdtkijr6iI6cjXB\njiHoOV9LL0aLs0rO3FYN974Xg8ZXpQrNhRdTIOriKHVKkC5At86cBvqSaEBc\n+/EOUgOKfykZEwdi2fEcOqVXwdf1u1YLygaG7RzSx5sN0gcP35Unj0NQW56b\n4QdtsP7Gq6PGM2fHtsmWhXTl5qlxbGrkJ+0dhNFWf/0JvThn4XpiNHUEEebB\nnCcVJ5+mZPnnOU+QOcDZmF/qUx+LgzUFeUAcQ3Gnw09SU3bnVUWx9D4KPXs/\nJlMLSehOMk546ys8fNYvaQ+YbftA2MQFrLLizyafCuUEDTnQjCe6bLcvBUrC\nwnHd9eZYw9Sw2d5kcK3imWGFkDygxwyY5Ye+n9/NSpVxDRJHtSl3Al6k+Kdi\nYVBGv0uiIz/s5Z/ri9fXpWL8GWDvb7eLXLqYdoQTgGJrrsoqE3WRQbemxz6T\nmN01CyiL41NIOOxlkn6D2a5s4/keEAGlYJNtUjzMF6mulxur8m/j4CfBz+KJ\nlOLoDTKahgJQjB3e1vOg+u7Nps4x7Qt0uyG4c/7h7VzTP3XdEdkGiftCj/bf\nHu6L\r\n=uRYn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"de40c24a4d850a3bd4269dcebba821d972e01c19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2d72f3659.0","@material/base":"8.0.0-canary.2d72f3659.0","@material/shape":"8.0.0-canary.2d72f3659.0","@material/theme":"8.0.0-canary.2d72f3659.0","@material/floating-label":"8.0.0-canary.2d72f3659.0","@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.2d72f3659.0_1597269703882_0.48007875347630935","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/notched-outline","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.1fee70a5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4518b465beaa647a041390e0baa64db7479827b4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.1fee70a5e.0.tgz","fileCount":34,"integrity":"sha512-ivj7p4AID7FolOW0Dh9JrDAM+AiBISHGth9E2MI6yFxuIr2M0mMv2dhm/C269HKYvsuxLGIds2VskjEu7nl50w==","signatures":[{"sig":"MEQCICecKbTzGwlycO9ixR83HGdj+2e1x5NLukIXfx096eHnAiB+C6jdwWUWs0t0WIci/La0LTBqtvr2ZXrMZKFOW5b9mg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHtjCRA9TVsSAnZWagAAL0cP/AlQ3PkrNoGXlftL3jYG\nl0JWEt7t369oryitdXgH5tZQmNEyAT4kJ78TZ8RmvR1oK/+SFGNk9xKxqw8G\n0tV2nkAhYsOi6qUUeiekVYR/95LvwDOISdDFZ6FLRCIZPyRcYRn+Li+LVSwG\ndDrwg3liZD3eBBPUrrTTe7J4VN+L3ap+bOTRsfej2N3IP5qhVaAbpdhwIf+f\nuJPqjrWWU0pdM4aLlO2VkZdnvN6B5SLBABb602hYQJ/Jr7v2F8smUiQ09MaQ\njOnWqwRfr1hIzhY7ZTdl3STEgYRT0O8DSTDgtbgAzbtcSoLbtVRU3mDrChaE\nNnGf+9ecuxjJzpmKrWwiwlcl2FtF9Q5R6KiIiTtWY0fB+jzIPCGot1Pifk4D\noP+CMVhT0xFPzQoPoNl0RHg+kHKeSKsMeblK+GCKMCSrYkHKkkqRdKo3taEv\n1EDg3Y8o7k2eRCnp6viRuiUgjb6m8AIVq0HIjG0adqbk13ThreZ3hjxtT6gr\nwK3cbcfvY6NRePA+xr1j1qKh/6j/ZvbmGF3SIhMik2ctae7AOASEpboCKwNC\nJvVrz2wDvRZDwd8pO5lhucubRN/nkmzNbFQfpTF70iYf0pzC/xJEFFLbmmAK\nyGB9cMolgb3tHjpUF453NCCMdbT8WtZTRMPT8N+YvCRuHZyq+uRbDwF8hw9o\ni9uk\r\n=qKBQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2e5eed4b73395e9cae47d93ed6f34f0dc0467c28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.1fee70a5e.0","@material/base":"8.0.0-canary.1fee70a5e.0","@material/shape":"8.0.0-canary.1fee70a5e.0","@material/theme":"8.0.0-canary.1fee70a5e.0","@material/floating-label":"8.0.0-canary.1fee70a5e.0","@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.1fee70a5e.0_1597274978710_0.4427334405532961","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/notched-outline","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.023f3fa34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f738cde6f0ca087bc93b86021266043a27b6fd48","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.023f3fa34.0.tgz","fileCount":34,"integrity":"sha512-HGzUsWida6jYcYPoLtc0Nm8asE2EMd98nwEt/8N1dbmNgx3t+VoHP5OXa7wHOfv4KNXpI1xrcZ9JkCaHHaufPg==","signatures":[{"sig":"MEQCID/4wg3BpcQiPTL2U9XknR/I6q7MrWtO4vvWfrUyto/FAiBUj6jsDX1Qh7dKbZK5Nmq1xz8ayHJe/eMFjOScZCD45g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJOzCRA9TVsSAnZWagAAyTgP/3LE9A9HLEVZ8GgwZitH\nakwhnz/AwCgyLZhzrWYvEaazgBdJtTb5AUV8icpBLI0EFrnlauoD9DZvWeam\nz+rclVlzuuV8SOPmwt3/FXOzngO9zSQiRRfB2994ZJq6gEKwR6kpDUpZsKwL\ndA1izjxoRZRCVT8wfZt2yyK0EKfrRCk/8z86hbiXpn1x7w9P2qOfp/JwDNN8\nS04wI0tIsiYJ2WQMR7MvcDS4kawhjiLIhvvCHOpILq0p5F77IsIENa2jzUUm\nybKDVFaGp7Hkr6+XSeeuQck+yI3LNPjqf0zjD53AWw3z6pVZdOrK2zODeTuG\nTUPj0t6eavF2S5OoSqTZrPdViZ2ZHPNIytr0L6QFCifp4x+NtU5nu6GIaWf/\nCf1wOW4fr737dKzLBXgNGJW5lD1is0C//TmsfLldB7EVY8Ruln7HrCZpqx86\nAtORpZJgwbEP/z8/+A2rMPpYXFNMczMNRhDGPyyCdomBANUpf0/vNUd4rc/X\nIZrbmxGlvSNKeUlNuKzvINMh4Rj9CMZVsqu11YAxZOs31d2pmRsB3odcUuPI\nS5L2WKgoZae9RbFQaBxZTO7RNMWPwn7POemGSpXgym5SRNKQZqyesfymBxdK\nrH6s385E6fZSIomqOu2wgXPcfQq111+VQclDl6te8Jgocl6jatpClrkPRR2e\nj7P/\r\n=7oAK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1a6538d0b407fd8e7a7de8e39b4ed51bcefc560c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.023f3fa34.0","@material/base":"8.0.0-canary.023f3fa34.0","@material/shape":"8.0.0-canary.023f3fa34.0","@material/theme":"8.0.0-canary.023f3fa34.0","@material/floating-label":"8.0.0-canary.023f3fa34.0","@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.023f3fa34.0_1597281203211_0.3254062793738757","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/notched-outline","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.80f3a9e5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7df67ec509cc00f22b941a880c3c2cbef83bf91","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":34,"integrity":"sha512-hubZ4sNj6/zex1ZUF/REL1w128XFzEKKykUxCjffGPJee0vi4Cd10UK2C1REu/2Kd+D4X/w3nRrspLnkPpUVEg==","signatures":[{"sig":"MEQCIHOOFcPARJ78OEszVrpcF/6cjabCHxqnO329rZ51tGt2AiBgGa+P+Z5AQbeY52cSPAfCRpoz8j2JRrpRZ69lcu8hvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJecCRA9TVsSAnZWagAAodcQAJPOQP9XQql4ZVIKkp7t\nljSp29Z8rznmJxqVwmkGdfiCGw+VeOTHUr7jRFBlZJSynv3HJcJ/KKvD+Nbg\nGPdTIJmB0xsgZ7oVs1IRVVxzXjhrD0a/vWjBnUDphn4PaA1rbsfyXc6zdFL/\ndSZyWjcl8aKblil2OjtV+u/mFosu8ySs3NIwZXudb8Dd7VOBxDGhV7191/uy\n5Sd2VDEqwHUyhHaaXjJllIkYKsvgi6/1Z/CIhVQLNY9mDgFPk76DhPKQh1Pm\nspSFZQFG9Kp6T07JedrPdXOe2g3uIf36S3pyFmjHNFX099Q80TneIWFgz1KF\nttA4V/wKOvjaTORWqpeZFFJZ2x7vOvKUNillMOlfLAfzpdMjjzC5GXiWe4sQ\nJJ9eAf+4lpwGMaUsji1+j290PxVJ6LMWdLDGlIpaDMCqQBu2ZwHSExOeXWOK\nYdbdTUulMLNmJfuST44nETraZH1lRHgwzNSYP+Bpjg8TXzeBlkxACGKWWBaO\nWP0+mvMo37oKliZO+weFextkfnOYCpVJLWSATzjhh0FTY1Qtr1Q1JOwgqTY/\nzERtPTUqKiNSdgRqRh+PkZNEAz+m2y9EvVev5bLaebIaDv2pcq1g/kqHLSpK\n5qqut2erHJ7XozCOkhldUbon+IDCZSErpGXFcbMsN6z69r62YjuQ2smEuYQd\nEhrl\r\n=kbuO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e47018f239b51581a67186dcbea3f4167f5ea3f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.80f3a9e5d.0","@material/base":"8.0.0-canary.80f3a9e5d.0","@material/shape":"8.0.0-canary.80f3a9e5d.0","@material/theme":"8.0.0-canary.80f3a9e5d.0","@material/floating-label":"8.0.0-canary.80f3a9e5d.0","@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.80f3a9e5d.0_1597282203516_0.7161448750426096","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/notched-outline","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.a1dcfe97c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fe976afcef7d850b0544147adb930e51df01f02","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":34,"integrity":"sha512-ntZ7AiSeJdkrCC++4zmcBtPhFnSZOpWUiaFUyiDDnVOgY7Krk75L7ZT3ADLnnmiGiU2sU3pQ6yV4e+uusmSrLA==","signatures":[{"sig":"MEUCIEWcXBN+li4pv1XhyiuPRHx/hslQm/ftR5kkZkDveQpSAiEA6qnblk1vmE8tErHRV1W5irtAnuwgdbBQYaUGp+hYf/Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP8NCRA9TVsSAnZWagAAvJwQAIkYXIYseYaRYN8VCazP\nQFTqR+JnQ+I2FyVM+uLMvFX5aMU+Xmd1BR+NorlH0KVlGCzjH+oanZ1vA/v3\nCbLJzmrNfSU1G6Qnb1ftelY8i8VyzuzRcBDj/nmfQL/yix2abZf23EXyHGlu\nPbVF2d1mlWsk7LjpKybk3Jg15JrCPnlrdG38LdqLPLWjbc33n2sUw/Xpt3Z1\nJwWBNXRbUpMHh0/bR2vlOczudzoMU3enE0siyHSbV9f4c61mmfKJEAnd3gVJ\nNA3CWDbe1DEK3UEgOsljwqXSjtNVvxLSUHksP4qKP2zwhIMzX+r4ILeqlmDI\ndRoJ70T0PRQt2F9w7TBiNyOb+kh7iYI5VwRQPegv2IdERwmWQtirzkPlt+Sl\nuHBrF6xouc0DCBeKvlwbi0uiHYG3+fHGS0iAWKG312kbwLAhf6Li2qiF4W9U\nJhF4K5qyTerZrVgzMiycDHJPCFklYy6OsHQWmfGcanYGhIyNOBbB5RRViVr6\nhTj3NbhzAgB5+SKU41bZD7itBAG+WrLYl7yssOEQ+cnGC03k0qisghex6+dR\nOdV9VLqGezYEGwoP3azs4LvV6AoYjaCwosG9tzwFo/MVI2lPrbAzYaX/MSnS\n4spbSl1lnSBrdbfcSMNkbgGLUcQsAttH09X+Fm7rWSAOKKrdAXpJLWrN5mSh\nEGi8\r\n=2AxC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8ec1483dd23463f0239974be9a65ec22a6b54715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a1dcfe97c.0","@material/base":"8.0.0-canary.a1dcfe97c.0","@material/shape":"8.0.0-canary.a1dcfe97c.0","@material/theme":"8.0.0-canary.a1dcfe97c.0","@material/floating-label":"8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.a1dcfe97c.0_1597308685062_0.1293285403951474","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/notched-outline","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.af332d5be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5df255e7c45c9d3b3fc12cafe283e8d18def581f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.af332d5be.0.tgz","fileCount":34,"integrity":"sha512-XRprnbls3aNUkLo5VewYoNXx5+861q1rdHr6nwMMktQOF/OGykcoTXGxEdkVSS+sueiW81KrnwxnqBGwutT8vw==","signatures":[{"sig":"MEYCIQCMNkBn97krOvaAZ3dzXiCBHuVdn0roLc6e9yqB++4NsQIhALnNBseCDCPqAnxtBc/wDhwnX4gTMXU1S9RKDZsE1glw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa4vCRA9TVsSAnZWagAAI2MP/Ry28sDtQyhx173vV7Ux\n1Me0GzlpnZss4pBnqvbGPzNSBhdjaFf3pNp3rMp7IhacX3xPPA4HmnR5SvD2\nA8x7n8oS5bNyIqdp1tlp4Jik4OG8EL6Tl9cpBJVh6AETOrgrw9K0UbIcFmVW\nLgJpqv5tgTLWFoIHnFF3QmAe7I/ZKHrVlGr5qAIOZcFR0BtwX64oXHuO0EAu\n4KvovqscFRd8VWjoQZscnSBpXfyE612H1RtvYBZw5vvMD92m0g8irTWvbGrt\nt0nt4lZAmGLpAMkPIXkM8LzuTbZuRa8nvde7Wle1UIq/0Ff/i/JTGYvcMOXc\nUq4ca5N60HH1hyx8WhjwhcnQsJuAhIjcbXLkmrbG1bPjrdzjvGgwLZarJxBs\nt7xcV+KpxNfiqOcfA8wwTs7fGjsTF83t9zIYJnKaQ+zztmQsaZD0aeIrIjRK\n2bTdfq5Ige4WI86IKJ+ee6+vJbY/Ke7Q1vpmoxWRis5QYSTG+/QY/6ilEBTd\ndc2c2zeKcJGBblb6mDr40xpc1joiOT0l4xrg4lAizuCFzvzpYDKiCLS74pU/\nmi1Fzvmo00/VQYGFmcKxLfL8hSozLQCz1QZZW3OEqio36oSCBSAtVAME+fiN\nYDjx6AASjp4xUwulfAXFeczPCXVj9edAvJ7QMhYQknS5um+RiPUJNzcgVboQ\nu3sy\r\n=4Wyz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ecb675d071cb76738aea95a2d43ef88a134275be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.af332d5be.0","@material/base":"8.0.0-canary.af332d5be.0","@material/shape":"8.0.0-canary.af332d5be.0","@material/theme":"8.0.0-canary.af332d5be.0","@material/floating-label":"8.0.0-canary.af332d5be.0","@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.af332d5be.0_1597353518894_0.03531978174537076","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/notched-outline","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.7dd4567c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91354c028dc506639ff093957b710d8c727ae244","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.7dd4567c4.0.tgz","fileCount":34,"integrity":"sha512-BTUezX6SPh5Roqjo/cK/Ow4AkawLne/LevGIEbpMKZ/nTGdS1/GtHx1LKrdklPJVY65JMzDaYaOssNGJWGhepw==","signatures":[{"sig":"MEQCIGExYXXnRtgOMKRH5ZjmFujv8kaS6BRB+ZZFE3oEUebhAiBYzJ2gYvXKQkwjZPnsGl7CiuJYJFnpre9AvfLVYTJnow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeAzCRA9TVsSAnZWagAA+LgP/2/VIcgRK/kercYUTXSk\ny0yQeFVhUu4B6WYM3g2+5s97df/wRndJEANmAXt9KC5Skw/Ednr6OIkxVk5/\nBqCdOCGSgc5H/P2kmF84wPkpc3vp0Va20sFUfpcvRz4F5KiKCvrtrfhpbGV7\nLo+ZUicxTJrfN0ZD7EwCKXN+YM11bGpze/h4VajjBY87TdAWTsqKppFQbGA3\necWgUJ5hTfTFXN8UueQTbprZljW/nV211pyM0jqM4a9MNkSIl5xlxMBzvNQH\n/a1IAWTA14uFRl3sBVw55t3XzusLiQTQUol6mh5A1hOq2c3sJZNkeqPsrJA+\nr8CTl/hObsVmXp5BFz8LcGbtlHSZQqntaQDabll0CPWsDrgqDMDV5bSIl34h\nNq1j6NdubE1NPo6GOi15IfPAcDD3NnHxRpZfKSX/ZfQZwgRU+5FxSAJsXOz0\nlVhXBrT5vKBQ+R30Shmq4/BVbRHfBMD2O+WxosYU7vg8mUmsUncin9vlS8Xm\nyOV61oedPZTglDzPPbHUcTHIIS1RRkCVDAzjLkRFRAsABXn676CsglKXjvss\nbq9N7Ui+vZ4FEGcHcmjKw+kTmJqYf2BEBSo1gmTgokZk2XT+RISCT5YN+Lsj\nZXCg2pBvYTXbGD+E5nP9KA0WQK/Nx9Ov7yKBckSTj4zdxzGdmZv8tLw8ThGc\nYQJi\r\n=qfKu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"515ae143d426f0329f0a745e0ad35113761376e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.7dd4567c4.0","@material/base":"8.0.0-canary.7dd4567c4.0","@material/shape":"8.0.0-canary.7dd4567c4.0","@material/theme":"8.0.0-canary.7dd4567c4.0","@material/floating-label":"8.0.0-canary.7dd4567c4.0","@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.7dd4567c4.0_1597366323406_0.9714265937654167","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/notched-outline","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.ff870005a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"064e3d9ba76a9e2ba320c10f5145f78ff2d6d567","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.ff870005a.0.tgz","fileCount":34,"integrity":"sha512-XfjeAnlxv9rso6ykoZbazKr5IVNOnXpmMtzhT2bw+NmiCzC0Q3G5/VD8w9sNiMfme5pwS7qDsnbk1z5ck3jYag==","signatures":[{"sig":"MEQCIA+u/G6cRNMtkb4iZlkT/a5MkefTgQt4aOZmOqZwaSpfAiBLl3Vbm96sFGPYbx+eKMrYVFc0PR3aWSM8o/vObL5QnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeYXCRA9TVsSAnZWagAAEXEP/3u+ri9t+8WU9gPg2NCP\nJwhH5QE5nXKSiTXPXYmH0HUuxDXwaAmL0vk95QoACxqrxvKwITLp/30c3PeP\npWowkAU3w39AvF4cmSq0yCGRAsOvwZqQjQKDb71IazmCNCW84sJqbZik6Sy2\n0QHqWrCxbhy1prwmVjjjblF5loik6InQO/C7a0Uem2QzT6RXfaaRCew34f2v\nCLFAw6TiF16Ecc8Nbn4lQuSSWHhRXhEH+xS582DnOw3eIoGPlqLCBIWLY5ox\n3PvhwF7AMqud+dx/p78DNWWPic1vHCwixPHnBXTV3bKaoZxAyA3rrlBPqQJA\nEy3aTmkH9bD4XlOiyLHXqVvrEAPHBE2eHTI4wvnVkF+t5dEc+UhsqG0qvx/Q\ntwfnh81hmUmLvE2eZEpvUaI9b8zmmTTsNcpGa9ktKlGlSFlnuvXmQ3M0mstQ\ntExOO4owrktw7snM+KhU26QG8CnbpXEQ+OH8zivGx/VWG6YQqZzJp/L3xJ9W\n6PVgq4E01e51Hm7bAL7awF2g0D+0S/OnxDoqZhSyg08/s3XGyWJjqngwW4WH\n7XoH3i8ZMzd1aQiM5nzwlPfvS3iuU8OAz7pcrj0AHkXLAs9xPipOpl+BotrM\nAdpBPMaorEwaffEs0YgVTB5Ikm0DCj7TGLsRwyGsqulVHIxJ/e3FDFLxP3lK\nZF6P\r\n=bQzB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"885c1d5e1cf217db1bcb8176917a25d6c74575a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ff870005a.0","@material/base":"8.0.0-canary.ff870005a.0","@material/shape":"8.0.0-canary.ff870005a.0","@material/theme":"8.0.0-canary.ff870005a.0","@material/floating-label":"8.0.0-canary.ff870005a.0","@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.ff870005a.0_1597367830928_0.43512733518480107","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/notched-outline","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.150f427a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c01f04ce03acf12295dedbf185414c5ec106cf13","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.150f427a0.0.tgz","fileCount":34,"integrity":"sha512-CTVTigc8f+kVLl+s3ycJnYavzM25V7TzkOncrDaGrj3JU6kTtH62TRidUBEsniASmSioKuycxrfsmuyFo0IfhQ==","signatures":[{"sig":"MEUCIQCD4jegtVaORO+7LMj8za5nqR7ersOu7UgagXt401AGYwIgFhVgYouKjGiRB07/E1YsmVs9X8f1oL0GOP76Ua4oEy0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpIUCRA9TVsSAnZWagAAcrcP/ifzqTg2gdWCj+qucm3J\niIqgLcjP2gkQcZ9/CzTkI1e67lLGiLnLq8GFtYi44fimzNgrRFdWoylxnrhP\nXzrnd9vqqo4X/jB6jNAENXXSUtiVIYI1Binv/shuiR6SzmELwJQu3F0kvuCp\nte7+aKhChSAlQnx45ep5aQo3jOGCzK0JnsTJYYNZc011I1zPbENm0ztZWEst\nzCErtTHyY1UM5SwfJvO05yt4W0C7urVWP6ImP8N5flcJoCXw+t/9/FXEViHw\nkAcPZAokORryA/xRSMWOMACAYRpFZRDVBWD0VShpzQsGF6ak0eft/3fyfPyG\nQBRzoAa21ZbNMDyzCDlVWMuCIQsJa9arhbzOZ5mQd1z40oKBLyV7kleXDMYi\n3xD3c6Gljxvqh/zuWgpCw5Dxwjaf68dqRtAdm8Vj5s7nTPA216B724jwJYEi\navatuJWVry6HYfBiwMgxYUt1YvO22lVuqh559s/HL/ct5vbk4y6vToHPalkr\nM6DIQT5S5I7cgu+JfHXde+kkj2cke4E2XrwTDSpbcdH3qIcFNCs4YBJPZjjz\nI4VXIv7XML/fVOMntBlq+ny7hO4m3eCUsJUjz8VoyaM2kDYTL7+Lt9p5YYBI\nyUtFmO74C9rQLbpIHosO2NSS8vTGnTlj+mnCUnETz9TTAxeLs4X7QHcj/p5z\nk1+e\r\n=S0Nv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9250d38c39aaaa2210225133bd9fa4da3739df3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.150f427a0.0","@material/base":"8.0.0-canary.150f427a0.0","@material/shape":"8.0.0-canary.150f427a0.0","@material/theme":"8.0.0-canary.150f427a0.0","@material/floating-label":"8.0.0-canary.150f427a0.0","@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.150f427a0.0_1597411859372_0.0067251501656537815","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/notched-outline","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.bcc58290a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbdc5d9ca3e11ca866b10a289111d37d4139b45a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.bcc58290a.0.tgz","fileCount":34,"integrity":"sha512-tZeCnjY5Xyx53GlIHQ/HDTBRavfn1S1zSqxu6RCw1pry5ZnF+hu+W5LCCkv2vPrmAovs6CEj3vdkete4kU83Ew==","signatures":[{"sig":"MEQCICqW7cuonB2b2GMH+opPtuyhrB9twwhfLrbL3mSziyQyAiBzUWm0kctYBEwf7iK2CAQrd+Q0Tu/2amq4vfZo6KPR4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxzuCRA9TVsSAnZWagAAf1YP+gIMieArE5Y3iUfxSpiK\ngIpaXwg3BuFpM8FW3ltC+aFrITnohIb4xMyQ4L5PkxB5h+9xnqgOrsVA2SEZ\nxXhO7zy1TwW11Kjlwn1p5ZTMwoJFKd8q2928eBWboOQytWYR3TRcWa6i5W5u\nGn5BaUjOfG9zVK0EYjbCQI23yhK4+Efe7oaV3yJCEswl4hGMt3mX92vkh/uy\nzoCGoUbHQ5R+ZIutsi4vsNMpypvCqWoDTuJmCdAjG4o/rx68UmBoAnfbtxj8\nSehN1QaqS6kGX21C1InfpV6cS34l2/sFYZYw+U9435jvkru1gfs88GFU+omz\nzW9lJ+2KMLNtMxihWV4oOmxIFiukaLUUWl0cfnsML49gQlyEflgtGSzEkZDp\n2oSfpsvaGY9Z70F5scZexyJHkOPSeIXHka4WtW2tGEK/n94e+XUjkn6wRXmQ\nwK3L5tCMR/APu4yMuk/9mSlYNZPzFhma4sus7enLz1kCnF3RyT6kh3b76tw/\nkoPHxse2Kp/5g/iAOy12WA7bqft6b1JUFXKxHC7QIf3k5NEX9nRmzfCsyWnv\nHoyh7hiRO4iGgFrfhW2/qJO2TLdh1AlRtEzrZLKZ4yNJa0H2Iq/CT3ELs6Qb\nWMK5tNGsBtUYfifCMz8mhG7nvaYhJK5vicllMSz+M22+P+iFJtg0aohkcdFk\nakQ1\r\n=osZ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ba12c8e781c26c6169e16b167798237b5ededb54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bcc58290a.0","@material/base":"8.0.0-canary.bcc58290a.0","@material/shape":"8.0.0-canary.bcc58290a.0","@material/theme":"8.0.0-canary.bcc58290a.0","@material/floating-label":"8.0.0-canary.bcc58290a.0","@material/feature-targeting":"8.0.0-canary.bcc58290a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.bcc58290a.0_1597447405752_0.9513931304934284","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/notched-outline","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.4f55400bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdcf4f6fddafebffe059258f91343886ad93b336","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.4f55400bb.0.tgz","fileCount":34,"integrity":"sha512-6uGuOUSdvJVcnpHkcmrePuuMd0QG4HHLg/2ejYe1ofai0tbnPA9cqNjwnWBlpv6R6xMeXAdFu+l1CNfFibOZ9A==","signatures":[{"sig":"MEQCIFTG9+dav5G9c7Dxbb6UDqgfUXoxKKjPF8E3R0LGqibLAiAkMiTXwqGx/tRqmS302ZF8llCCW6QYvzLW20Wxr66qkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrK/CRA9TVsSAnZWagAANB0P/j1egQFu/cmFyy/g1kV+\nEGoCO+4GtYegYVG4nVkJfofE7xPETwZcNwNceyfXBgASlubs774rPHXXMmFK\nSYWDOma7GVEZrb/PB/hz+s12g89A2UL+5U8IevLQFAZOHsVYXwtvk8FvSjg+\niPgINMRjdgpsSQv998DB5fwaH9D1lYpyDKE6Qpg+bPx4cIdwOkSRDwVGtKw8\naTRLothCeTUv8fYHgGk2VQQxWBG7fPH3J890b+2lNiB77CLZRj1BtFNlPQ/a\nbvHKJ86tWCWcLxXaGh1OfDVKIRpnrsGxbbF1DdHTLIui7OtbLTDJPbd3XiVS\nnVAhRtXPx8vXoyXAKsYLRyPhrbGKL/sVxh6nWzflZrYZOOrjuydh9EsRgPKR\nV08sMeZsRBUuf81o5mJ+Z5+p19LAmyPAvc2HVptjDOLcL2uwafpcaLgIMM6x\nT8euJt4E+ot/PrbelcN9ioFJfQqEt5YYl/jxAD0lxmyzlvhUjCiZ4TGkPaLI\nFuRe3DyRHRIH2T2tOyX1Wt9Z5ip40IP7w8tnkIpdUC9G2yEU7eLXJ2Zna4Sq\nftUGkOALZZRo/hCCqcxfcvajCrhX2vyL5gmn5a1X6fsaOqCN6cTB2z3FfEZ9\nf4W+tVq/FyKp5NigXfKLhDjPxAJBP3MWKqQbw+V19BYcTenDKjZVZXiVfbtM\nfA1Z\r\n=yH41\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a9eebd86aa2e631b994a71291827e602b842dc36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4f55400bb.0","@material/base":"8.0.0-canary.4f55400bb.0","@material/shape":"8.0.0-canary.4f55400bb.0","@material/theme":"8.0.0-canary.4f55400bb.0","@material/floating-label":"8.0.0-canary.4f55400bb.0","@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.4f55400bb.0_1597682367056_0.5232649935804887","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/notched-outline","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.000d64815.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93a975f0b9a5d5a565053f13bc320055fa664de7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.000d64815.0.tgz","fileCount":34,"integrity":"sha512-dhBll0S0f05AZ1ukVfNIacNO8V39sz9zVTBDkpB2KhqRk2FJd/rSiELTbtBEKvQTWayDt/6sIQroB1HZzrSFEA==","signatures":[{"sig":"MEQCIG2MKzU7XnZ2+8jGHx9lPavEmbmRwxB5bs/vKPAtNTbcAiBm4sq/Jl/VNnL6IXYMBy2qQIL6kNtEXsHwWorQRxoClw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrjOCRA9TVsSAnZWagAAJNEP+wWGHJQsWGkt8trD43Eg\nk2QiQcvi5tJqiZZ5M2CzEyluY9N6IXcgSIMEAZAlPR187Cct1q/tLJfa+lxW\nbDcqLMT8Lt+HBDGFS8jUDibaGXAm7rcEYo7hdmencMxjfZLovBgEGhxn/Q8R\nZowxPhHGha9bSaIMd8c6XEcbFfYrcejgpclywsZjz7b+4O6e+QQjoWLqIVFu\nbN+GfpINq2rW2+szjrASkHyBvs0zfAHlOeGXHcmgjG0lUjvfQpfuAxOUOLT3\nEzeUXQxr88pJS/dSzRoU7P9DugAGoBfEUGNxRRyiWVcRDd7Ov1AwMxxYucOO\ndAIFjIy98FJ/hn+U3nu9VswgFHw59C/gjcTr5MN529H1ErEf9RdI4qmKbZVD\n9RJnoDt2Gn9bMQivLKSLUcUW62i23NFcAZcz2UPH5HSd15lVOUTchz8apcQn\nFDuqcDMsbz/osrxW9X49SuSmwlNOu6am40oXi/3/5wAoApyAPv8QPrPKC7/W\nbQWEb7B77cWXl38JvuxmFWlk/P3AY48FDGyiLLvIw5Z9uqfB6jO+zSym6Vbo\nzjOgM9xbqp/NCJ+xanMXP7ENXs25DhKIPMDhUqW30+O4aGo6gDMtzoAGNRjs\n0wnkSdEHlRDYJQXmgxGFeIvFP0ShWBWqQUA48SemEbmprIr/7cVsD4EWnx25\nxpqF\r\n=MPJH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c8a69943d64e6f468c2edeaf1fc6204d372a9fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.000d64815.0","@material/base":"8.0.0-canary.000d64815.0","@material/shape":"8.0.0-canary.000d64815.0","@material/theme":"8.0.0-canary.000d64815.0","@material/floating-label":"8.0.0-canary.000d64815.0","@material/feature-targeting":"8.0.0-canary.000d64815.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.000d64815.0_1597683918161_0.528585916948159","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/notched-outline","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.defa599a8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d54d1abc24325bcebb74f03365678db6fc109647","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.defa599a8.0.tgz","fileCount":34,"integrity":"sha512-GWtrqVUergWAIyW45LH9Y5RRKXiXP7PM5uCrqWHO4SAvO634OAE0j1WsZ8O7bPOUy9DcHQcDD5o6jUxXBsk7Tg==","signatures":[{"sig":"MEUCIFzZrnugGxK9e1U4yzvGq3XWsuAef1YetEr9iuJ2JTcQAiEAgk8kJ2lh/ImMoEK6NEMDmUHCyfMFFU7hycd1QjnM1dI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOul4CRA9TVsSAnZWagAAePwP/R0qa3MXuApNMeT15wSg\ngn6AK/ULC82jm6UU207ffIplGmbgAWby6YdbqB651TZC48eQaIV8FWyzxtl5\njgSqzg48AnreXeNJzaLs6H73hkEMTofvdGeTDqZ9x6B6+FdhuG4s5xolBmr0\njiIvxZq5iWMEZwFsV0G9K4vuzcob7XqQf64da7ZktDx+6uBzNW/Ti/4rbjEs\n5IzZR3anzeyneNRbItya9PLzHuBZDvy7fsforbimaRpc/g4fVCMj+i6qLLoL\nT8oVYcKizWgw4JsE+Q1CZdoSEyh1MOR2JQLKS64LFw6M2a1auv2REbq5/a/a\nWxH3hkzVf3YfQlWY9IYyLYKqf+FxVMUwi8/5Ng4GJOiHk2xP111mIt5prSWT\nmMelWYuoPdjhuU8MdFrC1ccyNZ5+uoX56oaxhlcXC9nAwFaDURRl5S3r3cVm\nWaKXuNMz9txwJFjicqJI7FNC3ecU6MfS+Ko6Hj4aJjd/+mQ6uU934r1tuhef\nmkm18Cy8o+OWSPyc8Ah9u1DFp4J7KZPDpw+LcButW9SE+6ogzfl7BNhqo6Dy\n/o4d673lJKJhmrVr9jJbtNRW4X4qrZko46YEpWQT1ZGeFcXeSaws7HkCao3q\nUE+HRAD5TunXv9zP7gm1wah76m3NP3E6Rbd6sjjx79mGLDaWN+QfU/V4KDZ8\nL4Ep\r\n=XaA7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d3ddc8cf9af988fc4a02f26feee3e4ca0184dbec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.defa599a8.0","@material/base":"8.0.0-canary.defa599a8.0","@material/shape":"8.0.0-canary.defa599a8.0","@material/theme":"8.0.0-canary.defa599a8.0","@material/floating-label":"8.0.0-canary.defa599a8.0","@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.defa599a8.0_1597696375902_0.5668359892715085","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/notched-outline","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.66b8ed7e6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb3b73924cd3654f923a84c2b80539ee6a4a2489","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":34,"integrity":"sha512-JknQt3jm9UtdR+ITX2IQFLFSOfS7/nU5CEnEwKurTUcVMvt7Zpv+9yprDcSm5crdLUM/iGCWrEMbEPsiOYhXYg==","signatures":[{"sig":"MEUCID+4CZNX5kI23RKgyx4ourB5dIlqP/lXUc5UTRWMTHpbAiEAuOKpdNlE8JOJdxKuzr6ue7BXUQBidCRGh+mt4zOmN5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPB/+CRA9TVsSAnZWagAA8nUQAJKQgZZoOa2eIbvuzt7Y\nlHQk+TYf+6FK3w0UlQAuoeBpuFa8QBAMv8iuKCKGpV3UIISuGI00EMNH95Ba\nVpm5nMwAy250sz/qoBQMexFVwE0KjPT77CpoIZK9ZWTqCLmKRr3Qy8JrChor\nURhoSw/hNSuf5WO6FLc7Udn1uFq6vcZ8k9CUwqC74RaJiE9FIpp+MhnfXFhM\nrYfVfsCiHP/HcGB3f1Fp/MOHcmUr4gpVooSGd/UAPnTp3PXv8jYX1pu9pEb4\nIDX2UT2jPMGfZ/z7qbvII1S/jklgm7zCZ+LlXVAqa/4l/3lW5gE6Ui/9flK5\nJ7f7DgMqh8vTlznfHYcCPJRT21z8TehmBDQD1rnEDhDOLB96JDBM3KIttIUL\nKNIw9EeSLRYe5nsu9lo3y8BcX5jUPs9+kuLLXPXPS/qrPAI+gGsI6Odpbxwp\nOiQJj0PYh3vKM4AhTa1OclD5ZqyrUJirwZt4Ivmc/GJK8O/c+nje20ma9pz6\nF5HYuVietx3nbXoCroNV6Pg3pmGXFepHXkfZutpo2UQmjiiNlMlPShuafujk\nU0s9+3SMzFDEqivlLsddq4I1VBvhP7Vwb3o/VUt3IwF9oI46Z6+ua9Pt7cLC\nQha1EnKbWC6jWzlKmkzxCpyPI5VeRaFYSHhEe+/3dP5hwlen/zQje4ZNrBm+\nyT5x\r\n=HLhR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c23c9dce18363cb6806c169d5a516da2a0fcf89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.66b8ed7e6.0","@material/base":"8.0.0-canary.66b8ed7e6.0","@material/shape":"8.0.0-canary.66b8ed7e6.0","@material/theme":"8.0.0-canary.66b8ed7e6.0","@material/floating-label":"8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.66b8ed7e6.0_1597775870305_0.5153651612497525","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/notched-outline","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.e2b1033df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88648bc85b6a6f396ff1f7af9576b093477a8235","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.e2b1033df.0.tgz","fileCount":34,"integrity":"sha512-hRNAXNsQd77sAdQd3PqfFN0qOObh5vO8HkIyKdVBd8GPxy2LWUPO3K1okVT3U8k87AvN80WNYFMcBV0XiwsCXA==","signatures":[{"sig":"MEUCIQDoNaNUGIAS+JVVM26nxw7xL4k032zSVo4lZGBW/n8mTgIgaUPflsSp36qkYmhlTFcoUMN7ob2azBgqbxwv+oAcJr0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXK2CRA9TVsSAnZWagAAphUP/A814Hz0AbAxK2Xwhkg2\ncvNJD/TV9RD173R6hyyhOW+v7Clv/I7s+7ckKtEXuQEtxXAzEVfjHf1RPXkr\nP9GrU+pXrMV0IdmQRP1RoEhDiCWuNmY+hYsYEpZGwB+hZ9LMTHM9jiKynz6u\ns2Khzb4+SG55sFpvLZfcPofuO10fTUE1TeCDMUBlxYu3pu5kCKyyGAAvaZ8m\nWAJAzwVYTn6zfcJBIivPeH9DeaS3y9zZRLKUCGrQMR0nORipJR6kMfD5OGjq\nB6qOnO6u9S6XhxxuB/GlDCUDLsG4Ma55/J8grY9nAaDr3FMkpco9xsFOJQJk\nliVrkGj3Hg/qwfsr2vCRfO2LVNTRmD3TRyIPlfP8Ah6dRBfsxNFhyj6U8sBy\nKkEYTFSPWFMMLx7nbUJG7KGYmUa0zw6W2F+zWVnA8/vOmIIWnM9d0cjM0Fru\nfO1Eu+vb2smsa6tpRepOv3VwgzwOvD0jMSfOxRAhe1FScF8lrv9YFf96ZCjV\nFUEzfjmb8hHk7Q/72EsRhbn+gdY0o6ivHLKKgzuPU4RcrKKgFuw4JamJ8Q0l\nnLOnsT+1WOi0XX+mvlcEsOgok98spv4xRHMtdinBhKCsuiR+7XeFrqpKooFI\n+1EfrPrg9dKc1u88yKdKyyNDQT4FTolMtdoUgKwDaXZqx/cWxkNg6NSzaqf9\nZSN4\r\n=A5Vq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"763ba6b73959bf0639ed8d0c9656a53b18e30c1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e2b1033df.0","@material/base":"8.0.0-canary.e2b1033df.0","@material/shape":"8.0.0-canary.e2b1033df.0","@material/theme":"8.0.0-canary.e2b1033df.0","@material/floating-label":"8.0.0-canary.e2b1033df.0","@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.e2b1033df.0_1597862582330_0.09788377707481777","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/notched-outline","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.2e8c3dd2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6702cdc66d4423a4196df1429cb59daf230991e3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":34,"integrity":"sha512-vL4/0/hqf854G1aI/BmKDAKseNlrWw7bztXrAjmURGcwmZTlYtvDc+JpwO/qPoAxdYCv4syczt4CwmYEsGPmdA==","signatures":[{"sig":"MEUCIQDmKFwIQnAt0hiOJr6gJYJCK9MWTr4cBu7hSVhGPpgO3QIgEZmSnNFhNmp81I184um8/9+RjT271cc0kNUlzhL1HiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXyJCRA9TVsSAnZWagAACfEQAJghrDkEjmW7SK46+6h9\nEgmFf7h/d7aSgiQGqaITw/E4SohFvaNgFXByo3LPHjUl6UsDWJiJldaO3svH\nCD4wbj9tsd0WpcVqP0KQqy+Ey8YrMqUnJA0VA3LQDtyrlmZyY7LsielBpMEq\ngqRwkrnRqVG+2FvN0U3PsswSr5tQunSTduXw+htuLBPDzdRRBnQXgiO+dINr\n5aLmVMzm9dUaAqNWZHCin1lGFppfApolPt/yCQ0Iz0PHLxa+BhQshkUlEy2y\nvZbZVgZ6vNIM2cZ8Y+4XL1pwCGG3+UK8dmxSK6xSikQnIwlzmetnckSuazRs\nfvE7mJV+2fD9ziqcYS9QHD5cFF3hxic1UDDc1f5ad8YCZpGfjLqaFgHVc6Qd\nlH1zjPocfF7/KzYnbcsde9H/kf9SE+SRecLoc1ZzYTa9PXgF/R/U1xHOcZ6x\nIuOpfFSe1TFApI2TzhKHNoDvBwx++OzKN4GSwvGb8+Krt9WsjIeaV4k/mRMn\nQ9QxczXiIeHdhKSrhlVtJ5MqleYbdngzLGuJfgbyV9HhjI3EU+fywYZJSiXv\n/e9C5aPVRH6FP0Yr6ZPGt33FTScqp/JmEz5g3CECjLqAtvTzT3yCWJ5UcYbR\nWubZFfaGrTrDZhFEUfc1fBI9GsEK1aGNuOeJ9U7do6o7VlAgQL5ZzxSbr4gI\nr8ox\r\n=kGkx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"237ca1e061b4efa53d623ea5dc9c9d670d5c9da0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2e8c3dd2e.0","@material/base":"8.0.0-canary.2e8c3dd2e.0","@material/shape":"8.0.0-canary.2e8c3dd2e.0","@material/theme":"8.0.0-canary.2e8c3dd2e.0","@material/floating-label":"8.0.0-canary.2e8c3dd2e.0","@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.2e8c3dd2e.0_1597865096405_0.3623924554645075","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/notched-outline","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.b2e80a5d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c1e4c13d92ca7c1df7b1b95fdfd4e3df3438e6e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":34,"integrity":"sha512-yXAs/1Vs4NDLaqJo17qbbBsZ+VD+hIbvmf6YJOYl4ybPaYEGBa9qk6RYGM6gAYfMDqsUuR6eUl2UGgirbaJjGw==","signatures":[{"sig":"MEUCIA8hNKEsfVPal4CD58RJDYIW88AbBGsQRjmw1xflEbFqAiEAvvZHkt2V3u7YpJk/zXn1mfiNXhWmcnz7o7MVpRxwoJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaYKCRA9TVsSAnZWagAAdu0P/jyHMAU4iR5ZPuh+rwdg\nZhmIHFGHtRO3Un4ig7ss67uAiy8zDBHCTtGAMKNvz42BGqUvS1DCV/CE0ZHz\n43cvvm1i+NU0HsG0j8QyUMja0Cp3MCh9o//Mmf7KmtY+aA9QyOWvYU8Y7hv5\n1A90i8A7MD2oF6leL2R7tWfXowl2oTPHKbMyfo5FFWKPKKWWkiQr+5TS7/r8\nEloowUyc0SifLWI78WzbdpRW2G7mZ4oLRZkcj4fyBCYvx2t5Ph0afQznIvpe\nz6HQ7kotjpof7rmdME9UZ0Jg1HvrJXPYbKZbcW1enGNwvZ1O2i56laCtQNxO\nSHQOgXKsEhrnnFyrvK9ymtYUuiIQG0InCt6++FV3heX0ygjNKvWFGNaZSNK5\nNebWVmqAKb91rshOv8Nc3qCMMgXCNXoZGnnOrvcXGM8jHwGr20zRnKq/7vLY\nUF0ZUkisaGeFGJzgtkcQp4FTPGkx5eykmrAQVADSuvSdHpOEGeoBkUS315DW\nTGfR22WL4HjQ32QK4OUyvbAJpApM4jqomVZxyGJOpIKnGZTm/cw7GKVmP7R+\nseboIqE5oyRi9WAVaBizcYCOQf/1fDeD17YqWf1xV4sSV18h9dEpU41DcZ/P\nynqNrl/x4+C/ALmYU8ZcCJ2hv+/vLW4eqxytqa16sJfImiM2/R8w7mWWF1xD\nCV2A\r\n=yjmx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"84085f6b072572fb6b09623a5f0b35bb95db6fca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b2e80a5d9.0","@material/base":"8.0.0-canary.b2e80a5d9.0","@material/shape":"8.0.0-canary.b2e80a5d9.0","@material/theme":"8.0.0-canary.b2e80a5d9.0","@material/floating-label":"8.0.0-canary.b2e80a5d9.0","@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.b2e80a5d9.0_1597875722501_0.3783542270613034","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/notched-outline","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.ff88df637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7414a945b068a85b13f46708177ac9ffd69edb9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.ff88df637.0.tgz","fileCount":34,"integrity":"sha512-5De7mp6NN6SKMuznDas2yCRSJEc6P3eU5EzQkzTJvCCJ7wQf1PLjJQZbGRXjAJZV6Wl4HaNbbNlzPrLkqNoh3A==","signatures":[{"sig":"MEUCIQC9Rz+dYi/PPT3IM1FeOA4RH4OK2cjsXS654XW8PMO5TgIgDuZgRNXCzz8KmbfQnSDuN4Ce4cevJ0rhJeJFPWaSKOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPajcCRA9TVsSAnZWagAAoWoP/3pOIHTacI1WFnS8GHCm\nSiExEERb00JPaYaZQPAPiIIMqfYbxF7k+8QfzKYQTk3Vz+QUSWlxRQygVw78\nObgwCrPrDLSGHhlwNiyNlEd4rlFOBk8LTbd4wUPnhS5Km5oMDooevCMctmBH\nqD5qFNWb4H3kgfUa0v9k7VnCqFwGg9MkJOQXn8rfHM7ongjn+01M+E2tdPFn\n9h7BCTLZ1FA0lbdQxCqgvBTzujDlYQIblaeJ0nmrX+NUZrIrPO4CQKkMKXtk\n6oOFDZIj8UQiJNOLvNT4GCwvtYtLWAae+tgvWR+ozkfmE0GHnvW9eZvj8A/m\nkTo7NXoPpito/0xo9Ylbubv9z/2WZ8+xYpFACFIiVnBEP/h5ubV/0y2AXdEk\nem7VVCf1dlAlZ+BLAmkvid6l+Pyqya2Wfl68Z8adH0DM5MlbWpG+t4Tbe5xM\nACURvA7fWfCvu8FwonPb6Ee98EnhilPpRgbkkuG0PkAQ2DiqsT/cPy+yeigz\nVr0GpjVptIgmogg91KVwG8CpI9bcZ/7czbF3goZe7DrEIwSgdPCKmRmti+jK\nhmA83yQzhJPM8aMuuvgaS40DXNVY+QxMEdS6BSVqxNtXtITDSOpO/T8wAV9v\nCZrY7l8A3lPlZ/WlCFBY8obdnjn+Es9QfEszJflM31J5eZTCZbd8gEihnTac\nrmH6\r\n=Yx1h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"36ba8daf061692c2f915513485e71707d8eae239","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ff88df637.0","@material/base":"8.0.0-canary.ff88df637.0","@material/shape":"8.0.0-canary.ff88df637.0","@material/theme":"8.0.0-canary.ff88df637.0","@material/floating-label":"8.0.0-canary.ff88df637.0","@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.ff88df637.0_1597876444147_0.7322910308599211","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/notched-outline","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.32fb314cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c32d9c062dd3dd2b0ac76e034e603956d4988431","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.32fb314cd.0.tgz","fileCount":34,"integrity":"sha512-G3yzvY9zRWcpjVkhgz6tjb/VdzAs/h8Li90RtC72YpzLKzZOGMYOn0Q0QTeAqtpmDijqb6kKAux/FQqbyieUDw==","signatures":[{"sig":"MEUCIQC8dAg3yZXbC+jbXc3MpbCT+puOcv2WSywJAsb0jPuvXgIgFJ9XZzBKLLtQEJKQd7zy/XcPNFZJB65mV3u7WlsQG78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlKxCRA9TVsSAnZWagAAjAoQAIbJS2WCbzAdKv6WVivb\ncXPVUcdmpayHgHnMuNwEvgHgnldRoaMkev7Qdddpu0zvT+br3WTsmupZUdL+\nkzuagdmfg42uyiMrYrA1579E9ZteTjP44LvRI0FiNRlhLdY0A8NM2kbRnK7e\nr8yXq761kbBxWnaGZipgMQaajHhRSyhjkeCRmSX+VXkcBA27crYYtAyF+VY3\n3IKs3mZwu8KqAKe5SM8W8fce/18I0e5eXxPGTMx/muIY6I9MpZFcCjx8620+\nolU97wkZDkQeKMvCrvKgxVSV3I6fR4pGJR94/0SKN8EC2Ocz9AmERH5ra7Kq\nyLovyxO0nIfMqojKV9/iT+FQrQbna/Mbt+gmxW1fyYtsKNS53Rgqfp5hSIAy\no7oUGtONeamxwJ1xjamPJ1NTyoju4Ece2MZ2o+mXuKb1ZJUGoyOy+v9c6oa0\nLf4kanDj/GegPFryXm6jWKutceijxyBYDoOo2dwVP0JP3uzse+Khwo9XGlEI\nLQ914vARkKY3mypbQypNhzNztIEyuy91MB2amZ+yXe3T8MQkkyhP4L0MIh1t\necNeQx3+Ak9NbZkFCA/J/wCceuhsACxv8h4P5AoI36wDjeGBNaLYC3YNmv+b\nXSYe7VtXiCwfpafYjEktpPI6rB0FACfrV8J/bBygntWdAw8QV2uKFC4QzlWl\nTpqZ\r\n=r5k3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"61108ecdbe311b101b1b87763e8f3283dbb9dd50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.32fb314cd.0","@material/base":"8.0.0-canary.32fb314cd.0","@material/shape":"8.0.0-canary.32fb314cd.0","@material/theme":"8.0.0-canary.32fb314cd.0","@material/floating-label":"8.0.0-canary.32fb314cd.0","@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.32fb314cd.0_1597919920547_0.9233645807773487","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/notched-outline","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.546277d32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4fbc65975d2a71006537a58cd0127de0fec2748","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.546277d32.0.tgz","fileCount":34,"integrity":"sha512-kGje5Z5IQ5qP4xPVYqwQRsj4bpbqq86jqoosP/9nt9FHmTuHZdgQ6mqpyuzhCijW5Amdfoa/29yJ/yd6WpGY9w==","signatures":[{"sig":"MEUCIQDX9r5hGxmT5iRgGHgppCXMkLXZIPWKp16FKFVA3veFcQIgB2s72IXP4dJQcHAed4Z8uCwr8HWsY/r80PEBznTqIew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqiPCRA9TVsSAnZWagAAZ/wP/0yaIK3d/1u+0m2QNfMM\nH1VHUwrIpGqm33NCrfajzJFLQ9dSjStUFkzIyvjYPNeSGZIgvHMlHdqj8jmE\nUKGQZ/fWp9F5QRBrfzy/A7AgH9DyMDt443MaSyP40hf9kssJjN2XKeFbMnTC\nVybTWHyPwe1cThT3pPG3MLWbJVuIrqdqIrWwLK3+9pf0E7MUQJiLsahSisz3\nUyMFqkwWRJA5+fVzNdQdZI4dGXsSusenQUbsRac7QekLTzVyNusdAJWMQ+7B\nrQnSRUQbiXQct5iomk8Ujz12qYXkSGCDyU4394oRCfhrfnx7z/yhBXakOzzk\nzngUCRFtksGO9e+c08vAsqJ/TVhgalEPwpisqfWJ02Bmi+ovKmfG9geyM0Y6\nXqRkV3ZVUPAvZqRKfhgaYpQluweakU9W77LyeZJOcZqT0Yc9/Fx8w1igQbr0\nC3hp3jUIf6sOGxh2QYRJgqOBr7OVV6NS5PYGIRElSKtAh/8byUktjXxImv/d\nCq9l6ebk27HxM40o++dGrXaWwWkZk9lBWzEdKQxpw4LIvXxeR19YLAZpsSVo\nRzHQrIH32xgWthBKlE2KK5cfxe0NkqppZW6E02u05fEeW9HL+LlBqNu5ZQFi\npriczdMGRdV4B6MY3Gk49Ui0iXLiMwuHoO5EXu2ckte6xKs61yqRNHlBXFOa\n1c41\r\n=19XZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1d97622107fec59bf3261ad4f1f3bbe21fb1ff62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.546277d32.0","@material/base":"8.0.0-canary.546277d32.0","@material/shape":"8.0.0-canary.546277d32.0","@material/theme":"8.0.0-canary.546277d32.0","@material/floating-label":"8.0.0-canary.546277d32.0","@material/feature-targeting":"8.0.0-canary.546277d32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.546277d32.0_1597941903000_0.39890052676546905","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/notched-outline","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.da72839f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"754e91c81bab7a15d7e1612b1553163bfae08171","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.da72839f4.0.tgz","fileCount":34,"integrity":"sha512-xta11Ne3rPB6Xgwn9lS/CtkcJERSJdcJmzyyE0pFv/S02aLg47PiVXj7zxJr3/0EGeMOkKlhgrokyPLCl4xzFg==","signatures":[{"sig":"MEYCIQC4BFDIURnDpqycj24XqMFbFuK8pTaTWFgtpGQjx5XIkAIhAI+cBKynNwUARnW70K3Kfqb5ooZ4mWgVsz11H1KBrecD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPrpgCRA9TVsSAnZWagAALn0P/2xT8RbA91ZAsjEOb9Ki\n2CZTBabB//hyLdBYHb+ALo5dMlXZR4MYH0KIKXAfXQ7eQ/x3fdplE0A9CduZ\nLIaPsFFpvYTcwQnFcUPjmGzMsRtFiAsXhC/pIPZ37CwfnQ7S/hSIsey+/TtO\n+puQqEDs+oI4P0viUozaLJE9O44J/KGGSKZW0KyDU5wkGPmUDindU0xnmjl1\n3LLcsQUvhSRzZBR9TOhOV3AAzowgzRsRACa6ELQheRzlRGbcCw5m/amZ6uOI\n01Xerl/dVJcnTDAvgByWL/dHk7xVOF3UOi/DqvcpieFhgidAJUa96+NJOQn5\nYez9thkzEzPTF0nwM6p4R1sio02luEFA7wvGSE5Akst3ZAkFeaJ52NIXyqY6\ncVq56yFQ/k3Sk0C74pcZy/6XhWY1qlwBIw7C6y0MgHcxhTaCsWR20q6SY+P+\nsEGLOZWijbATsBPzBVaBQ56OwxVj0V/hJKT0n4CCXQusTUTRWBJzDHS+P/Nm\ndbAiObYYtn7+fmf6BlNivSzZjCSMYJDlEeEM3jnSb2XcciUzOByf04hY54a+\niug3IUAScPyNe7lQHgYC/p4mwSAyoLl3/47eDXHEl3aM1dZqM+ib56JJ+CvH\nxLi32Pqh4Wpm4bCkKhJSA40hSMW4Rwl3JPoWSc4hFnynGR0xbJWEJKa40wod\nYCyA\r\n=kd61\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1b42b69de51cf24aa95c09d0e08ae1e644c71335","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.da72839f4.0","@material/base":"8.0.0-canary.da72839f4.0","@material/shape":"8.0.0-canary.da72839f4.0","@material/theme":"8.0.0-canary.da72839f4.0","@material/floating-label":"8.0.0-canary.da72839f4.0","@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.da72839f4.0_1597946463737_0.4617228535895419","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/notched-outline","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.346069ccb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e803351df3ffdda107232bcd48a5339d7dbcc56b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.346069ccb.0.tgz","fileCount":34,"integrity":"sha512-KbZ+0QL7kQg4TCqTCPMjnSDzTrMxclpTBq0QELjcURjLbhsMEUdKrC142AcAg3X2j1K8JOqGscr4/YcqsuNe6Q==","signatures":[{"sig":"MEQCIFC8zFsdC7PYwv2y05JPEZTROlRr4c+Rh9dYWDWpuVdxAiBwA4SgoSwKyNVpSkIApqYoVXjBg9aSnn4jWLuQ9jq5hQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr6yCRA9TVsSAnZWagAA+5UQAIUjr0qcCifjX2Sb7B6f\ng672az8ggArIMjSNITTx5fal8wkwPU/86/5rBqJwlW8SWK9F4mmj1aMDX0jb\nC20cieUAMs+oFXRxZYxtMs2dZSpbtQBFA9yaqdXUC5X1wvpEhCVYTOG+zo5a\nVHKTMWllIbmcwXrnofHnyNsSPbYTTAhkeCMvBYPrpKbhKi2k2Lpc/xtSvN7V\nNYGvfj40k6RFuu+B77z0BIykR19zIPBqoP6RqYvHS+MdkWMZQKsTFD0DGBBI\nIljfDjJ0Ifv3437QEsx4gSNHSVXVjSl2EcpzhPoK3YMGgRrN2o4RP0O+bS/E\nyo3JRKwA4uY4/ZnwuEMviyAYlZKxdMKQrtJ8M2Xu61QkdTZ8Q+fZ9L0QsHE9\nD4s3mZCMunx1ajrT8ohhP2wifiYjL7Hi4N7xdkqRSAX4PAW1MUG+cWt3fmp8\nqc30LXTapsfF2Jm202U1oORt6dx7Etn/WpGPNZfZLhDS9R8fzRQkQ4wZbg3C\n0sjZzRwYx8algZezcIKTgYs5C9FE0vTNxUcL6DBJsY4APN4dh24xGgFw8Bdx\nNG2rxrTUOVvQmhrnwyTBl7xu2Qsw+WbCYnrxnG6FnFdRdVO4hYXeKE1IEVqK\nLMAJ9pzGMVVhqmAEeIRi4nREgJ8l1DZiUddax+hXX3rZ1vojUyfObCHlFbd+\ngMB4\r\n=AUOf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cf298389e23ace16c7e4682ded1e492e489011be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.346069ccb.0","@material/base":"8.0.0-canary.346069ccb.0","@material/shape":"8.0.0-canary.346069ccb.0","@material/theme":"8.0.0-canary.346069ccb.0","@material/floating-label":"8.0.0-canary.346069ccb.0","@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.346069ccb.0_1597947570067_0.8997679068284563","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/notched-outline","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.e27c5802f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc68163bde88f03a94c4fb810b31a1cf470f8753","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.e27c5802f.0.tgz","fileCount":34,"integrity":"sha512-tcErZ8gVIlm3YfZjUNKV8Ck1wG/QDCDfp65YcURpTxzreDAz2qX13PclFW9lEfDdHvrHbjRPP7V9oPaqNyfixA==","signatures":[{"sig":"MEUCIFoQjhaOrYLNZc1ztUflSkEruMq1zX5rWfmjw168MQOBAiEA5TIa/v+md29WBlMuWFUSb9FwozyQZ5Lz6R1F/Uguxwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsv6CRA9TVsSAnZWagAAxRAP/j0eceIRCCA8mJ0/Rdb1\nicANhWhNSlwGaQYpOX+7IzdRYV5QU+vs/iotR6cMn57w7gmoHz0PdxrsSHUf\nVf1xtV5zcNqCgQohsIjcEePpcVjfNx7AggMtTZ6iQwXANP/hcwke+kKL1Sjh\nHTEeo2NjblkBY3+i1fWM4qwsLvakAovp7c2ClNmGCVMsoOQOC+wqnYwxdYVC\nA/Z4WO7Gvb91vp7RhgA/Vl5Io4NsJTpbtgoHVp9oczj1vIG0ulb3roEBBV/d\nVrKC/ACPLv64ONsjj/BViDaTBJ49wJ7TII8pTQqSB5P3ddwui1eScB0kjMz0\n9+lZ4W2UH4ASgWBBPMi0sMY4moNLtRlU8wJU1LhLPGp+NEijmqlcygB5PWAz\nt9Qh/ECsFdpI+Bo7Lm2YpMJ1qohFky12EOsCYp8pXkS3ySa+vt5/SOpAIipD\nsEiEVez3Eu++SzRPzogsyOT7QwaFqQ5NG/XWZMXa+SKbG4OrLzochpzS/fwe\n05LaTXbnp5OoAZgo4Yl0DPwwYroZNYYCtWx3u4q3YjkVLSOSQkBt0i/8r3hs\naPQyZU/+eD+MO9UYZh42GNA253bKEFTzyTQVv3I1awcsaGNtVM3xoyVTQfo2\nwAEGMNSuwH7wcLoWIJ4vqtFuLE6PiTGYdTQIh1eHfEO2p9/PUFeE8vGSSkD2\nxdtY\r\n=24Ra\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2c9246ec446246e8fcad54982848f7cd5839f69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e27c5802f.0","@material/base":"8.0.0-canary.e27c5802f.0","@material/shape":"8.0.0-canary.e27c5802f.0","@material/theme":"8.0.0-canary.e27c5802f.0","@material/floating-label":"8.0.0-canary.e27c5802f.0","@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.e27c5802f.0_1597950970118_0.7909791644125586","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/notched-outline","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.f4532b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c620ef2f8a55d080c8ebb4f2655bbdb52c10afb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.f4532b9c8.0.tgz","fileCount":34,"integrity":"sha512-kI1aA8JrGmMf3FDrl6XJAkddm0kcJ2aXuT0OccW8HTCZ3M6L0eKIixf5VWxNP51eN+W0Y2uLx49/BK/+Y9UsQw==","signatures":[{"sig":"MEUCIGu4BeAmP1fxOX0UkDchCqJwLNbmYvRWpgMeVtY+dtYLAiEAuJCBihDXLv2YqGIBbQ03SpLCZD8AASdw0FyoONSTiGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtXwCRA9TVsSAnZWagAA7cMP/jUNCRejby1he2aVp9OF\nOXxHDEpqDexbxDu/VkqvfZYz23fT0iqXLbHlu6Tgn1/uljHdTaDUZy2evnlw\n/6pEJ8nJhs9d3b80Ml+WMy+/vYrZKvbk+UJBz3joJ0z7OcPBxLs4defUog1v\ndaYt2s2Xz8ilfvXvjWr4shqXFTv+haoftTtcYzECqC6YiAiy2oOQ/UW6BZY4\nMLlAZoDoYtxpiFLMcsXBVHhykamBVemaMCCqUPeSKfS+TElcfQd1ePQcnk2h\n1rMWt09XLxWBiaa9mOeSLaZCrtJSUMCJec4MovVtxDe7ne63WnOADr/st6qD\nvtIbETaM8HqnQww1BIccZjYbozwTheBt5Ra7BPNV8rjz27bb2Yk2sEhiw4gT\njUSbJBmX8MQ7Q0PvC4ydyXq3fJu+OPQIsvHkkX4m9WbRZLivZRFhjNRe8dVg\ncj7WHNsrEtt5/VQ9VcF7mTxRPKeKjmWsDHBjRYVft+ZUZRD1vZueXuGLGDUI\ndSDy1ag6vgIIWpvoATPGfQWOvVAz/hcUtkKPbSKU0/oCMKbPcVJeSlIW1vkZ\n9ny3A7MD8hA9q/65MtCTms1YE0GPiFAmDD9M8U/oPnhLw6NeIYJznGlfJx4Y\n/twq5A4OFDho3c9o7eR+RbC4O3o6Rov1AaCa124197YKFe5a1bf44DVkm8BU\nnyWC\r\n=9sIK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"be56493a06963f21f1f5343fc6db3accdc74216d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f4532b9c8.0","@material/base":"8.0.0-canary.f4532b9c8.0","@material/shape":"8.0.0-canary.f4532b9c8.0","@material/theme":"8.0.0-canary.f4532b9c8.0","@material/floating-label":"8.0.0-canary.f4532b9c8.0","@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.f4532b9c8.0_1597953519800_0.6951335435443706","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/notched-outline","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.fbf73c2a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e60507e9d982f8fa24c95b50ed954c688106ffa0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":34,"integrity":"sha512-KqMLi3ic6Fr+IxGWDz4ttUV9IW5oh+L0oDSeYqQeQFHeIfIHvlTSQJTx7S5DcfNnj7gPd6lJSU4fb9rj5EwoRg==","signatures":[{"sig":"MEQCIFqAkt+i0oOQvSN8bNJAaS0G0tgj6KJfB/ytxwvJgypGAiBE2gd/giZxMGa1Ncdz7uTqFSrVuGriFjT0r3URL/g3vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuYQCRA9TVsSAnZWagAA8KwP/3g+DqiZMJsqDBFCdseR\n8dbak6W72wmUgDVLt4yOHZLCFLLfe5jCMmqmnkVfwlf3yJF9c6LO6hTgqni/\nkcq9fofdjB6qnbegjkqncHO/fijoPVbhe7zTmFhjh2QoDLXnKMZRtbaAR/ET\nS/2BAupyszxVQ9KnPpstoGa3RoXiMfq2lvXSo7tnEMxL2ISZUy1aj98QP9WG\nhF5IP2c4sugfYyElktvAu1VZ7LN3y6wTU8J1FzCUW/f/GTZJqqkJHRkKDRO7\n8wlTDQUvNpyk8KBmv9DbQiClFGgIra3oUE4HAGMs88jvf+e4BjKu50tiy0vk\nhOPrZNuKsKfqpdN4sbCJXszrTsojbU8/Edq6Hk4MaXdyX2uyqkJKKjH7Sj2c\nqhlWNaXQ4OAZH/pGBkqVQ6Yz7ixMYSI0+8tk0vFXSaHphNy71Wlcwr6AHUvu\n9zCoJD+8M7kq/8APAqn9HnzVN1eoRaXfFx3T9VNiKcQmzc4qQ36BoFgIC/jG\n2Hem39rjLClXa8SxHgoTZ/tzvHdCKwSaIsa5rSBTbN7O7Edae89EU5pjwzKK\nM1xRrHbJGrSWvg/y1t/CSmiWPao3Hhj15+NkrU3tqGocm0r46l6OdKUgHvG+\nowLiZjVCbDsKEIxLVmnRie6+spOGB1OMDqOXlXchlPl5nlMLbf2II426tt4a\nzqyx\r\n=vgZo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"64db59647b6d726098d0871993ac5c563d92be26","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fbf73c2a6.0","@material/base":"8.0.0-canary.fbf73c2a6.0","@material/shape":"8.0.0-canary.fbf73c2a6.0","@material/theme":"8.0.0-canary.fbf73c2a6.0","@material/floating-label":"8.0.0-canary.fbf73c2a6.0","@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.fbf73c2a6.0_1597957648335_0.3794569455361603","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/notched-outline","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.cf800124f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0739f7fde718db3fe095033e13427e8cd1f3b94","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.cf800124f.0.tgz","fileCount":34,"integrity":"sha512-MDmieqGjrbcA1W/Qf4jZslHMUrPIsls8QFuTWJwzLnGX0YJCsgE7xHRsnwAUCkZShB0C6w+CYV/dQDfpOZSGlQ==","signatures":[{"sig":"MEYCIQD2afFSvNygGCRMzMFyM++yKxWkVHOK+YhQdDEa9xw9EwIhALFs917UmHnyJg3WdYqD9zqk+EOjhPpYdxzl0VYNMsvs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvDqCRA9TVsSAnZWagAA730P/1cg6VcInqggxkSkC0Gz\n/BX3sgyLitH45b1kFs790gyHSjQ54BmcbNu5im4eK40ZTncwgxvXBVoVAsyR\ndwF4y9j67flLmriOwXy3VX0pJpiyKhnrdcxxT/pz9+GSJ8ZZBEfLWTRwwLnD\nr9SSSUjgUvIwRjcYMR6ezZ43t6mx9XmMGC+6LyMbxp00tV5KEr559EdmPuye\nGPHUPChx4c2r1c+lq9ZieBq9a41lWXQk/teQ/4/r+Q8Uux4rcWTDrF/lPwju\nFfKwSqJkHvCkSTL80bDRg5b9ltPJGTJACPE3yxg7Uv8JuPn7PYbaVwgmNc0W\nnQU3dtY4+KQBU78HL0FsIfqlTYGa9etwWUmSuypI0S6hdFLGzzNMFQrnvGMK\ns+rcXNiwXsldN39uxc1ZfQnY5Y1Vl0PpN4yuNsrK0qhGGhZ3qHK4qK7mJ0Kn\nbKEx6R/WsYXlDFKynS5jZUb1EyWz5zHz9qkPr/UdGeZGneJf5bCHJRJzDq4t\ng8B/BmZV6LUJRcKm6teMIRTcF8RYF68zU7LVowEKHBYJPOMA8WWtgl2zoNC2\n6/z7B88bAtknkJ7oaOd5DXFDQKU9Io4o49+FF5DYSaZMOpKDywLR9CUjLJff\ni5tEQfgvL1vNW9eF3k4r26vAOi0bch7Gj6jSWTwTi+d65iPSvYu1fWISdRQG\nzgRj\r\n=tvsp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b15bab8ce97a47831c29a3b0acf1c34e0533b8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.cf800124f.0","@material/base":"8.0.0-canary.cf800124f.0","@material/shape":"8.0.0-canary.cf800124f.0","@material/theme":"8.0.0-canary.cf800124f.0","@material/floating-label":"8.0.0-canary.cf800124f.0","@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.cf800124f.0_1597960425837_0.8846660557737469","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/notched-outline","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.95e4eeea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce517c9c1b7807b72810c9b3bbdfe4b89068b3d4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.95e4eeea7.0.tgz","fileCount":34,"integrity":"sha512-nyvylZKxciUDpwzpLPN/E1rZm17Ff76habB6ozswYoEcWL1bczU9pP1IkDNomB+uShrKT6kWQk11WEVN8URF7g==","signatures":[{"sig":"MEQCIGpp+2xJBj8ni8cfBWn7yQ9DMcZ78W8LstmtfT6DZ/r/AiA1ru4jF5fJ4QtY2mOUFFas93PGvOshW8hb/s612ebDaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwdtCRA9TVsSAnZWagAA5MkP/iBAbtpI9r67vQV00Iz/\ns86KYwsC6/wkdU/C9crN9q7Vsrbp37/J+EO8xe/vyFWKddYhA7XcfE3Tcdst\nf8/WdfEfYrxhkn53zUnkBvmov7D1XqgTHTq9JkfIl2xG+KVx/Fo6RrHoMHHS\n79n4vTY61ko9tbIe4vvZAReaEmn0VFAMU31DihtNTRk94tqp42r3Qi7TfnKv\ni4cWMFTEgsHKqK2mZYeW57AF4+kXAXngySv/3I8wYBfE4RC/PZbkQnit8xsl\nKsiSJEuxmLAro314dz4+hU320dkYWnGmQNNUgu/56288o3vZBeBchjZSBlHo\ntxUMDuW45R21rme/VQB2q3qCvN9HdIQiAkv/Hdi6yxn7dblFRvJyr2stdQV0\nz19zVPQL0HY74zo1da1kspdCkUb6PVOfIPwrr9CXOrZTSr76S8oTk+3V4wSN\npoeUi3hzzeMwgDK+Y8RDKKmikDRvS1eG82jPFR5RBfp/afw1+shahOjGyI3T\nKUj5sYw4igRFIr62cxOOlOryeV2lOKIJcn2cPapb2N0RIxg0KgXCfvTjuN9Z\n54NYRfCDGVl/lpJXJHVyeLV1wDoEnQ/baY4FrHySZAtoBFCSJ6kp5YjPpkz7\npKvXaZ2ZPoVegCU7hZrz9i5LdwoEZ2ZLbDVy5ISTMvSsUN+EH5fOJVn6BR4K\nKeFr\r\n=D7aW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"be1ca8dd4a02de91f796aff6f2a9fa745f02df13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.95e4eeea7.0","@material/base":"8.0.0-canary.95e4eeea7.0","@material/shape":"8.0.0-canary.95e4eeea7.0","@material/theme":"8.0.0-canary.95e4eeea7.0","@material/floating-label":"8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.95e4eeea7.0_1597966188835_0.24276390191724095","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/notched-outline","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.91ab1c62a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a0d958aa48d8f3c5378973d309cdc2fc4b031f0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.91ab1c62a.0.tgz","fileCount":34,"integrity":"sha512-ij9WkAJcTeJgetSfoJZ/i8+wWjPGRsY2Kc06QYI46rj+YJpvipxiHMgfbQVbba0IoMTYhTwRLaz2fDHbFpgdkg==","signatures":[{"sig":"MEYCIQCumbOEpBYOxy1ecWhmmLTwPL4a1qhCFpZ1+EF/ZEUY+gIhAJV2s4j7a9eofXPlqBX/h/hcqEUFS9HNzDj9T+LBfg0/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+RuCRA9TVsSAnZWagAAhKwQAJC1mIHqXNzYscbnmNdu\nUa467L65s9ztcto/EJ7Q1le5XjHCKo5iBo1GNESn5miw0yat1SCyfpMjIF00\nc8nHFFCeJIn/Ml9s+SAY4FCEysgy85QPqvCDiXqgCnq1I9D2421p3ZZeBRFM\n/BvvENqXTYUD2aHUFXGFwSNB85aD5qS/fbB4PX2LzFtooH2gceaxrI8O9Z+P\n2OWHB67gbWKxqO13KEIgoFcQF6kjZy3jt7PQgO2QJuuZDnFTLZSyZ0omIj8C\npm4/38Va2WrOO+ZFqvX99m38MVH3eRCMaLy+kP+gJMqLu/OHNpxw+jESlKy4\nP76g9tgdNyz17epUTY7wdzB5bJCeVXzx3s0p7EizQQThEfkdU8SIBP6dbeq+\nIl0W41dyqWIqdGMTwyeQ60Q2DJ9q8WqdUDO4alUSWklmq1v80pBagvrihE03\n4mq3vNxORQWcMzFYB4N/D0R/5UowaJ0M1aSW1bG16EfV4zStHsVnS7xvRvJe\nDaxxzhY3aB41/30qE5biddnDS8jpiPQnaHQgYgvfA+2vOEgAg0QMJF2CFElO\nLM+v7+9YBbgyRHwalX7TxHr9ApOCUInGP5hFl2G1kIGzJC0jkxuymlh0KTfZ\naGkQuFkHC9bya2KxQZU3JB/UNpf5Aorlx+Vgw5fl+o/BoPZWO2qgdOrZn2QB\nlV3v\r\n=COHX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"389b1e8f2b60ae90730087557ec80e133f0e0129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.91ab1c62a.0","@material/base":"8.0.0-canary.91ab1c62a.0","@material/shape":"8.0.0-canary.91ab1c62a.0","@material/theme":"8.0.0-canary.91ab1c62a.0","@material/floating-label":"8.0.0-canary.91ab1c62a.0","@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.91ab1c62a.0_1598022766399_0.6571090954985037","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/notched-outline","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.58eaa9f02.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39d129a7c033a8f5fa1eb38bc18bcfcbe897874f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.58eaa9f02.0.tgz","fileCount":34,"integrity":"sha512-OwkXH3hOjzOTXORhQInAvit8VInZa6i8dBaLbFJGKkiIDn59x51/M54bz+22PJCIOfNTcs7/Dh6dHSPOpe/7vQ==","signatures":[{"sig":"MEUCIFp/xIHEZvIW1l/D76LCbRUJvnFilfhxbUZmdGqXhLb1AiEA6d9vJgTwLeBtIVJ98bV4I7hVuc5jV7ix/VQmBswRrzc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCgTCRA9TVsSAnZWagAAxSAP/Am+xqO5EZI7gtwsEIMA\n2eKg1p2Z2PvqlV8XxagGbSrGZCWwkcd/j1rT7jzfAHYflbQrHRbYyn4Q/sTx\nCw2IYaW9zpRalXZwMm8MaSD9gJfn/yDTU1H8NDLbobjTgf45vOWA3rfflens\nvNpZw5fmS32WDnYK8O8H6gWpkHirwHHlxluPraxK8wy8JVwD66I+WeseHbZ9\n0HE64HDe33/xxzzCKghuIUuoJuiKDNNpT9YPQ5wKXOPNqAsDtU/JcpOSp5dE\nqpdj8EZfbOBd7ZxCXlXVEfOL6PblQ1G/UjEz5Os2Kp8KTIW6++I1870rxtyh\ntqRoc6hmAC4qk9z6t82wi/bAiglJMEgxvPwt5Ag6No+ilXDTE3uBwe3Nv5SJ\nH7v8+9DK7z4k55zhYzwzk7hoC2pQ4rKVbCRmnUwPKvKZktPJnjOaK74+Bos8\nqgXYtp8fIsdhsPvQryuHfz7pKRKWBRBlOMR7zSxITL2ueGYuT7hjQUIdxQxm\nOS3V3kdvRoSUPE8J2JYtU3zLuj8idzjwuRmdAI+EiulyGEpE5/mXAF2O1LMV\nw54/EPSfeHnmHOyY3bYhog2kNTjpYZ5qGo4OkzrfjQ0nIroCO4m4rrk/fUeM\naHsu0BmXTwZZWQWM4DXXVVPdDCDEWp/rG8wyFl7cySp2q4icC5NHuwAr9cqG\netHG\r\n=AEic\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9f3944d638392fa39379eeb30bd7348c9578f67b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.58eaa9f02.0","@material/base":"8.0.0-canary.58eaa9f02.0","@material/shape":"8.0.0-canary.58eaa9f02.0","@material/theme":"8.0.0-canary.58eaa9f02.0","@material/floating-label":"8.0.0-canary.58eaa9f02.0","@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.58eaa9f02.0_1598040083350_0.6820619065873688","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/notched-outline","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.238216fc4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d04f1cd8c4b79542dc4d1f4f074e7f5b08167bf7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.238216fc4.0.tgz","fileCount":34,"integrity":"sha512-hYhNQ6TR2jcJ1ggxYKPY37EtQNLl43h9c5WPCpn18+3W6HaF2LCrKpSj0nbXSNohVYDkk6K9HwLh4XzPx1mQRA==","signatures":[{"sig":"MEQCIHp0HT1M+VVAytn0CRuRjsY2nglwI0HtNQSFO8I+7qqHAiBf9yA1GkNJYvxt2t5Qlx0PWoMAnDW//pDMY0wKulihbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ9+/CRA9TVsSAnZWagAA8qUP/0yQ0ypX+Meu/9/RXW8y\nB1oxwAf8T6OiX5rPV9RHhkwmdtYFxVvayea8uCainUTOwjslMMRMUL8hDSah\n96L91sJ0h7n0dBkXHrzmoscw1bupTUbmcmj0tXTvUS8Vlng0vxmJSsfCaFcG\nT5npjKejpDvNBs6UunDVSClEHUJ8/5uE8wuNy39wmiwElbc75FXdLMGNturp\nzzQl99PJ2mjb5aEP+WDvuKeyX9hNx5biG26s+h4+sJPKGVQG4iYaQnWoelgk\nBdnLXuUBwbhGpVeLWYQ5t8Kt3d/rDaDGmNL9woGtdnLu1JoMPoU//QZIIoPT\n33STxY6/smIAuSTVMvbf+lh8C2pBtfGSzDzfW8PirlsbcwEpd5nfxujRhP7b\nfSCsquG312qGEBMZDyBMRYrTx44CkGEkZq14oixPh1WfagkcpXDp5pMUqneo\nUuhkzNwJ3aij3PAg8/pgL47PpUDzP3KCpGe7AM6IbdccYI2tqaJBnALQbO32\n5V0DZqKKmfimH605NkI456F7MxMaAZGuPPyLKnMCHQ3Dh2TQ88PmUUpK9A5v\nNxv3Ibg3turexVRlz+EGgcY1VUuqydV8B9ENKqCTdhM8Kd2Inql/mErfaHxq\nvbZUlaKtkgXAz5P+xtFvzzI8PlGRVSqxvkHcFUVkTFd3K/DCWolD2XYXJUdW\nXPQ/\r\n=pumB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e224b287e176f866661b15e2ee791e17fcc44aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.238216fc4.0","@material/base":"8.0.0-canary.238216fc4.0","@material/shape":"8.0.0-canary.238216fc4.0","@material/theme":"8.0.0-canary.238216fc4.0","@material/floating-label":"8.0.0-canary.238216fc4.0","@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.238216fc4.0_1598283710837_0.5186716378460097","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/notched-outline","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.a1c65593d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a60115e2c8468a3dcadb6554f113c21cdf18c15d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.a1c65593d.0.tgz","fileCount":34,"integrity":"sha512-C42X5AXCRyNnwHflpROKapQ7+k3e8d1UzJ4IsGCKni81Z3pV+BNhu42rsc+CecZBcgL3gwgbgjFMW0d73I4sUQ==","signatures":[{"sig":"MEUCIDF3BWhNnchINJOHPhuIgR/xWZXKEcSEzU2OieEoWUH4AiEAyLpz38D941BJH9/rstqEfGlzPu3px/158wFlN/IfSL8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH/QCRA9TVsSAnZWagAAWv8P/RR+pIxnQi9loXdRce/9\n95Vfjk3R5w+sGi5uTn7K8zmfDBJbV6xdZ5z3DYs6Xm+QrrWxDH6OIsEplvoC\niZRUwdmqRVOOqW5mkV8c0ZS6RX1nuBCsQJ1r/xAer+gfGXdo1FAYA9iI2u/c\n/SYlswLNs6x6KXIOHRnDPMub4xh+nN2fqKo307BDxqmK60ZI09LQ67d2RtB4\nUS8DBrmjj3jU7WNiiZeipJOVXv19X0pqzU0L6NuOwSWWKsKnUVyMQqCSZpo6\nVYAsbdGqK2eMegRzPYN82XqFYoPYSGZmJj51sxvATPbdw15PhyIiXjchIlXC\nnj090bdGLlKmuuHDYzp6b/t5pnLx6YfnzppNZmPM9PgWH5/UTGr0XfelbbRe\nfGef+c5rhgsyokrWjJs1m0mKecrfAdbrTuapHh83DrhschrW8u6LzsTIkWE0\nIz2o/GwJxyPAhy9061uUj1Dr2UplqlPYNmAdAEAh30uE4K2tAGCM+BG2756t\nWF5G4WvoTkdZNDGAtW/5v5ylUrEv5s35Xa57LvTl7RrbcSRi1qB9QtjLx2C/\nrZ91xw1CYNrs535hd7jnW+459cmDW23OzZ7UbYf09oiQZuXz324bWEDE6EXk\nAMacNyhxoUztkY05BGDMzhdGSoy4cCdUjCQcqTPeW/rRcSwSkPFcuE0d37Jv\n7A8r\r\n=I4Mg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"71fc6b5e7b16ba7f6d37b724ad4982780c9c9932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a1c65593d.0","@material/base":"8.0.0-canary.a1c65593d.0","@material/shape":"8.0.0-canary.a1c65593d.0","@material/theme":"8.0.0-canary.a1c65593d.0","@material/floating-label":"8.0.0-canary.a1c65593d.0","@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.a1c65593d.0_1598324688473_0.6554403575840337","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/notched-outline","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.708cc09c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"068c99d262dce42aef82bf318b62900e075778a6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.708cc09c4.0.tgz","fileCount":34,"integrity":"sha512-ve5m9/L65ARLQ6P5DM6RWMMkz0AmvjUwHXiwUopyf+otFic+4XUPPMWoQqljzYRGqyatcf4/4YYVLsrvqMQ84g==","signatures":[{"sig":"MEUCIQD9PF7+KU23mof4ZzYR2FVvCfdTzhdu5HhX3BlREsuCKgIgPGVa9yZ3NSwvjWWbFd/JGXK03YprmkiWxFookp+SjG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTTkCRA9TVsSAnZWagAA0L8P/jrNq3XH1uXKhDIuMEGs\nMX/TsdBEJw/TAiVXkVqzokqx6wbUFzu4/g57nt6YCDMK4djkE85sZTX3dmQu\nK8Q+Wo9wkdrfpIe3fsCk6Xqrpugw1OcQ/nEA0xKLjZeQjqA83JAVxZBVZvkg\nUk6ytjxTJL5BapBtuToyQTTEQlSKA+JFPgljnb6LLZ/9irkwRg/pv4XZCJle\njC+8SR1teADFwrWQJLul3LlXQyLhEes57uQHdzdPo6wDELPoE7tDGDQ6FXxb\n8uch51kL3rf9d5Rnd2sXg8yw7/+xZygHUeh/RG8QJB4pIKGLp5Q5rpp6Hn2C\nvMFGOXatGDQSaKVEH3VfXxMSwZOhoDO3Bphpl1jgQU3AH/xQYzynkBN/JiNX\nFBguz0LNuuFzVlF1C8tLJzmmjjTtdN8iGDwpaadZb/NNf9SH8VAnO7IeaIW1\nR/XkdENkgiGAfeIzFeTzvz7R7VhXcc63wZrUacQYXUkZtASb2vKHom0qEAm+\nzWXCkQTY25raP+AQLCMSrT7RahxAJifWfrkrmIMM8XPLfh3J2iqzIfLzlIr6\nbHIXiyt7h8dhBhVGhoxoixDSbq5ih7w99h2i7FOLj+Q78+ImXOsT3Er/XGFt\n4O0aOBl3tzWX1o5s7RtjKMxI5d02Ngcv+C09DFKaLAj2gI2wmBjXC+VelJxh\nsWt2\r\n=T7eK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"41353a40a8a6a80ac6438fa702cff9ca690b897e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.708cc09c4.0","@material/base":"8.0.0-canary.708cc09c4.0","@material/shape":"8.0.0-canary.708cc09c4.0","@material/theme":"8.0.0-canary.708cc09c4.0","@material/floating-label":"8.0.0-canary.708cc09c4.0","@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.708cc09c4.0_1598371043836_0.5986817856538922","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/notched-outline","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.19bea2ad3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3351413b03bb41d9d07f8766bf6c5bd26d629a27","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.19bea2ad3.0.tgz","fileCount":34,"integrity":"sha512-LWzGEwYTmaYSrJ5o7cJS9ehR8AsEPOaEDKA8GSt3nQIISLs9Tnx3snsUaDyJQr0eINh6mz2RnHUdilMIUiChxA==","signatures":[{"sig":"MEUCIQDGkqoWRRiFOPu2xXEUEoBIuneenVoM+SbxkAUWhKDRFgIgJ2gzIJw7YsiMNkCzIWn+hjx9PfmnWrQ4rmsR3OIdHH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq7tCRA9TVsSAnZWagAAZRcQAI++3tyuYGS76bgfKmve\nERFWaNE71VPi/tfvUBFHRdW8NLMnAN55Epd4ZV4LjKvG0CtcZd2avsfEvW8n\nxKp6g4yk6NIj8/BA+zcW0HLVvqx0jj4+dLc4PZpAFOYYLluIyVp/jDwk4wzC\nno2q1P9necCxY+peVGO+ecw8AUmWpEtxNcXtAqK7NWBc77VhoEMZSgW+P6+B\nWRme3Svg9O1w6dU1onjNVL4FImA/xMoWVpwpZHPvxtKI+srkJGpc2uvvFXAO\nM2ffUF+EhVcaWD3YmFAphNxFVTLBoWPdk2mttYTBs5ILJdMXl3WysRs3SfXG\ngByI9lybXlN6iuHG/XvON46MPGyy3Zdy4+T3H7iWJN5JrlsDFy68TIkN/fDM\nQZjDr7bnN4sdw+38ykKRewjw5i9kc5ov1QT+99rmovhMPA1/o+AoViBkPs75\n6COH7fA7OoJPYTEFe6awIXM/bFwh2uTsM4aBCevXk0TvhzLQwzGwLnQijN4a\nNGhtgSpY0WZ3uCKpvHaXSV41VZrU8+FymDUWg8AiYClvhw4/rbjQbPH2Axup\ng4ctrj/cLEUB8VFhYQovZktJKvHd0B1J/rdOUea1XW2/zj7+iaZvxinqryfo\n3KQAaGK4xBzLe+ubfjuxVhYcuPfppptHIcerzO6KnsyiCSu/Oph5KAbqT/+p\n9Scu\r\n=7Ko6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4f1ed83b6a09dd3e7d24508d420cd99be9dd3893","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.19bea2ad3.0","@material/base":"8.0.0-canary.19bea2ad3.0","@material/shape":"8.0.0-canary.19bea2ad3.0","@material/theme":"8.0.0-canary.19bea2ad3.0","@material/floating-label":"8.0.0-canary.19bea2ad3.0","@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.19bea2ad3.0_1598467821363_0.7601129614524194","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/notched-outline","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.911014711.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"127a4b4871a4d277c0a2a216d3ac78e224747843","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.911014711.0.tgz","fileCount":34,"integrity":"sha512-qO3A1hAhUFlRaLuHwk8Tu0wCz5TOxkZqAdd0BtegklO5kyx8v90jRxrR4uJUUWPURHBLem6QA2XvoMYo2epurQ==","signatures":[{"sig":"MEUCIEG7nZDyW+/ylErpXa6B4rpMy7eZC3FMSMz2vO7UPFPIAiEA+5fjZV2GdFx8JRxfNhXXKApw3dHyK+Vk6ZHQ+bknNsE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9qkCRA9TVsSAnZWagAAxmYQAI+azx0Kh3sG4YPZMpBk\nvX1BeN+z+UAIDi7Fwl2zTWePZIStOijqmvPHJm4/rpfNJn1kEv71EPE009r3\nLHxzi5tgHxEu3attXJlnVQ9ahy+iqXIgqX9Yq8R3Usn2VevXrku7gAODfCqP\nsJ2rFWVbfoZmDqVJEZKTDJzklAFUkwbDX/9lCt09vWb/H0wtepi091MuGiiX\n/ELCyEDVbmexlgjGVqMIl5zxMKThOLA0FB+i9hQhYgen9cEXn1Him/FNB1Ki\nwwt3A6VK9X3EAbllYlmRQTKi4WheTzicCildMb6ioPsQ2ekGhrXYviRFJGck\nV9i7UjPl4WWhIJWBdYrNmUTAZtSQ2J+jJGhjNKtSkVD8mKujcN7feIXt8o8y\nD92Hr66I9Vu7nchi+g2IQtyQSaW5bvEc4uhkn5XlwFLhZvw0A9fYjHNqohtI\nkCDkVKqUs3vjj6SXv6P7CXE9AHJ/Zmej7OGfM9f1k5RpjfKDR1GisYB7QgGi\noImorvjTOWMiztordJKO3Qv+VCbC/jT2NkpwrtK75ROQ9dX0LlsUtCE/OvZx\nGP6be4oWBIvF+rDXYs+yUN4B7AEeFqahF4GHeD9k31i/UBov6Ctkt20G5spp\niyIE6nE/XRT+tikGtbX9umtrlzpVo45BI7zHoOqignftMKVFzGoBIC0pgBw9\nWNSd\r\n=COoL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e0563b839594887804244d231bec5f415812fc4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.911014711.0","@material/base":"8.0.0-canary.911014711.0","@material/shape":"8.0.0-canary.911014711.0","@material/theme":"8.0.0-canary.911014711.0","@material/floating-label":"8.0.0-canary.911014711.0","@material/feature-targeting":"8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.911014711.0_1598544547751_0.25328823702651326","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/notched-outline","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.d3387f54c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8a227e21d4f36539ec541389cf8915148c49039","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.d3387f54c.0.tgz","fileCount":34,"integrity":"sha512-Ky8CnAu+/So5BTdeojaIBKHTuvI5Ix4LxXn4/q0jU7jRTHCS0L0tSafuurPhGY/a5D9fGtzuRWkOuYvqnQlRYg==","signatures":[{"sig":"MEUCIDdkGhczWJTeYuhWCV/1iwKXZY58ogmNN6IxkZ4nusyAAiEA6f7pGBH469WIyAwrsvgUroNqsvSRrU96lZ6UB1cmHB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUViXCRA9TVsSAnZWagAAFtYQAIaDL2SRk0FzMfFwpgav\nr3DBoPEals0NBvWnszUa9LJP1okE1qIW+XymR/kaFQy5LvyKbrAmVCT1VKNs\nOhWWFiIJU4qPhljSbC36oSNlb4VkUaTtscP4vuok0iIWUYiw9PQjGAoyujNN\nIUpWx+g3mO1txlXqIlvBF2CTqd2KQIYwMN93oZxIcW5i2FRqJ7rp7nyAl0ud\nYBlDeq9ZmO63Eg6t+k+1W1uLcSQx6s/330k3b009y7DxDNA0t3LcaerzyIUl\nzXEQvL2NCMV2VOhuyHMDVajq7RCgb+oRgWI+5IqO9BzFYJUgmT20Ywr1pKZj\nT1QdM/F0ZM/CTFVFlOJ53B3KXJjnagi6FMlszh3MWRB+gP2T77grMMlcsIse\noo9JFtxO0pvfJv840Wu9afRFafLrc0rCPCyDmW+gdbmJSDj5LziFnfWl097w\ndjGf1aJ72mv6I3vkKATSPd1CvqyZZ20qPKvoXGV3oeEDOaocVOoUuA2WHLG5\nI4PcJsR1+L7CPp5Pq4d2DyuXWJlTCbEUgSNWDxnkoN+WyCpF/e9XWx/vkapE\nW1VpYIQsZZ5aIYEqWfkeHjZnwGUTLAROy3Kx+4z4FGtitDnYcNfp6Zvf8Zha\nZXqFts1O59FWl0448ZjQhZagqP4/8UwzMwQydRbIDfoqqwyTIrhThGHzuN8V\nKFiO\r\n=oEY3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b8c159d735641688e2fc1631ac7a98134ac5fbc4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d3387f54c.0","@material/base":"8.0.0-canary.d3387f54c.0","@material/shape":"8.0.0-canary.d3387f54c.0","@material/theme":"8.0.0-canary.d3387f54c.0","@material/floating-label":"8.0.0-canary.d3387f54c.0","@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.d3387f54c.0_1599166615078_0.7465325872203423","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/notched-outline","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.2ccf996cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe757967ba5141ef023d8d74d9ea5fcd87c48eed","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.2ccf996cc.0.tgz","fileCount":34,"integrity":"sha512-3+XTXno/kWGOI2urpz8Y+3TS7bonUd5HQZX+Uvsaji6CShquOBLIalkFcR7D40+YFwvDN8F+Xi+AdMixZ3nktQ==","signatures":[{"sig":"MEUCIHDGyf389mWmHjOa7iia7c+9nCtv1f8R1PSUQ0ZLE9QMAiEA75u+x99DdZc52XEYk6/kA/A2OZVwmjXA276+WSgjjMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVi3CRA9TVsSAnZWagAA/2wP/3XRXy+5vCbwHUc/jaVm\n6SJq7pOzDQ7Ww060LUv62McY0fFnLS69rn1ggb5tcbpMd2c4t37MkMIsE5vQ\ntKkHja3lKE/6GEyxGOqMza+ROuAZLum/MKrAEl4DZLAmNySVqqx/4QFCfGI5\n4yk6Su0pkavHja4z+b6midC6k61Uz1NzKWpdVWt8F0UMPFt6lzuaWrAzbPY5\nnlMiG+gCNUL+kUd5OuFe593HIGuI6LpEDc2h5GCE/lGGrzq60dAnBplbotmK\nZba+oa6fszsSpC0fEezzAadZuT3gzbvjw6DND04a7bLMQV8o6J35bV0dP8U3\nUXTbU442AniYY73BjGkUCWFNR+Yne+SPIHJeMbkY5QuvMhyH0BYKH0PV9Uls\nLn6CU+mDnKOh3TXIywVNLh0KXlS3MlwoammiO/kJjemTysrZymEEKgj8jCdV\nvgSbgTd+3x9bXnAjgCr156OtKwZTUWhTiVP+7VWxUhMtxIQ1pNBbfkYSyOKu\nFhfeUM1OGZAf+/A6rpoJjkwiKxztBsn57ikLjG7DxW4C0KoGU5lM/q3fajJ2\nS3yWpnna+wB6PggdKAhZUfw22Nc6tn/iiOaaBl/S/bt/7rCpXdfPgfnpNok2\nta9gWrqJ4KBF+gMZVYvaLKZDx2Dzxd65Mbx6xeF/+ze23ARX5+6M+S+TD3xy\n5UpL\r\n=VzTa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b295adf5299f65a654963fa774da90dad3e39244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2ccf996cc.0","@material/base":"8.0.0-canary.2ccf996cc.0","@material/shape":"8.0.0-canary.2ccf996cc.0","@material/theme":"8.0.0-canary.2ccf996cc.0","@material/floating-label":"8.0.0-canary.2ccf996cc.0","@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.2ccf996cc.0_1599166647286_0.7135329011022555","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/notched-outline","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.744bfe5d8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5cc106704fc8c892e32c7acce2d14781df75a38","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.744bfe5d8.0.tgz","fileCount":34,"integrity":"sha512-QNt0NDlnTCFZQmSlKZxbWAfh5oqM7wq3X38zzU/YWYT5VB/xOY5qnV6LtYwYlkrIi4NvLfoXhM7Xe+rHpVaMUg==","signatures":[{"sig":"MEUCIQC440WmCqyQMZIMSKfprERgUKafJBO4gBQaCPOlxq0eqgIgbglf9PLm12xlVIkUaJM1gAxTaQR71HRi1VupLh6WL50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVjnCRA9TVsSAnZWagAAdvkP/iKvbzvRiPb7w1i0IVGQ\niyt3uIXiZxOTSxIubRYbkNBobNhMfIOxmkG3RhbbPO8NzIFyhL5bk19clzIm\n5gtjwKd7TWNcgUAoQupzXVpduZG4Ht8aZElIFTnaM5yH9vfDJ7w/Ob083z+a\nprYCPG+A0+mtlxHleNvTQ+ofJHdFcERrYf1ApWbEQVIr08j9zjGKcJGlU90y\n7y+x6qPN3a63zwJAk+mZIpUQVFnK40Ma9m0jQVy5pPLEG5ySbxp6jnZqk2Cn\nPm8q9rFX6mTZgxDYWhqiiCKzl1oLcMUoWWiSv4BEqsSXoAFZYt1cMtIfOYMj\n3TXo5xDY3rTPaUfyeCtRLwN2OAcc0EhGWnjbYvbiyV07RfHYFinZvfankM3e\nHlk2j3iAHPdmtHHoBXqiQpNmZL74daFbFAAe5tHixXxN7cERhMvMuHn7ua0A\ne+YJcRmOo04i1giU7n/IMSxLBCloBXXBbWktraidIqcWX0IHQJOdn5YnDcMI\n8vBPzXppwg+l8euKwu77a82aZIwDT3HxMkSj7zjhSdLiG28vs3nYV/FqZ+lv\nBrmqNN+DLryV0yD1dGKzG/hvSLwouw1489xpBXVJHIlg+qCWKWodBBHdWpOV\n4F3jwPC42Ioj6DhDn90IoEet14l/UUg9ZKttHAjnREbiQgAa1rCNjHtB34pd\nHRSX\r\n=As+p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e8e9d5605e05fdd50b88c6ce659dc2ddd8ba768d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.744bfe5d8.0","@material/base":"8.0.0-canary.744bfe5d8.0","@material/shape":"8.0.0-canary.744bfe5d8.0","@material/theme":"8.0.0-canary.744bfe5d8.0","@material/floating-label":"8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.744bfe5d8.0_1599166694820_0.5927842815015507","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/notched-outline","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.78da96eaf.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9301525173b750362e3c3603655e4d561a908262","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.78da96eaf.0.tgz","fileCount":34,"integrity":"sha512-KRRwe79Nm6q/EnxYOSM00Mw/vQ23XNxXATm0qJ/eO79zflKFF0rjWNRQuITCM4pwHdLqtNPEEP3Y+XL0TmBy3g==","signatures":[{"sig":"MEYCIQDUi1ahjlTY+nXnTiRYdtYv+QlXTPyisaWuMgMmAne/4wIhANj9lBuk+v/Z9shuYAF0up12S18JQLn1BwSCYhrZ9KXf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9fwCRA9TVsSAnZWagAARXMQAI0Eic2UXMjG/FcEmVTS\nazk/eQ6of8bN3PIMM9/vZtA2HLaFK71h227P+15Zq6heoBWyWk8ukgeJFngh\nsMAHI7/DC7d8yrvWMYkF1k1vyK9J97hyeaGbkq558F2NPPDGxvqZYjrMyFaA\nnHH5fJlJBewh/bnnKjD+KPqkVoKcaiagGcMba/HTX7cIhr0sWJYydmmEh5rZ\nQb3NGXffdk6GB2GosgI5D2t9bVYz4Wh88hYg/EqO2Gh1grWL9oI75ZEeljLu\n7OvWEAQtaHHhDLyQ4PKFDvn9BE3Xjs3ENBmq9cf1W8EN8F2XDdRQ1Rtmzwyb\nQrvwHT/76GvNJpf4aYTMkXC7VIOTqkYf0c00h8sQ5lB5g3I0CD8sKWmN8Yxc\nEeaOV/uyxnkou+AZctobpXWf469JQW403b2SbIkc/UXRMYKXU+6EtiJzpyZz\nJa4CeKnm9LXJ9USpUt+LBkzIDUVl5L0PwMLqBt/uIDjyRmiCDJNrmXnb0MZb\nMXDPH/JBvXZwc7IkOXAK+kIqkCdsSWw9cozquJB6WWxhrh1SJMQY7WJd7oQG\nuETULka09Gmx5rGO/2zErXdkvxQ3FoRDxW+xCNmylXyrAEMKmLs3C/7GHD8F\n2XjeugYbRIh0R0UI4nRojw4z/ERCvoEztTiadC4ECmikvGKyov4j7VSYA6Dl\naRLv\r\n=GG9H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e9750a8b0ebee9367eee7e514953a1b1ac6fef7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.78da96eaf.0","@material/base":"8.0.0-canary.78da96eaf.0","@material/shape":"8.0.0-canary.78da96eaf.0","@material/theme":"8.0.0-canary.78da96eaf.0","@material/floating-label":"8.0.0-canary.78da96eaf.0","@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.78da96eaf.0_1599592431713_0.4653769700749195","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/notched-outline","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.b0ed593cc.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61f75dc9082c18200e15e0243c0bc8542173b77d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.b0ed593cc.0.tgz","fileCount":34,"integrity":"sha512-ZAJLZQoh2eqiiDcgjwLeLGWHsZiVJaBHkbyBGcIvjk//xdKBh/5nj5Ea+FmD7cTeu5kjjvtEHe/C05q13bxpng==","signatures":[{"sig":"MEUCIC85Y4fCLZTwoARbddHbG/3MxVBjB+QiwKUMiTcMQm79AiEAh2TxMXB82i4SaVtbv8au0tPB7oBZVb/lU26TamB9PkY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHNdCRA9TVsSAnZWagAARhAP+wTbQLImdEwRe6BFLf9f\nHSOhvX+WzbtDrgrolfTR2NHsIjO5LKXgHUcyj+2OaXWuC2cjmiya3elVGDTN\nGH3iPfhrcqS2DvJc6X88JexJft9QrNeqd4fEuW/OgKz+/SgyvfIYC/U8N9SF\nD6vRCWlLzpBg9WfdOZdJCv72gx39RQUIZPIIS/J0A0QZmpj4R4DRSwaorsAM\nsmzK2GRvHGpqAbJL/PZLBadmNoAQqWMQg5yN/ZbUE4sBrlXo45C/KLksQz0O\ns9vd0y8Lwd/awrRqOLIQZdVUVRaNlBHdn/bR6jJIAeekvzUAP+fUTdWOGHmi\nybUr7UPmNNKlQ4Kk1TFCLpWyipGHOVGbsUVqnBjY4M3GodxqsEXLc09ExiJZ\ntLLHEiMia+GLxw7i6ZUxCadSbzfh57igMAZ4ynnxvSREj0pLnzFK8vEQVAVc\nd1t/jVQZGuVHeiA1IYCck2pgZIdzn17VRam9jL170zdEtNSNZKrqPnAS5ngs\n+vMj11xQS35gopEt/rgY5lEjpizK+u0DQ2Js6XiPC1a3tQegO0kCWXUGwPmL\nbDmm5zVM+POAPQtQqEck4rTACjkAcUXGVN8ubdogyz1d5lJHlTm6z6cKDPwx\nUKodwMd7z/427IZAR6fzKYQLJQv3KFukU06esYgs6qwlUGYpNZ6IHSfiXrzG\n7YxI\r\n=qtbk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d4dd3b56db446c52c35f891f9a19896a2b762f0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b0ed593cc.0","@material/base":"8.0.0-canary.b0ed593cc.0","@material/shape":"8.0.0-canary.b0ed593cc.0","@material/theme":"8.0.0-canary.b0ed593cc.0","@material/floating-label":"8.0.0-canary.b0ed593cc.0","@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.b0ed593cc.0_1599632220719_0.6751947043310331","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/notched-outline","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.85a1fa9ea.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a882590e49954df052f837439a21aa76bfb6391","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":34,"integrity":"sha512-YtfVMI8Yp3Zvr3ogyJgddfE/5t0972bcdnXVYeizVJFnjgILG+e9BsJ48+2xgKd2scYMX6JbLbtU03/eBSqwnA==","signatures":[{"sig":"MEYCIQCEMD0WWSWp5CdjhdJetme0SodL8w4dv7rBuyE8dI+EIAIhAItFiSBKPe9lOncbAVZymKkoKBA0UG9+8sPyDGiaHJ4O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpaGCRA9TVsSAnZWagAATKYP/RU4VH1TMqTARpK8rt0i\nr8aaFiDOfOjCj3asDGPxvqh+3xttvsQ1MEbiLad4gaY7DRpHRKAXXXySmJv8\nUdgSZWo8r5oVN3cV+MYrN5a00XhhVBjDIByhm64jxWaJrLWEpXSWt7E+l01I\n47S1YcVlnwtctuDnLwZQV+1k4uM1bNZ3UtrydHO/uq2QaSBNDHmKjSQrL1F9\nzTTzkbk0Ur4ZKF6wgynAJSQUURyR0r0brlgwNLg1EEyzb7Sa2PKudXbJHko3\nv96DYyvkYHIZb9sJIYtgGM6KTgu6LLeWRmXJjFY+3yX38MrK51v0vDhy1QG5\niYtFXG1aQAiDVWHWJQ39AUcYe1ueSlh7MKmTRtWH0gFlgLPYZsTxrq8kIiVS\n7fQI8nlqf6elPwst+mlWdQkI5Bwjqen70EM34ZPvH34KH/DAijQmh0oUXq7Z\nYi8p7js1iaylUty19oCdIdEkBJm9Nf1TZl39hfYhNfdlGkXrySSd7MEIpJi6\nxKMuH0QT6YAOMKsa9rUa1K6R8wyumoF78sJ/YbtbJlJ0UYOqUdSujsJiobeB\npFL09RS/9gNQd8/WLvbvU0E06t12dS5lW2c0qJYeLDzUbInjov831nMqPGa4\nxrLwTajkHButyrxkyGZ67hffZvLhGoXYjngSvWKDCLREr8K80WU0QChAII0I\nlvR2\r\n=edHK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"96441cf0eac61122c48c43aebac2e249d5bf492d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.85a1fa9ea.0","@material/base":"8.0.0-canary.85a1fa9ea.0","@material/shape":"8.0.0-canary.85a1fa9ea.0","@material/theme":"8.0.0-canary.85a1fa9ea.0","@material/floating-label":"8.0.0-canary.85a1fa9ea.0","@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.85a1fa9ea.0_1599772293738_0.37107514278885967","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/notched-outline","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.0bc41a9c7.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a12cdec95037ba31fedc4c99ec4465eae30607ba","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":34,"integrity":"sha512-THRWMOsAlS+hjVUwUYbREau8mM94gg4LbGyIZSsP4OUff5IL1fqp3Yr22wlNhfpRKzTLhDXwySwp8zlrDvBp/w==","signatures":[{"sig":"MEYCIQDvzfrJBTKkAbZriTR/5Dthjn9EK+ND9zO7IndDu7vBGAIhAPUlcqLc60q3jDH3+mXSdW6vMtuTXb34LPFZgLxyzwDd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7j9CRA9TVsSAnZWagAAeV8P/3OqTFh5vkaJKuaV1eHQ\naHnxlOwI6DEPJCuKNeIFWjXd8xCXTNcj4BdhIAFLzKj/GNWnAyN4ZfPIQeIQ\nvO9JRTAKkBPS5h9+o6fnDqlm8++3Xvap86K90Jr6uT0T6FnK3kB7rc4ypjWw\nEmK81OjbcGtXbF41bJNKA9RfUEEl6jIDdBu2Vr7kqjppY19YlEL2doK5vzDW\nx1Bvc5AeSqpj3CGKXVZtSsReWk4RrnZwq5cQDnX8JZMsqdOKZn943Z5+vbhV\niVvlbF9zmdF1rjOPdmfcZfjRddpkUz9SUi8WPw9OYDXJRAZGhtdTsdokC2Ju\nzduMW1Mg/ozoFzGApwiKqdyuPlWQB70EVEiTEc+6sDKEE17rdryJr6iggwUq\nlWVwUcea+40icwkWLonCibsNU3djV91XIrjKH/JFECbfzSPTUBXm83E9FMcw\nOBKWU09P7WCAGgwb73FwvQ5v7fm4SCq5GpzKwB/Hicqnfh3fiuydCavIVW6n\nEfnsWgiOXIf8kbEe5DioYhv+aC7enunWqM/wufm6BIN0svdDkuiUMo+VMUH/\nENWL6Pp8kTWRmQng3Zgr/hlEvGBvsuEYjIn/5VDUm/BMKA98yFK82owAdlmG\nXWcNVo1Y24bjNcSn3lMGblb+mLVRMsQVlhlL1Y4bMuL+viBakUeiY1QEBfTt\ngaIp\r\n=7xzt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f9e2c4fbe617a115d220d49782884d15a0d9ff51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.0bc41a9c7.0","@material/base":"8.0.0-canary.0bc41a9c7.0","@material/shape":"8.0.0-canary.0bc41a9c7.0","@material/theme":"8.0.0-canary.0bc41a9c7.0","@material/floating-label":"8.0.0-canary.0bc41a9c7.0","@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.0bc41a9c7.0_1599846652943_0.0547318644307484","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/notched-outline","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.fc0eb5013.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"650b7cc09a39cb2d08fd15ab6be9385568690a03","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.fc0eb5013.0.tgz","fileCount":34,"integrity":"sha512-VbdyJvPosXc3BtQ3V7fcOUl/FNYGgej4WQ3Bm6bvYEIID6vNGBCvYxOlUKrE6ihxLJOxr2YGCUDtgJdSBblfOQ==","signatures":[{"sig":"MEQCICD0sbAPADRyTGvljj8UbAOYGtg5xKCF5k/sFttrLmA8AiAGIBltwQRpjs6SZfBL8/gP871Ctg+tjlcpCkbj/lorQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9Z0CRA9TVsSAnZWagAABJEP/1v+b7gUkrcPw6KAKqKk\nL6OqHP8WrnGh1QDll+fGor8ThpcOIh3Y1LGiM61nmupy5EhWYaAGK8pJM232\nn/jXYyGthnCQibDDbIonDCrrsIVAIfDIr2uF/DQMx+MLbqqiDQGOH6HVqjUj\nMbdqCg5hCx9Qkdkj7YJIOCs5BI9rP4ub4JlqNT7r3USHrFIsOcg7/iihvk5F\nCBe0SX1J/QgfSzr/pSx/8Z3y1bFEEhGjUngwSlaPkBE4SK8pgopdc1wmv7fx\nNxsl/n6/h/7EWg+5yKVgF+guJktkKQLqqpqMvi3mvOHBQczgsDAvLJOfbQds\n+JOqASTsSzLdg6ZZ3S14TFNz50Qb6JijUd3dvIQpE6cHgzq21TvH/CHz5E75\naViymqRVrWTJmco9Ead7Yxuhjosfd/4klO3RDlvXfnwVy39pNOT2tb883mVp\nWfOK9PTisB1npKSbFs0d/6W+QqK3wX2hlgwjvrgYbtxRjkTd8qu1Wq/ZKX7+\nCJAYzBOcSLHuqbgR8eAXJYQ8ZQfJF6SS1G+EK5m0cqkq3OzeXZbtLV/Olwgr\nC1ORnhSTaHdh6MsnYYlW5WbFO5dpG1V/5AoP2t+VUjg5Gk0G7rqE7nU0+9tY\nh75V4UOIH5GZpzZuIOIQBSTobKD9+dczceix1j3zqmUgm51lG/eXKK9ag4C0\no3of\r\n=LQfw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c6572140acfb45fa86b79570328d75e3869c40ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fc0eb5013.0","@material/base":"8.0.0-canary.fc0eb5013.0","@material/shape":"8.0.0-canary.fc0eb5013.0","@material/theme":"8.0.0-canary.fc0eb5013.0","@material/floating-label":"8.0.0-canary.fc0eb5013.0","@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.fc0eb5013.0_1599854195624_0.4575013523334899","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/notched-outline","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.319bf66de.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a9806d994c6cc8277033f606f9bcc7f99685bea","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.319bf66de.0.tgz","fileCount":34,"integrity":"sha512-pbW5tCjxWhBYvhrYVWAln7cEEkvgJGAI5HLr9aZuttqyHCTfxEBIL3UWBVJAsiJ3GG7Z7tmg7pGkTGYQIT5aAQ==","signatures":[{"sig":"MEYCIQCwpMXAyeHzEwjn0CrcJg520GH3AnI5Yx7JeqwJlDQiXwIhAP2bGQIVHdBRgsjv/3gbsMRq+zXXhkez7LXYeJxq07D3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAQdCRA9TVsSAnZWagAAuGgP/R7GZ8TJnOqAZRfZUjAE\nd0BL0yMK6EwY4VKsGGss1XQo73r3n9ZvjH51hC+a7hWOamwBMvEHol0ZUG9X\ne9K9o/dfX1woNORdOEMXTEMCPvBMEAon8lw8ihe7Y4u6n85NHmvfF+dxi54l\n3KV3GmsAMPIGASDdyhqIl09Nb6+Cdlj2L0vhRunxdlKtj4DAA2IOkAqMfHvL\nsLOERvImQABTzSjmZyyv4QMzf4jBNpmHQ7iWAqhKoFy5Ne99Y9zh3RUrlrFk\n3wjw65uzr01lSPbhKjNecwWplduD+3Xm9AdVGDW86WRFRqKVaxQpo+xfhKXZ\nOOeY+Hgv+NQPbpRp2rPgw8pBPK1bSVX3KBwZVc1xcMINDm6zNMRQyNHsYDh5\nTyDlhzOD9wHpj4SyN6TkNLtIfMqLZzCvgF/xGe10thDBEC4kDWy8ZVXwj/HU\nxv2Ba56mMSa3+FtD2PekeyVcZamT3fc1fY5orGAvGFkfLSpGKUPKDBbl6fGl\nN+yNVXYQaMuybNvX7WlMxvWVEf6tmi/1mMbsRgaAWRwnR1jGk0dynOKYullD\nakgUpracBUExNDbDaIxmIouIPuIO6dOiojrmGhvvS79U9vexbk5BdIN897jJ\n3qpJHN35C8sPPwnmAsCy+JD4MCESYLhxkCpc6vTUy9yD4E2mJyE1g8T0IXe8\nt4DB\r\n=UA6r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ba4054064292bafde40e53fcc87405c8dcad24b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.319bf66de.0","@material/base":"8.0.0-canary.319bf66de.0","@material/shape":"8.0.0-canary.319bf66de.0","@material/theme":"8.0.0-canary.319bf66de.0","@material/floating-label":"8.0.0-canary.319bf66de.0","@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.319bf66de.0_1599865885029_0.2877890322192618","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/notched-outline","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.5bfc305ec.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc1e644480e7439823d51a9db3fcf2ae67e0214e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.5bfc305ec.0.tgz","fileCount":34,"integrity":"sha512-Gamo/HnomZtjKH1nuXcMI5CKbcgPFcTsXcpX4jGbbiWUeXPAXWx6P8qPf1EiIGK1vvg6ggUzjvf8rXWpJW33ow==","signatures":[{"sig":"MEUCICHHXzD0msSUSNAhPDbMc0Nt6o4uPy9M3nVxXLwh/EdHAiEA48ilyqaNGP1G7kCBi8lnVQh+DY1dILnJC1FBIg+ZCPU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqS6CRA9TVsSAnZWagAA3w4QAIosDPCNbzmpCYx50CCL\n8WhQfGD/9ugWZl6Yf/1XhOGoResN7ZN3w+HXZz/mb546AmJA7N1AehXEO6zh\nfb5V//Apfns8X+ehHQP3lVCZo/BMv1S8ELB2+my31S5YEVw3uHu+ooMwZ5No\n55inX3lqGO1we1dCin6hiNT2Imn3LGTqpOvuaXDDlBtt87EsC8iUQHRbPACp\nZ/ZmM1fNz2DvIHIQOA5TF2YG4ZTgxWnVVWwOjM/4kdzl8ziKWwaYn84fkUvZ\nAtJgniBYOfyBUt+lHkrdyU0ndz6E1ocqUhUtPyaf2THRoT/1WcUmDY+xQX+R\nUrXhvYI5v3kbvqDcy4TsSe+JmIFWO41kCYXlHd0rqidyocj8c42XQnuqhtta\nm24lGm8bOLxjLVSSCB7zXmpU8iVJABmqlW8BbRhQJmSjUErVqzq2Cn+gFeL6\ne+PnufsLIn/Ew27Tlh7bgwcsSescGfTgFo7M7hDe9DWrcBebBuL1pQEa9jfa\ntMzakv3yn9PRv7yYkmoFBlMAKRozfIcbOUVvHbWdnj9Rus4q8LA9T4YVAipv\nOkL316fuwIGXMz55NEDVv7sEBke5gmHZXbfD8/K7IiGkRSA7816xxd9O7kTO\nrjrEI7U0L80y/rPvrdiyDFEAxADRENFSS7gOGGBKg5zWUBjiVg+etJU5ZrLP\n732Q\r\n=IXRS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"96c0c187c7fa544c1f5303e96ba3e85cba86e5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5bfc305ec.0","@material/base":"8.0.0-canary.5bfc305ec.0","@material/shape":"8.0.0-canary.5bfc305ec.0","@material/theme":"8.0.0-canary.5bfc305ec.0","@material/floating-label":"8.0.0-canary.5bfc305ec.0","@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.5bfc305ec.0_1600038073540_0.006527824167808616","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/notched-outline","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.83d83f131.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41d2abfa388f315e139fc8100fd6a996fe454683","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.83d83f131.0.tgz","fileCount":34,"integrity":"sha512-qqbraK9qw4Idfu/QvXb6SxuSSd42gGqqijS9kJIHwM7+GPY4OOGFfW/jL/PwcJyrhgZmt72s4g70PRtDcq5/fg==","signatures":[{"sig":"MEUCIFOc5ge9VFN27Hmy+qqfCD3jGFpjrAKIc/eYB8aeq6WaAiEA7qdlWfGg8qUuwCGaVc+3AoPKhGdF5BrLD1uxT5RvF8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrppCRA9TVsSAnZWagAAvrgP/1x3EafbW1DpG9E+3sTt\nB21nk++ox55Z6Cr3xQKoH1rYNgS/Ec5ieHCQMPVsytLwI48i94ixdxE5SxXT\nlMQ1obkp5JE3YvX64MQ4HzGcZ3MMQ8Kw/Q4NDRxyejO6ReGrbq/Su7dAeeyr\nDt/BVWPsgBLApZQ09odZIMpU9S/X4yKw53s5aDCsv5ogegwI3oHO5O6KuItc\njqfdEZlQpKBPKDa8KNyHo1FP++z658atT6RVBQjYMl4vu0Sx9zXIOycascTr\n+cTaS78aV2CU66oDdUw48m2NC0KZFWAd+iJTNMgEgVS9grU0q6NYRA7JzeoN\nVfr0DZIxJePBL9JASZ4KPuc8uRrgx9Bt+t+8Ic7eP+oh5WHkcJP6JDXE2jZX\nX/O1ASpLhNBGkaKdYVHtat3LIkcPqdaerE2oV5F3Iuy+HB9Ep/pumZPlNT2i\nUNVVvc0D67WC6ZrsX61k0lUh3RJsi3M6w/zy+kpMWpngcTDYBiTlY0om31JI\nPYkgbIRRxJTaD+IaLoSgnX7nvG4dSIzMd0HelDqGLep49FA1J7OdVcr7XeL/\n7vGwIY/+TrZ33NQSX/a05fu73xrilAbc8ZFyOFP0fjMs0l6guALyjQ/rLZQu\ne5XLMWRSFzys5Zo7S7cpjVGo9OioVsJQA/w85Bi768DoijvlRmmZgbSS+h1Z\npyhe\r\n=Ji1G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"520e8b604c3cd3e7ce96b30f4315d576bcdad3e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.83d83f131.0","@material/base":"8.0.0-canary.83d83f131.0","@material/shape":"8.0.0-canary.83d83f131.0","@material/theme":"8.0.0-canary.83d83f131.0","@material/floating-label":"8.0.0-canary.83d83f131.0","@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.83d83f131.0_1600043625446_0.8735135910917424","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/notched-outline","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.d52b165b5.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e9bbf425cdbcfc5b160312f4b696d58ff7f104b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.d52b165b5.0.tgz","fileCount":34,"integrity":"sha512-1kmAXCHvLL6G0cUS/APguQCejbv7/XvPrIUHfgBqDQ+7O911GiYKuMVE1VOTkCy1vFO9ZZX1bkBft5yl4ChZIQ==","signatures":[{"sig":"MEQCIB2irUBMnp55mCNmToQv0Uv4smMbGR7XQwxjMyagkY/qAiAXq/qiaxHUEuOClv6zNARKiYzSp1X6Gp9fz7Fnb+/XOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNXgCRA9TVsSAnZWagAAGsMQAKUMDtsq8cF+5OnLfmnu\nnfkzlswVZVqOmH0FTm52H70llI6mhdtNEocYcEuSoHIUSf0Hu58NFe2KH1MI\n7JoS9zdNojIfMXPu8UHnX3X7KNrnf2+ungJnH4e71RLxcOYs8Nc5MIQ4eV5O\nVM9T9Wj5nVUyYm3bazKRc8T/QOIlaU4HUFV8vQw/M+qHbO1rYckVMhUCWhXd\nYtO+H3EFuy1TLUui/5cEHNbnAuAk1cn0YNzazylWXCezi5USGoMunrIRl2yr\nt33lBGV4y44Uu7mylF/NYodEp5wHvWJ/blK8jTDXQkzcWLyEyNfEQZ66ojPf\n2REKZgTPC0Etx27GZ27X637O7ak2i0SClEucpZ1s78Uz2e34UKO7Pb8KeuUi\nMpgTxeeRk+uLWY1FGg03YvIrnSZ13xPwfMf18j4M6ekCRzrw6o613p5IpUAi\nE2s1m7swsEe3Re4w5GEnKa8sZ9F5ptd3ZgFCKqqhr39QbbI0wU3BRz+D1mCe\nxpYJvCkQ2opqgOu/QTxB890OMLR5NBZqryE9Pas44c5WeJGxPJWsTfUA9IVb\nLXaqbTEShFpXnpcPzOIKAJb5Cer7cfrBYzGPpakqShHeTBm/BgKjEz0uiEpL\nbdRfDMXJcbuNQtK/YWEyXb657u/hDftPMP3nTljZ3eaMOKqxf6ee+Tgd4pRN\nuJHS\r\n=rRcM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"19ac3399f14583da3b2ca5e37a0ce783539066ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d52b165b5.0","@material/base":"8.0.0-canary.d52b165b5.0","@material/shape":"8.0.0-canary.d52b165b5.0","@material/theme":"8.0.0-canary.d52b165b5.0","@material/floating-label":"8.0.0-canary.d52b165b5.0","@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.d52b165b5.0_1600181728220_0.10340780107407","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/notched-outline","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.a831d4799.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55c1f805a887fca8fa7ba620b679d54c26913a59","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.a831d4799.0.tgz","fileCount":34,"integrity":"sha512-mTVU0FLnDY/D3/w5naRO/zS0nkDeweyMM93OGI5ksFrqm/bDT4sFyCa61kYZrbQExPwAtSf8oPx8AMo0j+zwVw==","signatures":[{"sig":"MEYCIQCsEhV1i1bbRLm6BpnpWp6aEZj65nzoqo/cGefmRks5WgIhAI+5L+yBcNnEmJVcEEjxcxMfieyN4uq7c21IyBPAX58b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP92CRA9TVsSAnZWagAA93UP/1nZ1RsZn/K2BqzcAMCB\nzGH+fcNi9+6xDsLdTNzAocvly3YsvvctTYV+79KziAUEnN3X6js3BJUqOT3D\n5zvp5Q/IvBrqo6htRkT3m2j0BjkSd3dgXEf65A8hQvkKWi7cxq3TWY7hLmHt\niwlba21vqm3JnKoB4RtBt3wWMnJ3RoIvF9eNqw/zCqvsSq+Ff6M1fPUxxLJ2\nbNXBBF0DGLJT2aiQAEapUYSSAg+dUo9kz1NdcxeGeLkriJokZkxKR6gD5LvR\ndn631f4zR9qwuDmBDdprbjtpAy+38bPdPLumXua6CLQHQipnWLRP7U0QhoR7\ndQAFFugtUVbGX70TImWzhj7bqyiG4IO1zieQV6V/qzCZZanfxuPjxxbf0MKl\n8RZiV7SJWP4jvMxbTVc488d+cJmE71+rChH9Ll0EqsWS5buaji1LtHcs1Z1n\nHDxKtpedn8z0XIhyqyUtoBhPm79LOuK+9wEarv3sC/9+kP1jMdmPJruAzvsG\njRVGOlBP04Z/4ukBMg8xbFpDw/gvUENf/Q2acKT9CM37AkjPtjcfGXmxQBlN\nAvYkLHrBnMNw+6QFLZj2eTyHzQIJvHZBEIi4T4dRSGRl+SrolILqpdDuDd1V\ntNz6sOPbKE2VKdt2pqlcAUMGBACLY/JReOM2bjEtDQpZTVbt36FQ/aCtL4gn\nEgtA\r\n=kOB/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fa7f461e7963e1bdb73e7811d2f70b0a07acba16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a831d4799.0","@material/base":"8.0.0-canary.a831d4799.0","@material/shape":"8.0.0-canary.a831d4799.0","@material/theme":"8.0.0-canary.a831d4799.0","@material/floating-label":"8.0.0-canary.a831d4799.0","@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.a831d4799.0_1600192374081_0.9668047128344353","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/notched-outline","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.a306aa488.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f890200bf7303d9bfad9edf50f2931497683e994","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.a306aa488.0.tgz","fileCount":34,"integrity":"sha512-H1coi7ljtwDR89LnchvrzqktSt9T4AxoFn3XwRl95Juxes8Avx5tUxUtP4S+Qi0ByuhB2bM4MDP7odBjwOoEuw==","signatures":[{"sig":"MEUCIB4LVIdbdZ5bQRrErHFexUK3LtTvbkw33sxqflDGEUy3AiEAnaQ5xk9o8d+4qwqXXOMShbXfHu1iltnETkWhk+IlEEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrUHCRA9TVsSAnZWagAAjOoP/il3+9fJMMJ+OSTFCMLu\nu1yi+nRidxNhMCm0jBuTKW2pYOiIkMG00N/o0WA42R9MMP5Wkg/klz9bLcla\nr+MpDVsS/XVPQZ4SRjvGYuOQVbxM4NY5kmVsQ5R1oJnVwLmKWAoD3Bgx5u/q\ngOjeKSJhZoldllLaP/Jc7pXG7Qxv7qCjceHhCLaYKrWG1sunz2VzrAoGfRuL\n6XszvJu/Nl6C2R4KX9hNtAmD1MJgd9PqwrrrOOuZMhkDYsZzFhBut05tmlcW\nWRyhjnPj1oOj6GpNaiZXOdjBxU57lI8OQdihP6A8vmLxdBLCI8UmYW4reCax\njgAIGbuToMI5kLHRkP61SFGqAD/tCyVTD6HD2f0pgVqA0Id9nvFCphhVMeWm\nJWjajOIdJHlMWMPflJ2b4coQ+y1icd/NPZ0vJP2wYT6xNfp7CIN+m5CYXV22\nV3svgjVRWyfc4JnI3GVqi1Yc7NeH/OwIKoFmAxBSG6LpCK2COncLHGw02g7y\nYSsmXHhIluzw6UZ/e/ON96xqmzqCEJXuZ9z+z0ZHKkkYbVzIEUTMs/G49zSj\nV5yZZPBhj4vxr+Z7LtGvMscCGZd9Q++OWbV42+deToZ6pXEXPks3SJmtJ479\n/MJhsR9WBKqCXvCwA8IXCio4nF24ImsawAEs5gmOjunqvwmzFVIMGf39bIDy\nGk2Q\r\n=L/0K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c6addec60d43eb106ac774211ca2af4b04d40f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a306aa488.0","@material/base":"8.0.0-canary.a306aa488.0","@material/shape":"8.0.0-canary.a306aa488.0","@material/theme":"8.0.0-canary.a306aa488.0","@material/floating-label":"8.0.0-canary.a306aa488.0","@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.a306aa488.0_1600304391054_0.6838913539422216","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/notched-outline","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.fd608ff66.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"928acdffc28ebcf648194aa85716bef2cadcf224","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.fd608ff66.0.tgz","fileCount":34,"integrity":"sha512-Q1dQK01odQW8s6sCK32qs4xHuwEActQiGekihMFMFV/BKxyXhTidL/T77tKSRbtJSNyKN8COuSEcLV8fDAZSUg==","signatures":[{"sig":"MEUCIETPca+6R5AsPt3nuRaYbUZuARHWVhU2nABoJ65urQfNAiEAzPA3m7ANd6XoE+f9WgZbHNQoZcahrM4gJT6W+OxD2x8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3ItCRA9TVsSAnZWagAAuVoP/jbrHd6SEL8hQ3tvUl6Y\n0AybNOury0VbtXKpyerdy+Ctyj1skXyzMS8uprafunx3DjThnpvOPRshZudC\nIL17icJaAW2DbHndILVGNO+vexPUgSig3jVY2Hu2bGuhlDkxI372Dp4gwrNM\nlzZElu2xaCfdGvexx39o+NOUQJgR2euj+x6Q48SqjrBtKXyvGmDSnJ/9gv9M\n2FtxC0Bs6ucw6Fyojw5vqaeaWKOyfQ515QOk+tQuTBSEP9ffX6i+lv6VB41i\n0SlII6nevHnCDNi+YPG1O4QxT6JXCR5XzM/CxuvqMwfP5EEswsTwUEzoG0lY\nvG3F5tq/eWCjEHDcmp/sPGe+9rfDAlealUoSxMjDPvQojIGLYi4hxNZUVVTj\ng76Xo+/XHCkkFRIfcW+ViZ7l9LtXebOdhbKJsO88QMWpMqNBlyyCLMBO1Ey8\n/TMY4ns+eyvZEBfg64ionJqCEFWYnmKqeWhpA6U8fnerUvFywyxjE5qGW5lL\n3CapJVyNTCdR9xY4SSdzaxMitczMsGynqYIJLdnNoZFS0jfN5+fh5B5RO+ZZ\nHwP+vpJmt4xsK7TJiwdQi3q7sEhFquqYd5VijWx6p1MmkXHWsePOTtoKoKe/\nAj2myntX9GsEWl49+pL+OB3HyVM246V5N7sWfJN2gO8Z3bflN0pSwwCTG2Es\nprTZ\r\n=X9ga\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"03ec88b3967ad97da4309b1dee0b9764edcf89e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fd608ff66.0","@material/base":"8.0.0-canary.fd608ff66.0","@material/shape":"8.0.0-canary.fd608ff66.0","@material/theme":"8.0.0-canary.fd608ff66.0","@material/floating-label":"8.0.0-canary.fd608ff66.0","@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.fd608ff66.0_1600352812529_0.7906794108931876","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/notched-outline","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.3e435ba57.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fca2d62b825e689625e3b6e355fded45a043d85","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.3e435ba57.0.tgz","fileCount":34,"integrity":"sha512-jbEL0Mk9Cs4XCxvZS6bgrvot7C1E/bbY+5EHatQ1sVJyMp1Y0zQjHvG5kfJAyFKlSXaKaZE/2ht28GKSB9FmdQ==","signatures":[{"sig":"MEUCICbRXRORsRoQnrowTuqvm87Qf2m+/Cr0Q1agKejj/Fc2AiEAgT+TtqqAx0WKDQrmNwLtancv9QB0+5kDOSmVY103+L4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3ZACRA9TVsSAnZWagAAWkoP/2CqIEcO7QDKHwXbkzOq\nrdtldNZMvtncpbKeYMiUbyLjkJo1cRmoYYvyzIUgTuajPKRpsDDHipGkyhCj\n8XtTuz+acVi664KqbKBtjYJNcd+hE+ImszaSPnfiw6OomCLkVGJF0c60OnsK\nuJkNLjOJMfJbS4AN+HDbIuYqpH+tdt+Aq4MrUbpaNErpI88HDZsiiA6nGD8z\n9ShiaCSO9kp5m8+Knw9pTlCvA95F4YEaCdjLyJm8CGD4x8hVJd4d9NomTopQ\nYKW5892wYAcUl+lV1PvCZ5JMlYaBD7iZG1i0ctRt3bffn97okm64WfNDB+Qt\n6tuIaN1Lzsi+AtE8fW9mHzZ8tlIkPQCgr/6VOQHIxq4H2OoilTp0XN3C5vsf\nnu/gX210ffPyIXPyXI99quXlUUOb9Fg71afhkBmycGADgLpgyExaK3ylW8vz\ndidBNXZETrpV7V8NquR3pJFR+YcoEmXF4FcwwvIywCVMn3XSiiUWVI4fCG3G\nMc92dyxDMpg822aZD1DstcMK/gktNds8lWPXKriknghX64/QmcF2eevGvxBg\n64XR9wOYaSBVcejmmffAUAY6OUnHvQDsN2KoXzafjcwtWnGv/iZ5ICPeJY5a\nct6eacW4tfWqwieSBMOYqtyzxbYulr8Dj47iwXKwetUxEYP2Y7X7PIAKPmR/\n3mSa\r\n=7ntk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"15ff2ccef4cf94fbadfb06cb750ee6de035cdd19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.3e435ba57.0","@material/base":"8.0.0-canary.3e435ba57.0","@material/shape":"8.0.0-canary.3e435ba57.0","@material/theme":"8.0.0-canary.3e435ba57.0","@material/floating-label":"8.0.0-canary.3e435ba57.0","@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.3e435ba57.0_1600353855978_0.21141148835971646","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/notched-outline","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.c250ec52a.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79615676df2eb223a11650ec7bac7475702e76d9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.c250ec52a.0.tgz","fileCount":34,"integrity":"sha512-t8y4T9o7JcPOsL2Ap7PShVB/bnz/fOVHlOsH93Ua8XMhS7NdEF41gcOjiJO7m7TQUiJBIRU+unmde93qwQuddw==","signatures":[{"sig":"MEYCIQDUa/m8P8q5IsP0QTsgfnGyHMjG899LwAffzAHVR6NyFAIhAMijL/YW7+7JNqct+lMw/8P3xS+1OE7c573lwTVyJsZY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8L1CRA9TVsSAnZWagAApekP/jjMYMf2TS5eDDmubuqv\nh3WLTIYV4/92i6ikm5zhjoLGCrWZVzjddCg9zm8E6A2mmyvxtAe//yEsvmis\nikBvf5nv0LPoHNfoVAEtV17rp+bd4AKirOnktbUVy4XRkKCl7+K4Gx+8oeMy\npWWoqHqU49Ge1Pxfc1tr1DuUQLOzPYR67O16juJ6VV60cf/8ofMKIOi+Sk8J\n5T8b3WKKRiFrfeQirc3iV09tQOvRhFYb1zOVxQ4zGLFzYTcvlboTvZIqDmt7\nc87nBVOKaBimlKF4fBPECY2rVrVZ2AWkzpv3jEYrJTlZh12KP45VN6/OlHqO\nfARKMOopjNy3h5sSUqJNyGH2DKsq9Ip+lr6Nz67eaKohG6BW/GwN7Cz/Yk0a\nQE1lw6LE0aX6MZgShvfhife2SZHOKkZOtgRFImykDlyw32YckQ5v709644gU\nIwr0ICH1vXB086JBjZ91aMrSgYC1jAZ26H/mMvlc1w8/1AXqtvp3gkfON3Q7\n6p8ztCkkDKXUOZ9+EvWGZ/tzhn9GdYRAbI9x2/R1/9KemoihT90l4/UkmN6p\nnF1gvK6moGQH7P3kA9gcRhFd1ffU7Hz6o2U465A/Uw88eV9N68GNfdQyoqLy\n8tS9I2mNM85bxP+uLrQaQuSYg8pa3+3/qhXQuYZ/JD8KVRIWyXcrtP+Ijh9Y\nQXHE\r\n=C0cR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e214ca7cd3c1a65ab89d2fe2b4fc899aca418adc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c250ec52a.0","@material/base":"8.0.0-canary.c250ec52a.0","@material/shape":"8.0.0-canary.c250ec52a.0","@material/theme":"8.0.0-canary.c250ec52a.0","@material/floating-label":"8.0.0-canary.c250ec52a.0","@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.c250ec52a.0_1600373492656_0.4966103481712947","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/notched-outline","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.e34e411b1.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c54312621195cf7a2d3031bb5d3cef72cc2aac2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.e34e411b1.0.tgz","fileCount":34,"integrity":"sha512-8lE6rJ3LAxtpLL47Ry7Mlea9fmnVHyiU4NxEhylAtfND/n6Wp4ADQrmgesK7csDmaw/6yq3m+FcpcBUk6e7bWw==","signatures":[{"sig":"MEYCIQCxt/Ue0/+IKH2aLLkTvmf8EjHouCF7kXP04DjzSHZR3wIhALkGB3mrP+eThYVoNl8HkN5PWDAaGfQ8GBW2taqQHVgN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8StCRA9TVsSAnZWagAAnA4P/2qXHtxORYIQD9GVLsXZ\nu1iVOu3JXJZoCu5J0C3fiT8On/F7FQdB2V0r2CtqYXbSrcwOAnAzuXiLk+0A\nZAfdCnpWiPJFZh3LMoVeVRop//zxPmblsOWuS/z74uOa1t3F4v0kQmqlq0xZ\nSi4fonjrPBg0wIgpwiLx6JFOmSvixWwpblZTmhdEbbi7u4mPHd16k8dqNwGt\nQ6pbIhweFq9VYgNWh8leK3X+vqXrOBELy4H6ys33IyEjZodW14vX5W+DAh1n\nxMzOsHXCx9/5o7VqeeR9ycaBneeKHRsp3502UFePejbHAL7qKLuPCib4MFNh\nv7nKRtSFOauHxODaejXFoKFuvQvy6SMk+qN0e/IQLqH4YdI7EJ3MmQ09U8j8\nzPvy9iQerUtBuelaGVIlooQxTAN4d7E2ndJGk6mq3lfrV+aLfxPxRsA2UQgo\nG5pnOKOxtaDxrr4qFWN7mP+cTClYhn9/1Ai4VP1E1a8/8ZC34cmzXpegYAma\nrCMhd2cM7iUJU+MEy3RRxt27p31wIm6Bgn1Y135zpKutiArr9o/LMFnQ8ONH\nIcQhCIeVBfa7AVSSEEPJLkUjgi74qRIK+AvxVh6GyZqBaUsplbY6Q+JraET3\nofgGJiGZ3z33cJbYZPYhF2kbwgMlGObJJYDtRKj74/m4ZvWEmG/18qTNVWiZ\n3IGI\r\n=7qeX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"460337b237852aa88d59152c38df2b32b73792a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e34e411b1.0","@material/base":"8.0.0-canary.e34e411b1.0","@material/shape":"8.0.0-canary.e34e411b1.0","@material/theme":"8.0.0-canary.e34e411b1.0","@material/floating-label":"8.0.0-canary.e34e411b1.0","@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.e34e411b1.0_1600373932697_0.5058512799808066","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/notched-outline","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.4e9343929.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3753f3afd06bf09a2458da1f6875ba43fdf6c8cb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.4e9343929.0.tgz","fileCount":34,"integrity":"sha512-hvTcLR3z8cNxqbmPbwjqlVZ675L36g0AxFv3UONM/LVxN1P3ksmn6NqB3GgYa17VPMZHKRMSPiICZuJTNaeBSA==","signatures":[{"sig":"MEYCIQDyXWN+Y/KLAp+qJiH44BSD/U/ILnFKXxZkJNT3KAl5WAIhAJBkM7MUyA/riVo3rNcn993eM+xcA1beu2fIKKrfHD/x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8qbCRA9TVsSAnZWagAAHzsP+wcMWfa83CoI7VUIQ3OP\noXLn3gCAs4pVND7PMV7lsAzSh6PKn6NBxcsA2znA2O9AArn+QrYOBxXDo7AR\nTXjUua4wGwme3cMFOPCoK/vqUccHG8mXzI56kCZ+76yAVHcdsfxRO1T9r648\nABpzwhwRP3LHUb/COCNfgzaBRMm0dZHlJwH48DCF+ubr5H8pomp4tz9v2ryS\nG/fNvSJF5BkV2sTJjD7xUwVj7Qvpaq9vzt1deh76FxKIS7DbWNuB4Ps0cwd5\nTlqhiYJjPToI8K9MNcPic9P61mwca/qV3ONc+r16F0zX9eusaKHzcl6Zt3oU\nQ6EWKzVOzNC15446I7Su35iXlhHgybz//SBDzcPTKJqzKg7GewgNtHRBkypU\n/ov66Sng7WSvtVYPmbymANXPYcG0f/R9b2hpx2iyokJnuqi/Rfh7HNNiaexh\nWb7LPmkHzZt+VDdIn+P2R4tNcFpyKqZo2UCHRy7DnbqBiYcqjWuCwWyJ6l15\n4coa4UqEbetucOJwQSJq80EuzSOjFgEKaFAi6+r4GGqXk078IGZ6GjwG9E26\ntJ8gUJ5Y8osrNWu5thcn8t427zpUdoMkpAmuQMiz4IJ5Bdrjv1kyLoAUpdBF\neY68tDVraOcdlX7IyLo0P6dIICPe6yMpOBGCTZ5a/cmambbT3wyMkIOnzalr\n+tQC\r\n=ByQS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7bab75a521cc7f81a2f78587d2146ac140e3cfc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4e9343929.0","@material/base":"8.0.0-canary.4e9343929.0","@material/shape":"8.0.0-canary.4e9343929.0","@material/theme":"8.0.0-canary.4e9343929.0","@material/floating-label":"8.0.0-canary.4e9343929.0","@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.4e9343929.0_1600375451097_0.3265538660260612","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/notched-outline","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.4e5c350c2.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ca82838e5b9a9ca4ca2c777785f37a37810d760","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.4e5c350c2.0.tgz","fileCount":34,"integrity":"sha512-e4l0i+6YRbtkoIgo8prv0Thl4OQ6lZHrk8k+8l6bnH6r48LaKP5GXDxIKk2VcyPVwdyoZsSStYWz9nsN99JCyQ==","signatures":[{"sig":"MEUCIBbwI9slQKIpbk/HV0EZu9MYDj/0ZzDgShMNyAGzdCByAiEA2BlpY+sVUjbawRqGCjRV+kkRsBF8o2Zu/5DiZpQu40g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaRflCRA9TVsSAnZWagAATWoP/38kj0N/9V7wjVZDWV82\n8DtzvJPZYPeR7ugBYQ8Ydoa193YGumuSZjZ6fB4b2tfXzR8q6wxysldvITD9\n/BRKfjL2CuEy5Zrdd0ESyouwRa6fU4szhq8R0gGTUNpLBd6nqSFQKL3LXrLN\n7QR4rzluHDHoWmZKfPKkF/gnodMAbZ/3CfwJ3hTi+MzvuWUkNnuW/n+KSH/l\nyPcT5ImwHUqSzf+VSL+jgLdhPBgG1IS6BrDUULmt0G+zMUYpBY9c2t5WLiUx\nH1qrAju7fNqhnwvR/NtTOj0BuBk9O3XLtzhw4wetzIcl0uwLPECvp0ScNmSX\n+3FaxYDAMbh4Omq4jbDc25PboL+a1S/SrOawCqaO/Ug3kdkIakGq84bZarxs\nEc4hw3DHRSbsO5bWXjbvURC0AzQEFdh0yqnVauRfCsN43zC8o4QE/YsQFJ/K\nn0qUbUQJFoEXnsvh0+2aMX7BoR14IG1C73tdOeEKEKZfxQ04vyfQ5i0WSutK\nDd4qGNCoWnUXfxUBNCSZHN4rP61Ff1nkaAAgfgzv2Kp7M7RL9plNEJFSjfuo\noEBInUUbPbpd3R/CDrPAj/nuzIrEs74M/smVrd66+INlk0jjcyYANX/z5M7k\n9RdUWh4Ih9nNchWYnGQKoFb0IA3a+WHaz8oqbqHIinkfQxnvZtVpZrgrohEu\nLEaX\r\n=j194\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c753481bcbad808064a366112868670fca5381f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4e5c350c2.0","@material/base":"8.0.0-canary.4e5c350c2.0","@material/shape":"8.0.0-canary.4e5c350c2.0","@material/theme":"8.0.0-canary.4e5c350c2.0","@material/floating-label":"8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.4e5c350c2.0_1600722916632_0.479770230667631","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/notched-outline","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.16c563ef7.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab0f298999ab701ff3e320864818ad960e2676c8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.16c563ef7.0.tgz","fileCount":34,"integrity":"sha512-lwCBpGtAydQg8cY2t+P6ty5tBNC9a64JCpE/lPTksEL6Cypoio00Ns9K7pPhGun1hNZvPT4FF12PpvkScIob+g==","signatures":[{"sig":"MEUCIB8rCDzqhfcyzQr2C1MZH7AIwyiank3Ru/XSliO3aEvEAiEA46rjHa8h6h9czjjbBEmxMnheau8amR3aX8qwIe7DUQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalTMCRA9TVsSAnZWagAAQHQP+wXDkAazM7pbFxj69LNc\n4D7r1mQOszOiNzVOTYZN+Iz3xBC03t4IJHdvh1gxMWObYe9WuWLZHS5/gbIQ\nRlldVgQhGKDwpXHGA9YktUKRmWCvFHMq9Tp/hRTXrrzvFJPr2wfKPjziNWpO\nllpUTV2Z1YoDjYsGiVbH+i41ANakVZp3GxcoB+vh9PycOeTcwLvki6PvvYMs\n7zq7iItCVQHzHCYUSXnlHGKWZkWOdCZHz5Snt1AcA5X2+g9WqDIvcxxWMeI8\nGd4EPlWa/wvML/VrZSjRNN1SU1UW3LgT9Y915aKCOgOuhgrSPMCs78UZkaxn\nz862V71u22ZssKY/liiSvd9fVkE0Q6JbSSu2Y8kSJKyL/g1ef/5n8OiJyfFi\nXyUwntITgKzTG2DJIgEiQyTagyR5zVUDc0PK+1vQbHCxvFPKcnvLt/yCOS2l\nlW1wKyqLroVLQGzN0qh0VoprIFCYNO9lIisiZzDaIE3xQIhtW8UiaJsvT7yK\n1y07zTTzQiJMzaUP5XNPKwYEqhqqgqHWWzTXv+eFKVJ62IRcCu0g3JBgb8RM\n7eWNI3cby9vutaSnalQpAKYNHLz6VK0dZefckk63g2onz0r3h38RyNUCrc39\nGHhS8/QtiXLh24OmZNwkMfHpKTOzouSG0/Funm1vwKQtHiH0rIYo1UmvUSYM\nFOTR\r\n=lkS7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e3abdb235aa76184bd5171f68c237f58b8541f7a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.16c563ef7.0","@material/base":"8.0.0-canary.16c563ef7.0","@material/shape":"8.0.0-canary.16c563ef7.0","@material/theme":"8.0.0-canary.16c563ef7.0","@material/floating-label":"8.0.0-canary.16c563ef7.0","@material/feature-targeting":"8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.16c563ef7.0_1600804043824_0.17336550013711527","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/notched-outline","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.fd8af3d43.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b3ab4ee8e8f6201cf850ea2a889c5d7c82e3ba1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.fd8af3d43.0.tgz","fileCount":34,"integrity":"sha512-1xg7PTDvlHJb0QSR2L7GkAWzgEGpEtelGr1yc5X3+xcuD8KcD0Bhc0QoNj0/RmB6HSyiC2xwX4N5Idd2XpVtcw==","signatures":[{"sig":"MEQCIGxg6vf5PshOA3nM76hiHFvMZxkKMkbeBYeBtSSCgaQgAiAMrcjw9ADya71Vd3yGdyTMK6tWV5dmZJo1HyvhSQf9aA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6MFCRA9TVsSAnZWagAAAGQQAIL0hLtp6i7hfy1Lp2Fl\ngr6L/JAAIZ6HMWh7lLPXlXNN5uNbq7JmeKAGusBBaIkK8fg7Z6xI4Rg/RBMx\nL4BNMmE49jBArMewBTSROXNHCVORNmCaXrXUa2+x36gSiCfOcsqjhnDT6yD6\nRcpaCJ3nmdk6qmR6ddWqzw/vfKF9wdwqxJBfRaXLjiZDNefgka0/zW2KsuyB\nJS5eWkI/S2gx3K7OZBv6H891I2AyuPvAb0gYrV2U05kSMzOUcb5HMaPEvEIl\nGlZTxraJDOqQfQP3h+Ks14qK9qX9uOOi+pt2lkf663zu9Pu+nNCS6mKgqauv\nLkXN1H1F4h+vbI+8JG8NLmp8ZsMvJlE4d4H4K0LFeCKXbrKl+i/WBjx0dtGU\nQAlmL9N5C8CiezyCOpLKYkigxQ0dk3mk9vbuKYiI7jlOCxxfVRoalsliQ5Mz\nL2P17sWAugM6yQiXyDCYBNrobG6jX1p9zt+TfsaBF7OTG1SSpUyrwEbQVlbm\nwozepknW0FAvgK8Wb3nuGszpWjA84ENS2mqEIJ+5F56sT1QdIDoq3R8FhJ/1\n5EWoa1xFPfSTvgrCBZLpoaM0gVsaQHRXrsPIOLi7Wy9RTz5t+Km3iYY/eNas\nBrwnjNTsfIFVBWLCSHm9gPuVggI/pEQaDun48xFHCDizHTkXXP1auYaVwJD8\ng6qT\r\n=JHRp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0f295a5eb9518e726dc271a945985bba278bf9e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fd8af3d43.0","@material/base":"8.0.0-canary.fd8af3d43.0","@material/shape":"8.0.0-canary.fd8af3d43.0","@material/theme":"8.0.0-canary.fd8af3d43.0","@material/floating-label":"8.0.0-canary.fd8af3d43.0","@material/feature-targeting":"8.0.0-canary.fd8af3d43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.fd8af3d43.0_1600889604643_0.263805843436149","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/notched-outline","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.d4cd83a85.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e6987e7cd43b31dba2916659b9575dc094fdb8f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.d4cd83a85.0.tgz","fileCount":34,"integrity":"sha512-oj1UPmddnS9dbPvOSNzKDKIu0NFLqM+n8d675lE0wWI/T3/Kj7odxsS5K8/GT/L1C8j+J7e7sx5aPe4eaFFrSg==","signatures":[{"sig":"MEUCIAgfFtIEbs+kPU3WuxPlLPXv99DKlOv5lcq13fZ3y7UDAiEAyIY+W769ucQl3/UOe6ysy5cCo8U6rtA0cEWv6tJ4GA0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTuwCRA9TVsSAnZWagAAJ1AP/2Inf2v8XUZPVO3FP7D3\n58vqzDECxXVtHg9Tmh3J/H6fvapoZoEGRKV5wHuPbcBtlX+j4yq3vS3gu4SV\nzv8L0iWqBaKI6HHmBMerbX5xSdgqPwWDSkNITV7PLv8av/VehOOU1fCc2rTD\n3QY8Y3J0AYEKQlAT8WIRkAap5wlTFt02S46klh64PD+q3v7HA3pcKPDEREof\nxfSZP7IwqQUbaBydL/XwXmoiQyBlfWu6UODTQT5leFIp9Wl3WuCQ5XoiVtq+\nJ7S7v+MAlHdCTwKKs7TjQSi6GYz33ZuUSKOJYxT5s+1PkFGdJ1uQIuBjUOvx\nZTbo4ApC4R4OrMfKugY5jS2wzPJXZeKq797mdlcOd8QdbzmF4K6bEqP5ChOR\nznEL8ieWZ6hD96iiTFfeMm4Pz5TTdmJQcq40cqt6I/2Bh8wFNyam97KWJlGZ\nITBA1I964LXY4nYijne77V6bGXIC+ZhleYyFH1PNErJUGmSccZchz0ke9RS5\nkH0yoxAAjpy2IRY/SpFrgjGxNKYU/B32T0Sy3OMXGw6MwsZMmjKbGrz43vFx\nbPwBHreLAVx53BSE+qp+/YR9vwEn5+9918sQzqGc3/xBoQzpMlPaSbf0wN+q\ntuf3LMB+X/uQvdQ9KHZ/izS/UqtVuD9cbwRfpR1AgaLClqHJJevSRgWJ0Cmf\nZdIB\r\n=Mt+Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"80cc7639dca83570a37de4bcf4d7501246ee8eee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d4cd83a85.0","@material/base":"8.0.0-canary.d4cd83a85.0","@material/shape":"8.0.0-canary.d4cd83a85.0","@material/theme":"8.0.0-canary.d4cd83a85.0","@material/floating-label":"8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.d4cd83a85.0_1600994223703_0.39948488622060085","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/notched-outline","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.199aecdfb.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b4700651d5ed97fdf4de73472bca204bd391176","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.199aecdfb.0.tgz","fileCount":34,"integrity":"sha512-eu2PQnMj8VeJ6pdlSss/HNBsPCRIdNkn+KCmNwvyGGDWWgN7I8jMR+GsKnfz0OMXvQUe/TgddyhiEJbyggMZTw==","signatures":[{"sig":"MEYCIQCjjwkwAthNZfBmleqAZ0RdfkRaryK5rgEUaoXir/RT+gIhAJUh47nuCKuMQUUkQIVfEGUEVkQ23ZT74RsR/vHD2baM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhI6CRA9TVsSAnZWagAAdd0P/R0mA5qSpmo5Qbq4GQwb\ncrEC2sxgTlr06UOU+z0PjLeLVBVSy123kDpPNqROidPPQKitXeU3q/ia90uR\n8U3pWy6f6lhrEkxnAlQSMXuTbCupLlHKFD3wL1HSwjM1ArT1tH8gskiDxvXK\nEDFbTS8A70+S0uAGUHczgX7HcFixghUtQiExUf3aAUeDegM9pgg3wm5tN3ZK\nFL0pRHnZJypcbfiko3skp9woYRUXPhaYYT0KiRhEqrZC4Kp7CoawiSUDidWY\nxMGAO0mhgXYdxqOa0/YJDBoTZT6cU0Z0h90UUigEtGBzVJEZXV91D4e2tFZW\nQp5PmDsMWztkcs+V0TXEHZ9gtZPK1aRAy/nqxyloU9Ae4qbOrCXDZwvGCAUS\nZhDcz7eRpeGYXUDRLvRcmUxi0CmsVfF3fVDDytfdI3zGab2K86V+V0PlXP6I\nWjqNLKlnlXsLMUSz5Vi/xbzRSVZs6pbK/e77tgam3jvziHLsIPMqU9o6QF2m\ngnTqjBIbeTddk1kZo1pdnf7I8oHVdRV2fazbb4KOSDBNCFVG4wjvb1LDSxyp\nb2FJK3tGexJKpeWtyIvZvw5WuK9seVh0lMH7SjfXfJdYVWLabYlWajlpX3Ic\nak/3IHhBne8myJgEolFtG2A+Ny5o0TtAAUuK0AZfRdgczm7/k8kjI+JUwg9V\nJc9N\r\n=IjH4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2ced06dc0aac728f58cce508c7393aec959895d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.199aecdfb.0","@material/base":"8.0.0-canary.199aecdfb.0","@material/shape":"8.0.0-canary.199aecdfb.0","@material/theme":"8.0.0-canary.199aecdfb.0","@material/floating-label":"8.0.0-canary.199aecdfb.0","@material/feature-targeting":"8.0.0-canary.199aecdfb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.199aecdfb.0_1601049146351_0.13757952868623313","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/notched-outline","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.38ef4501f.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dac4ccf047cec4a0d09a133598ae728164863a45","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.38ef4501f.0.tgz","fileCount":34,"integrity":"sha512-21WKznQ9rX+2843munreTNJg28TwGS7MdTFhEtTd4fhK9XABReWMKpZE0x+inGmNkO/nLw7S435d0LlzQGP09A==","signatures":[{"sig":"MEUCIER6sPI5sH5a4oOwupDQDVTenxYDUlyLfuv651ax5m1EAiEA3vb8AXFMJhQXjJt8eVsFa3UM8TCm2kM8NMeKN6YlPOg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM2rCRA9TVsSAnZWagAAJCoP/ixOMmPadphsbPLaemN5\nflXdsYvBJU3xYVwH5GhEuPK9UwbjyJsqrIZnjyboR0aerL5VZV4UGqtBdvZJ\nrtFpr3h6x6MMpTx0ojw3YzXMdfS4NI3ofM8gC/9QP0i3OvIfHLFjh7MV5Rht\nmjQPUnA/UgGv/LVVoSs8ldlV1+TBzsQxyswrnYJpO9i4Rf5bGhnDT9oenhZS\ndoOKhxM49xrsYCPwMQwTV8Z4AGmZvmtBCtuoLawKWJa17pgXwGh1108OpQ9z\nPS4QLjoU6ARLFLr1tAe1vujBQl25jF3L6Td7tmaIRUVyo432uJgxLYjFWYWa\nHolH3Hlo0L9suD/5Lko56i4M3c6VF/hEMatyRNpPXycJsa9mCG72pyVTHHVv\nQCPM1XT5eheh0wTrEq0MRCl5BIvLilq6qTrhhx0wZkWgxVsgfmspR/krZrQl\nU3kvlnCE8hYDnvc5k66SpJP7k2zBXmVNVw0YmHQ4pHJ/k97hscAHDxulMhGY\no193wMxlmAubBk9f2klM/y0mWQrw97JiepsyFc1ZfKMKJwVZK+PlX1DwqWlD\nt+0UqN1Y5J+7ipNFc/OSOQ7OLPfVpDkfHpJ4PFeLmWZLiLQFMhwdI1jHZjd2\n3jU7K9QfSgDyWc/bVcx2wL6fWARrYwhZEas4CY6qfbVEp4sf9ThTyaCvTPED\nps8g\r\n=fw9W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bace3094edebc680b12a257aebfe6170928076ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.38ef4501f.0","@material/base":"8.0.0-canary.38ef4501f.0","@material/shape":"8.0.0-canary.38ef4501f.0","@material/theme":"8.0.0-canary.38ef4501f.0","@material/floating-label":"8.0.0-canary.38ef4501f.0","@material/feature-targeting":"8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.38ef4501f.0_1601490346344_0.9075470520713351","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/notched-outline","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.774dcfc8e.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbe004b65178b68fcffdafa91b4db52d856f71b0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.774dcfc8e.0.tgz","fileCount":34,"integrity":"sha512-7Omh+Av1VEtZLP7Mq4VaK7XcqiyjJGp/MEzhgQNVKoVI4h0HmI/DzyamQy9JKeOHXJOhxf0f65RQI9H/Y1bl/Q==","signatures":[{"sig":"MEUCIQCf4+kpxp8WahoJVOLZVeR8UUB4dDBuudabS50/kJ4jAAIgOmaLnCHOJlEiJ8/uQ9JrysqeP5afssYPjo6Pv0hwE10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdaeKCRA9TVsSAnZWagAAeu8P/iGxxwSkiOvOXrTL/09o\nR5NTNyWTgYkCN5l1u52e/vPyXGp323ln6TgqKTajxmfvs8i8TcsG4Yv0b/Sq\nyBc3NZOZUYaMbk/uBIuoAHBi4HPjQF7AQe57hjXBfizS3qwdWOgPMK+5tMo7\nZt/XKA4Tvojs/IMrc9+ejonqHzr+v1uNPlADRo867iKg5hEuBXJJRYolcO87\n3JlWGuLvIUYufUTGIOFJ5vtom/HVGx3C/2yfw6sfSqHnAz9RAKB+gnaOpG9k\nKoK5mGAbUgk7/YK2x9NzncRnk1QhTVC+j+z4EZ756w3epjyctg4K1Y+psw4R\nE/zpnnBc6HER6NrP64G0qIbBP/DqRtdOmcO5DKTQxCP2PyxuA5T3YQgVY6E8\njG+YZbBcqvJtibPi/z4zYjD0E3XT0BZ+Wy6MD+XcTSul8c0HdPviLQhFqHoT\nM41dglFVg5lN8+H4MscB01193dxCzHqTSaXjBXCh7LOEf91ecEnkHhNStyF7\n4eQv40ufRZ9PG+cEqm9tL39PE6AiDlGqwdKLM3N1I5c9GNrrCiOiDIivUVA3\ni4FDXltCXTZB1M0AsWJeklLe2sIM/HO17HZAoWMVDdYEGpCkJWv/8/1RFVSK\nZfRepwKS/mh8uhLVAfmX19StYT/i0bCeh+5dcWwSUXhlwxUFv54GlcvPZpvN\n/M3/\r\n=0jII\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6c37b80b059fbd4c815253f3a3868578afcc1afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.774dcfc8e.0","@material/base":"8.0.0-canary.774dcfc8e.0","@material/shape":"8.0.0-canary.774dcfc8e.0","@material/theme":"8.0.0-canary.774dcfc8e.0","@material/floating-label":"8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.774dcfc8e.0_1601546121922_0.27991523129528195","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/notched-outline","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.0f60323a8.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"692ca1aac8849a24b14d3fcfe3d25c9bbeb300f8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.0f60323a8.0.tgz","fileCount":34,"integrity":"sha512-uVqMi+WXyk0g8GpMOlBh+iDpFO7Kevb/8yFiTre1wXGmLtyK7yMFGxN372W9KipwTvsytQ1M8JIGmr1srt666Q==","signatures":[{"sig":"MEUCIGkB3dOu43ms72ra/MO+j5mb+fr2cy5B0/lTwWxuIYzSAiEAl/ZdF634RKMcoM0vEDbz6/nT9jc+chQWaKaDsqngu5s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4BxCRA9TVsSAnZWagAAPO4P/3S0rh9v1wy6xcDL1vQj\n4heJRz5NcJfTYGft5HGhxoWJnkJVfVtlGJ6p1vLQ/PBAakV9UPIE5hPUPefM\nkuqksy895To+Zo9qj1Cd7Ja+6Kl2aba3Af71Qc+9CAA7tTq1UFOSufFK2inP\nxu5c5h5dAhoujkryY2oJh60EXf1G23AVnMNZQ0xP5e3B9QYjWm6WqI5KJFN9\nwHqLiXTfT3Iivs/5cxwytrrzdQjPQoIPFKLfsQ3y6Wn6KKeSINLmIJFJA5C3\ncSXUbHAXmKRF9qh4uJX78yIAu6xfiRYWqZ1XyHFQiXY8O5xno4n7R799uz7G\nW4aOTC09iLk2TmlejqlmxgK2qKekUdt4FXdIEuqT+pXuhqysNJVL2DUcY0TF\nAa1XV2jdoJIJrz3Xe/ik3f6nUL+PXU1Aai8kBqU/Yuk4XR8dHcsALdeLF1zx\nzsFToNQepCNc0fE52cROPWsXytegEyINq8w+F73ri0bkIa54GVErXnQdFrJr\n3BbNR96i/tQOST14g6QtXKpFrwtSpm783R2urYhgQL99/hwMvkIlHInNsSpY\nNu4l3rdyACjrCQl1HtlviXpDnOTkLQBQVaI84cc4qBKH7qPwovZ51RjGlRHS\nmQTmkBFOrsvC+WXKTP32wi0owO3z41WQ3Dh4gitZbgFxRPBHI0dQvCb1lA4m\nq4fK\r\n=59pV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"edfdb55487a31cd5f5130aad32b3fa8f369e6d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.0f60323a8.0","@material/base":"8.0.0-canary.0f60323a8.0","@material/shape":"8.0.0-canary.0f60323a8.0","@material/theme":"8.0.0-canary.0f60323a8.0","@material/floating-label":"8.0.0-canary.0f60323a8.0","@material/feature-targeting":"8.0.0-canary.0f60323a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.0f60323a8.0_1602191473514_0.9615254812898144","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/notched-outline","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.d71622574.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d360469f972e2ebef7a2120aeb867c46ccb1c6bd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.d71622574.0.tgz","fileCount":34,"integrity":"sha512-Q5RpOUbAxOPeMQHTc6Co9fHXF2DV5o/XPNOxEbvVpTRTTZog3jeuA9kVmCrXJf1BnvVdOqVWcIteQ+LnC17jZg==","signatures":[{"sig":"MEQCIA3kav+kllHFwSm4/RaGv3RRMZwAqywcvAh6efFRnd26AiBz1Mvngvh126VOe9UEs6QAeaG6xKvaAOQgzIRP9xvvsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJC4CRA9TVsSAnZWagAA6N8P/Rc0E9OSbNy6m9lhYi1X\nYMpkz69pjaSLDL3QYyiyO1A1TEEQ3sHMvXgBsQZkVPXyHE72374MsM1sHqAJ\nOzL3tccGfKIjULaH17q9cT0VSbI6Br8VwkKvtMrFnKgpgz9WFmKiwhK0dear\nQaqPFeQpnnFTTzlZBM5VcB/xpP3uFyQlFwrZ0uJppEdB+yCMy/hl2zUK2eVE\nImAGJF6K0mtNzs6HeDkWBs7z7NKV2WPQpazI3KdIZnq0L9a6hRK/1SXpA1UK\nTbp8be3Kj3FZEAgYwmbQUe07yIiogOoresaKHZAje1KEuEtlP40+8+Cozkhu\nstZ9u7xrARQL5EaHnOsOmR7aF0/oHbvLbTRUkoF4D/tvS6ir+WzKT8QZETNy\nDTmyhYetyiKX8uyu7lx6Qwi38IGw3gqkRgDOd2WABMnO08Cu3PPcN83FOFND\nZZCJsNSTtvEi1BNbWb/wNPqOWYBsmwg4eRAhpODPjckNNIN3hCdarQD6G3p8\nhyQciTphF04bUngRklmskTxbjzfCmFED7DEXJ/T/FmYYZhn1dIRnQAfDqJla\ncLw0bzdE/Em6Swf5CQUjs7i3i4zqsZQowkMs6sJwVGMYA8kmsjJYHgEzqqx7\nFEW6ZkWQIJrGZ1lE2ptFSI/NIY0nITPnXvGInTKP02toEuMgouRvu2lCzfEA\nhEEn\r\n=wZCf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"19a45f4824305f22d61cbf9deea0fef067dea3e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d71622574.0","@material/base":"8.0.0-canary.d71622574.0","@material/shape":"8.0.0-canary.d71622574.0","@material/theme":"8.0.0-canary.d71622574.0","@material/floating-label":"8.0.0-canary.d71622574.0","@material/feature-targeting":"8.0.0-canary.d71622574.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.d71622574.0_1602261175825_0.7598948975167219","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/notched-outline","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.7a9afaf4b.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc2f15e3c5ca8c541c0e62fbf837ca081d4eb2d1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":34,"integrity":"sha512-1jUfAjcvPLV4vwCFFdNaaMDGycVcYEqdNvC8YQGZ+Lc6rkU6MRT+j3vvWdLUDJmZPbEWwqy7+XmMDj9rXSVoFg==","signatures":[{"sig":"MEQCIAHrMsSLc67w9vzDqEEQ73ZvgDqncfKUctDu+AySxWi6AiBM6cGM3ui0OdvcYiQX5WH6fXQ1hy4MedCkGnUbNPceXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOpLCRA9TVsSAnZWagAABLMP/RjGJ8AHcOZkmomRrlDv\nFk4DTeKhU3wwaQL5DSbhBqk1VoX8KTMKl6WImKUCfjGnGLSPWzGgt8Rg4Di+\nhJdYRTUDquR7XSOKqqlMVDOA/6aiEMEX634fMZp4kCIZleN448Xju/MrRmwL\n1ZuxidObJtzXcyvyz1OXdcP9KVRjIhwkj7zNgu4+BaFJlpG14occqqrjQjs7\nxPvtk7yr57jlxK1vrjpNb/Ytb6xweY9caAE7LSwxTMFmn26wcnDSmO9W1NMR\nBd5i40sJZyGJzsLQd/raTTnvPjlXYOpPqhlCYqWGMjFr31fpR+AoRLGwft1a\nfogY9vmryvZuzIZ4IQoMxoHZMM3iNi9QP/I7n05AHgHhFoVLsV1U3z1itnU9\nMAwZbhxb1uTZNPGkOJLXRCmg/0hP3rONje/nqKUBOGE5GkS+WWQjtoPB3ZA0\nYIZKABPTno70f8vylAsei3uPAxB1etLXvqQ7iFbmuCJUj5tzvG/IMtsv4qpO\npOgzZfuVd5rSm3q9GLFeClvZ119qCI9SythXe7KMnXC7Bm3iORawPSgaG9Gp\ntKVmQ/RHZ85L9fzb3Buy/CDoYAkl1h/GFSChfUFHGFwX0I1oz6d7IRqSwV1j\nGzFhjNk+ojJKNfiYgegmXkJKPwxHS+y8TYSU4+/QOCfWKWxvwISxCqoiwU6H\nWHfl\r\n=GpIx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"137d6fb8ed93c50312981c75fb37199ad460dcf2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.7a9afaf4b.0","@material/base":"8.0.0-canary.7a9afaf4b.0","@material/shape":"8.0.0-canary.7a9afaf4b.0","@material/theme":"8.0.0-canary.7a9afaf4b.0","@material/floating-label":"8.0.0-canary.7a9afaf4b.0","@material/feature-targeting":"8.0.0-canary.7a9afaf4b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.7a9afaf4b.0_1602284107196_0.15799032021643344","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/notched-outline","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.8a39352c8.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ec8807a1c25f769c7401c4fd7aeb3e0ea936c63","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.8a39352c8.0.tgz","fileCount":34,"integrity":"sha512-ra0EfigVkuaTVRTm+UNkIHcKG4kyt8lKGyUzFxD1ffy7ZQQeI59ZQkFbR6NMxxqxdulqgqJLXJUYBgpAwk2RKQ==","signatures":[{"sig":"MEQCIGbGMQhCrmRNVcyapNJCmkN8eVcfBaiEraB6GS2Fe/tuAiBiVJb5KxQ8VdpdbEp9rOepfyT34jY3ByVLJHqR/c3KkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJa5CRA9TVsSAnZWagAAB9kP/RwVBq6XXaxk9xt5YkzY\nvHtc4BGqRIXRcFlRK3uBt82ymUWKNBonXDIq3gYtCmC8qsGcewuyx9X1WOvo\nnxCy4VovzoD083SkQ8rK29aVAjoW/GPXtGt7pxaRDeiHszxGGG+DzlSVEqEO\nY3IAz6nnA4UVtGP3g+jw6uJtjG+ui3Tz72T4eR0AfCV14rpI4518fBeXdP6D\niTiHsgMHnj819WK/zdeZenWxDuzii1oPINmz2pL33L37r3xtDozNtEBQ4Z3x\nuVsxzHmv5mFAPssWSLihgD8tNqtZ3yjsdAOqXLmM3RevN6mf89uVFeDvj9I8\nGvwnDvo2GkGOo8CafyMX08G4oRoy8LcDAp4gPACWKaArcayA9VL/zUHEsy4z\nyq8g/MehrUMcyLsK9fuRcr1yQyzzv/2aYlp0Ig3CjAVR4WiJ/3QH/ErR08dE\nhuxg4qjW3rdySIHG0C+krpG4BaxqZwHM0mATGY4tQYWywXmzQB4QFQGlKHI4\nzjKT+n342QKUUdaeDKymxxCtUmKOzX8Ght6BZ6XHY7GJvESpK6v24fdtYljG\nCmyNH5pxKdveFHhGLSfBkeJHREpsp83RUnaICHXFdONvxbAnRyUU99Ve3yoH\n7cGxu0tv+AbvvjMJXIUWGN1O27CWZQ/I1vbN7cRaa0sBAa3onmATnQkRuSjX\n2kCt\r\n=gHWf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cedb8cd906516b8d460c813039351e951b960c50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.8a39352c8.0","@material/base":"8.0.0-canary.8a39352c8.0","@material/shape":"8.0.0-canary.8a39352c8.0","@material/theme":"8.0.0-canary.8a39352c8.0","@material/floating-label":"8.0.0-canary.8a39352c8.0","@material/feature-targeting":"8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.8a39352c8.0_1602524857305_0.31661022386873916","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/notched-outline","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.790ca85fd.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3c31c4e6be27a15605f92555e2db14c53174efb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.790ca85fd.0.tgz","fileCount":34,"integrity":"sha512-VveKqFUzVcv2bZyXOTLW/GYtLcp+dZ4SjWJiYPVpQmwhvPYKgVBeQPoPkdRAnxGVTdS0IlwDT2PhaE8uWNrEYg==","signatures":[{"sig":"MEYCIQCqNBucDra0+ZLmiYUjEVFw+N/tEfCsX1QQSYOQueOxOgIhAKKGnTV/TB6t/s/hxYbhaqP5Mw5oTYpsOBx/lfRxslyt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNFhCRA9TVsSAnZWagAAEmYP/iCo/1RjXewIHGbePWHd\nw+OUxcskQM3QEn/z3iEM9Xkp34ZP45dKvfa/rQwTSqKxDGLKWfny0YQ6+0Hl\nR9wsPGv79pmrO/nTL8Rs+f4W/sfMca2f1HOmDBsdSdhVAQt8JDwuaFxYcSnY\nPoHCjGDaOG4YMJrJ3WYuJ+IxOsihHJNL9f4DC+tz9VB3miKPqfH25H1dwKb7\nb0ly6xFuT8uWhUNhckaujXxQhUyjNAl3veN/M05BJT1fnXvfDqjTW/eOZUjD\nqOWfzn2rCpYL2/gmPjh+rQy6QyZsUhoufo3i7yxlqFDltt7AICG1tUernLDJ\npr1Z62jSdVdQdw7Q5Z5zbHdm/srfrppr0amhJuk1XYIAOoZk/P9vI1l/WLV6\nVYWPpbkeqwodI0ncIv5y9th4mXENQuLUDtWKLARp3w40b9wulyZfezBhxio0\n4+UROLkEnmBC+hg+nioQkSqRBpiGYrccKOaJsie+XwpJdByziKy6zSVbYOTJ\nxOzUjmchC2HfvNWRAakqpUQ+nfFNh9el7tMAmq9gTtnbYcFzpoJQgvcCPSwn\ncURC7250UPMZJULjhsedkLmDZjLC4wlFxjrYVPEfCKv6kPZtuqblG/dKp6/n\nMaOI2Dax9wzAmjgqRNE8kp40KDzDklHi40DgmIlbvEZLpGNkID7rz53rXN5/\nTyUM\r\n=uAjY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8971e891898c4a8ca082beda756a7b93097f858e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.790ca85fd.0","@material/base":"8.0.0-canary.790ca85fd.0","@material/shape":"8.0.0-canary.790ca85fd.0","@material/theme":"8.0.0-canary.790ca85fd.0","@material/floating-label":"8.0.0-canary.790ca85fd.0","@material/feature-targeting":"8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.790ca85fd.0_1602539873145_0.845441238750716","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/notched-outline","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.174c0becf.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85af4ff7bb9b9031e665e2722ca205f943443ce8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.174c0becf.0.tgz","fileCount":34,"integrity":"sha512-BjhPAwEkGfzMyb/fFhbf/wHo33DS5zUfhJmnabosWqOzo4OflaBim69GL73N0AQH4dSwsEeK+rJ3f/sP6Wj40w==","signatures":[{"sig":"MEQCIFOQ3sA05j2Eebl5/LDAc8nhC0iK+nJ9wWS8hDXByHhTAiBx036KMX8X0C+8UXhxQsOAmr90QyJadu1RbL35rexV3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl+RCRA9TVsSAnZWagAAhrAP/RyAYXNT4eQVbny/qUk8\n1yL2UO/cm0TpVPfjSWXnAHqigI1UeUzrK87Ef/GPRdIdYC6AYzyu7BE2OASX\niq+3HiQDFNo8xNFCWP+smyjxndQIfCFAhaBOB/P9lYbAMINQhOB3/kZzuRGa\nQ97QWfpU6wKvWU1vPCx5Y1CdT/GiYiCVUCoP4VkfVuF2HM4z5gZJ6ceNid8I\nhEV1Ox0g4gBLopzKh31l4JEObFgiAVTOYhgarjXLngByUKO1LdM6YiEw8mdw\nB4SwJlp6TKdaU4OpnSQHtYjypwTR0r2/fZ4fm/OWJ4PBA2OyscJWIT+h7P/5\nsmhlpfEhBDLZt2a6dA1MlP4TMEq5iV/IklO5Do3SpCPhGejPsknAlGPAcXDj\nU+0HL4xGa9LhMW9Lrq5We2sTJXjjwSnMHgRT5BVewiq5/aXabzj+KNpH3LzB\nlUkmzHMkIaD1cFLvIoiYZMb3ZGqG+Xq5XH++pcHghvUIkJah65oSGSo0NzFm\nAtqNTp6lCpZwnNMHFC+bpA42FGGLF5+W2jByHgS+343vxmVaZ6QtV/O6dUQE\nIelGfkC/bW5EMYADgWtcOrSIZpjxy/I58Q1Q3PZBl4EYlOHHfZNLJr9VbOlJ\nxLgbXT/8CQr7x2BK1GSLTRSe4oloXfCKrjttfJk6q91QbTbjCaeMsJDhaVdw\ntDDs\r\n=l8Uo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6dc7561b8695889178b3e884e84f5d9c3d59e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.174c0becf.0","@material/base":"8.0.0-canary.174c0becf.0","@material/shape":"8.0.0-canary.174c0becf.0","@material/theme":"8.0.0-canary.174c0becf.0","@material/floating-label":"8.0.0-canary.174c0becf.0","@material/feature-targeting":"8.0.0-canary.174c0becf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.174c0becf.0_1602641809167_0.7179728646337229","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/notched-outline","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.c71ebfa02.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64cb6b80e6e49fcdba17849e4c71dbe82173d7b4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.c71ebfa02.0.tgz","fileCount":34,"integrity":"sha512-iwfPFMsb8tnFV09yBStKYm1LaIOvzenMEjRZw9n0ajvflpZBlUnObcPorEhInl6H1IAygbqyHmd44sRPA+n6yg==","signatures":[{"sig":"MEUCIF78CTNvOe/eEaU5UiCosNki3I0T8AHJdoGnxhx43z2fAiEAoW8T3TGXejN4yeuRGUT/HshQZUb93kW0qJ2RPn5qnzc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnwmCRA9TVsSAnZWagAAtasP/32G+nOmWJAVFjQgHmrg\nrc12pcJrzQLDALB7WGQNGXl1f6DbtrqwTrWfF20LGr6rY80fl4trRa9RNFMc\nMyA4P/CBuIRKuALagRJCmImb/2w5SLSY9mwsKNx9l8NjXOynhExQe6mNPe48\nZAk+qYPuPwlQ972QRF66FvckdvDVL++mFR2JkrutaCPTPQWaH+n1/eX6SeNP\nt+Pg1fzx4aqux9ec9w0kVK2KIcV7cG7J0cOL7KZzNh873CHw30oOvuE4ZuzN\nZyRwUTt8VYjdMf+m5pOSUMqfeicrMsKhKHv2K4OA006MKr64e79KKG+P8Z/B\nn3MJhPqxLxHB1La1f5ZmOxDipe3Qc1IWMysvNsvpsoRWVHm02E74xLyeIpl2\n8F9Np6z7INEvoU1eRbOBcgWd9DiUZvrtI1trvbVtAARhOUV5V6WrSLZCvWbT\niioyJvRz7L0SeOqA9zoPb7S7TsfOIuXPk7fhWlgdWa+Z0Gt2Enlwp9g1eXBi\nktJ+9pboqOvAiXPUuFceYcr2Q9Bf3WTe7zyumfdnXFjBt64e7JHyb/L91z6U\n32f3TDBEKCyJhGUsotVjVKOVbQH2sWZhL4xx9wvu4tO2bDP6ZwbtF3fx0Xx4\nZSomUZUQ2+Vs8GoAe38zlbpmvQbYsFl0Q1ny75TD4Hxv5lMJ898hPKCODRDK\nxDVw\r\n=Me/9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d1158a184d234471c81501e838b409c54f591268","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c71ebfa02.0","@material/base":"8.0.0-canary.c71ebfa02.0","@material/shape":"8.0.0-canary.c71ebfa02.0","@material/theme":"8.0.0-canary.c71ebfa02.0","@material/floating-label":"8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.c71ebfa02.0_1602649125701_0.6298114913173789","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/notched-outline","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.2ab716cbd.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82ef3323f097ff9bd833a23ae4ea00c29393513e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.2ab716cbd.0.tgz","fileCount":34,"integrity":"sha512-yWG//S0NFS6QO5A3bFR6VFzkLNUzLpeR8x33pj40PJrAwtOODVQgkuDIYbjADylJMIA8iK68aFCs1gFcfl4pnw==","signatures":[{"sig":"MEYCIQC8TUNmk5Y04WI5mzfRhoLiKp2kjwRkJALnAd5lMefIWgIhAPzxkrC7bStZHenE1qA01r4wPGBa006kIV/m5FvGiVm4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOPKCRA9TVsSAnZWagAAsJcP/0flQMWykhmYmGw70exc\nbp9ATFCEfJncIxU47wv0EOA9wAMB3mg/+xltmiUxLUook0WfFU7ZhJtCzl7o\npZKE3BBxqyY1M7ep1qiYMj7ASP9RKJ+YbaOdUdPVvgzI20Eo6ofOK74GwS+C\nc4lisIjhOB8uAWK3wRrppXbQHE1xvrt7sx7Z/Acx/GtjUIahDSGg/zB2RYU0\nRQgOwaAkn9ICGZoVwUDOhjlL3HXJnCFIE9eGZJDJ85h3E6tgK7sFGb2V2bqG\n76xHkJiQ2++4fzRGB9sSosrtssuWCjmDjZXiEnEqXKn9ti9ArEaR1MIPO4JL\n+sOlP2A3h+Viqs/1OGLCIYT2BvVH57ftVnJUakzlxnact8Duao++ixwYF0Dx\njcw4V+7fkjmlDn+eN0y3PgM125b9C80Bj3ddDSMiUW8fh1f6r9onjXmc7M34\n+0yiZdN54W6eQim1UaGjQx0QXU0P8ukZe6nDcFpgeEpGLr01JqfI863jw3dg\nTyBCRYgHZDpByQkDuzsZ04yj2wLr78ohZBHhQjPZcwFvZXtevBRb6UOPKY4z\nsPf1wb1OkNsGKNm3ZjdKQbXF4WJInak48P5vPj3dtjCmqMEcVKNiqBeExK+q\n4HxcpuBYQqiy+zy+54aE43Po9JWOsV8XlWmvdozesx1bCbTo8Beq/ghxnJuv\nzHq3\r\n=Sr0c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a3f41127e9d90f7e393ee6fa5e01829e52160131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2ab716cbd.0","@material/base":"8.0.0-canary.2ab716cbd.0","@material/shape":"8.0.0-canary.2ab716cbd.0","@material/theme":"8.0.0-canary.2ab716cbd.0","@material/floating-label":"8.0.0-canary.2ab716cbd.0","@material/feature-targeting":"8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.2ab716cbd.0_1602806729638_0.25050866851757947","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/notched-outline","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.43c1c5e2f.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3df22a192e0a837a88b72bebd25c1051fa9fdb77","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":34,"integrity":"sha512-lWrlW50stcNft+2n+/ByaUT62F7VJoCNXGRnU9t0SwD2596uxDX/q2XYjj3TMvmtwC/kKnvWLTdW+3PS0fkCFA==","signatures":[{"sig":"MEYCIQC7HN636oHQDH1oSGWEVpC6e2vb/RvDiUfJxjgUS2CTwQIhAJbEreJItuc9eSwLcciwav2yZqzLllumw95fx7An7+Bd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ4aCRA9TVsSAnZWagAA7hgP/0SeXskjYDAO+9vzTFq5\nAmxSZVNrUe2wDK0KjZ1YG/FAvD10ciNYi5gIf2zUHNkQILX934Yg9I7gR02c\nwigKAhGYfa/YonDCuUNGbZ/54qRO9j6QT6r0J3miBqrzDKKb/jnyFtbhb9TL\nG07k+ANnKZo5O35XrzodHVe6KZb5UePWt/3eUWghoD73SJdQHzynqYWK1qoP\nA8t4AG+KObGS9aMUZuPDQO+5Eimr0PltNvh4ZExiYZrnhcP0t4SDi8JDWT5G\n/+XnM+f1OewIR1UTxRM7h92136U8s6xQmyrGZtU2Vl6izfL0qu7ob2FKcYjo\nvkFfp09hhV5ffbmMEesniSGLw237HgU/pmuZSrzo1mr8ZZNsOxJAABpKDCfE\nW0BceJqmw4vF5F9pIsUGaRp5zC254PKNMfJcqVXnhQ4rROoEPj2hTmdf0R7w\n9ffZpqsEUnDAsvuEiJEFSAbD14kRqJno4t69yYHyZ+TOrXsryLovzyHUsX7K\nmA0H+F7ibzdVW6iVNAspCe0MpNt0KcOcprXMfYL5LVTxQwBXiC/MU1vhX51P\nFVBk5wYIGjwC+M6gEgc4TsS7QnZk0g0m/y63TbN8795gK5s3KRGdeoo5mhqY\n7+SXQ3lIPoqsvE03jzFkgBVVrwaNYbaUXezCP6hxixkW2/IvHNNr0ZVIcXKI\n4Ujx\r\n=O+D+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bae89543d5336b4583fd1519cb63078d2a5c39f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.43c1c5e2f.0","@material/base":"8.0.0-canary.43c1c5e2f.0","@material/shape":"8.0.0-canary.43c1c5e2f.0","@material/theme":"8.0.0-canary.43c1c5e2f.0","@material/floating-label":"8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.43c1c5e2f.0_1603116569643_0.2484424838143664","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/notched-outline","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.ccc64eea3.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1130a019f8a86c633efab269e4c00d9756a962f6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.ccc64eea3.0.tgz","fileCount":34,"integrity":"sha512-SmTTEinWgGjIdDDxYy5bdRDRQR09HNmBv+QIByZEJznrRDFgJ27nxtpiBEt431xTDeoxxjm9QOmVpo02LAt3Qg==","signatures":[{"sig":"MEUCIFbF4ReejtVD2MA/FxJsKClMtpT6afjivKyPZOyq96lKAiEA3mUEe6bEAYT6uCE1U+Agsr2wQaSMnMxbarX5fYOkOEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1M+CRA9TVsSAnZWagAAU6sP/2Iph+oCfHK6BLfytZph\nUYOvtMdWC9ve4HQe7RPnlo0IKsowT76Yl1/oeYhaFNEw92/esh1fNaM6vTp3\ndmEiMMokNoc3LLW4R0Ja4Po43dh1yi3oJqIcq6xOzeGDtmObcNM9R/ljZqId\nz++9riJTGZ9AEixwx/1w3DT7OWqOSCUhCpPCr9AD2V3BxRvqvt50JEBZ0AYA\nrXS7TKrU0gPBZ/l+syDfSw5x4Ieq/ElSsdg6yzQgqpxgUQ236WlCLODKQFyO\nunZWeZpgTfd46E2FiqAfmnph0GCQJzRg5s+cI3Nx263CRboD5GhznJpa9OIH\nl2fw38vLI13H6g5l6uj8a9XXliyi0dmxVikGuQZBmHDpnBg9CraNOQGWMiub\nE3PYbtQFXVvBQFKziuuf1S5NMgUCxHfY0GRS9liqJ6V3HAu5zv8NwPV3ZSOV\n+ZrO3m1+Dby2e0K5Be0W8kHYQIdtFHX8dDtw5AQaHLcVyg6DQl+d9MF5zyal\nIZQA1C2YHY/nnCriTCUrCeo6lDgApbCLKvzBZxu8V/J7MdV1Y5dypoIXeeo3\nMOvbEKM7GzpNMXaUf5CYvstD8Xo+Rhdc6KBBjB/8GVpWEitVDHAJoz8Gm6E6\nvFNfQIg+/NZNr7F5uyjuXze+KsHYvuCCdX/LZRSMHO/Vqm3DtJee9IeBVjLf\n3LqY\r\n=CyxD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"26df299f75c86dada6da463cae5df1b0277d5c7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ccc64eea3.0","@material/base":"8.0.0-canary.ccc64eea3.0","@material/shape":"8.0.0-canary.ccc64eea3.0","@material/theme":"8.0.0-canary.ccc64eea3.0","@material/floating-label":"8.0.0-canary.ccc64eea3.0","@material/feature-targeting":"8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.ccc64eea3.0_1603752766145_0.40786362902212825","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/notched-outline","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.a79cdd019.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4689acf72042b418ce5d9b0dfd78bd69bae7de36","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.a79cdd019.0.tgz","fileCount":34,"integrity":"sha512-LI3MDdCc7rUzfr+jq5+Dv0t2kCeypph/KJyKDt3ywwkufppy6lF4qAfVRrCmJSQIJ3lQm+CzX4GBdBj26Kom1g==","signatures":[{"sig":"MEUCIDNILu7K16zT90ZYDoiCsb0tSjJ6m5+gBqKZli1SytSgAiEA1PARIo3tLyB2tRDkfkkWL4NXL15J3MQlJP7JunkmjJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEu3CRA9TVsSAnZWagAAtlkQAKKIu73Nv4pduPblVEkQ\nlB1P07YEezPEM5yZHQmahaKcu2u7Qly+C7edMM1P0bBIVSB9xrD+ZcfBr4Fr\n18K3FkqcauNknFBZALf+qCdI9rEHNNkxZYI8Ys58qt+WpdvetjwMb4jD6u/i\nkU7HwAED8Xx0EKWLL2tuwgZEDSadLp3bA8T+SWWKjEQ1dcD4T3u0oVyl4IKK\neckUIWRq843Kj4WPfoJ2XUMA0y9XpTzEcm/8ZU+3GfqG3F4co7qWFPIM3DRr\nF8Sqa2PmSh1FmO8E30mcmY0dIZSGSmKiVXztlFBnNVLOTPCNCFjZa9fHRuT6\nA92HBJ8ynvInU6WeNrjB/VxL6o2FrC7Yy1tkPpBxmTziMV1kQ/m5x80mxKwz\np5Azw/MIJiMTHXrnf80XuRq84XRoLCnTU8a+32DNq5LEX2XSmA+xU6qd8pNg\nFrXXokfONxAyFJUvPC8+2QlEBRk0rKi+0HFd8f0RoLKzCM3K5FmcPco2tqTX\n9GoxgWhDIn2cqk+40v2pU8u8Hz303VwlOY/CrHcFcXtwXP0J7RPYzwXTNDZ1\nw22neK+uBON/OLX9KJOCCvfrfjxi3xnARIyegOx/dbhj3USAqsTw/MMZyUCS\nzuLYMsF2PqEjGoKFZWhg8lU66J9E+wRJU4xZe9zx7iuTfJ98ObDsjn/lymCI\n5rF9\r\n=pVW/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c54ccf71e4018e84948fec32678595d974f80c67","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a79cdd019.0","@material/base":"8.0.0-canary.a79cdd019.0","@material/shape":"8.0.0-canary.a79cdd019.0","@material/theme":"8.0.0-canary.a79cdd019.0","@material/floating-label":"8.0.0-canary.a79cdd019.0","@material/feature-targeting":"8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.a79cdd019.0_1603816375021_0.001222529244504278","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/notched-outline","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.596e98424.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9e8ad2d2b31ff1b8bb9887faf34009957305e53","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.596e98424.0.tgz","fileCount":34,"integrity":"sha512-QkM4waC5LLi/wf9KrmLUdQ2yAwWxbhkaxTRZYPbytmCDU6NbNJCUee7Rq0Q2alLdCCia4SdadFcWdrQZ/xWX0A==","signatures":[{"sig":"MEUCIBzHsae6LVXztHLLbPn2nBelvaPRsjlDhsa7U/0jlQkjAiEAjsc8o0NExB39dXR/FZz9HfBjkjtK15WX6t8PHfz83v0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZasCRA9TVsSAnZWagAAqHUP/3f7SHUH/ndvbrhf/thL\nD07Qg6iqMYfAZnz116ApVJ3yQdcZLVaItm0ygccr9QY6LKhymKKgMR+1ZbdD\n/3+XtP504YiEusFDo8Wnse2bQUmgh8/dSZZYY+iLGv5rVW3v5FNe6Rqfj6wC\naR+CVpdNUCfOFkfLncU3xf1mkVv5gp8wmlYFZENd9+iq29Wc8Hhx4a8wiTn9\nmfSlep8eBfxF6gZdzzrff8/pt24NLqqI6QSFEjXCeiHkU9RvNvTeEgai/35r\nWmrozA6sfqlIu9AUJFiI3jBd7kSGeuZ4ZAIGropjtCnoVNC2TWL6nq2HaGX6\necgvdvMmqW8BZQM3pWOhZGm1uF8O2EC0l1QwXRlXO2HsQwPgwvjLglWL3dq2\neN8tJVMcgemnWgRHP3O7wYJzZihbJ4dtFAxnvb0OdmDuEDI4KmsbtWu9cjDO\nY1GKD7cNnwXx9qqiCsEgSFgkL+d4DPKft4vejwEQ903gLvmyTmGdWP5YHp6B\nPMfdQVgmOSgjwvfPKXwogal43/UK6q0HjD3dbxXvtp3kqkD4me8AtF6X95FR\nsscDzGZXzcDWmjM6etr9GDtB5i9Q8dlsnsLaJq8Y/Z8vHQ9bFq0xVaN9fPXV\nzasLgv77Nf1wyf93j76WFcPD08dVGcE6CFO7nDbEO5t3n8pnJM+SgqXu37/k\nZqVS\r\n=epft\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8fdc1f444b4540a876847c7c3fb4a934e75fee2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.596e98424.0","@material/base":"8.0.0-canary.596e98424.0","@material/shape":"8.0.0-canary.596e98424.0","@material/theme":"8.0.0-canary.596e98424.0","@material/floating-label":"8.0.0-canary.596e98424.0","@material/feature-targeting":"8.0.0-canary.596e98424.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.596e98424.0_1603901099732_0.7218187817492197","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/notched-outline","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.05d5facc2.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0786e73e70b87a404d3dae4b4a27193c0a322d95","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.05d5facc2.0.tgz","fileCount":34,"integrity":"sha512-/AxdjFFOas2M6or2rVE7+z7STw/7YGdTxDxy/nqDLrKuZQ4OkJdJlhpMBMhRZUHHafbw8OIUlxTj8HS3+l2gSw==","signatures":[{"sig":"MEUCIQCSgN1w3BXztVpw8AFzEv5E9pUf62mEMhGJ9SL/gxMKcgIgELsG2T8iumpQ/cjP/jHSqXZSo4Y5vcFU6Ql0qB2hmpw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZiqCRA9TVsSAnZWagAAwPkP/1w7osoZ18EuvpunROrN\nLrRYnRBYfL7ayjXCaqGp3Co2rYPhaLvnnKithsISM1ms9gLUFoK2Rl2AvUVV\nI4qDIZ3VPq7QU499JinxeXdWih8PSCGOnZ2e3HFPPJPqV+4z03xholwDZbXx\n3BzksF4LlnHrAQFetObosP8MSbBvPaExt66ACE5qER6CxuOfi92AXMYM+jZT\nevlD1IJZqF0LE/NYfUY0A4wRI25Voxn2d0vrNTpp41kMKrumZGGGgV0k5KNt\nNhERPESxQ07EO895D2SGOe9eqeh9AX0i6GBoPDuNFc+MO+RY4Lke1HZS6XVE\nughPDGenUsCGEukJ0sS5Tk+U/qcTkmik6BXSn2AUBufTm+NZW9TmKtlpUbUQ\n6im2Oj5gIng+zZE9qYBhqRBJYzNUFBaguvNi1qNhm5AdT+rpK80pTN5daiJw\nhzkNhU+2U31TPeyEhxYQ/KfIgq+0/Xwnuq+lVOChUomtZb9XGoU2/TvD2rLd\nn5J+/4djAMRUcqfJRvG9207zk6BshRFMR8xO2efZ22aGqLm/e6rcbqDUaH4j\nNCB4q1kMOTLCm8qii7+NyKr8ydicKHkiQgltOWOknoBPgVFwWiGisuT+mibf\nCOcAT5xZ8AHzizG+Efthfw5NQRMmCj/Rd6/7fac2kKrv3oIbLBnABsV4vEcN\n5jzL\r\n=TyXx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"db17092b19dabd6628edec5bf226f0b6a48e4f95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.05d5facc2.0","@material/base":"8.0.0-canary.05d5facc2.0","@material/shape":"8.0.0-canary.05d5facc2.0","@material/theme":"8.0.0-canary.05d5facc2.0","@material/floating-label":"8.0.0-canary.05d5facc2.0","@material/feature-targeting":"8.0.0-canary.05d5facc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.05d5facc2.0_1603901610405_0.44854109911694806","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/notched-outline","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.291b3553d.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afbc949becd09d0989b3d2e7594634bebbe2bf7c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.291b3553d.0.tgz","fileCount":34,"integrity":"sha512-GGqsWDSncdlZkrCkJ8nWQPjg0xn1/OEwd6KCDXovkEJYngPUeX/9pLMeQTZtJ8iA9WAM5R3y83Pm24Wwc2bERQ==","signatures":[{"sig":"MEYCIQDKTp8b00RJHjNBuWAT6YTnYw8a7xCcUisICbudBe3JzAIhAM82d6uFvXRN0m+QSJ5p8fIxusTmtqvc1JP6Lrs/fg3Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma5pCRA9TVsSAnZWagAA+F0QAIOzjM/JUly+nObfQeBl\ngdzsBaN92TwifFnzCF5FiDrf0Jm3vJl1yiC6n8bjLPj+csmEECxfFgd3Wksi\nOib39NfGTyfFvq/uUrAmcCwOAUFVRRMGLU1gHWqJtxcPjTeHKhAkQAOkz0eA\nDfAaxOpgdABEpto5F6Bm69fDH7KYfKzAMhZbHnY7J3CyUqqI7Se3PlICOXYy\neO1DQlOU87NV33+H07v1hHUZ6phKk56LsyTpy8kFo+LH5wNja2+mbUdjOACM\nDoX7kTxRbgDk9XMWwI+zrnOnYyE6y0IZe7p14aUCq2QN+dyb+Hk92hnyE6cA\nXzsi4LbIFiW/0TjcgDcI9CGC58d0yrbvPeJgMkoKxnqDBHmjZIlzz+fE5Yp8\nthLg8D/cgBAAWkJbDwuu7sFP95BD2Ngz8O5VPUQvuLBQ/QDcvGyM0o1CeZzf\nol+0h0qfge9NUtvZdLLPktxyVCpBN647BmCcetdjVLdrU91ilyFG+LlBnbaX\nHr0t1lw7tVAxsk/EDRjfHGbcA+XOX+WmR9l/CAp9rDrdHoWdk16Ce+0exqVG\ntmNPBqEw2KgY/9vWvF99pmkY9czkRA1m2j294J3Sldgnmb/HGeE83aAq1N3G\nFhmfLjPUyTUqFnSRPjTxakqADF6Scy443Mh4j5Rt0gbw1UCNEN0PkxGvg+H0\n3Jjn\r\n=Csr9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bbd141e6c5168a84cdf50ef1302c9f705f0eb283","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.291b3553d.0","@material/base":"8.0.0-canary.291b3553d.0","@material/shape":"8.0.0-canary.291b3553d.0","@material/theme":"8.0.0-canary.291b3553d.0","@material/floating-label":"8.0.0-canary.291b3553d.0","@material/feature-targeting":"8.0.0-canary.291b3553d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.291b3553d.0_1603907177328_0.14054624203515442","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/notched-outline","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.dbc449b09.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a2eb3859ec07c9f9f8ad27165e1c926b1ccca9c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.dbc449b09.0.tgz","fileCount":34,"integrity":"sha512-w12+kh4vAORWaBxkxMXNsYlmfMNFfAeSkuQlnD0WOI/elCugZkLg/6kcjjdrM4gvpu/i3M5Dvqv4JzwCxdnadg==","signatures":[{"sig":"MEYCIQDcEUusdpTMKbKrX9UrShE3d7DTCAHv00t3nJ2Wb6hLYAIhAIshnFrWykwTKYjP9tsr1dHGRP+4chwf5DltHMVUXQg4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbTsCRA9TVsSAnZWagAA0VkQAJdHeZ1C2Cn5OQFiprCO\n/j9XMJm7qY7QfIES1JbNC1XiLGXD/cqILhNGdyhnEg+WnvVAxjpp66+UYkJm\n2qjngjXOnnqnbXV3PlWQ0ihytJqtWgeJopUi+351er166UVwPAnFVGHZlBCF\nr70xiExOtqWB2omHhC5epzNK7dWGAnwq92NkvmLPohFVUi7XKova84D02iuP\n8adPW38wCpNYlA5YWN4ks0hfjPdqxW5ljJQz9f0BFnWZ5q6UbQ2RBvhl2jw+\npEOV6ykDg0vMEV1CnGdv9+wU2DRRqBm/yD/GVeW7Y/YUM5LXRH2GdwRuCA5p\nSnQvlaTo5jiWCBd9N3ZD/HhprYXquRhWO1pUb07xEwKD3gr65YeoQEzFnall\nipNGuyXJHgmn45siKlOzINcQl5vIAUZHwtbtne5+xLwrafGq2hx3pw004Uay\npVQRveG/JZcSkZWTsWxFuU7sVKPweqi7nHj0Wl7dcrTmMmvqr7ax1QAZAp3Q\n63o2gtbNF5jUTPRmfRjv3RoR62Jyg9pydpnobpJ7/oGtdjOA0PqND0SgVLwo\nef2LqpQzUSOePfoT0wcCyjYCRPfrdqwHwvRLeq+sawolH06horB92uwgucaa\nZ1SXJ9yxUrJidJdQEtzmpoelvvoDvaezXKYRfCUkN05t45L0xnMCyLmhe/yv\nSMp8\r\n=dMfC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7888f3b13baccffea8b2b02ef5c25e264ae321e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.dbc449b09.0","@material/base":"8.0.0-canary.dbc449b09.0","@material/shape":"8.0.0-canary.dbc449b09.0","@material/theme":"8.0.0-canary.dbc449b09.0","@material/floating-label":"8.0.0-canary.dbc449b09.0","@material/feature-targeting":"8.0.0-canary.dbc449b09.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.dbc449b09.0_1603908843592_0.5324290887765599","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/notched-outline","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.4794b25da.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fee64a5157debf03e85875675cf7886fe249b8f9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.4794b25da.0.tgz","fileCount":34,"integrity":"sha512-P1zIjRUb4W6z5X3FuE4enh54kfdR8thi8kWSyHpnAjxikd2A8B8iKMQKSQ0vbuMIWxoP89qjzFLO0XX9dpg94g==","signatures":[{"sig":"MEYCIQCIrdy8h8LTlruq6gjZYbbMC4t/OAZjARcrySJOjah6QwIhAK5MYbdjNDnzo0TadFHxNoiFfNUvNJMUg8dIxe94oS+3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbuPCRA9TVsSAnZWagAA5IEP/0XwEolOJKnmD2XY+amB\n8CDE/ljn21QGpZzU1+nFP+wSB5Aw4S7w/63nWhIVtQBcGDKto8QX2jfUq2Q+\nRVLZ3A4SrTnoae3BPEOU1+RAwsGxHkD4CILzIsfl4zH/Mx8AyrBcF+qCuTb8\nnbbuyjN7DkRpMPfnl2dEEkxN/fCNuOFhyCG490v3fZFhy8NM510t4/z+oUMG\nOb5lrNlmlEyRWNER5p79ki4Y0/u8qefMpJbYPPigs+olHBa7GIc2vwZSlKsr\naUoVipXRprmo89AZftKV9SCZxVqGp+yco9Mfsf89MyFyLbuMRi/u+qud39F+\nDrb3l6X6VXySQBsR/86wLczXcJqhKpx5dSC43kK5YjttTKMj8l/6Aerkc5LN\n6D8Ti1tN57AN45hFI2hiqOVfKNwFQ78y5KWX7dFAZqBOMoarcQRtJBQQ9fPs\nUGTHJ6M5imeWGUH6BRwUaqPstxMp/l8GQ/kisOGSP8IKZ5pMHlOpi7d7/pYz\nlJKuLGkmoPxwNIP7AAgGb7UPRZwSAXvL5KBEeoGCdfcUGJXJe4cAH6fSPpiF\n1oPkftTY1Wtz/Y11fVGKwARV7bQ2//iYEH+/N924A3ijUNA6igZn8UuCa225\nMdPsVTdrzLD6rF23OuS6fw/FcMHQgXIJW1rvDcnKYtmt4mEGVZxRRyXa2Aae\n9R+0\r\n=smh0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0c2eec6be7b76adae9376847043bcde093f59d3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4794b25da.0","@material/base":"8.0.0-canary.4794b25da.0","@material/shape":"8.0.0-canary.4794b25da.0","@material/theme":"8.0.0-canary.4794b25da.0","@material/floating-label":"8.0.0-canary.4794b25da.0","@material/feature-targeting":"8.0.0-canary.4794b25da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.4794b25da.0_1603910542943_0.5541154965207344","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/notched-outline","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.c61db90a5.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f8f7cf1b9e7b598b62d0b38eeccc9738c6b7c53","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.c61db90a5.0.tgz","fileCount":34,"integrity":"sha512-xmwKRkFNbyVL4bOwcjlNhq+L5/CL87FDMTSEC62EdMmlt4SNzWkyVKJTntK92uLEc0nkNRHwlWbf7LJU6SvQeQ==","signatures":[{"sig":"MEYCIQDu142n7+N7pnGtv6tzMECVoopVKeW6cyGSOzMLkz/svQIhAITRWzSXyUAhGHTARsN+lHEtRFW1WVvT28XZBI9jmnLe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmb/8CRA9TVsSAnZWagAAB0oQAI5d3px3j7mmaKmV+4yv\njr8O+j+kk1L0nReAUfYAocGrHsox85gRyNbq/LmV/O5Of/LqwOblVUsHwXEb\noktLWIL3PuCKCjT+Fpe3Fgm5jH43nF42g222DxvFjFmqcLg7nesjfq+2/TeV\n8Rakcd+hNy5P16ex0uahxRHbz/auXQXCSYwS6ky613os9eT0oB2ThpPLQbIn\nqFfDLuSW4sh4OY3pc3NK4mY//1uMtjjIccXeUUnafVADdG694AzYw+F0zo58\ntBCD8b7V8hnUC05UIsu9kkiC4jz0H/fgtjVzh2vu0xg0SyXQ8aqLEQkwh3vX\nYHcy2H42SjgHaaVx9apvASBmrKM8a/zCxb36MGVJR/qToEkxE0FVo9zSmyv6\nZv+ADCcJyi2wdejNXqjaKJBjrO+dzqb22WqctZYDPexgjvDOKO4m807w1TlS\nCcTy2hDBrvv0ATap/d/ZmyFcdoX0KmqhKeXTH8B81Jz5FxaMvqry/VSYZhHM\nPZWWZMV77fDb/XRO1jZiigtUVaJq1WCv3SjKEScYW71e2ZuOu7rXtALmSSC/\nPNsE94RLtQnD8c01V0gzwPWIRMPAZDFoHP3o1C/J9zlr9iQnMcZZdcXVm9PC\nJ5CjDQkcnU/f+u9b1zLdbwxkbJa6bSqPd2qSwPudhVDlSUhsk3oeVBo1l2cK\nOOQB\r\n=GhmQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"695570eb7478c283510b9174ac7c4911866e0868","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c61db90a5.0","@material/base":"8.0.0-canary.c61db90a5.0","@material/shape":"8.0.0-canary.c61db90a5.0","@material/theme":"8.0.0-canary.c61db90a5.0","@material/floating-label":"8.0.0-canary.c61db90a5.0","@material/feature-targeting":"8.0.0-canary.c61db90a5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.c61db90a5.0_1603911676359_0.5927076264000177","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/notched-outline","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.6d9648ab2.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c339dea9233650dfcb06945dad65210cb8878440","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.6d9648ab2.0.tgz","fileCount":34,"integrity":"sha512-RY8RTEM8C+8Inc3stBpCbgipPMsbzzRIPfD9LWxZl6V+9oxemm9NLrgnJKq/Qa4UpIn4I43Ou84GsECnPXQp0w==","signatures":[{"sig":"MEUCIQCG1O5p9ayv6dMGrPKKEk+SxfWB8Di0SyYEhptRgidWCgIgOVgpM9cOR3qRSRZbY5B2Et/WYERhPSyK3EcAoFIKNSM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmycxCRA9TVsSAnZWagAAqTIQAJ4Lyrs3ayOwuGfj8oiZ\nqHOgP0XfYTT+3851bV7UcYuiitNPl12pu/IGgy1hbprQNnrg2itITf8AbyHa\n3uMtUxTL3WYFeSUTJnAlS196SULmbN8JC3g7pRLzsQ83ARIlpxIdYHAv7fd2\nu/MgyXG3xX9W+ih417TxLGQHvPxmCKKkG9ARuWbKCbZl7a0X2BDWF/xavngI\nCjr/pTzdvxgYDTbKRf2/6AeVdPUEAzHbfBeX1J0VSfxqPsuBGAh94lhaQfUj\nMgAU/hlAiZLM4okG/HFUmJfwWtrIkOa4q12xiu4VeffAPdpSZuwKkzvBC76u\nlw/bY8PupCKifBWm6sbeXZNjlR8CO5/zBkjb/wOtRVy3qTEOcYobVK7BCCN0\n/zoj6LKpHz7sKSTNrwDt265cNAfKMTFOKKALbyN6D6fGA9sM8XkVi5ElFsPu\nK1Dquowv5eyY91ac0ZhcM8xGyv/kTosSJ1a2c0K5t+KDuhlhR/P9AL8Kqecs\nD2I6vA3M9PGbKEgV84VeK5uNmFTMtYWgJ7BSjYBpVn9dJee7s0PV4F265D67\nvCzMaR6X4K+Kh4S4sFuRXBpyKHXo/cpad6YFe0dHNexj2MPdVPVC44sDzXkB\naCOY1MPzj9cR8kjV82pWuaVfXKUtV79IJTjr6w6uINDaqDgdf1wO7xb+H9g8\nzInj\r\n=BaZj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5de6a39d4b70a98beb71cf8243a219f454b11aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6d9648ab2.0","@material/base":"8.0.0-canary.6d9648ab2.0","@material/shape":"8.0.0-canary.6d9648ab2.0","@material/theme":"8.0.0-canary.6d9648ab2.0","@material/floating-label":"8.0.0-canary.6d9648ab2.0","@material/feature-targeting":"8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.6d9648ab2.0_1604003633226_0.29712994595806363","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/notched-outline","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.5511c5254.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52156b05e729832cea9b3f934ff572f2cfdc2a3c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.5511c5254.0.tgz","fileCount":34,"integrity":"sha512-4ptqTcX6oUExpFVX1bkrMJIFP4zse37Ez9JPVLrxb0xZFlIn+4HBnVtLMqB2kXHcUaEybsMJofKxwjXz3kMKMA==","signatures":[{"sig":"MEUCIDPQM388bnm7nEpZHAAP2NnhlvZtEzcNGNeB+drwE/jGAiEAwUUsjYfv+nLLJJy7OGBH+yi8s1mv56/OyZaT/10KHuk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFT0CRA9TVsSAnZWagAAq1oP/RWe/DrwZRQnTvSMMRRO\n6G2rNsqoKEwuaY0UG9gkK0TmvGRRySZNd8pgg3rGWZ283Gh12zxuC51v0q+w\nfzipty7PV/yewv11ccaeP4uYwuWDDjG8682jckjtO9Yua3BU5SZQN5HQMS8w\nzfYt0ykdIt2b+hJM2hTXdN5vEzpkPianrWhA8FbgBZpqelXWutZHQ0UrdfS8\nupr7hLLTLZ/xWezSUTnNZP1DUeB4VTHUSXWym5KvoXvTxgFhdqdOd+Bp5TXu\nxpmnJNv0yVoznD5v688o88s9AcmUDM0Q2aVubsNVPJN3bnTxLRvEPldDLjcz\nCPA7/gRlGOCLPqvBaIxSAja3hTU+I9Q+Tt6pD2htqBdum82atE3ubyZDf8SZ\nM+Zul7oYVGszPcSexoFDUSaEEGMVw+GcKUpGEYFnUOgz1GXGcy+s/oXHsKVk\nFwGu7eIa5hPQJKIOuV9+HQ7Zzxsk/FVKLG3mf8ke+RKgQyxlyCLhyVnpQmQp\nYj7EAUP5IJfE63r347T98fZMlwGiWb5c95RKFgugtxYVORJEjfHRB8bAkRNr\nPwmTU7GUPqvU6qsT0XbEmocYqb4bRH5bYBVuxJhN5kMIxCsSSDzAZQVEJcPw\niR0YMiQoS0Ch+yW9k+wmiHwnMNUnhothyST/Dlpax7vJwdcLhiMkSYVOGLrQ\nhpoU\r\n=8GDl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e847a627e044cecc475be1f0140e17a4e2a68dbc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5511c5254.0","@material/base":"8.0.0-canary.5511c5254.0","@material/shape":"8.0.0-canary.5511c5254.0","@material/theme":"8.0.0-canary.5511c5254.0","@material/floating-label":"8.0.0-canary.5511c5254.0","@material/feature-targeting":"8.0.0-canary.5511c5254.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.5511c5254.0_1604080883962_0.12733819953736458","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/notched-outline","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0-canary.bd6e302a4.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcfdde1293d4b7ba6f1fefc3178e9b87527e4cc8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0-canary.bd6e302a4.0.tgz","fileCount":34,"integrity":"sha512-vYwE9cbVi7qTozSaRBir1fyc7bCXDDGj2rstI7LGnUT9zL/1qWnJMt6R/CPKRtbLIZMh0NLsHrIKht0Ah5pCNw==","signatures":[{"sig":"MEQCIAuwbLTTL9yRH4M+YgBHD3ZUqSQA8D6UEJNgnSh34yMcAiAmbowoduqmyPNde7bddQqbjA4v2PFH7rze/0tt3f6edQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDx/CRA9TVsSAnZWagAAd3IQAIUkhmTTyKAaZ4zc93cs\nVBWp0zH6kaRkVV6QGyWeV6tuylx6jr+5Q4FQBpweVp6DXFoVMCyAhETB8XAe\naj/19tJ/DoNQo4BPSg9hVUbQjmcS8cMteefTQFuem8/yt+JO2RchHYL2nf6H\nlnQ5+u2aFJwuBOYEMCcDC9mS/Rxc8qLhvm1K61Z/GCa/glMq29pCkgj7yIDM\nahPNoIEEWN7hFb5jAkSRihqmNas2kU+jCHE/gnEeMBgTBC7VJ8xatTLCM2O9\narxO2cnY8L8KXMcyU4/vFIjhJ5KZKjih81s16mRNZQSsR356Swv0CEjwZbgp\nqIG9INELbXWeKV1BEBhXHT8T9VygkhXkevM+7mb958tFxjTGRIcS3/BWUDnm\nK6++GZhqq2BR8w6/6aMZTkth8DGnsPNWOA//IplWHG7TCjqw8CS8KWnJpCbs\n8XnZIRNgdEMNbRwlFXsDhy90jliVIrn3w6TiNth6zEFjoT7Ca9lEHmzaiag3\njB+vND5TaQLHTgZ7M5+1mMnXCFUoJO67NDaUnik2hOUyoiTmoDbhSTVZP98D\n9OWALqLW8WU5J/FiQA1HzF0+7FZGX37Mhpz2j1iI3fdI+XnBGJusTCVWyg2y\nXgpczTs6uJ7H/N2jERLmvxPAA+DNGdn4Ycm2Y8eP4aWVxWRgNqtHU7P/gA79\nMaDY\r\n=eses\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b48f791b92804fe77eeba96f057b1baa89c48e3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bd6e302a4.0","@material/base":"8.0.0-canary.bd6e302a4.0","@material/shape":"8.0.0-canary.bd6e302a4.0","@material/theme":"8.0.0-canary.bd6e302a4.0","@material/floating-label":"8.0.0-canary.bd6e302a4.0","@material/feature-targeting":"8.0.0-canary.bd6e302a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0-canary.bd6e302a4.0_1604336767108_0.5904882424885309","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/notched-outline","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.d6b5cd418.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16cf4656db3602b56a6759184f98bed40486d325","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.d6b5cd418.0.tgz","fileCount":34,"integrity":"sha512-QJWz1fGBUmC1cMNsVQzTjMVl1YglMNS5I1RGq8Iel6sYLbB2ad2IGRZmv0kTePPQgzaMhAkS5+ntFxvULqQ1lg==","signatures":[{"sig":"MEUCIHWKz8bO5IOJVPv6qwK4/MXWaSCaGrrbW9azpdHgi2B/AiEA+4WASshIZi00cAB12MwXZdTQQeUm786wVEkzjqqPkxg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI+VCRA9TVsSAnZWagAAyDkQAIivJO1YYAcsLufgH8p7\ng0Cs26ezSLUtpF3tLdtpfBkWq1apGn2ctOQJSOM1F9sr1FGCNG2a/FuOTVoe\ngCNfOGmJLrGD4elVtJ3sHSAse6qOtTLrjSg5mJ7SuW59Q9b4l64NZe2jHUEe\nyip+UwHMTRJ4rB0cviitrOsRaqSYnvvikuBpsNQmpOj6rQlMuj2sf8dgAtms\nAGxqS6AY29iqjM71S7HKyBlImw0rydX5nr4XqWiGXl5eAlSTKiY4Wrkg4IJP\nxF8ERxtRf8AGCTq8bcAKg4wrT8fUOZ8nwoSloHwLrUeSufs8HdZT56W+gnz2\nZuLhm8txQVjEb99aBd+dck0C9PIl5E8eTB7NzttkN4f2dt00TtrRlClhD9gD\n8QIJNB0oxJ0fZ5WIPb1PkuSqhCUIdsxprnMGl44nR6USEa/S3tnutkpucbeg\nyW6cLS9L1N3g0gSWVB4q2K3mpa9PP+ZWpKslKGRuf4KmIz45lO+/c7nq6nMp\nRHlmei2B2f+waxEtovQb/3b3SZU4p7fSAaSigq6k1Eps9PGiASxyqzkqTxyp\n720VWRbuQYAGEdcpxvEzVWMg50QNO4xG9+10FAK8xMyU9uT3fL0a5mWjdpkS\n9CTtt3ZS3HvK4xh0cR/LcOdO7Xr9pmVsT4ARmPDbUg7EDH0TMzvjx2DxOuHl\nai+M\r\n=74FQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4fd5e4f9dda92417995fcc822b1d02016642b511","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.d6b5cd418.0","@material/base":"9.0.0-canary.d6b5cd418.0","@material/shape":"9.0.0-canary.d6b5cd418.0","@material/theme":"9.0.0-canary.d6b5cd418.0","@material/floating-label":"9.0.0-canary.d6b5cd418.0","@material/feature-targeting":"9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.d6b5cd418.0_1604358036865_0.9057024779494804","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/notched-outline","version":"8.0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@8.0.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95afcc1b588addb0922f6c07964e945e786f6dff","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-8.0.0.tgz","fileCount":33,"integrity":"sha512-5aNqLRoRfb5RJN7nOpUdo+xDZx6cTPzQwkXo9Fm6f2irWDPFd3qNQ1WGnKbY8r6KKo8wMarWkTRTAqmiWx/02g==","signatures":[{"sig":"MEUCIQCjNvkpgB7WJPHqf4hHASo+AiE8LEpgtJHBLuLhGZPCjgIgAobO3L5p34WgDWBkOvCmsc7eFhCjNDdrQ7ioHF+C6cI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207222,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI+hCRA9TVsSAnZWagAAx9cP/0KWbdJiGd7ehHleAtlu\n4fVuXWhZHwtW9jPL0QCo5k/B+hOCnJAKs9R+tyCdJWM7YDFk5+HSex5Q5ojG\n9IU9qxbJgFZBMhy+mRBXKK8QPYiIYwLbKo22sKpbjkuW3Ety1mEmxQE0gxG+\nCSuRmdU+0QV5gxtovklinYyyL89jg6+vOXGvRKeCXKtvNuFqg8qOR6wferCP\nXkEzO+11duSyxRhrHeYB9bLtJSrv23bsxUyvj3A/HOwHyg9kYlOpID9pxRHa\nWdvr4VgJdKLgV+sAx28aaPaRlMfRIN2tMYsCIATy8YSKdVOourCnQQf1T5TH\nh8CJ1ynGjrfROoxqoCY5xS+Plzy28BZULUnkZoiqcx/dSKbhDuLqHjvTfeXP\n7E0foEeOACjnr0hnHntH3lNbV/lO0HPfplEdtLpsbU3/gINVMhIQ9AAUMARL\ntLgkKcJlnAd+SBXRGuygP9vkPkyQBMa0Pgh5rCxGLmSeMhbWgOiK12YVEktC\n/v62BTm6rbhktt45bRONR9HTZtM09kKVtrHsYyhv9ivEzLkNBZFIT4MZtOO9\nLg3tQcCUsldJf0RzzqHulQ2UbP9cdWP0K5JIqDNrTu0Emhi26zy4gVOSrtjs\ntOHyXFfdE7ImQWc/0GwHkL4ZwebndxV6giLgA/EC8mkj4ff8g4wxKMJYBGwD\n8Wfb\r\n=nVGz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","gitHead":"d6b5cd4181d0bf11b598b5ca142343fbc87976b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"^8.0.0","@material/base":"^8.0.0","@material/shape":"^8.0.0","@material/theme":"^8.0.0","@material/floating-label":"^8.0.0","@material/feature-targeting":"^8.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_8.0.0_1604358048849_0.49442882287393464","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/notched-outline","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.fdf9a2634.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a491db00a927f28a3f4b9c4c931ef5948162005","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.fdf9a2634.0.tgz","fileCount":34,"integrity":"sha512-/j7j8XmqTpsLPSytp5jFIOm7yStMOw9xeVJbn0d6SBD5gUvNQ7LgmwXx0tSXRtGZ0rle06hDn2JjfLQlwsxFdg==","signatures":[{"sig":"MEYCIQCnCipfNqg8uWhfipU/vOH0sMHhqedB+xTWLxDraMivSgIhAJ5wFn3FySsE+PPOpADnHI2UW5t3mLRFV2t7Fk2bk2IU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeY6CRA9TVsSAnZWagAAB/4P/iUiETlar3/zUesISfSA\nK4Z9o50pQX5Aon82wXVhy/cDJOrf7OKm6QGUtzREjpwPH0ffTop4DCjC2Rce\nohfc5h3z9lZrVvWn+RAAbQgu75xh5o/LSvjnZqW0XBU4nhs3eAQMrFcIG1lG\nY7zG9bkf1hTBfjSz2m0WfACMgUHD0w6TheLzHE26aJxEKlN70hQjxxgvkw39\nJs5ZKw2mqRfk4LceM6y0dQuepLd4NFsZ6TImxMS8GlYIDAYm5YmTn54liuuW\ngkgEnv9soUxgzKALupCZO8adOTkK6nk3Ocnk5/bw7eGFUKuuvIuY9wbdeMWP\noIMwW9KmUomWl95WC0ariIWL43yBhoyx+zWqPZFBSOwPdr4yy8ojJyOYRIJ9\nAOZGJV7lBAxorqaYl5pNNlmZaUNfT4ehbQZ548fLI0XY436+lupNNzwohAP6\nH+Y5qGiCVPh0k9gdzBaM8jc9hGTKU94p8y4JSDYLpUmkuzz4YNc+W06OV1Iy\nDTiZqETqBOsKgi5rOyN4T0V0C0LtLnVmLpXH3CDzSM6Oguiml4XGYpsMGAU5\nJ5KFNdYbWHLAVB3tuj4QLkhqQkNzlyLnXx313gT6DEvw9znCY5XRFF7X8GyA\nKNgSMU902AtPs49h78DtIYD272Lk0hbIGm95cVNUUq8aSSDQ1YmhnI/28Flc\nBPAI\r\n=bB+H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7d38b3b1a677a24d709697b68fb697f1367fb5d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fdf9a2634.0","@material/base":"9.0.0-canary.fdf9a2634.0","@material/shape":"9.0.0-canary.fdf9a2634.0","@material/theme":"9.0.0-canary.fdf9a2634.0","@material/floating-label":"9.0.0-canary.fdf9a2634.0","@material/feature-targeting":"9.0.0-canary.fdf9a2634.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.fdf9a2634.0_1604445754117_0.043057010009269536","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/notched-outline","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.4a86f30a0.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eef202127a8c70afd71a003c23cec668aff4904f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.4a86f30a0.0.tgz","fileCount":34,"integrity":"sha512-vZ4obM/rvNSEDwIQTQKDgLx7r0lkQZmv43DCS/a7IGuFbZ8rAzbz90NhqRitxOj31e1AASIAMIbri4iI61R7bw==","signatures":[{"sig":"MEYCIQC9kVV/rH5L9wvGBLml+Utjj+Gp3cpSkFc2vFMcdW2G+QIhAO3Fy2bdT9N6KpAUi1MZpP4F9TICpNMvYMS3H7xyxHOY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoefRCRA9TVsSAnZWagAATY4P+QD3vL6ysCmz3h3Xfi4K\nbHIWqnOtg3b7QGKs0kdXo7bOzhw8RbbR/Slhb7BejkxKgJmaIqwXFvDTQPhO\nPy3RnqXQhfImolxFcn52d9e+Lh1pNUf/sMlSz3gwqVsyg6PT084WHbOhT4Cv\nr/6e8z/TxVzJ3Bikm0kZ0cFpakvQLkqVBVYxehCdKs2w02/VdUzYG2hjlvv/\nXA8PVFJkO7FsyBuwFrdpk5ESP+uYPhrq+LdnsOFA2xy847cnNMDu2ePUJ8ma\nSBi1Wtj483Or4M1jxU4MMoX6eJUa0kmOKw3fqdasydC+bICZxMWNR6EZTO6n\nzGpGIlnBOho7Y2gCvbm1jZzk4ifmyckPBe8XHBvONg/RuDlHtunS/Pb/7iS0\njctVuUFWmlsLapzZNxEpDYfMSk/4afFXGaYY9S7XKv3bT5bEqFXpTVyNibWc\norC1Lm+2wse2svyXcBoFPZj4gOMICU7AvjCWZSa0f81+mcrmI8rr929Ddatt\nIawTh+L+X5vqpKvw1HedvdRQQoWoWY3j5Zn++BFHLm93+eynzOZAOcV5NxzS\nKYGOatqdebAJXE6H7KDo3Mf7uYmYOVtOh9QIwDhWCkGatbAg/aZI0VDapTWq\n4oc8oA6bfB0iP/g3XoEXvF9mzNSqIGrO4JFGf19cwNSW2FqDh+HwV9J5hVRk\niuFP\r\n=5Fok\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ae1cc15cda11f90ef629a1f536e69a9648db906a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4a86f30a0.0","@material/base":"9.0.0-canary.4a86f30a0.0","@material/shape":"9.0.0-canary.4a86f30a0.0","@material/theme":"9.0.0-canary.4a86f30a0.0","@material/floating-label":"9.0.0-canary.4a86f30a0.0","@material/feature-targeting":"9.0.0-canary.4a86f30a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.4a86f30a0.0_1604446160653_0.43727117979878005","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/notched-outline","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.fc8b045f1.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dec0a6b22901efbee82de339100f419c8ba40bd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.fc8b045f1.0.tgz","fileCount":34,"integrity":"sha512-G5kUqgG6BqWj7aEdPi3pmtH5N6j/X+rIjYilr2l9ytWb0vdjG+X95TzbsS5ysjfslibpXh1t0f5kHvoTj+wGMA==","signatures":[{"sig":"MEUCIDVRNvyrGTdDBfBh7GgND6aGvmOXkgL3MqkSGixWfzZpAiEAnBih01TASyrmRav9EnVeXcJOFMbouQlqPS9zmyzirWM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoentCRA9TVsSAnZWagAAj+QP/3PfYwILqzz5vrWBOSYK\ngltnHiN06tKwtWscEfm0ICatfl2V7CX4NuhmatSiMfOU2JXp+NjV+Boaf6o+\nyZ2cQ/MmgUu8Ga/3CiPjzVMhTolkOHBxcYkrIOuEP8gurnLsw+CpUl0hZrN1\n9FxiznuzLBhPDruHhTIXuD0sLYJB5lHBgCK1GgiUy1Qklgt5wa3lXhAjm/vV\nOuyqYfVWCzpusnfqLwv0aqEn6OSUCQXaAVhC24Rv1z08MflWNwxgTt9h7p3D\nR/NOcmZgKksUZUdrKb/9h82bij2WUzURAlQpHZAlLXYDOOHUrJwP6ZtBzYID\n+YAo9yZdquSddqYO8OWvWOU9Fpqg43uvIq1GhgJQYf47HQjUNyhOMktX/6RU\nMGDbGbdkp3sLGvlRlg0oPWsIdZuTgB35cwV1z/a8mG3bxQUhXpvrl8+V6Y54\nfPrNxaSMakwKVYFPOX7SBs80nUYHr1i1bq6fxboDgk3M8rrRst0IP8yHES4D\n1FCcsZzC+NU/XmNwIWAmdTCqVFkSdjfR5F8hUslknpibc7P+n6Gr6UhUBanb\n3Tn8hx0j3MnamSiYlq9S5dNZpOS2v5cvDR32crXsHSDr1TzjkkHK4h904s6L\nNNHKXEyN1VufBmDUz1d8ltpytu3W3SX+wrtouIIeCeRzB03lffwdHkMU8uWr\npNJw\r\n=0qtX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7df7659dcee84f0af6a1e7d8617abb4056acceb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fc8b045f1.0","@material/base":"9.0.0-canary.fc8b045f1.0","@material/shape":"9.0.0-canary.fc8b045f1.0","@material/theme":"9.0.0-canary.fc8b045f1.0","@material/floating-label":"9.0.0-canary.fc8b045f1.0","@material/feature-targeting":"9.0.0-canary.fc8b045f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.fc8b045f1.0_1604446700708_0.47190528317752234","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/notched-outline","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.a0b2db26b.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3ac9703ac1c11a826e8180ad7ee7b26204f1c75","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.a0b2db26b.0.tgz","fileCount":34,"integrity":"sha512-YZ+EqkC53hS39qNqarzDnDZr+/1gEnfa5rBA6uZoracBy5SzDkTHHns7a+kw9p7Vd+9b6OaWoxgSTe6GMg+6PQ==","signatures":[{"sig":"MEQCIHrnvYKgW6WN26V1TreDdzoV4BFC6XbWrfnhbyiUcrNoAiAlDOBZNZRN07nouLmlHSBPUxMFBF8FNgDJQcxF7vtYiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofF1CRA9TVsSAnZWagAAvcAP/j0rY7zlEpOmWhVUKKZM\n4S7u1CpxZYeXl4VwledrQAmVI71qIB8eIDPWc3wrNljAXHPEXGOUId6SqleW\nAoUYcaRh0eB1yFiG4mBZ5wHENaNdrF4q24JwVEvI+K6nQThZDFj91k+mJuR1\nLsEiChNcy7pN7Wg/Q0MPyIXoc4fOqTqcCXBGPoPWWi8ZVHE6TNbE8Nh6QF7k\nXji4xtRPxCwkgo7+8gLNkfFfnSIf7pk4iq/NA7Xv8/MoRgOvK/9e5sHg4Vtv\nO9vbzwY1R55rA7BkiC2hkbz0/cKmU/za+uibdF2UfIEhRFrXJDbpxK4Atdxr\n9w/HZEztjXA1jN/tci6hupzO0ZV8k87I3bKs17W3yAZYYj9H+mhuefmXg24k\nZqC+aXOqV+yP/9EoO9vfMzxYH4Ok89XepUTNAAqT/5V/7g/zs8YXnr7F4gTy\npUSdoPmqdci0VQkEewbN1QZEhEPjtKkX46bbi/qLieUraRNon3IGMd6mzqhE\nURHjrQbngOK2e+OZEuTkIGnRJvtXMdzR1PsUuaAXHIvm6G4f1Vweq5dy6QX2\ndpEoAaqtcn133Z5a03JIpQ7TFwW5NieTh/asbsJGkAGiwO0y7zcHJ6x9Ljgj\n9HClmv7yGPiGc8HhZeGBx5X3nqR2UDsBqhDsOrIZGYX02GuyxNV0O5aP8QzJ\nK7nT\r\n=WhI8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"885abc8ece3b0c3cab58996fab25be733f65b5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.a0b2db26b.0","@material/base":"9.0.0-canary.a0b2db26b.0","@material/shape":"9.0.0-canary.a0b2db26b.0","@material/theme":"9.0.0-canary.a0b2db26b.0","@material/floating-label":"9.0.0-canary.a0b2db26b.0","@material/feature-targeting":"9.0.0-canary.a0b2db26b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.a0b2db26b.0_1604448629301_0.2030077951618927","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/notched-outline","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.419e03572.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"368202cbc86c8ec351a14f088acfd9113395c7e3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.419e03572.0.tgz","fileCount":34,"integrity":"sha512-/tDF64DgLXYBanGViyneWW7v9wSvyh6HaEiaZ6QmKSxkxU65a2pANfeRTq3P7LHtoBbCwhLA9RSoYIAUCnmdJA==","signatures":[{"sig":"MEQCIB9Ri+LBtSeoDdLb8Jjcqj6Z71QemqJtP3HFCtANvYZPAiBY1WtrmJPeLCjW0VFfuslLT2MV3sIe9qGBiJ/VISl4pQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogUXCRA9TVsSAnZWagAAz4EP/R3ir+OrBBnHvw7hXX5m\nToWoPSprBA2RqiPHkamOzCFsjI8/VB8S6IFJAFIXEdUG5AX7zM72vQIbpz78\nC3WuwPnPh3RxMxj7IWa3pfz8b2V1Omhh/MKUNjKvegl6HFqi9USxMAlwbpoV\narg5UbVtpx6KEYKARg8ibDPVtI8OJgmscY86fYDHsAfIGYKgu+58ippiF2fU\nhxdgGJf89wxK7D1nWCTUlzhyItg5tpQvjimMFHkE8Z3anJrzwHmmOjPZ+mrn\nZPZcGBVeA/IjUwpcP0aMGoDYxoHuS0fmc93r7FTTAKUN3xO0Sz99LvpUYDcu\nZQwoMDdnbeOvnioCOFb7DPIaWJtQlR+XDUMcPczuPV0B3Olj4WhLYJQKkKlK\nBYhKG0zY0XykbyZdsmNk81UNZ3dn8C43J3RqiEBAqVr1xVTVGJQpEBRh4IEW\n+9gyA1JbdlYW4EAjajmu72EdZ6HMJyrwX1bKoMldoF2+UPTWIO0f3RIg6pnh\nonp36jM3vFukhVq5XXNyYTnAuz7we6aTtY1es2zr3Nszno7aq0Y+gcron6y7\nqmogmurofOV/GgenYWuDMcYXxUK12jK7YKllauTrK+2dQvjEVtyQecmUH5k0\nv4uzFBO9UhGenxJ4yiv7YoSZCxJO69SKurR5h53KD0xueGR1s8HyrymnIxdP\nNWDd\r\n=2Rtw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c9528e0a61f88c4fa2a5bcc6a5e406ccf027d7d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.419e03572.0","@material/base":"9.0.0-canary.419e03572.0","@material/shape":"9.0.0-canary.419e03572.0","@material/theme":"9.0.0-canary.419e03572.0","@material/floating-label":"9.0.0-canary.419e03572.0","@material/feature-targeting":"9.0.0-canary.419e03572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.419e03572.0_1604453654628_0.07027327279724127","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/notched-outline","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.a432ad542.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"713afd6d1670283a3df5849f75c51a9647b0d926","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.a432ad542.0.tgz","fileCount":34,"integrity":"sha512-Y2sEG2NKO7Zw9lFppfkUFJJKAJ1/PXaw6ScwdJX/2lA96ssP8D9CRBx8z3aJbtgZjMtnDUuvsAzgQtW9vi2MbQ==","signatures":[{"sig":"MEUCIBA1GBbYIQv803iU1gA+OceuAQeM30u4NaM39WqkTJdaAiEAzbUxiPRUAJX504SOuRxG81YKyogIviC49Lq/FirtrkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKsSCRA9TVsSAnZWagAA/zIP/iEa6FgYICIekDIb0ZFV\nm1uo8z7bKx8eFy8xsXC7LqT+mSFHt9rHY2pJtzCeaoLcPlC0bbKv6PHKqxio\nxboI8KAMYr0GLjSSNrdJ3cwM/RUxqWggWsgFOIAVReaS24WUMP5cTVJnNyJV\ne1/D7/RG87KMzfscMSaEiPQWAySBqxSIcU6iXiho6+XKQFK5dRXdM/gUWftk\nw7iGot7Tqgz/kUb9LHbg3nphxIdY2kh2AnX2d3BHAlUPid8NBDZjCvd93e/k\nFlNbkDyoMFgf7lgZeXXBMPDRFEZ5P7tXzfwWS2hTjW7mGXEHt0bk99zCxG9E\njAJ7Xp2nDVSS0And/SGQMlYm9OtY/i/ms+xvJukJbt7KJVG8phrbyd3xIBrZ\nxEuVz4Ra+5q1pYFajSmgbcOFtimPn6YX0aAnAL4hQJRmyo1gd2SS0RWYeFVU\nThzxYdbsJl1xdgEAxqfxS6axCOo+rOhct+vmZpf6qlWkiBtmNMAx7n0tPEfX\nuOT5VPHYjGQVut3hLj25nMC+gCP4JyVCvuA35UW7VGfqokuDBFTuJgcrblBO\nSEV/0G+YL8RV4LB4aNl8XtAjr/uPEQXsoM6J4EkSPez6PqVUNvkWfJweaHDB\nQur1efK6axRhqYlWIxtBXPmDUJDY5tduHoqqppFPgs3MjCSRC17HMzrMSR4u\ndKKY\r\n=Detw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b873a7878b871d2ced45e7f04055b3d4ef0c7af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.a432ad542.0","@material/base":"9.0.0-canary.a432ad542.0","@material/shape":"9.0.0-canary.a432ad542.0","@material/theme":"9.0.0-canary.a432ad542.0","@material/floating-label":"9.0.0-canary.a432ad542.0","@material/feature-targeting":"9.0.0-canary.a432ad542.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.a432ad542.0_1604627218157_0.40815327454918715","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/notched-outline","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.e2e8aef1e.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1b5f4a054ab7ee69ba38faa44484407547edfcb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":34,"integrity":"sha512-avwrKEMPyjv/frHGIjailXCf4rYkB6flLnvYx2UIgtcDdc9toMyYq8vbU1IXKnYvYHuqQDpVXbBSAvVVFii6Bw==","signatures":[{"sig":"MEYCIQD5u7KBNnePAWWcEznXuy9gvFfjsrnc33Pi1Z7r5xJQ4AIhAI/fEX+qOpfSTHLbShVJzn4LpIb7vam1dBvFy+koGiph","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK+mCRA9TVsSAnZWagAAbAsP/2KaETyvPIXjPOB3/t95\nwaAiMGP3fwxNIN4b7qgP317BWawlpGyJxA6tY06IJxq/USvgaTcMnahsYgdb\n3cpkFDW2631oG+pdzgciOOxxOwHUKQFW+ZEU2EW14L7Z91BSvr8MyNXoiqvr\nqiAR4jcp4AJUtgTtgQ/pLwh715jMMwmtw22T3Q/cN1Av8eGT8A3yMJOzx+6L\nhuxuExhULB9LuKT607i6XP6jU3Eu4Ddwq5lMCYV3OnWW6AlEjHCcx8530Wux\n/4St4tI66hiiB3rXhVFFD/aKgIKKItWoWfYYqj0zU3EhjNuLkGBK2iiNcwko\nH8F5fXgpojXih2id63f51KbUAiSeBxQ3agsUlsi1r/hYjyTDqih58h3Ax1ss\nIxJy7+K9XOi8Y/le2gWzoHdvAKKwQOmBIsTNzk5Jh/QFUM9+FRWGVJM8eGDO\nGHDw0Pj/kKo+rtl+TYTFcqaPtplli576MuLbDNAVVTtsKqsNeMqi3iRrCbO6\n9YFD7jaO3CYdbJ/a+hDky9vBnDffADU8AYFJk/SdmtF7AgXU7Mik9WypK93E\nV8/VnQ9yIyyU89eK5h8ynZJefq6WB+KuiSQ6CFo+egoid5oLhfPvGfv3sHRg\nYYHJopR5csNpBpZwrNjEWTwrqf+i1rspRmYiHY4t4UCszGfmjRI1x1MwH1Bx\nNNxx\r\n=3/xR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"59b208be2f946b47ab6905d82c0135e81316f2a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.e2e8aef1e.0","@material/base":"9.0.0-canary.e2e8aef1e.0","@material/shape":"9.0.0-canary.e2e8aef1e.0","@material/theme":"9.0.0-canary.e2e8aef1e.0","@material/floating-label":"9.0.0-canary.e2e8aef1e.0","@material/feature-targeting":"9.0.0-canary.e2e8aef1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.e2e8aef1e.0_1604628389695_0.8300410299381578","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/notched-outline","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.ec6b68b34.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"744390f72be03df634969309cc2d0c7bc4b9a6e0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.ec6b68b34.0.tgz","fileCount":34,"integrity":"sha512-lrzdlu9RjVmAmg/mf8chY8zlRw9QkexoD9F9TVa9rMYa7/cm4bWt7J1yC0P4CZwnvOUf71/Kys1Ww79bX/O+DA==","signatures":[{"sig":"MEUCIQD9HFZRmbqdMODFiphaBNpKTIwFyn89mq4XvsTQNxnI1gIgH7yYXiVhv2xYO1fZMUfVuCEzErtoP6/O4HDgKjBqeGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZynCRA9TVsSAnZWagAAwO8P/RjZ73Yh4nz50/RURoKk\nWr3+fiZiT3tac8Bfq6guhS5moGMlqArmFiTLAiW2V7LL7T7bBUt16cvJ3vLq\nEANR4As0GhnBnHKrTObSykXztsT2sHHIHy4q2vnVxLVmMD5LNOKwQW8mdUOa\nDRQuG+Fslu4AWlJ+WwfwDNMr9lp6s8NdvexuOG9tc9gLfbSkF4hpyhyK9Rg9\nKBv9elIo2kMoWpj3my/QOwBK9wbujsQnFS82uK0elwBZswQ9glfAPdZGaQvB\nEw/qcDF0HNjHvZBwFB1pj3iCQ9k0GWcsfYqBiSzeig+8ladFbFL/YeKw62pi\nwKO15mVgQ7SM7PhHqjuRIwY3v0CLaZSFcjNGW1z8jjgZEsY2HzpA5P0hctVd\n6EDndPRbOaduEeGFK0P2qtkh8rB1EBZmd24VXXfSBmxmz0WIKwXBcxBYQNKz\n3RPYNA4Kw7pY+/UxaYw8RMfOGALdOL/W/0bLJ76mJaaxVjEaOmT71Fz1hIXY\nChz9gt6giAvajIBUpDwSfQnYczxns/QNHdvaT3B4cEc/FOotQj9+ksn31PuZ\nXfYcj+2gpCPXXpytnNur2bXHznKs5/jdD4gjb83zAf3Q1QwI6j3s+Hf3G/yY\nk8iZYpLKn75oN1uYCzhJCjVgAPUH1VTW2hm5RumDQgoklL0Bc2fFfHpQADI/\nROBx\r\n=04hh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a5005840630991931dd5d6aed79aa4986773a5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.ec6b68b34.0","@material/base":"9.0.0-canary.ec6b68b34.0","@material/shape":"9.0.0-canary.ec6b68b34.0","@material/theme":"9.0.0-canary.ec6b68b34.0","@material/floating-label":"9.0.0-canary.ec6b68b34.0","@material/feature-targeting":"9.0.0-canary.ec6b68b34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.ec6b68b34.0_1604689062620_0.045342949145178","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/notched-outline","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.b39094d14.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c1ad8758757c46934d4f246f527b403e8414f80","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.b39094d14.0.tgz","fileCount":34,"integrity":"sha512-/dFR7UuOrBPPYKIZ3CdibQqir2LUCfPtna+WTh3cuyKY3sV+H4lrjgOXu6dBKxaOXsyDXsa4qBybdtk/eOZOcA==","signatures":[{"sig":"MEUCIQDbH5Kn2ABsssJJ0GCvdBO5fcBedoPfU2yoLf1l0mFfJQIgfgGkljpS3bxfj6J+jaQbUUmSoLWhxyHpA/qGokOhq44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb1UCRA9TVsSAnZWagAAYucP/iLaY88YaY4EmdihuQ2v\nk2r7vmZbxZrofanOjXAtPkgnPrseIARSAXa+oG2R7cxgzaICnSCuPi5ErsjR\nmXG9986Cmybc7BgjqiADAKVC0NA7bUF/MRVrqqkfEWCtZAQU975klJ22T4bf\nIDcmKQ8hlmhqcbctsnLMOkacYDwrAtN3lxcJp8aVZvJXC+7NnanXjvJhmO2g\nN+n6GGLDC/PiiCYZ5eXMpoJGLqy1/qysKt7Pn/h+ld3ircaQrE/D2nZRNHs4\naObmaV+/x31ERAo/epSg54AT1C+Czi1QFfomZCRcSQoaXox98UcdfdjOn/xo\nL+TAets6q6adPKKUtCUVehox7Wtwb4yAhrUz/9YDRcysGWN3Q+NGEJXcZ1sN\nV3UVjaWHtxa+UA21XpfC1K3pzGDJPZNtLLTgt139sx1yT0C9AA/Nlxb/Rydd\ngRPaYaTcG67GNpsL+zpeKSmPuOfOeswaI/XgZ9A2w4tpfOPCUpJIkeifOfdJ\nRCM6faMd8pCyK3akHCeyd3tSzplfx07YPp8zTeXEP290QbjeT9Cik4sFey34\nScPexsBg8XeAEDyJ40ClP6WNtT+AqNqRvL/8HBfsgX77hZV15FzhZVCFIs9T\nU2p6yGn5hAzgvykfaSXX292qVH5CS1cwR/nit8CWfg3cJQmSVtTfGm0Lw8/5\n/dMY\r\n=qM4P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f8c5ef7d8cee2d0a63421ee4afe42e4e9260cd47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b39094d14.0","@material/base":"9.0.0-canary.b39094d14.0","@material/shape":"9.0.0-canary.b39094d14.0","@material/theme":"9.0.0-canary.b39094d14.0","@material/floating-label":"9.0.0-canary.b39094d14.0","@material/feature-targeting":"9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.b39094d14.0_1604697427473_0.4785958535117718","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/notched-outline","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.8648b8258.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed3f5442b673271891d964fe926f8e756d67ad4d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.8648b8258.0.tgz","fileCount":34,"integrity":"sha512-144AxuMDywUYl3KOlkIDFuI5iAbXaH18sicDFgekRoN8n2UTf5SaZifNR+m932xf3c7TWPErZP2FQorJAJRRYw==","signatures":[{"sig":"MEUCIH3mZQfkW0niQX7YGebFptfcJ4gsAZ77QeSkQDuZbifMAiEAgubOgpCKKXu2HNLvp1H/eQ6Lypr1nBR0SBPpxb2AmSA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRJiCRA9TVsSAnZWagAAsMkP/jtmpsKZXpc2nOppFxrR\nSsq+A03Y6bGpWPiLFgJ9Sev8TMr0OCuu03ZHCejiRI5qD/x4E5ZzU+wbUwRx\n/XVbHHY5NyITvdoX5JY0W8teUcrLNwKUnWYmueq3n+7y+G4BZiWcVM9iI9Zs\nZJimZe+b0s7nx96zCozsAFP+Lo7ZI3k2UVTulPZOCw4s86w6KX5WntqPYCMW\n3d8QJObtt1gl3UZ3JjzjsOGTyJrD5F5ndqsrIIpMZT3EIFRD8+JJl+P+DTR/\nKVZkXX8Kup2G4BSguab6uBGOfocxfA0Zr1cHmkUHOMRhiS69BhHMNi76LO1E\n7bBmpydbDJj15A+IRyYvtL5rUTH24RlbMfN9t5aaCbIJ7hJ/dxC4RnZfWn8B\nqUCL7tj69ix1AJVkMnh9+xAWRAu9rzdnXPkLIW2PpGClcI+VXD8041lC5gUK\nqANb2/zJlwxwCiM5b5bZ5tsRHsKeUmpqHX/X04JKMC7+t17Q5kZ94vVoKtLY\nlxmPA5hQAptlv/Jf65yc6U8kQmknEE+oSjGkIohQURz1PL/aXkrfPpLCrW8A\n1uAKblE7n1Ka/+qgSVYcz9BJNjDYOxhdKyclhRfww6uGsjfWuDACcWfjouKe\nDvq6h8ShlLxRvrjiq1chQMLLOP6puwulHyInT5k+gnNbmiIswyjoKJoIiqaF\nctq+\r\n=PWjh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d98de60dd3d91dc14a84abb664678188ae936030","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.8648b8258.0","@material/base":"9.0.0-canary.8648b8258.0","@material/shape":"9.0.0-canary.8648b8258.0","@material/theme":"9.0.0-canary.8648b8258.0","@material/floating-label":"9.0.0-canary.8648b8258.0","@material/feature-targeting":"9.0.0-canary.8648b8258.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.8648b8258.0_1605177954147_0.12834783526461857","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/notched-outline","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.240c5f74f.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f048b2918a7d49a0e4af4393de38b471f73a6d6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.240c5f74f.0.tgz","fileCount":34,"integrity":"sha512-Pa01ug1nuxNmh/zMATbLP1T57TwYuapbVEnGcAl4dnlzn6WHjGetvIlx6gkd/Rc01xOZUZEd9MOAeTzAMoTXLw==","signatures":[{"sig":"MEUCIQDbw4tYeaFEmnIrtEMVRCS8hzjLc19lHk/A8+EnTaCQKwIgTKR13X1W10pWgEE1u79FCq9Nxuy20G45frd2y53aApo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZloCRA9TVsSAnZWagAAZLoP/2JQ4v83MW5vfyAwQ8Cn\nUvj7+h8ztWlt1iBTYWs33thr1qInmFhz5oJsqupPebDSXaIUMX9ZodiO+/Hi\noWSDqHf4wJYCh7rTi4bEB3NRO7wkuJPpB7n/r/sunYqZAO7HYMkVgxaGZRio\ns8+UBtNuawPm3Dcl70lNglaIuwfnO0X6dF+1E+7opGo9wejww4BZ9Y7Zi4hO\nb6MaEL0rPycgMkt0QUzKbXapIqvdTxzWjyFXHggk4nIfuf/3XdOAsFGwJb3c\nQFK3XheNs3t8/1XJz6Lo5VISEsayplgNTvKw7Mce25qCSPEGmVtlxwIzfa3Z\nPAt0A70xJ13m3KBVJc3RGj3bTjrWYzwaKpAW924aAJRs4V24/FP4Sv2y0GoH\n2pUVRTz6NS+yu8UBwRGxN02S3RtPFf3fNfUlDgcjC3pdHGBQq7WUSOuYN2F5\nQlTnLN6eOLXnfDTA2AYzz5NCFzHelfKwdO78U9FUW8Rq7nI+DWmKT0bqfZ0z\n0V48Z4WQh0HAB9ycxvc9SmZuP+KWlfc+UFuJGWPkzUbWlP8jywVEWdO2ZMgq\nYuFPkICNufzhhUmeH4dOgfhlmDYjAr+CrE+cXZSgq04NfYnd12ie7IMu3OSt\nZOxe9TGD5D9KmoHYYD2bVe9jGnOIreW0xF73mu625e8ax7oR2yR2Tx3+xBWU\nn4OI\r\n=YXon\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"33b77622681b24909d892ec906f608e75f5e9809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.240c5f74f.0","@material/base":"9.0.0-canary.240c5f74f.0","@material/shape":"9.0.0-canary.240c5f74f.0","@material/theme":"9.0.0-canary.240c5f74f.0","@material/floating-label":"9.0.0-canary.240c5f74f.0","@material/feature-targeting":"9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.240c5f74f.0_1605212519663_0.3650618918470667","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/notched-outline","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.6cf6ba4f4.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"243fd7af0acf97d35692c3590772ff381aad2a42","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":34,"integrity":"sha512-ENY2WQhE+8PP5f0sdul1v2C3kWE/4SEUoW9/xuQ9d65Hed5lI3DgG7nmfPkl4M6dnBGJt9ZmuqXhEXDTkZ9+Ww==","signatures":[{"sig":"MEUCIQC3TVRqAGPlcExGw/HD7+weMea98aZdswRxPtnYDVp1YAIgQzRFCImzCY864k+KV9cL7P1BvP8e13hdZrthQnlrpUM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssogCRA9TVsSAnZWagAAaQoP/1hbVdp+zGn7WWtAeBzF\nTPSM+6lsNPq/Y2JoEMZeYpG3QZYOWaNo6HhARtygHsnxWEdINn0kS2Y9XGEg\nyVgqWbxHJr+mYSHPJBVrZv98Vw/e/P6bdfEuDDif5VOW1Z57HBWllfzSrjaE\nPN/dHmRvjIoAjIsC/Tq4FCQxIF85fqiA+ClJ1jgRNsedYPTFlJop5XILj+a1\nX5GUde/NU6LxilC/drxKErzuT49fiYDozo3XcYYUbL9MNEmVc92xtpCZBYXT\nW/Wz24FJcvf7tbiinXpOPs4KdhfOn/YTvy/x5kA+zRjYGvEtedrYnZ8WpyKY\n9OYl5ygHobcTaqBMZBzsPuEGmv+nchGQjL+6Up0Hva1rJwHMKBgWh1w9hbSJ\nsYzX8kGXTdEIRRaGmz4MZ7JT0i0gpGyce2uvKD8RtEb4OaFqTZelgA7iKWnh\nJZYN2RBf3+sWs44U4nac3C84AtcMkHGlzB/VYgAyCkt7196tXuDqv1Nf2Kks\n9S+O8NCK2JTD9l7oxJWyQUvypM9Qy30OQdwCjm2l3iZaBxwpFV8UaNSHHT7x\n820AHrSd5C0xolo305qsGRUq/tRwCCX44PTjgqJr6+c12DABm+80GIPO3NXy\nyJnI8DQZn6mwHT3P1i3TGNQQrmSgFlt/0WNV9bMwTGSEptB5y0kLq+PQacDP\nZzls\r\n=jb0w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d2d4890ac5812ec797b5f621137f4e8a077c3c0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.6cf6ba4f4.0","@material/base":"9.0.0-canary.6cf6ba4f4.0","@material/shape":"9.0.0-canary.6cf6ba4f4.0","@material/theme":"9.0.0-canary.6cf6ba4f4.0","@material/floating-label":"9.0.0-canary.6cf6ba4f4.0","@material/feature-targeting":"9.0.0-canary.6cf6ba4f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.6cf6ba4f4.0_1605552672071_0.8542427511398909","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/notched-outline","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.07f3e01b7.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"020c10ebb22c3c1135b16a57adbb6d2de85598e1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.07f3e01b7.0.tgz","fileCount":34,"integrity":"sha512-pbLKsfiK2Hao3j4zPL32X+/UGYBaWH8HadQGb9SkcurA5Zf4+z8ZJWLILWbAs5U6Gwje1IJ+RWZjp+h2AHhubA==","signatures":[{"sig":"MEUCIQDoSDx3AX8H+wzuChZsmoPtuMhRBc+dXBmXxTcitVAlXgIgWWOyQdgvtiNDQQIqn16Wyflp9aDw4DIk6qQUDN52v7s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvNQCRA9TVsSAnZWagAAoYQP/iSFQxLo2Ox6WBYGP31G\nwS8xkmSUjYq2tVuKZkfIlyjjG0jGFXlvcWQnwGWvqWAtuY/HbwTU4VuonHgn\nOTq98V/+Af8SFKXVD+Geex85YKelwshb0USXVUNmWHOaWuqGesvZQ1uP4qDA\n8z+8FIIW4pJdu1fPZPUhvHBoVur+waDjWCvO+vHXRNy40vchwq54rLjMNh3E\nStcCdSvUW9p9i+Hz8T6OCOElNYlVU/LEn67HL/GmRcz4JoVOcufQ4uwvzcfk\n9wPXSTmbSf5A1Tko4sTKHJELyNgKyompSYjWIMbGMt2tTuK8oZFFGf1sh/70\n9N19ZNWH8lOEz9QHVZ45ZTPSnW1GZSOj31LjqhKnJ8X1FcfKYd3nw5i1sLpb\n+hi/M12YVbe3dJkOnA7qqUfutMNe1m4Mmho1H9fyVnJKED+8ILml2OpioacJ\nnYke5FMN4x7xipS2ztzYVGrV3ippCOZoNQuGTztr6aaw0+zY8KlURtg5zxrN\ngArBIU/3ZynzSrUMpakhYiqiPxTH4ffNpaSnmgm7EgmJky7eFGoKAbiawUBT\nkyjkUH1c1SqSkjOQ3DM9dfYq1j9lQ9+sy6YA4Xr118BQ4Em97+jl5V4uVwtI\nH3gNWT1b4yPrNJO1rcQUIJuaVNNBHbTA2IS1W1gmFNhL0VhPcRGg4HnAHudr\nKld+\r\n=n+HV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"39f1e043d0db0c6881d84b3d7b54423f64cc8c0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.07f3e01b7.0","@material/base":"9.0.0-canary.07f3e01b7.0","@material/shape":"9.0.0-canary.07f3e01b7.0","@material/theme":"9.0.0-canary.07f3e01b7.0","@material/floating-label":"9.0.0-canary.07f3e01b7.0","@material/feature-targeting":"9.0.0-canary.07f3e01b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.07f3e01b7.0_1605563215756_0.22346868838138545","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/notched-outline","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.23491cf85.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f4b496816ea20b28a8495809222bce9cb4e6336","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.23491cf85.0.tgz","fileCount":34,"integrity":"sha512-ltQ/5nRo3Fjm4u6PZbypQPr5yp3KMsOzL4HFG6lC3rhD0RH2wu8xbF6u6dHaW7jDHiLZBDV+9xCh6hXLJzR9gQ==","signatures":[{"sig":"MEQCIE0FEs1FcF4n2zJ6ZZ1VcnActWPDo4Q+jEaZCNLtFPs7AiAssLV6KaBHQIpjYomTSAg4YiTn2WEflkfmJJHiIjBvKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxbSCRA9TVsSAnZWagAAXisP/AwPeJslN+Q9rfDJV9LZ\nW7gWXWq+VvNpYanuMqwwrxh/toCQILoaEMQbkOc4Iy4fffhmwEi1gEyxttMw\n5S44vtWRBQVYYTyxv2vzXAx8NMz+2HZ0U0XevcTWthWdfYYO0R516kejutfj\n3rFRhXF5EuRsEQKGcYNKw1KFMseeXo1LwlzGFSV/PKtgXwOoXlzu1k0EHm4Z\nWNuj+0dK242HhWQ5If7KStOQf8f1NJ7X2sqC9lAIDtsD2uGesy/muocBu2CG\nSkxO3FQDcWbVfyOocne2/vz9qO1kUKbBrlFyesf19u8nqMl8sIPut+QRzl92\nNHQD0NGbYPPCsJWiBOLJDQf8jTYJmWYkVuSrw9/LUZhnXufUHfEho8T83P5U\nEpgaeThvuKbKCQlejUjNbqo+k3SgReAunuxg6TCohYtfAeTZbYWeZtqcNkjp\nalcW9qHNMYYgb7mRwoveBFsZkSjcubPNxzaKzdCScl/VUwrmHA+3lBmp68RY\n9Kcl4O/4x17Xc1b4JHWvICtJAqsUNl8HD7mbtsKXcrJKvBMqsnUxlGch+F4T\nc9ZEH6yW91FT/S8DyHvPyE6gHozenk9dVYNYS3kyK4bf1k2AXj7Uc8C6UAvM\nNAB8It2crniJbHKko5GxDek1IzPxwI777ebCelLYiAULWBY40GyigZkcCFHH\n3OVg\r\n=88Aa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cc2535ba5f66f73426d236b8a85291d7395ce589","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.23491cf85.0","@material/base":"9.0.0-canary.23491cf85.0","@material/shape":"9.0.0-canary.23491cf85.0","@material/theme":"9.0.0-canary.23491cf85.0","@material/floating-label":"9.0.0-canary.23491cf85.0","@material/feature-targeting":"9.0.0-canary.23491cf85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.23491cf85.0_1605572305790_0.07035863708151258","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/notched-outline","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.b659d4fc3.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af56cf6ab7c072b2700244780ffefa292c3c2076","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.b659d4fc3.0.tgz","fileCount":34,"integrity":"sha512-wsS3mOZCvP9mxmjy8QqumJnp2Tcs3LgXQXW3lCm+Vk5qmYPn0WFAs4GQb4fldvCXo8Y4TCNoBXSpG7mM/a02YA==","signatures":[{"sig":"MEYCIQDlBhD3Yc4AW6C6MYipc7KCBMZnU59W6Flz7sswAM2p5gIhAPn2490FdtavMNtwyFU2Dm65Dg/YXz/0YAWdInCnAfAH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxinCRA9TVsSAnZWagAAY3EP/1lspuovOmT8+q413xvk\nUWEmrsopHPk41zlG4rY2UnXx3r1dQLUOGr0F4tcNYtN0zB2vku2kjQETb0A0\ncaQfIuStCDpu69DdUu3v1eljX1euxQ0hAK26UdejleLtANDfX7SH+D+r8gwb\noHCUNth+ULN2Dva0zlKGtlqSqJLKxnnpqRcizrHmEhzxlOJY8IfVcOQ4kJqX\nt2mSWMqgKqB/JLXahvHaRIxFgoyl+LLXT19yeTeOY57PeYwDH4ngLUWU2Xf1\nW5GGb5T6TQH3Ott8Bc07w83cbjmoORZWfvBWG133o1CM2nmMT5g06toMG8AU\nosUUYEothsqub8rQROndc7fYv7VlrlEmnf7lzjB/vzn8evB6QILWEm1U+c1L\nHFJqmvbhYsouXzdLtY4tbXoM2hn9OKuLlvhXF+z01sZW2Flb/xD+5HdS3WPy\ndHMoURVwETsCMbqimeW2TildnqxKI/VO/M24q3MFE4p11vp2q1Tp5NGZDWPy\nZqMJnSC7hE+u+srJ8Gngc/YwXBnw8R2f5Lc1PjudINR06gTIg+Dnce1VZ7Bo\nqPEVSto15JntB2AS0HwctQePuO70QIirq+PEFlf8akCspeixIhXO33fYtKzp\n4uw5eI8Vor6AIMP6UAqwUHPFl/E/z21nKHdFUazb687H2UM69KADd/30w4Gn\nR80v\r\n=icwf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"da948526208886bd05bb015d249db8d19d4b3f05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b659d4fc3.0","@material/base":"9.0.0-canary.b659d4fc3.0","@material/shape":"9.0.0-canary.b659d4fc3.0","@material/theme":"9.0.0-canary.b659d4fc3.0","@material/floating-label":"9.0.0-canary.b659d4fc3.0","@material/feature-targeting":"9.0.0-canary.b659d4fc3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.b659d4fc3.0_1605572774968_0.9286054281539378","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/notched-outline","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.d8a3aed67.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bfb519bb41780dabe618297dce6e33c7d89f546","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.d8a3aed67.0.tgz","fileCount":34,"integrity":"sha512-Ljzikfw7D7LLfkG137MbodopVA80s7vH1NP5uzi0H9o9XWAG5zdeB8hlXgBAtrqUTCjSpK4ffwJwjaT8xwFdhA==","signatures":[{"sig":"MEUCIGZW7BYheuicvWZ6MtS56d1AWo3ekFfkCkshQP8CI3X3AiEA7O7x4Y/eBZoyEh/S04ho+eSKMinu9GLYQSLXqlbxw0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+w6CRA9TVsSAnZWagAAO6cP/iVCo8XCjbE72Cuqt9Of\nWiMVyyjFrG+kRzBhWxJ4tfeUd7YO9MUL5QvIXKk3ReeqEX9QepjMv6838jdm\nUbPSiqoCKLYsTAWgXXDfswwW+eM708fcYIiqnLYHYaSMQSKC30Lh6TF4KSSr\nVWCBBBnnZMOJaWPNkCnz1YgU4JhYG4ISIdfy3IUOHeBo55Ro7MQTAl7prp3e\nRgI/ESkD0J7QzkWLjwgllZDE4Qko0b6uk48hedGfojsqcEIr6b5jAGEqepgD\n75FU16+jH0CaYZho/Z9M9rX8wI61aEuZ0JTOsw6FPNNOoQstt3vNi/1mhsZe\np1K2hzkJgz4iLvpV55+lNbu8PcwcNjCO7rBeCix86hp3MPl76XMPwzbr/CNM\nzAMkKLziSKfi0Hq/ZP39M/tJ+tOAYTeqD8MSYhqh27/RrWOY5KCF2qKfiWoc\ny4wUHpfSR+LlwvD41nmQA1pblytdj4k535dxQ40VHVUNyxEoGjtzr0eREtdx\npHUwxeRDL+FuIddxUDgUEASLJuSi4WTm0HEPvb+uAqXZcbx4b+Da9seU5nEw\nE5yrt/oljADpKJdwLzNAGOyx8pChsUlAkIiNZzGty+KtKF0mczA2JvESwAv7\nKuGcZrfL3xD6mSBaLFReucCq9vGcYR3F9bQ32muFrYZU6C9mD83c2bMpg8If\nekmf\r\n=CILC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e70765503f122fcb3d748ffd41882655d9d4035e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.d8a3aed67.0","@material/base":"9.0.0-canary.d8a3aed67.0","@material/shape":"9.0.0-canary.d8a3aed67.0","@material/theme":"9.0.0-canary.d8a3aed67.0","@material/floating-label":"9.0.0-canary.d8a3aed67.0","@material/feature-targeting":"9.0.0-canary.d8a3aed67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.d8a3aed67.0_1605626938404_0.602685847156081","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/notched-outline","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.482ff9091.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ad51efbc0f87ccadacd33900d820bf917cc5b3e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.482ff9091.0.tgz","fileCount":34,"integrity":"sha512-PyjiAZJIa+fh/3P82EnHmyYrjV1kZC9+YFMG9yA501Z4w4IUsizB4Z5eKmBOcmzlL2a5Pn3MAOQJ80dY/Ascaw==","signatures":[{"sig":"MEYCIQDjtIKAlksMubHfdTUFoDPiZ4zv5BHXXKd/bhhuxqekWAIhAMC0OnhD+Z4YgYFY1DE9rub5V3POpUihWU5O7mpj9U00","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA93CRA9TVsSAnZWagAAFlgP/3cJQ3pdbESDvph4Yv5S\n3nnpckdy0yd29n0OJL+mLu65TTl9Dsig8PspMQie4g/4mCBvJlij2UTpxHN2\ns8dhkW3ZuUU25miGMKQ+nXzYyHiTQ3P1kVYG9qK27VLJlbLEgMNPXGQ8kMx3\nhpxf5+qRfTN01mcBVMpjT47YMEnSQCBkS6B8nEiFM40dwdtuXzZMD9Kffm7m\nM3DBNUdRKks8bRijjTWIaRY8Vo8WhusNWpvYLQ75Zy2zmizByhebbEnY87eh\nPFKCcvam+GFur1K6SDTLNEzaam1g6+n9v5VONFEEWpgHwVIT7x/F2oNWH+kA\nXKsZMvOPXeuhO07XniPWx2vKG4e7sIeZR4jIJqgLpoccQpP9ugYlEY1PmpDh\n0O1wOpx85MP3BQGU6cprCbVIY74LKSwy4+VAb6pHPA9Lu5C5s042xWCGTxKf\ntyv+kvOVEo5X7VB99fmF+M7HdwnIT7uOmI1Qp+1q4F9mOfKUQ023kOOtvGWo\nflYr9uDdZz60kEJbGdaJKDfW5WVtzNWMAEkBAtfLfWEm0LeTNJgeaqSaAGHi\ncvi5DHQuIuhMerc40LfxAurHIv4Fbw8lAPxZvbsWdZLfQXKOjdY7uOZEV6Xt\nswKJjDEVnlrNfGK6ymUAkdsQu2+hAXcFGL0hhJvFSaQCNlD1BYfu/7ZRvEhd\nAcny\r\n=qtF3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5b4b306ef0e5d1d3654252169bb9fb9d75490dc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.482ff9091.0","@material/base":"9.0.0-canary.482ff9091.0","@material/shape":"9.0.0-canary.482ff9091.0","@material/theme":"9.0.0-canary.482ff9091.0","@material/floating-label":"9.0.0-canary.482ff9091.0","@material/feature-targeting":"9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.482ff9091.0_1605635958737_0.3802880514560918","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/notched-outline","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.99cfb6bd5.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0a19675d3f05c1027692ea12404bc90b25465e6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":34,"integrity":"sha512-f6rjFjtPlZebyJ8grthsiS8ThFTFmnd2pdwQUr/5a4YB3b4BRWus48hyrHrN+rwQrPvnpUTO806/dUi5a+PE6w==","signatures":[{"sig":"MEQCIGWx4K5s2oDdVJX97YamU3KHMOryL76nJBUDth6YmT6+AiArYtlIXhwrMD8OkL5v/M0CObr9yPRvOZDKikZRYR4dNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWu1CRA9TVsSAnZWagAAYykP/2Ls75Xq3W6pWMdCb4xE\ndl4qfmzkPfP3iA/qzDc4CNJTRxxWspHbuCssGkcnpujlEvix4InxYQS7eEr8\nEzbG2m59cbfQunHkqutjyBSSG+QaUFS/IbSTzEuqzCMsPov956nFz62X8zvy\nJPIRGSgz5sQSqvpOKw26l6zVuteWEXv0QBfh6Qy7mnqQuyEBazsezbRqCnEN\nvdm3GJSnaURk16SXOLk3/690Xos7OJ9QJCf1Qa6jGSAfWSkwTMo8S6ZHcRwb\nS0yztQy5ktQuGp5spEH38+WMvaIp7bd//86XByFF3VNPbLruqA8u95yBv94U\nTU3edGIxklEdyPPeY5bbSocDUaxhGS/qXoG8CDWxnJBPA7B8J9m61itrV9ki\ntiixmBJCsF/wCNvxKKZG5vECC1lp1AvS3VWCG7ms5XV2UH3v5wX2cCziGolI\nvZ3ZBGRF/kGIShL4jZpcCs2EvVTKGfWoJjUJEpH7pcZwO4jY9bh34HY7LiGW\nt8Kxc9g8mj0+bpu7Wvq6JltrckKcrIBm4P71HsadhbwM6RjWVanmLG8Zuqbk\nMm58LfQMJVcNuu9yWQrF0s0mRs7S6Q8Pxha7W0BKAm8gXQi7JE0Z45PlC6JL\nJJwragGa4OPF3jNKFg3DEAto6WH6EqvFhZVduZUQNGv9JR6tmR6ZHLttiF67\nfPSP\r\n=A8RT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"97b5b434f189a370838c9b867dfe1b766ae52fde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.99cfb6bd5.0","@material/base":"9.0.0-canary.99cfb6bd5.0","@material/shape":"9.0.0-canary.99cfb6bd5.0","@material/theme":"9.0.0-canary.99cfb6bd5.0","@material/floating-label":"9.0.0-canary.99cfb6bd5.0","@material/feature-targeting":"9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.99cfb6bd5.0_1605725109211_0.2437513065298773","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/notched-outline","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.b98d15d90.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64bb2bf8e0a651641928fc83842ab48006182288","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.b98d15d90.0.tgz","fileCount":34,"integrity":"sha512-blDCVpcHCut3lIgY71pJ/VD5rtpyRAKv0Kca7UqpSpfgA8vj7bIjPPLZMKLKgYlQlHorR2a8A8g5HN+D/k/u2g==","signatures":[{"sig":"MEQCIEaXDCn7WN7bMHroBSP+lQRZhuwgpiYg7khu7eiLaPI0AiBQQtExFn8Ja5jcSxTAZ7H/9V5JyeRoe4txTz/T5YKxUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaHOCRA9TVsSAnZWagAAuisP/3/ICQBCyqK2ITodfc9n\n8RH5oT+XsL74H4b6bgSM+lsH0bGkxMqi/cq7Qvr/7sUH2RnOS+mz349MUwBt\ni3+ntl69+p/nLBxBI07ccYlFWoptLBXUHT4o+/qDh8y7+TbV4nppsEAJRKI2\n0YAAmuaGbya6+oaDSTBgLpzAH8mltRaFo1E00zbNudYoGe4XEf+yV1hOX7ws\nnzp7/2+mjsg5KHg7aSPwmpTCskvDhFkTtr5BF5GX8Oi1dCegTZ8pf+jo3L61\nOCRSmaC/zac3v4mewE0BjyV5Fvb9JdHKqWR1QWHIDVSJ86McQ3Ql96C9GEK8\ntqpaUTQHvS1zoEpwOLaYF1Bv8DdeJLY56QUqPraH7CR9RTsAR7d3KnT6bxG5\n96vjQPYN0tNsFxNTVBr3/Het4Z8hvfum4G+MQZlLtnCNdyGBGQJ9l+KyIRJa\nERdMojvTmzms4CmdZsnO+HgmTUOT3djeFNOl6UcTXRfMKDGnJ8bDVr4z/2Y6\n8RB7YQPMjgSrRfkDncGFmLyv9dIfCuTbKdXQ+pulQ6GWCta+e6RcLKU9VVu8\n7YuI7bZaHBOAR2jTtl6oHXreHWwWi+51CQZZLp90lqQTILT+d+tnGcefGlxQ\nMfhW+5oszbKBzz84yjBbWoTKy8HVa23ot8Qnrw0QoPLvUllrE0dXv6g0+mSo\nJkFK\r\n=DdbY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"abbd2c5bad9fedd634d7a0c98bb8e4a8b0bf3439","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b98d15d90.0","@material/base":"9.0.0-canary.b98d15d90.0","@material/shape":"9.0.0-canary.b98d15d90.0","@material/theme":"9.0.0-canary.b98d15d90.0","@material/floating-label":"9.0.0-canary.b98d15d90.0","@material/feature-targeting":"9.0.0-canary.b98d15d90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.b98d15d90.0_1605738958089_0.6782928929351091","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/notched-outline","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.30c11bfc2.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05a9ec196f87d195a61fbeb4cdf06e2c3c18166c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.30c11bfc2.0.tgz","fileCount":34,"integrity":"sha512-BKNgZcEf/OeqZgteHR7UkuZ4Coa8V5/dzb17ZSGr/Wmkkqyw1CpjIPNJ+/u9VBLXc1ir998jaQAX7qkwzl+DEQ==","signatures":[{"sig":"MEQCIFFuOenqccW022Jg2+pT+AqGDzBmCnKa3JL4YRtclCWFAiA3gpfhnJhBm6KQCqHKLoZtLbaC9+2n14QoL5gxEn0cbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcn3CRA9TVsSAnZWagAAPpQP/ivgwun+yVzr/Q/dR1Q0\ntaPAnk0+kAP+wWBRFJTrQJtwtzxiHksRbuYaeAgng88FyygjjIJSk1Pp/2IL\ncoKqlspCKmi7hB+HV2EP7ZvXmsqDc/y567HhVQ8kWJnEM8tI4wZIqhG/Sq69\n73lu19DrWZ6ZpwwjlHPkLdTkgvWUlfOL5xhINF4zCMG5HP3mtSq0p+4wHUrp\nQ5hDgNkRfdywMMvdzDKTj/GF172IUjm96Qpv8vkCTYPAZsbuZTbRJBrt4IK7\nAAOryGnFJfQ14Hx4AEJwPKDgTvrrvR5QuCacmb95QkhDNYq4bSCPChkYneue\nHDMYc1HbfeYTg7Rn0FbegSQIdEm8NFIkF1IjYr/eNoJaFTHEayIITKAfiHzw\ntQpjQmk/1CFgBWaqi7NRaaQihAAh2tl/ZYBsGGvDbu41tmWKr5h/lCZDVP8F\n9chODEVJxm0Jp8z/rAyMW3rtcvpexAq2iOTfyd8gKbAbCjKMWiO+6+c8MUeI\nJzuZEPhKujcrmphBpI0RkBc5fuJO4hVErLM4vx8DyLI8OuNDLztuY94ITX0k\nN5efpznckr+EhXNbl9yryer9Q+g/3QbvhjbKJljZ1Y3nqvC6k6dvbnSsP25j\nwqoOdAIw0MQOijbRlpfDHzAYbKa6U5Nw4BqtQhUGQUuYQC+OzWYGcc5+ARr5\nYlK0\r\n=S3Hv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bde404a844a4528a097cb2c90d03c4ce8bba9d74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.30c11bfc2.0","@material/base":"9.0.0-canary.30c11bfc2.0","@material/shape":"9.0.0-canary.30c11bfc2.0","@material/theme":"9.0.0-canary.30c11bfc2.0","@material/floating-label":"9.0.0-canary.30c11bfc2.0","@material/feature-targeting":"9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.30c11bfc2.0_1605749238961_0.6741159718983019","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/notched-outline","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.1b731d51b.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08b15bccc2c2a473f49f9eeed56743e3cc0bb55d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.1b731d51b.0.tgz","fileCount":34,"integrity":"sha512-LMKvjsBVP/1VvNCPxz2vrDT3OR8LgjBopzlakUAWAOGC0ZRiZYbYaKu1ilBnafjPlSrQd6GEaAAxSIgrtRbMxg==","signatures":[{"sig":"MEQCIF0jZ3+QfHkSUfwrzSSV4waAHD7sblIljoum0oPqkr6qAiBOcUAyDkPEsIPinnruMCr0y5yomSS8c3ohBMdu2QriIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr8rCRA9TVsSAnZWagAAOowP/15H/IULOU8uk0nr1T7K\nun4T4TmFKkVGufv6TmP7TBSYbTFeijpsClc/SQ2/tVlKb9MxbxHeyU2/M/2j\ntSdf9ivMgH+tCvInySyxhvaMme+KAhU0UsKhtknLr1NITHBbDn45jupRkovt\nUut2cke8s7PRcJCjQXyA367CkLPk6sqUtiZUpqAKE+lhnECjHmvQuQ71mbHZ\nBSNjpk/5j8iWsOYwYMVExzImrOIHIBWb0JpHoGudO87p+fFSKHRjf9qfSLAg\nUizBgDElVCSrnI4s9arwqdx3pHfnjvTeTNdvk8CVfrk3YYBlnu5CuHbLRQLq\nXYud+KNtE3FswC+fLKFrNTHHfC6QJEJp7Yav+P6YrUiSbEfoqG4OrbD7H1Tn\nIDRMJactfaCIHrl6JHWaWmEzSxR+nEIQkUwR1Nmkhdk37eZh9gsrIQUhtFjA\noX1gMiEKbLD1fzGs1N0yjpZ92n1K+5WAp021mn3ILel43uC65eo6CdfY4AZU\nT/AEEDNj9WL2Frcfm7mA8mu45HEo8w30xdR2oN4FOw3BM11f84qguy65rtVE\nGmy6r/n/nYoebN1EA/kUUukOnZWUjKzlEs/GS5+hr+Yz9Ds1IBZ2B3thSWu2\nTo4c2bsoPEzgIDiAb0tvLL6hD5GuNjfJgJLnOhNho4QHDTeDwWj3BGfkBAGe\nv+eQ\r\n=e9gL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"22fd036a79b754fbad742c64041cedbac73ce410","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.1b731d51b.0","@material/base":"9.0.0-canary.1b731d51b.0","@material/shape":"9.0.0-canary.1b731d51b.0","@material/theme":"9.0.0-canary.1b731d51b.0","@material/floating-label":"9.0.0-canary.1b731d51b.0","@material/feature-targeting":"9.0.0-canary.1b731d51b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.1b731d51b.0_1605812010920_0.005498271321435544","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/notched-outline","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.4ae94ff78.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58b8a54e7d8b7462727b179f6db0a8a6b453fd5e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.4ae94ff78.0.tgz","fileCount":34,"integrity":"sha512-+61YGBNIELv1uRlbSWyflt7OFcJFcVcr9gNN+Cci5W3XyZU7+O0l4d6A070VTevWrnjPxFZw6N0ETk6u0mJ3WA==","signatures":[{"sig":"MEQCICxAl/P9wjq2CTuQGVOJOCLpRYsMChBxCAF3tdlKJieIAiAjCHuzi+O5xRDdIbqZ1NiI0M/QMLO0CiOCIIHyoYOJ3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr/ZCRA9TVsSAnZWagAAj2YP/2w5H4Aug9k/IEiAWNKK\n8B3tfNESh+SfD3SOiOeHw92/nWibvfWtymiEe2bn+xBf/4L3GVAU5dIUk+L4\nBEInhIxjgiyZgaMGwVkQvAz3jGymk96oBaGQQmBK60kDkmNSO81GR/PsJwt3\nqK/7XGEFUQBfefX629eOn7wYMVkImjjReHjmZDHimAqlVWzB2xngZr5RoHT8\nm1mYSntVqRgLH9/CU+eIL4neKExeTOzaorp3V/nCZErzs4eCkrqEwa0Us/wn\nTqvWjoAIS/kz/TI2md1K4eCZZ0u17YApPJ113Rf9bdS1MdYPaBbHeUcvoI3n\neQK31vQGOcNFKJnOLTGLRF8zH7Z9kcF24HFOAIj7IrvtE1Z7U4w/o/PyoytC\nmEfbsf+sbbbuik6VhJqiRbjOrBw7OXsaMlPyRWsApzryBbdF0CDHLX/ZjkwA\nL11Ta79FIumIOj3Oq/NqAtUHkez1COSTdf/PSkGODKSTTJyetnA9WR6OTlp9\nGAOvHrlnYAnBNCXhywG7h6pcy0aUooRxMQy+IF4E4ePixhH3T2xet2wiLMYr\nGE2euFq7YmXKj99jy/kJwJ96ZLrsTZL1Bx6CU4Wr51fxV5CgLIG9FFcMJXwr\nW9tI2BJ1hGknEfNCEkiMbF4J54e3GaE+2nvU65pWfRze6bF5OA8LG2Pxq3lb\nOR1W\r\n=8ipV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"34c69ebecd44026cff9ea0d681fc2be3de9900b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4ae94ff78.0","@material/base":"9.0.0-canary.4ae94ff78.0","@material/shape":"9.0.0-canary.4ae94ff78.0","@material/theme":"9.0.0-canary.4ae94ff78.0","@material/floating-label":"9.0.0-canary.4ae94ff78.0","@material/feature-targeting":"9.0.0-canary.4ae94ff78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.4ae94ff78.0_1605812185207_0.7679375086288946","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/notched-outline","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.7ad038e1d.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"746f770e81d8e3e9a9ecfb57d102e3dae5341643","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.7ad038e1d.0.tgz","fileCount":34,"integrity":"sha512-hViFRUp37enyQEkmzhqCF2EPk1DP1VCaXDmiYb+XcakBmfZEe7zrRiTeIDQerdcXxvnzIEEh/n/XM7DcWwTwrw==","signatures":[{"sig":"MEYCIQCgbmStrrGij+C1CnA785AkYrTGImQ/mRnL6U/GF42WGgIhAMguyHWLkGXO41cwSh69KD2fVu52erPXRbtzvAInAZy9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsVGCRA9TVsSAnZWagAAZp0P/1vyJpNFPBjXnUVcvRZ2\nFXZOX82ZxVfiFAz2pPmBzYjmccP2BmA+kJBNxewo6rmAsi9k+BR29GWm6czJ\nWPWgiCnfToV4tsMa07VpndhKYyBeisui90R9deryv1T0FfuYu9xiMfqac4Fq\n21h2TrbMy35eAirMgp5sro+Vgj03XuAY/F3lBZN9Vdahmk0Pj9Sj6TjNGAV6\n+VGhqFTl2n/UownpTi/k9drO47GfLvA3CTCAydFmT1YJd7B0IiA+t1T7B2v/\npD+HAmh5GR++qtehHEoaTYYEe4wV6ZHt57FADsYnBgUTvYkkAlfsJmjwrs4K\nPLFFnSU/+c6/fETn+8LjxXbN9x8n2IOWHaV3kBGHn4QqWygk4rQpG9o9uPXv\nyjufX8qUXCbasxeP9eoZKrItQZ7v51zQxGzIb3fpfHWnzq56voD2QdarMqhU\nfYdWB+ku45igDajZjlRHoHNn7ItBggRjmsWRJIXYShqjOt9eu6SV98C3kw+b\nhjcohHJfwtyDJvzG72l9Nbb+KpBsRtjDmrjafyXzoKd2XU9/yjgmbR5R1CWW\n5doIobVKhp/mmb3OFp7ng58pXhJGr4LPUilCWU0y/axM7sLII5QUtUq+u8au\nb77PAsKIiJ8TDFVkZDMaz5nK/56kputt1X6QiyCtd8pdgnmSo05BCoyEW6tH\nXAKZ\r\n=vTNA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ae5e88e00f948f916eeb8f578dc80b6aa2084116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.7ad038e1d.0","@material/base":"9.0.0-canary.7ad038e1d.0","@material/shape":"9.0.0-canary.7ad038e1d.0","@material/theme":"9.0.0-canary.7ad038e1d.0","@material/floating-label":"9.0.0-canary.7ad038e1d.0","@material/feature-targeting":"9.0.0-canary.7ad038e1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.7ad038e1d.0_1605813574395_0.4532746220674062","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/notched-outline","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.a41527604.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3c2abc6717d623aadc6426aade795f04e7c80db","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.a41527604.0.tgz","fileCount":34,"integrity":"sha512-UnTBO0I1lSJ1qTEuZcEYlCdECs4ARFiP0QldjeP/XOXMRpYxawkMvXAtaMSEqU5p+awYyzTz/RP7F4fhFzxxOA==","signatures":[{"sig":"MEUCIBQ21ToEuH2EYnQqsgPIZOiZIHqq0L6jpYXmk272bzUmAiEA07lZy9LrZPDBoGzmV1SNVie1hY+AvS4pyeZY4Np2Ppw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts8UCRA9TVsSAnZWagAAJq4QAIXhUsYYM+CCX5GS8P3a\nvaShTWfpwUAse4kIJdESSkKrqA9ZJ1fjrvfZbpxOv6ViIO2Hu1qqjvJZjQjy\n9KjLNRhFGPtuS6TLzZfocAAyRoKKfgr/rzVMcQO7smgkq9p02oThvf1K6j8p\n8xwPXEjIUsoX2I/9cBaZPUgn1fFnoQksjbowb6SvoDMPrsTkCimMZq3DgVUm\nuRalL0pPiPHKpHbkdy5qXcAkw93a78IrcGFq7bIv0KE6z4rBPkWpyigZxTIX\nt7mRVf/gUdaNdpRd0fmST6KgOJzBunaGn1gkFw6k1oYRe+Az/GR/lOOHJGC5\nQ3gfc4GA1h3QAmMt5OOjTnhiElBOfPB9B0V6seaXUqCu2Pw2/S3guTO1dZHm\ngUkh93+YPoP4/BhhbTo9GWf4t4nH3AWYSYik2NtbAei1uz/YXpZAmRaGvQtg\n65k/FOIPSUWQmQvdG2Y8MNlsqNkOg2+/BkphzlQAGZjDyqT3Hp4kIoPHPMLv\nsGyDBIO0PgcJsKdIiUzKfiWl2WhwA4eiu8nP+VG3Y9aqLqNpaWyeXYq6d+Ok\n35tublNe15WdY0HNRVZ5RgtrBJCEPnGL7TB+XSHvyDez2sV56sRSiW+YT25k\nyv57OgGRXv6ay9sxjOCGi9UTMZTDE1G6DCf4VuGjsEJwu8GaRk7AfUl6fzGn\nOpxi\r\n=wmhL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4419897c2a5ae382f471047e38ac619bef815058","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.a41527604.0","@material/base":"9.0.0-canary.a41527604.0","@material/shape":"9.0.0-canary.a41527604.0","@material/theme":"9.0.0-canary.a41527604.0","@material/floating-label":"9.0.0-canary.a41527604.0","@material/feature-targeting":"9.0.0-canary.a41527604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.a41527604.0_1605816083670_0.013978652098302069","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/notched-outline","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.7b0e2b377.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"327b6c13f88c10ee68c2fea9522f83feab38c59b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.7b0e2b377.0.tgz","fileCount":34,"integrity":"sha512-qbghQpnGeKQk50P0/c3OyVwiLcd9cUYIw9+fowaVFpLJpGsN6X4tLR47tauMOVGaSOwWuUIm5rKBMj6csBrReg==","signatures":[{"sig":"MEYCIQDCJ138jreUnoivrHh1fN4e3gqpun88xNNv+wb+Qur19QIhAKe/l4tIGqQfxWIbwMenwGI2kwMSVaswbxZiSD7nqiR/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuEnGCRA9TVsSAnZWagAAFoAP/iicSTRxEGsQIgVBkMP+\nXpCX4ZcEmFQYIMkL74alI5W+Dwjs5ByCOgwYzSsD5mEeV0oYb6upz/uX2z0K\nOm0xPpKcryIJgDzdx2DuPXmUOQFZzUKfV+rfry5MlrLt5a8NbNvpe14iKVM+\nuYREilMH7LO/Ze4X/qj3oTIKWZRSOhbw+yLrHzTZKDfUuXmHnVK6micsYqdQ\nB5sE49p8lslXP7MGof1AqyXwcx/m3BggGyRCtVmI9Q1Ux5KOtrh2sHWuuQ6X\ncU4WP4wVfYdZBZtbA/8OtBHwCv0rlPJkCOO8xGa0/4Akb2RYS/0lHDJmLCdK\nqQlFdmZa9/gCJ8R5v9AEwOQ4ozqoq9Wz2A2CwxWRCdfVVbN1lEqiUWRSvUY5\nwZArIn4jGVTL8cyKJl2bxcksuf956z+reZTDXa14XbsYpOtYmd4MvuZVairm\ntUTx/YjDKuzOjLitSa2aM9SE23Zty3Nfmt4UGo/pajpyipzIogk7uGDA6f/9\npWpMRbN9qK3mLEVu0WITRnn1bBTaXiMqUo4dlSnwM8p3K9WIICWpm4hAuRg4\nSkoKI52YhN03Y2UmGSbpxJrJ5QMwH081EDDSzQJr8px3AEAjoXk2MrDGUn2V\nBuwgTmVKlMw2uTMGGe8A9vRrP6gKimGA6tEFT2AX/9oK79Dkf06Pa7tiTzBY\nzpN6\r\n=ccaS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"51086f360a63319c786c7b166e515a34aa76c112","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.7b0e2b377.0","@material/base":"9.0.0-canary.7b0e2b377.0","@material/shape":"9.0.0-canary.7b0e2b377.0","@material/theme":"9.0.0-canary.7b0e2b377.0","@material/floating-label":"9.0.0-canary.7b0e2b377.0","@material/feature-targeting":"9.0.0-canary.7b0e2b377.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.7b0e2b377.0_1605913029941_0.794413591398637","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/notched-outline","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.c927a5d05.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aefaee06b84718b7b2f8936bf5cb67ca7ba34b5f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.c927a5d05.0.tgz","fileCount":34,"integrity":"sha512-nrKSQKIrhZ7potad3U9NUm+jVLDbv04ma6C6ovJWwaehAPBuJp0ee+/1Uya+8MSnKcF/UK8QGdFUehuJhO83XQ==","signatures":[{"sig":"MEQCIBc7zu5p/1W0krqntxIZDlnY1ty3E1T8DMnnSecPJi7CAiABSOFeDQsKYC+EqXUOatp6NnuSSovWtKgFF/hTqxs2pg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBIbCRA9TVsSAnZWagAA4wAP/jkBCqvOhGKsxpfNac+7\nE0nIsoMrirQZVNX1qZplHEHmPg9chur2Z9zJ7H0yqu0fABaC6g/IKnpC45x1\nePnpV9QOjvBuO6UXMkyPw5PAYLZYqSjAsBCoTwfsmAg+lfLDHUwVINX8CoRn\nzpHfJC0diCbfSsTxNFoA+Qwu9Xss9K6q52rFuv0C3gjS8AdH3wXYKiBzK3cU\nraPP/kFKhz31hF/rcVVl+Xoh/x3Jp77mBm/PN91brdwXoS+7hq1F9Se98Le3\nAosRWhJwOhLzwWEo3+p5nskXerMPlc8Lw83fd9AtiwyVMORRLr4QismMQcIL\nuxmxrRvd3jol2uKGskZM5YJs3qQaIFcjCkber6VyZe/Jibk9FA03RkpLCI3R\nPTw9RtVJN7EpZIZA6xzkRkhN2VrYGCpQ590k+04YblqaRsekqhEvK1dr33jk\nseXFG4g+0h3uquSngPyKNGeTmW6O0KXe0P/8EemEE9akiN1yfi0KL8Dn6RhW\nmeTQKK+JeexXfHGxpeJaMudLG52KP6xWKyNuSkce/cesuUJ1BKUVouNCLmkh\nr5prqGmDYj63WSdLROtAQZFL4tj1zhICyrM0qmjBaOckVcLUsgWoZ2cZmcIW\nsL+cv7TTYEo95pZC4Z99DS35/qR5zvUaUYrGQKJKmwKeEs7uE1SRf9i5UADF\nB0T8\r\n=Ktja\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1e41eddb7d951c0eeca983e08e3fbb7b21cc3776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.c927a5d05.0","@material/base":"9.0.0-canary.c927a5d05.0","@material/shape":"9.0.0-canary.c927a5d05.0","@material/theme":"9.0.0-canary.c927a5d05.0","@material/floating-label":"9.0.0-canary.c927a5d05.0","@material/feature-targeting":"9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.c927a5d05.0_1606160923446_0.24480851805151382","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/notched-outline","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.b349b5185.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3574ab1cdeac4ff18cf8db9a0eb4566425255787","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.b349b5185.0.tgz","fileCount":34,"integrity":"sha512-09jpuJjj1GtRssiBHbP1ndXcDfF8FSMPDk4JgvdMIy/L/7Tu4G1aWZA7aLuRbl/NrkobSTGmTuGXH4eJJGDXUQ==","signatures":[{"sig":"MEUCIDY0Qx+8eNmldTxJKpMDkmOr6axn8jY+tbiIlIYHcSHpAiEA5Zo3ET6P4FZvP/BBsvZbspjfrkqyvrzu8g/XZPgiDCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT5tCRA9TVsSAnZWagAAZloP/33BcJtyn1QBfm/Jxeh9\nGxmVLr5e3oKmL2obCbCNp72fLa+UQVQStrJ8EBtIne0r8GJvd/4u4S/LlSQg\n8GxrB5HGl1gBXIpsnpIhrc4ICDZ1o2bSM7b2HxwreV2T1+1Az3655UKQ41Sb\nXoRZC1YLvpHcVG2qtiesa1NP/sUFQSiIv+nSJ4iI7FXzGnI2ShqcLL6A9jGf\nAbHZq6Y9w80g2W7WObIN0FX+HwAeS7rx5gJt9p8LgpJ7Gr5mTvpnMsuVOTTV\nxDrwyKIR3dgIVxaDgSfd/rNo/I8T0CIKXac3afqytjiKjfgUPX1GkUCGE1kC\n8MgCFSg6LKUSkpI6WUdB20GTLjeCXXDQdi9W1yjPJmhvdX8AaDI2Hmw1QzOc\nIOrd0QHaeyzxWG6hT8lQ9W+OBlEkoNIScrW2QsBSFj748FfruJHxhPijD/OC\nYnn7G5tRQQ0t2HQUmDf2nr3A+TitilaN5wAL296gb83qrc/+axLt+MF4ECuG\nxf3x+VX9mGFGqrdy8awD7l0Ht08Gs1zRBeo5Boiq6tHq2uqJ/RhF/IGS38Hi\nnFPuNe50Q9F1nR+dSoOB6/B3svF1sPXXkIjYvH782/iwtQYcm7jF9c4EgTpL\n6Agkxg7EtuX+ei8sIu4pKc5LK/ejGRwTLvq4yhmu7I7aoO5rPm4Y7nXqQyqQ\navvT\r\n=KqsW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"92e0cccba580778200706f15aef4e667fc007066","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b349b5185.0","@material/base":"9.0.0-canary.b349b5185.0","@material/shape":"9.0.0-canary.b349b5185.0","@material/theme":"9.0.0-canary.b349b5185.0","@material/floating-label":"9.0.0-canary.b349b5185.0","@material/feature-targeting":"9.0.0-canary.b349b5185.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.b349b5185.0_1606237805092_0.8603297273346098","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/notched-outline","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.9083b7d61.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a33e65aa4eb5684a80e6d1a768f466fdfd9c75f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.9083b7d61.0.tgz","fileCount":34,"integrity":"sha512-ldV34gsDiDIfle8fvEBqeN+o0oofqNxZl1vuLA10bWqmODIaH7/pehiL2ZGa+VFdxtgTDw7lUCDENywZsXf34w==","signatures":[{"sig":"MEUCIQCbQ2CaNCd1PdRI7j3A2cAfWsXp1zKToSvAiOmbHhVtQAIgfqeZNOs55HqZqG1yEW65Jub8pvRZhSR/TzmPvBSjuWI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXhOCRA9TVsSAnZWagAAmf8P/A2Ca69EE6A8hfJ0Akzr\nLjZzKioVfWPvVh1aAcRUPeaTgVPajyydrc1UV1PuWd0ilUU2LftIyAY2A/Hc\nYGdCTEXtU7q1rfdcv6tPd5DuNUeO+XLrM0baxa8amN8Hm+QnEVJgmbRpfZi6\nWgnRTv/PSrOyUbrTiG3ezmrwoEQ0d10YI72HsgintjGwhl9VcrmxMzf2ec1A\nydlNa1WUANWS8eC1UAKITowd6RVOtItCwGfkXqPy1UxfCeeyCzjGxQwnUpyv\n2/j4pXXge/eAbW2dXNdDDmRZz2jJwbyaJIbdUEujA0lAQkpPzubtPTxMs+Rf\ngmfnLAv8a/BJX27WEe0G0WLDdmTD2kCqdeHJBK6/ZRLzbULFlHFWTLnT6zlX\n7hrh3bWTRUaJ1qIURHuup5EQujFowQTftLDyCBGmWWoQxR9sSPMVO7x5Ay9k\nwyBJ/IVcLFYF/9vfAad8DMAp2P3K6USJC4nqcr+yrd613BcYn9Kk9f9XOIux\nTR1HwXFpFihfuOFojEFbhD8INwgJqESI2PLGPRNu3D22jqe0/S7ufWLeqUsl\nbxRPKuI/IBjaVFLglxqDOigf1BqfS0X9yVlt6AJqvmNjydmbyqzXFTgsF5Zn\nUGrW4OW+EpUyfS2OXnlBkgdsJ9xOsM2uBqASbdjbwVal58hXN2ewftY+P8+z\nOuqZ\r\n=uxHP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c6192773b6d2ce6a74a5b464d7df3e9b57b238d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.9083b7d61.0","@material/base":"9.0.0-canary.9083b7d61.0","@material/shape":"9.0.0-canary.9083b7d61.0","@material/theme":"9.0.0-canary.9083b7d61.0","@material/floating-label":"9.0.0-canary.9083b7d61.0","@material/feature-targeting":"9.0.0-canary.9083b7d61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.9083b7d61.0_1606252622085_0.91710144518267","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/notched-outline","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.eff7b46ac.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0646770d94173d3d39dc0ad7473298b132aeb216","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.eff7b46ac.0.tgz","fileCount":34,"integrity":"sha512-zIZJCzhplZ1iBjpFxFwl4Y0ggHsF8vLLWdeAYXUX5pWQufGAjHykSZ6qEyWhP+6Lh+c3iVKUz3B9L2pq5uPMhg==","signatures":[{"sig":"MEMCHxgTTAaGuH210iSiDkyDMT21blwuJq0sI6KuYVyFL4ECIATU54ZIVO7MwNsp679DxmCBhKVU8xm+nuyhJLJNmPtI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZf8CRA9TVsSAnZWagAAISoQAInIagBfP13XDIo9eTMW\niPei5LYC4EUt9zR1es6uSwOZ62fGj8b9lkmXplfgmuLCNePUoHW02ScyoZRV\nZ+ugZvHz93NyH5AUVnOk5OI+OddT4sOgNhXJsYCCH3wrIrezfTBjiWwzNPfy\nYdn/TKLTzPghWlaDSKVscN+0zFv/tziAokS1fRYmp2fqSrFzaFZK8CmbUqLl\nocOWpSP7sBxqCfyL+Ds5V0thw+1PCtwYDf55rc1LkPhKKhVncxcG7pY4f00g\n1W7TNiIrSv+WnIDKekXXl4BqHPDKDtNUxuTLB4ZGKNFUkKX8B06LtdIHdCmX\nU7sMqCe3bmy4X6/a2A/ySQQvtD1Gsi3/A1bUCMUPoujeTQtwc44DmW5LnO8P\n0HygEDS3GROwu97yBlIhyVe2y1R/W3rKEHt2XxhKP2wLu4pzVZiEE793oLUy\nNwCZzdGPQ4HReH4ClrUISJjr7lMiXkGN4+ijFkaB3Ua8Y2D/FsxtYqxY8v6P\nsiSLeBgEU6DJHCVKiEz59IZGMalSGRFjEWAP3ZBx0T1sKPx9ErlhXWXJPPLZ\nXdj1rysU1HVlFQju6qO8XKk9eimOwxWjDCIixTZLSEqKdE5rgy2VmvIF3Mgg\ny9g8XXlnl3RsUA37WB7A1mQLTDsSWf9SnU2/fB7U98cDbQseYvKiIPfX/J3p\nbhEV\r\n=K3A8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b8790bb41654e5c7f7a7725e8e58c9dd08551129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.eff7b46ac.0","@material/base":"9.0.0-canary.eff7b46ac.0","@material/shape":"9.0.0-canary.eff7b46ac.0","@material/theme":"9.0.0-canary.eff7b46ac.0","@material/floating-label":"9.0.0-canary.eff7b46ac.0","@material/feature-targeting":"9.0.0-canary.eff7b46ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.eff7b46ac.0_1606260731983_0.8727657229064254","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/notched-outline","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.ae27b44b0.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb1dfd23572f524e8e77f49aa085c92ca98a856b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.ae27b44b0.0.tgz","fileCount":34,"integrity":"sha512-uRagZvvQ4a6ZA7lz4kLAEFdATa2jo08eHoq5dkeFBEYTHHTrtduXCZ+HtiAVzedPrTOFD8ih9E+YURiqnfFzQw==","signatures":[{"sig":"MEUCIQDni7SEh0nFizU7LyFrbmyIcg/vSXGzS8HfHyP+ZqIPjwIgfNs1qgmE6Q8mByF4LNQTxAnWr+G1VUYVkC/qL0/PqnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnnECRA9TVsSAnZWagAA/bAP/1DubuW0gtnRjtvOSZR4\nB1eY/AHHLjRwpMc/9sZK1FXdk+8JKhYr0u/xrsjoWw0vsJOwHZhzICZ1c0tq\nG2wiF7I5E5TmzHy1eO1Fp1TJ+Jyo8NmAnCAbOAG9zTws01fZwdvPpGCZK8Kg\n+yvEtLaILmv8BEOqv4/FNkszeEF3zdA0A+xudcgeTKN7+FSRlYVDE3XG8p6t\n6QFXkcs6Xrh4h60xy3BgmleMEW091N4JJviW597xceKbEChS6VCPn5aaG5HR\nA1jEp3rO79hDk/vb7dYAhYFxWyEtDx0h4w2605EuQTiSIFblxYvt9FL2eVJI\nOpT/YGXTLU62b/fkzZ2OQs13IYE+i/pBhTVAsG+n9flFseRzTRKgyaTvHdf2\n3N0Y0g7/miB2oNw3L5xlF2321t1lPdUL77o4rbgzc1EmdizBkFsG31A/MGE9\nBlF6t5xGVxBqw5G20mE4aXdDNQ5VrEE5UDkzLKkhGoXM0hIdptTc61F5p5Z3\nwyFusvKslfBYq7WLpf0xupkAq9TApL4JPYqDJ6gbOWgfoVpjGScbTXIOOHqk\nzucZZgTCNJPMNx8wK4CqsW2WeeRVtMkb53FeyhQX8uRWfzNjB7Dgj1IJaqnt\nwjQUgrmuCP9JWtPk27T7Xzx2fhg9Kb3975+d2h5g1AWQCn0Se6Oq9JRydeKd\nZLD5\r\n=FNE2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"eb690fa0e9558b61ded00dc6e4b467cbeaed4c4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.ae27b44b0.0","@material/base":"9.0.0-canary.ae27b44b0.0","@material/shape":"9.0.0-canary.ae27b44b0.0","@material/theme":"9.0.0-canary.ae27b44b0.0","@material/floating-label":"9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.ae27b44b0.0_1606318532361_0.066665467960491","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/notched-outline","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.2fbba2554.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57f842b370565c48e21cfc1c73a672252c9cf46b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.2fbba2554.0.tgz","fileCount":34,"integrity":"sha512-QMqA32/EqZhpSalreee+kkpxH4x9cqsm81/mgJzY5wIJEN594vk6rX/Y0d+7L7wCbFlyLNIL9D38E56GdA6wGg==","signatures":[{"sig":"MEYCIQDx0oF3UWKrxwq+UDw4lB8cWL3kDmsO0DHRamVM36dw2AIhAP8fI4PwLA7nSdW88Ih6Cdh/yrW8wpcCqCjQ8Pyt0mGc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS7NCRA9TVsSAnZWagAAc2QQAKGSbUWwVA8ngG0FUt8O\najjJAKFjsLSI406OuWxzfREzyN7W0AkXlvWO0a9p3QDoA9OvA47vbRVN+b70\n4rTkk6go2yPTQFR/CrVhA6YzLpVYPCkRaupVWwWGj/H13pk3Fzs0mDRZhS+B\nsdB/H7nCwtz+32KF5b2hPNiJSwK9Afpja2kaX3i+Ay/zL8QPyY3xTKApgX0G\nIID8cfQ+iawn4COEVrBQAaW37tv5IRQ1nmwYLimApfMJFvCkHLBXZrQIuP5M\nS88KIYsKcFaJLbNeOVyFPGlPvkHOq62RYE5BrvlOhpV70S+aY5KPqcF7oZ6k\nI8L34pklz4pjIzKOXXQIkfROzOHJ/UjpCvUE91w/cdiHrGARx9P7Lo98wNI+\ntPJzrz9yhgbO5zl9MeCPZ+1aaVFL+3XAr6pKZ9idvavGxe0wnq+tK/X4DyfT\nNBg9PzO9gAN9j4XtAQh4cdR0IxHtd63YOD5D2wyZZEH4wqno4laIsW03/dxU\nXqPeiyuR776Tp1MV4UnhqYGZB9iJsndneHdAQ9quT1z7ehuQ6MRDlimyvNQn\nGV9VA+zAVkKCeEVFcrfPOg3lf5Oqu6JoHpEFLPdLxvbhwK0cR7+s8afllKC9\nkDy6fk6mKHZpp9hsH0p+4KCBAVgvYzrPx7yy62NNkuSWj4QT/Yk9yIhCyNch\nAWDB\r\n=1wol\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"93356628825eb23bea706adfd527933f0c5e430d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.2fbba2554.0","@material/base":"9.0.0-canary.2fbba2554.0","@material/shape":"9.0.0-canary.2fbba2554.0","@material/theme":"9.0.0-canary.2fbba2554.0","@material/floating-label":"9.0.0-canary.2fbba2554.0","@material/feature-targeting":"9.0.0-canary.2fbba2554.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.2fbba2554.0_1606758092641_0.5848610692846938","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/notched-outline","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.6d8574fe1.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a03fe05c5dd1c37cbc49487dcb2e1a3333995a6e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.6d8574fe1.0.tgz","fileCount":34,"integrity":"sha512-cUySbXxKYWL48s+iVveFHcKTxOso6IFr6kHMWoSfJDw+if7bkX4Ahy3Poyf9JxTUSIImGcHeeXZfr74Ja8bgMw==","signatures":[{"sig":"MEUCIFSPFDI4tsdK8ao2ILposCK/m55XnaEN7SAJigWkxlF2AiEA5zJX53pqVGbrzgl39pyFoDi3cQ62brpswSytggZ4UKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTFdCRA9TVsSAnZWagAA9sIP/j2B/C2fMxvm9WsYnfb5\nEMVcslYNTQkgk8HWnEc6u11W2c+JBTY/s2LTIjK8CxFrkLND48GQ4CvRJyFs\ngXF2xeZa5ObRyoMngHzUMvyzDwclcfYUssm0qhO50H8TPWWt56OkUCqPSa0u\nShR4RKr9a9rK9bpb4SWDQKMI3aIzaCyzoS2HH1DavYScJQv/lBBp1wDwBzqX\nADZGZkSyyHeA2c3zk4AdnoMG4nYh+RLEWWVgENQEt6RCfebLXx+a9NXJulr/\no3kTi4k/WoIhtj7V5XP6penhLIeCZSLW5Sdn7d0ntLRkD/XeUEPkNaqduetH\n0A+6PbXSq7YtDUfYgC6LJZ7WYxW51s9hizpm+ROodPZO9RrY3hZgr2nhFOt2\nXjLrcPFH8nybZlozsIYZXDPVsax3VxoWJONfiekC1t9oT5CiXiMsT/po5L+I\n3tqSHRFGnlnQn38ueIEqm7C+KuY6+ZajnCk8CVS39IJy5M+Y/4Gw3YbUgYdG\nEjIQmqEtlQQyhNij7/b8FRqFX0Q1XDSOA93qavIjOHDddyu2+6jDO7im3Vf1\niwJb1LF5lzWXL7art17FgwZajmnqyiypBHdr0XM5J+sgrHHcrUG67pmC5/ax\ndHQaC0hOdnHJnqR/efkc9LC+s3klROQbMoeCLna09YLaECj+coGtfe6euG0f\nQeFR\r\n=8rY3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b98a165c81d2497f6c0e8e5652743d71d87029e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.6d8574fe1.0","@material/base":"9.0.0-canary.6d8574fe1.0","@material/shape":"9.0.0-canary.6d8574fe1.0","@material/theme":"9.0.0-canary.6d8574fe1.0","@material/floating-label":"9.0.0-canary.6d8574fe1.0","@material/feature-targeting":"9.0.0-canary.6d8574fe1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.6d8574fe1.0_1606758748457_0.3670654879562538","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/notched-outline","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.fd22355f7.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fc29a72a0595e61ebbf77bee0b68fe5086bf4bc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.fd22355f7.0.tgz","fileCount":34,"integrity":"sha512-p8ufGuJio6W0FdDM6fYFoatnm0BcW3X38mpjZhbHq1TTQ20D8B9fq1fsdeZuwoql8aIdB9oI9eohBaek+FseCA==","signatures":[{"sig":"MEYCIQDkEkZKGMHrouaEYJHkYToYWH/y7wZ1jpdWZgpYJCEQwgIhAPwXuDXddEg+Wi6qAKKq1cc0gzDlRm5ipP/aliKd4727","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXmdCRA9TVsSAnZWagAAF7EP/RX5Pt74aqgOdoPB9E/a\nJzKGOFKZyQhx1efYt6hn/tTrBJ4tQ87H0TILwxYdoMLoeEo7AAS9SZgstGi3\nbcoW8OPhMgbTBoJdT561gRpV0YUlGcJ/PwKT8t/lS/5lZYYZwEF891Byj0Kc\nBK9abn8KRyCbizSVSnSWfvcxY4F9n/SpOqHczEGmpSoJoP0EgXpJw6hGQLmY\nQExB98YBeM2Ucf/XUfzLLRjEr++UqB449Xj1LjJ4AB3vmbZVpgcWTyOthEJR\nrw57FZn7xSSuhPikVfCWlGlnHyBCcuxLXMueGUxHRfLVyft5Y0yeXdeopb84\nInJBPqUsWtTvM8yUuqF9b1qeIVXli6q9/KR1kjh4dr/b26+2gCmoMFZ6Q6Nt\nfefdJ+3f5SCXSfrbYH27vKZbluKYPQ2/6Hk/vCTnCbKzmi5Pd56HYZN/khHh\nHJ6c/XxfH3XF2KluUQ0l9zXDf5atS2mjdSKTto4OvzZsKn0N+MVKL9XtJRQH\nezO85IM58iH8eOMS0vb3eLGwkzZhw/7vWtlnX1vVkKinCTkjSB7cHkutlNqS\n9MrI9Qx1a0vpFtnY8EbTMdn+KWcfvmd5yfOUKyAGGhImIv+ddNr93IAmTqSo\ndE6khP8za7OuTnBG8pjes6k0xghmz2ynMfAtoysMKSjBBwyQ3nZn6uP48yg6\n7FbK\r\n=6pDy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"86a40292baea3adb58a6c26ed8c68a9a425cef18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fd22355f7.0","@material/base":"9.0.0-canary.fd22355f7.0","@material/shape":"9.0.0-canary.fd22355f7.0","@material/theme":"9.0.0-canary.fd22355f7.0","@material/floating-label":"9.0.0-canary.fd22355f7.0","@material/feature-targeting":"9.0.0-canary.fd22355f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.fd22355f7.0_1606777245513_0.6837386610181748","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/notched-outline","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.c4ab98722.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03647106a2ad3eb94845d34cef14e82476d8571a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.c4ab98722.0.tgz","fileCount":34,"integrity":"sha512-E4XmMGqFGoSSuB/XBvmMz4HrsbMQvAoORqlfssPaz0JkCE0yTp6gywJ/ywilX5OamciGQ+W96KgQgmv5nN/ofQ==","signatures":[{"sig":"MEUCIQCULNROHuqyjH1Axi7DbcaOXbwsUN0WHcXZiy4M8LyJsgIgVshL7Z8USL4ucNIbbenvm6VbIUlJrGbBT1Lq8P18u6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuafCRA9TVsSAnZWagAArz8QAIbPggwrFm0JekBljDrC\nw3LOP83BrjD3SqYBzGjQVRE0Se/nR4ojtq8nrPyIql5yJSrkNRN9hqVHutrX\npdhnSEdDweCaJ1qMBLMKAVO6eSgTGNB+AyY+2ZCNHj+rf/bGJXYnI/cIL051\nFqmvHCbdYLGpPMBW1mV+ynzHAZWDrVbn+pYXWlWrK1oQNsHmUleaXe3G3mVW\nNGBJQZpelUo2MPW5lfFT6TypwN5mM7a8YW/liZ5ZjUnqAr18gBBauq6SvDIq\nc2Emgq7JLI1HsXNQqsG99OgTkAHiqogZXnwGHUcE9gYGXeFDQtsCxTXVXvhU\njoikbKi9k5RfXy4ZoN1mNtcKx6U9ap3nXApjOTyMLfX4d7Ky4J2ntlAKm8Qt\nq4/cq1uo19a8bB3lWeej33Xp+zW6IzZAUCG/qdE8akYISucLEKurHyMyzlHh\nhqvgcEOgR7ri6a8El3l19CuHlVi7c2kXpuSxL6U9X3BmAmTqM7QGmKyw7Io8\nk737xz9ZKSXJRabd6RNUYyyykpQ76nPNg+6HJw/Cn3WdrJALqPUOEYEqkcYM\neeataJjoHrKAn+K2yqeoStQR0yrZIkIpLN9SrJiSTLFtg+Fp4mOMZf0mv6dG\n8OLXa9Uymo/FaoPuoFitE6NvNoQH4radMBqFECpq0rPJlx1MoyuUbRe6ynbg\nE8U3\r\n=biNS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e6187eb74996c124e1abdcea72dfb697bdb1820f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.c4ab98722.0","@material/base":"9.0.0-canary.c4ab98722.0","@material/shape":"9.0.0-canary.c4ab98722.0","@material/theme":"9.0.0-canary.c4ab98722.0","@material/floating-label":"9.0.0-canary.c4ab98722.0","@material/feature-targeting":"9.0.0-canary.c4ab98722.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.c4ab98722.0_1606870687227_0.3393154771843434","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/notched-outline","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.977585650.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc74e820ce9cde3bcd4cae2556d0d5e4795e2665","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.977585650.0.tgz","fileCount":34,"integrity":"sha512-ub6uHO6ARf+f4x96Y/VWTnzaFzwgnFWnOy45Z4T4NdVKYFL60rh3jRQMZpFfkxbkclnmt/BRb2/uZppncnSaqQ==","signatures":[{"sig":"MEUCIQC41YCs/VPmHzLy64pZ1AiSEHF4TQI0omf6TRSOJaCZ1wIgQC6q/4OJ9q1O/pZNMKDoajA7WK7VmJxWbj4dsFpYSps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6gSCRA9TVsSAnZWagAAS4YQAJJubyddfW0HbZzYzI5Z\nqcWhmsx/XHMTfGw4GAM57kn4pkVZDnJwR0uK315DL8wChDeLSvDslL8X5ZE9\nLOOrsvk9xdpKF+7cLf6boYvHLEFng15YEkHmoJur214PCD4LN8BZN5dMFQaa\nyv0hwir8rfPKYc/ENGJf4GQo8cWELxf8TeW5Pkdn4FS/7ArN5zvWVI/5PKEA\nr946Sm4NH1Z2iWUorddNbI8HlzIagHA1VQ3vuk07c87+cObFtUhMNu1qU4+1\nRHcwBirG4Vw/qTQaflwH9qlortLCXUXLL65SEVQfeNOvYGnsluzz2EdwAIOj\n+3Ay5e1eoZ8HhdPYgDJDADdRT1bFVdR7hTd/Scz46L/Mzs3UFY+HSw4kx6u2\naavOG1gPSQ7iTzvtMArm5ylPi1gF/2HC5hpgTmjAzVNsCM6MTFRoAXRl7NSX\nVv8Fqnlf3bCvXPpk612dvqlxYOZsb9/9gT6rkRBxb4UPeaMyfPPhVGg1hqV4\nXJmr6CKsBTbxX7kttXSwluH+yIr/fGDUpe0JZwQhks3y5Dr/36ruZWXU2q0b\nr49mYzpefMPhbrjwLD5lBJoYVQs5kGdiPmDogZBnjZ1Ve2K9mXdf/wthGCrf\nCD8MdW26vCoqD2+PAQqs4lak40+jvtf6RLXewG2wzftWNXQJ5R5Fe/Sxbvqj\nnNyE\r\n=OQmH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b008ede8c0d581314d3b967bd295990ca8eee38e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.977585650.0","@material/base":"9.0.0-canary.977585650.0","@material/shape":"9.0.0-canary.977585650.0","@material/theme":"9.0.0-canary.977585650.0","@material/floating-label":"9.0.0-canary.977585650.0","@material/feature-targeting":"9.0.0-canary.977585650.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.977585650.0_1606920210373_0.7443435051043648","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/notched-outline","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.c7edfc7b6.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"797b0f7cc1b40dda02c9b02b817db3c1afd46fb2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":34,"integrity":"sha512-Z/JGDpViwTC6eqG6QYWagReeHBFdfVwGDNgWflbppgL35r1/moYcZ/5v8OQkkxslyetEZWWEZ2otNrdnXkO3Iw==","signatures":[{"sig":"MEQCIBJNfb7rdYYMNaVQ3VJ52D5wO1FFM4wd12FPWrWDcUetAiAt2xtmzPlAbThE4TrTgRk/np4xLdKdjilw+WUigvH9zQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6nGCRA9TVsSAnZWagAAGRAP/jLjubNzeAp45l387GNX\ndf0h/TbS6EjW4qRUhxkBgw7zrnAXkj++iSvBscKrnYqY6Rhc2pEbkVWGgiyr\nfFMzFcMPkK6ftIYvG0IRJjcq/H1UTLgXO4nijs2IyNNt7JIeYDLZpEHVNvVT\nBj9glL2OOgmvbS4tOw1anXRCbbqkd7oONLR7mTMwRa5vHiP2cf8ed661L+xN\neZgOMGBW7RilMSd7nbExQ36YCPi17wpuV68mL133FYJyPPquxNsWYHUpYKlu\nGg54gS3HsuTLEeMm1P8aFBfg97W6Vb3yj10udUPmWZzLKp0NkUTFJXEhAaE1\naH+6jeuagkUhERsPEyULVTkrmcfXcng+/fNuOx6D2M0pxV1tCNeyo4XeP3Uh\nt37ngizOBHr3LqiUwSKMmMY1FlkO07dykubgtJgU5wB82Tz12aZgJK/DAQz8\naa2FVsS70e29DzPmxmZpNVhyCebzEV1E050J1nVrXi4iSvl/+Bcp6/rvRs2J\naDY2T+rTm2m25HYa0Zd5khiWXAGrQ3BqhDAxOy+xsvAbuKoJc/Qd4GgBKjhk\nIBbYdVzE8lwskASPTLtXIZPjmsnWjXhdygxJepXbeGsitmarUwGwlkKcGgNu\nq4M6SwarFG02h+83DWMo/Np0NoiNCavDCVsacxrV99bi17GMh9s6HpTidlNN\nkmt4\r\n=uqeT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"791973660a1d63a77aa10d2bd0df7c0e6ea94698","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.c7edfc7b6.0","@material/base":"9.0.0-canary.c7edfc7b6.0","@material/shape":"9.0.0-canary.c7edfc7b6.0","@material/theme":"9.0.0-canary.c7edfc7b6.0","@material/floating-label":"9.0.0-canary.c7edfc7b6.0","@material/feature-targeting":"9.0.0-canary.c7edfc7b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.c7edfc7b6.0_1606920645553_0.8280655307145279","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/notched-outline","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.4f3347306.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae481d91733d842a46c93541d5d80e38fc77c4b5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.4f3347306.0.tgz","fileCount":34,"integrity":"sha512-ASNqFIN3Ddo9u2EfWhgi8cujIQkQxAIlNDBGGSOm4n8DPq3mh/16Sar4Tpzs9NnKuQPJQxVTuRTtd6reZHzAfA==","signatures":[{"sig":"MEYCIQCLd/zAgYB4Zvf8VnzA4iUeMIwZxpMvSYYgnQ4pvolUnQIhANqdqiAOQkZwitDhhdjCcWGShiKxrAXEgvDKd7Ac8Ugz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx636CRA9TVsSAnZWagAAgWQP/1vq4JVblnyBDSsBj2ZH\nePAWhVDX/uEX9ep6gNHQunpIddKCzxBDkQF6iEjO76ZOxzS03Fyh/GDTjRka\nWYJ5SF2lUWdDrjuWQDpIJN33seH9ZvhZAgqjVokVLxugoZqGSdSyWtXJUZt3\ngUadi0VcMzyc2h+shqWIXv2Z1mRDrjb/f5xP3Awglgqv7cYc6xkvg79lVS7i\n3Xt5QaNwjAyg6kAy4Pi5vtTE1OLmJbWcKFrKiUh9zCw1lwy0g9QmEV7EKauA\nOOHPG/SJE/QupavWCUoqa3Sq28s7VQghmkPiptHNsLAEzhsyga+vgNFXRuE/\ncZYuHhneo3oj26wWkvlcjDAokQiwp2ppcIaQPvXuC7pfAyJ//LXFLLyt34X7\n6p6ymo4HaXEDQs410Xw3OHyRbKGzlNW2jeQA1BjYnZQoGJ4VB9a93yK2Bz/D\nC/Xkv07pLmf+qJSS9B33E+nGBQcxwWQdp1eWQ8wIu+jLpy8aYoXrHZbi3DJm\nIYmp74iJKTu3EI5o8PMUToiUCHD4kJhO1WSsC0mRBCDbHZ5njS7ozvAZ5cTZ\nXf6FAavT6PtQYADmJTp3cBeR05uPirm3caxepAqt5z0jJkdgL8tWIYcbart6\no+dnMMRMlmBUDSlTdsn/DL0V+gb2U+yCJKlh1go4MKuO640OOMsXeZqeMaMQ\ncP25\r\n=Wol2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"31d08595c0470096709a4d5518ba7444313882e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4f3347306.0","@material/base":"9.0.0-canary.4f3347306.0","@material/shape":"9.0.0-canary.4f3347306.0","@material/theme":"9.0.0-canary.4f3347306.0","@material/floating-label":"9.0.0-canary.4f3347306.0","@material/feature-targeting":"9.0.0-canary.4f3347306.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.4f3347306.0_1606921721825_0.5339240871389928","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/notched-outline","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.37fbae10d.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84975c00e247868acb1ae5575524798f7290fbed","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.37fbae10d.0.tgz","fileCount":34,"integrity":"sha512-UsdRZ/+8kcQCucOwiP3wtyxLGX7LKqlWwU9CrH55WpyMPLUel29ahTtl7O3PR4N2GXlmFdRfck6i1CRLSsViKQ==","signatures":[{"sig":"MEYCIQClsYFGls+YJeAzPDqrrxpt0xA7WWn7sohq1e0lVF4jqgIhAMPUDoMnVrx9TZuXhQPWVU1QBlnFRA42pyye/r4HATK7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9pFCRA9TVsSAnZWagAA530P/Rd9XedNV5m6eMfS6L1a\nc/Nv0LU3MbVW80DYd7OqreDANvcjmffvmKnXtusapyNo5ND0vdAxO8Fb0Mlh\nrM/kPG9SSVDJJCiIqgeF0mmV6rgYxsTu3Pu1OenYS4HWps93lRtuceVek93x\niMjv4I8pFtNZgzs3f2MfnKXjkzEoGbjsjHLmWlwQXuPtJLNDfOkeq5tdCTZJ\nJdO5mxiFvJ2UVTz9IFCK9oo6S1Qns8mTr67py6d6WEo52SBtcSHM4L6pFGjW\nkqmV8EenXqVomIuzcyBBlaY+GbryDdZv0d7ej/vQ/m7tmfizhB+aeWQrOANw\nSARU3Dw3XdH6U3P4hLBT8uI7q1sQEEvRcVziIlkKbit6QttRy3UrIbsmshZH\na7tGhq18blhb6I+RFTbDOUjI1/LudqqqSbQPOJ760Q7yHGUsAsnVcMnvKW8b\nexKqxtNAmMHRd2L+yKfHgTHcyZAmcESM6TKfFnQzz2pFCq5m+Mkz4i+wGHHV\n087H5Nvxe2uErY+ZHMu1keyFrjMgCIF3vT8Ni2MfXgQzwxTlxBkrtzLmEKYh\nApm/RAEn2CSTF/QiJfoUhPSNbgylfojnPXuveN0jA6N/vC2Fvk1w0L2KsP6h\nNrwOjIwUndhzuuJ9JDY23B9SGT1g66ddp372lytKyDzmpcDYHgZW1ShhZEGV\nhd/F\r\n=aN31\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"104ddf5dd99e7bc09a57e2cae74614b7726fa235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.37fbae10d.0","@material/base":"9.0.0-canary.37fbae10d.0","@material/shape":"9.0.0-canary.37fbae10d.0","@material/theme":"9.0.0-canary.37fbae10d.0","@material/floating-label":"9.0.0-canary.37fbae10d.0","@material/feature-targeting":"9.0.0-canary.37fbae10d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.37fbae10d.0_1606933061001_0.1026734691949922","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/notched-outline","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.11da3c0db.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95eaef38f9aa72dc23f7610bb0c17f1ffea69857","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.11da3c0db.0.tgz","fileCount":34,"integrity":"sha512-V2UjAkrmiy4br5JTtuigsnyOeiMLklNpoCABPlKrMJSIDIMVlliTtIG35umHiTPGugpVQgnrOBy32idLNsp5zQ==","signatures":[{"sig":"MEUCIHIoD4j9w3zi4d/qIydpwfGijlY8wQMe7tSU3wVCpK3+AiEAi6rAWSXt/CMyYa/y7tt6OOehVbVqmAYN3q7P3v9QgPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/fNCRA9TVsSAnZWagAAN7sP/jQxFvLJ+nos62LPiu/9\nFlI0N1Yp3Jmzb+WEvmlXhDuydS9wR43UMC2WV+86sEbuHAF0YqU4SgJ+vg0M\n7bheft2wo+qHhy4zzrBdHpBgNVqBV3u3A2DxIcDaxQGVnsj1V3CckJ7TLQl9\nNJ7viIEgCW5Ap+F8/kmkuKlCQmGhF+2JjDhH4IHHcb857x5O9ta6Kk+utwxM\n0yHR4OwMhOlZ5F7IpwpBditbhipslOe0tlTX5mDGrWGMQvfBhcnIWZkuGDxo\nG5mty2AaRNTR7srIc8r/chdc2JO53gxKSFvmL1v0ov5HC4Do2qdTzuWJP2KL\nhRMHLh3CN/8zmkRFeLRAXDwgkvBZwvbW+3HGXLMgOU9exjTiupvQ8N/7j9A1\nCf9oqqF21xQLDOX6OfPWiH0KFLbP9INc0apXQDcAErY78SxeyuxmHKetUCmA\nAX8x9IN4ysBUUZ+couIgNT4Ki7hSECj0HPOZDbntm9+MBXHmNGZHRQJd0wOX\n2WJpF3TTWfYZ+woV6GyF6Vfp7G3+uvWXl3Axdd1sXMTgukFX7GwALmAo5+NP\nupZtm/yrGViQv8yBkPSvMIDE5U5HLE6/AhZGcbRftdKqiKEOJTaOzjdaVWRj\nKHS3yWM/KIeyUI75dT/WQpcpAi8YaCL1VZHbSsDWyIwVhqWz9UmAEUBdoeA6\noh6c\r\n=qw0Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"db8b5af79bc8221682000a74eab75c30395590f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.11da3c0db.0","@material/base":"9.0.0-canary.11da3c0db.0","@material/shape":"9.0.0-canary.11da3c0db.0","@material/theme":"9.0.0-canary.11da3c0db.0","@material/floating-label":"9.0.0-canary.11da3c0db.0","@material/feature-targeting":"9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.11da3c0db.0_1606940620506_0.2187422702660795","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/notched-outline","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.489d4c219.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a45e9f117a38def4fd22e1d3b3b3fa9080ac529e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.489d4c219.0.tgz","fileCount":34,"integrity":"sha512-nPc9Oyfr66n88foB7XhhWAu2lbeb0TovaezQHQB8pvtf4k/XGtHcaFMYassfROY7qFh6XyakSvuH4pDv9nAQXQ==","signatures":[{"sig":"MEUCIEpiGNtYFyMYSgrRtFaE6wVeDXwObOd9Ern9JWkvKHReAiEAvUnLPcJk/WpdMNG/wvYosB2fScndrs0mZK69MhnHxg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQSwCRA9TVsSAnZWagAAFQwP+gOoMEPc3BOVGeImd0DW\nsVgzLY+YYu7UETa/xwxjvK6ApiC0eqJwLMn1V24sazj7P0AlfIJw//6wZDKT\n8p37XNeZkAz9Aoh6Y632Z3Fma54cFCZ6SqVPimRosahieQYC0pzAlXcF/WEe\nd32EFogz2OAPV4A2siQGI+rwPvp//GEcSQUuu37ZBxXR7Vrd6fX9zZSlXBDv\nhZ7EiiEYU5wWI+vx8ecREVoDHYXVhIzj/cyGBzRoGctzGs3nCl9iZCdxc0aA\nL4eire+QEdFwPBLgv9MjJqV/L7mn+SXKUxyEGIR0LvAuVWkjssJ59ChlIvjk\ndm6x7JPPe3bC4+tlEn6abtSvfW2+9gfCerJKaNbVJ+Pi/LdKDk2fwQJk5ZT4\n/SJH0jdFEiyM4lPwAzCup0H9KRnUudpMoDuQToiI4EMyIaWlvXcFIwcoQMy1\nM7h6ewq0WAwNlC/Cfah++ErIb9ApLtP3Zxl0Pk8kCbExqLGyjdzlSgyz4hzW\n+w8NLBJf4nN2ABq5A+jqVwqLXQui++iAyIwHjtFplTBT9pJhxwHeH3QOGV4v\nHutX/gsYQrwDIARDZxBnkYEbbASCGJfR4CG5vIfLkjp73gnKFll1treFMqTf\nTMhRBBzzF1gI3HZqLreTZPLia1f+f3yL6VcLz0SeKzpQvcjHettFwJl1oCpy\nLIPC\r\n=ORBF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b1c4ecae655bd87a48f6065e7c292d4b30cda43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.489d4c219.0","@material/base":"9.0.0-canary.489d4c219.0","@material/shape":"9.0.0-canary.489d4c219.0","@material/theme":"9.0.0-canary.489d4c219.0","@material/floating-label":"9.0.0-canary.489d4c219.0","@material/feature-targeting":"9.0.0-canary.489d4c219.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.489d4c219.0_1607009456075_0.829498663468186","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/notched-outline","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.6557a69d9.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35b103917669b05005bc5f01297435d587bd1066","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.6557a69d9.0.tgz","fileCount":34,"integrity":"sha512-esrubg+cG6YmER/5jQ9ziEOCNr2XsuvCWj5UvfbSQIUzmaBNPFPgbPtJ4GHbvJC2bWWVjc2MaXg4xDdKDvwkZg==","signatures":[{"sig":"MEQCIGJiVRTgWLVwS2adc4V5OYdns43GyE+ZAJCAlfvvKJQZAiBiGCDCIeoAQhiR2KQGksSMYPILdebZHKC8traSTECn9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQd2CRA9TVsSAnZWagAADroP/19Q9Q/t4wUrQN+4S+J4\n6hW8hGy4X3TFlKpmymE1VCOhubdAas9ZS1gr/PtO2iKk+DXfM597ce4rl5qh\nipNLiexGc9vIm8MdCKc8aKOtSPum7NJCXjF4wOUG+5AQOb7Wc36kaBSqqUJa\nlhUiPzK7aP0upW7X4FFVwZUyYkc31LQPIGfNDloQD3VRBy3mDo/lrXRlnVYT\ndUCovX/+Posv8X5BXRVTX4/Xbu0uR/P0BjxGFb2FDqbnG1Zo3XXNVM3nAe8I\nsEiHtWlt0KK8tVFu0aCslu4gsGGrf6GPlvEV3NxYeausb085GCoGNOk4cLcB\nI15EHlkgQmdzAaymnMn2ESm+7Ncm9Kixd+Udw9N6cOFbM1BiheHQyYkfBkVZ\n3eRITOXwRHLgaIXLbhtAHrrUgP7+BnhNXPxSgd8qcdfSff5Api49VnpE6xXY\nZVHxzfI1/eYUDlugljtm2tUdqH5BfLmaq0L1SNLjRfuFXmr+ClA4wWP2+5fv\nB6XJaIv2RW9CDSXWDeEO6uupfCk5f8CVDJjW0qWsr49OkhdDOPh1YhQdMos3\nI9BXCXvyN6hQjywLs/Dv0z75vp+hpnKE/mB9uwmB7bemO1OamkENa6UYqrEU\nM2EEBxt5RLmLlIWgn+8yve4r16MEQXarOBEgb/g3N3sNuWOXuj3uHMzfHgj3\n8a9D\r\n=DNL5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"55ff05f1fcd2efe299d07cfd81279127a6fcaa5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.6557a69d9.0","@material/base":"9.0.0-canary.6557a69d9.0","@material/shape":"9.0.0-canary.6557a69d9.0","@material/theme":"9.0.0-canary.6557a69d9.0","@material/floating-label":"9.0.0-canary.6557a69d9.0","@material/feature-targeting":"9.0.0-canary.6557a69d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.6557a69d9.0_1607010166080_0.5292070674499945","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/notched-outline","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.4ea1b7c69.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25841fb4d4a35b2ae2fd2e5ee1f979ab0a6423f1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":34,"integrity":"sha512-yYdqc1QKIAg5aGi10heFWobdm8VBSizgmxbo8bt3fvIcQl5oEbB4R9ZQOl0pVpbwu1FDuaRVSzR12xfYn3h/9A==","signatures":[{"sig":"MEYCIQCKyKScubUfgR2edUQoQBOsRb/0YEwJYs3NK/x9a1xGfQIhAN50a4HZkNRxZc8n6HkECQHQRfmVqWJDIcBzWKF7Ohou","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQt7CRA9TVsSAnZWagAATpsP/0vAq/WedjlmCu70AFHZ\nIopBmpd0ollL+ZKQzwb4yyuA2VYuloMni6kWKHdtM5YamR7lHcQqPfywX+PO\n4L1K8xqTPF2FVCd3+CHG52uf4AocmjvGesulIcsLV7I0YNkE+n3CrCxgqLjm\nSffCZN2U2IA/9bUPbZ/ZBc7s2Z6K1eEIH62JwZvDdaVUhkLfkxwfeofPNR8e\npVwQAmXkKF7fE7JCqYssfAiblua2U/W0CLpcceUKj0hevdKsXGJhZRttlf4H\nBEIqfk5LZ+XfOJlKg+sPV9R2uJzwEElNTBeXWliOXkaEW0s9ixdI2D1AsCxb\nuWyKBohvSwvgHwV6Nkh81LpMpHujnjEKS1UfYkKWfpGWYyeQ4Dj5Vp9GV9st\nunKovhcwkWvjIZjfrx5pYpRTH4I/HqNOBH1w6mWKunhv3y56uCuEnw+6Z9va\nBxrrLMHvzHQfgyGrDsR+xxGmaphyK/YqWPVEOWdZKJqoibpgcSQ4LV1rcxb1\nL6XQeGsdPGUYWHLenFPyJmgkOQVcEcE+iZ1AgA5qqSMp2bAJVg0p0dqb7Dyn\nJqCK8X1qQqShYLOompkKLhXfabMkgjNIgbl2BV5Wb+CVwf72pLY0oHAstYF0\nKu3cTrKV+tVk9jn1iiWZ1cBZf1F/oqKrPrtz3r2/pdn8DjK9mBcvHfGRt/bm\nmOwH\r\n=J36W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d7307ed831dded5d9e22a8faf595a7411258793f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4ea1b7c69.0","@material/base":"9.0.0-canary.4ea1b7c69.0","@material/shape":"9.0.0-canary.4ea1b7c69.0","@material/theme":"9.0.0-canary.4ea1b7c69.0","@material/floating-label":"9.0.0-canary.4ea1b7c69.0","@material/feature-targeting":"9.0.0-canary.4ea1b7c69.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.4ea1b7c69.0_1607011194906_0.8408059571950761","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/notched-outline","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.eaeb78ce3.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aeb8cca798e872350dcbf66326028651c84d0d07","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":34,"integrity":"sha512-fa1J2+WUlaHURJ6Ohpn0I1u6cUAbPP39SZV9zUZTEGbBhO2wxj0tvlYKi35q9XaVI40JzEY46SurB+vr4qpSiA==","signatures":[{"sig":"MEUCIFVrD6jjz7j+YY0LByxEouxd/ZHWQXlg5zPQNm+1wqc0AiEA5mA+2570k6jxb2LHNAXzbyPaKdiSv+JYNvCXaaS6DPQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRo/CRA9TVsSAnZWagAA4u0QAIZ6yZjHgc0cNyPHRDik\nHTQPh6cttOI9TMQxDO7/hNlF+ZGsY+4Qlo2EJ9XeMLy4pUb9k7Y/oawMLthu\nfRYAcvsdvND/Z14kEj4wWHkkSPzrIdK9wFG7nW6TOUou+WVfunPEz62LeLVf\nyIecrCDlS8q+MSv4jHGZatcW0qzUJ8RxB8Y6WLMAx8yLtrGrphleJVpiiVGK\nthgi072iWF1xXsW3TqB38C5pPM6VPVQxEFJNskY6YMCssoNC5fWy39OH9rAa\ne6WQUNQAA4zglQ5cvvEUXXvcY4INYZKLtQc6lDV6KtzSqgUqabvpzHvrwxGr\noXkCTA+of7ia43xHaR6EyH2vG6yHWlxAxOx6hDMhh6ZwC3g0iv9dEWV94fiA\n72y/T4vuIj8s+UWkdrCSF3wM55cIozzZD05YOcXRsfy8HxL/4FarknjIrt3Z\n92ZwDKCEKri1eEm74b2GVtnOwPUaTTkr5MjS6J7Ko60NpyU9YVLbBwHHqbM2\nwdG+Ntp/7fIlzpjPL50/K9SOz1zNp6FAPvUDWjjkQeB2RLlNQJlE89NW6Qx6\nJWNnqh6nOV5y35sjzT4gsCjwwRNAG7YvM/ba5nzurnkPNx+4BTKwGdJqpP4M\n2Nm8yRydKM7UKD3+c9jaztbKYfbuIARMt0NdsgpV+ieQVt9rafsor+Cuh8XD\nJSPE\r\n=6rI4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9902fe5ed18fabe2d289f92e75dbf17abebe5a80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.eaeb78ce3.0","@material/base":"9.0.0-canary.eaeb78ce3.0","@material/shape":"9.0.0-canary.eaeb78ce3.0","@material/theme":"9.0.0-canary.eaeb78ce3.0","@material/floating-label":"9.0.0-canary.eaeb78ce3.0","@material/feature-targeting":"9.0.0-canary.eaeb78ce3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.eaeb78ce3.0_1607014975567_0.7637103358182624","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/notched-outline","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.1c156d69d.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3821fee8afa689167d9ab951206dc1c45c2d8b4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.1c156d69d.0.tgz","fileCount":34,"integrity":"sha512-lyIFYE6V/LFGhMAbmmPNQGby5pqbf4JwSiVu0jlEtBy9P+H6x/0iDO9OjaR+YUSHUo4ht9UfuDSfrCHJ/3og0w==","signatures":[{"sig":"MEYCIQCVUx07kjtBliQuxTp2KvYED0bRgTfntYMKwrLzSl/f4gIhAIvrdb1XgDGhc+6lzrTCMXsCQ2AdK064956BsKvEV8CR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU6lCRA9TVsSAnZWagAA6fAP/iEshXwteTJKOa/Y6S+O\nuecoakQVE7wpPw1kWGsK3rUI2Jojyinwii0E4GLItSLxIIi9WtVx5px+LZ7A\nnU5Onw3sHPAyAcWINEIw1/pK+viAvVEjDeA4hfjMMOLCVPHLXWoDf6CSMnX8\ntP0cd9ft5jO60JQlkkjNcbQYoekc8qybdts+rptdmJlDkiEiyIhpLZHaAsPS\nNo7ASXx91QjuHkSb1ZLvR34ft0dXrPiyXjUdkSu3t/FDn1csovODyMBgg0QS\neKCDlusn/HAeUJwsjqM4gN8C0gYhF8kq2AzMvnjG3aeNh6WzTETkqTlLOIta\nHZU5OIhZjHq6TcEa49RQPLeSAJbyAop49v4IEylzzAH59YkU+xC4fwSmZIV/\nS5Tp+ocDNxo3t48yw4gMEtSpcgADsBgmo8/4hlb+lI9Sg+2x0JKGOSEf7TAr\n8SRHQ6B0DtBJQDsILsw7ohoGS0HUXFMdONohJ9wtWzD67gEFDYMWjbeZSQMm\nvrt9BQfm9yja8PWwPixS6TC7a0nzfKPhaUHZfpL3WFi/fZ7vatOZ+FIICjMy\nhKrzWOyqpdMbZ2B6FeJVb/lvF8/4kiwz/QeFkGCd+gn9u6DjaIAqGOM2ebqy\ngZbPhmuA1Af5kZT67zMCFKgGQOOQ7GcwxAhDcwIR8dDdPJtV87rpl8prXH/L\nc8mP\r\n=m2F2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2239befcb4baad98eef5bd67444b0f759e58a812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.1c156d69d.0","@material/base":"9.0.0-canary.1c156d69d.0","@material/shape":"9.0.0-canary.1c156d69d.0","@material/theme":"9.0.0-canary.1c156d69d.0","@material/floating-label":"9.0.0-canary.1c156d69d.0","@material/feature-targeting":"9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.1c156d69d.0_1607028389351_0.5409121938396437","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/notched-outline","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.832668d33.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"567ca17ef598c72543336c5f3e9a406d9e03b899","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.832668d33.0.tgz","fileCount":34,"integrity":"sha512-moPT7QwptQ90V18Q9tQw38GNN2ZbFE5fhWXufJE84+05MTd+qmKwsIteJIL03+8urYaFs9eKmcyrmFugRUCcXw==","signatures":[{"sig":"MEYCIQCcd5oyvJL0UVmWg5baB4bp9u9Zxm3gdaUyzQhFQDYCYQIhAMcr3uykWutIcAiNq9+rP/olH9Ez5pJ5Xj7AD1Izcrzd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynrMCRA9TVsSAnZWagAA9McQAJIF+8YMqj4ih57oS+so\nbihyCaNlbl+NyAm1HNJghk57sU++ijlvuO3ih/FtuwJO5xP9WP6GjUIPiQlQ\nao948BNNjepfMUV+49KWSIlaBruLl0Va0okU3mp/ndW4PGd/wMFdxaMmNBbE\nSuFYZkjr2/MUW/uE4n6+Ux2aZ6WlYRJkNrueSUMmGZW/jBM8KwAAJXSiwCY6\nDASE6gUfW4f2bHms+v/4tadrXFP0ComzyrCKC6qZS+HdZKGb8XHnTksYO324\n06e45q0pgAu5lTHyGjon83up/fRq4UUu6I1bKM+Tspkhmzu1/Ur9retrDIJN\n7eQk/QKdh1BcLEBAXIQ1oPlc821Dt5LFiEKAOPdhTlgPpzqfJAU1AvalZsBg\n2loYQfyQWRNhgN/TuBY35gxu6y1oVToOfvTH0M+hiIz4U3EPV5+BJ5m7dQdx\nTOiWOLtCMs7QktghFbkZsfps8rkxxpGIVinOjvNDDP67Fu38yO5t3RjqEzI+\nmiKHCSOr45SR6i6d+1GUBqYgZcVtFgAv52OECRI3+7Nm2HDxOI36DqpFpNia\noW3DxjqiODhu6zk16LPQNKd9FVDVb5/Zg8NSQlLsQ6U8cplKgl/YmRd1JokG\nfP6v5CgrCSVLb0uivpgPnZCQF79x9EUXbu9fFs40zfUwUJSMNTsQQMXF+31u\nFkEr\r\n=3Fod\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5744d71a59950726441cfb1b4e3ae33706069b94","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.832668d33.0","@material/base":"9.0.0-canary.832668d33.0","@material/shape":"9.0.0-canary.832668d33.0","@material/theme":"9.0.0-canary.832668d33.0","@material/floating-label":"9.0.0-canary.832668d33.0","@material/feature-targeting":"9.0.0-canary.832668d33.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.832668d33.0_1607105227731_0.6031223501891445","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/notched-outline","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.4321323e4.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"625032f1d091da19e6512c9db7334590673bccda","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.4321323e4.0.tgz","fileCount":34,"integrity":"sha512-n3WAXT0Vi616yIEAoyofrjB6pKdI8YBJ5zIk62gVKOZr8OTWT3ixhF3gPkEgLrG2BgP/NHvQi16lbnnl07/dwA==","signatures":[{"sig":"MEYCIQCk0OQ0rmyV4Ug/l6ID0ezq+w5jziE+kl2n/LyrspLLtgIhANvpwnfAikGJxz5A4JFZqNi9d1qdGCyHpsXQbBMH3C7j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhI+CRA9TVsSAnZWagAAuJEP/2uF0T9BMcVN2zR+e1zD\n82clhM9aKE9bLidowfSY6PkBmRF0fVHwATUO7K/tspzO6TBC7zsXjX/Hyzz1\nYSVzTuzCppOFca+plQuQbr+R1Rlzgesn2QiMbATHR62shI6YbCsqT3XiT8kr\nyF0sTgTyvCjVFkmotT1CBQiY3+TIBcsxRDk5VntYUNWqjDZhwt3hyaInFc6S\n3gJG/xXSCR0WvBGsqY4U9jL0uIBFJRTFVoHupCDP1OdUAGC5i9wTLhXN4T7b\n4afTq1Fstb/keqGyB3UZPylV8ko5DbJQsPlpLtelF1nY6X5BkCSbYn61zxpo\nwUz5VUHT9EQ7Ind8x494K2YKwUCBA9iw5iNIJcQyDWxagy3h17jZGc8Bqk/u\nCtdBeNV+LFIiworRZ3qG6s7Y3tpWbUZX5RxDMWB/lZDb9h7YTm4TkptCtw7V\nRRx60XA9OQsoRNVowboEYQ3ryPU0QRryZSe/588g6pDxmnTzIVItuAPh8K8u\n6S+EgOoBmM2R7MLy5NlXHi+JaGTDiVtFUuI09SoNAjOWkdXRXG1jWfst3qXP\n3+ksMo+30qy5tQk+h/yRqjFfI/t9GdauY7fUBB4u5TVY8ZVv5T11V4NyKcwh\nNwtPZswHd0ZOn46ZgYK+Yo61op5u2LownqMNvALbUyNaCr5UEtB4s1lm/TO+\n1/7a\r\n=B8KF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a838a6bc72ee56a967d493a841d4c69ace1f3f13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4321323e4.0","@material/base":"9.0.0-canary.4321323e4.0","@material/shape":"9.0.0-canary.4321323e4.0","@material/theme":"9.0.0-canary.4321323e4.0","@material/floating-label":"9.0.0-canary.4321323e4.0","@material/feature-targeting":"9.0.0-canary.4321323e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.4321323e4.0_1607340606059_0.6589102238731974","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/notched-outline","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.2d5f32d41.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d26846e4f3353c1bafd22c0125c494debf9d75f1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.2d5f32d41.0.tgz","fileCount":34,"integrity":"sha512-8VlWFrJ1CBhwoIEb+5oyNE77iQBr7zRCOWAVmVavFFuWBCcrJuJwh7l7+2lbuekyrpk2O5u3OdKHmgybdExcRQ==","signatures":[{"sig":"MEQCIC4ujyllFUcQDN/vtU8kO7SeHeqQTrBhKs7zwLpZzsAGAiA8nN/Lhn1YyPMzEGnqJ2pemhXE+9P/zSHfcVTNv7/J8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzlu1CRA9TVsSAnZWagAAB/gP/0assg+nzE8EtRgmOW3G\nSL5LbkA3DELkSXgTJgkuSxqL7bF9e4vuY0CJGZzyNOPwWcKWAYNzp5LMi8ys\n1ZZQmqtIa2ccnQsMWO7xizEfrWx6wXNg2ZoLsRZ+Wn9ZiNRTmdmaCVEk5MAE\nHTI5Pqp1dWFXBD+D8nKJJIe0WBBJSSQECzvsLkMzb8wcUoP09hYvVPvYQCZX\n0kJmLekDgePihCHLGdNNhTGKulTrnhJ/sGq5YSHGoSwoIbI9ug0fFmgUVd47\nsbusDNfJYmZF+LrkSvTL5mbuBRc2IeiZIP9p/9vV9K3PyCKwF+M0Xfo7yQi4\nFy35Q5BRBM4oMVVVUWu+914PAWbyIVKClnBNtqolWkfPrjgiT9JVTWRGd1cj\nWX1aViHP6WqhSa4zX+DGZooNKvCYE2tHWBKkfJpFmy50SmypzklBfXKaR2Zc\nwzItW2sHghtWo6x1qdYOlEQx5GBz2RLpqHFNrsn1nFL/sXOWTLsJoASzr4BH\nHRx5l7y+7438H7oYUZUrZ19K5Odg0HYMl2hskbYUbxSpeY0BqGlhfY5ck8k9\nhx7RhRZ84FHNd+1SRfYu9jz5m7lJ2VdTIAV07FbKpMSCTHQSSa9HoyhOeFp7\nlbOlRungqZRuiEuAq5piWpbxq2U0pTltWwu6TkTEnUUfucJp6jbmjByFzkJ7\neRLC\r\n=UMs4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2c385d3016a738d32bd3c03bcc91bccf82981fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.2d5f32d41.0","@material/base":"9.0.0-canary.2d5f32d41.0","@material/shape":"9.0.0-canary.2d5f32d41.0","@material/theme":"9.0.0-canary.2d5f32d41.0","@material/floating-label":"9.0.0-canary.2d5f32d41.0","@material/feature-targeting":"9.0.0-canary.2d5f32d41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.2d5f32d41.0_1607359412686_0.8406902590387499","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/notched-outline","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.8239afc64.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0b3bc723baab311a8fffaa995af0706f687f9a1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.8239afc64.0.tgz","fileCount":34,"integrity":"sha512-/4qr47Ttvs50YrY41nCwUuX8rgOAtMq4DQDB9dAPs78TXH3mkhRD+6k8PciBMtWpMgf/c+LQVD1p5OhohAlUTw==","signatures":[{"sig":"MEUCIQCMcKt8W+ruTeAHA2YBTaXSfDbmJKUejJprET5vFRHkpwIgP7P6IiEWePWVLgO8hyBgtsQszYdu/D3HOFbwf4GgJP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzoeSCRA9TVsSAnZWagAAjXMP/3P+pgVYF7cCj+xzJX7K\ne/NkIQIql93LSEFrNIvI+KYdql28+3XLmtT+hAnXe5qDyoS+5VIeVWhi2GFq\nZwwZQE8f3QfPoNAYZJeayEhfyQEp3Sy9bqvqYEcK7qA59u0pi7bUDQLqd/iA\nNDrQt9NKygW13p9lB/2VJSE79B0V7Av73IV0v7H8raxPnSwz8nM5Bo1K7RTE\n4fxGC6BEqitJzbpU6kei1b74nOncGhreTsB1ANyAS+0rmFLos/vJ8QOhoiJz\ntYjqgUIHpH8Nl3+UZNEY5oURmYFXnS5qKhGJF/A3c6YunK9Q9tXdAQ1jpv4c\nj08iAnmkhJDo6N55GXWB6zEhtEmV7AS6FQa9k+VoyPkd1kgJBGuF1cRpYW3/\nCPXWmy/o5WbuwzRjtb1pG1/9+LOun72u4X8lfhnqcMMcDnwlMePU7a7OT9B1\nMajngx+XueoXnyArgSOh+a/K/jR0rMF28JpUPmouriUcGpG9PEF+Anu5sAor\n85KG9D2KcKvzZaUHflwFkQmfTauRFkMxEytTpApu+fevkUJ8svX84Pmw/Al+\nMCIeePqyZ8fjw1sAk6XiHEbhlwRBTCp1C67lp1BPhGHfpePMI+56hZ3VGS0g\na/2ucmmBC+LTbZ8b1dwaTbKhyTKcN372Hx1BHVEvgzDoWY7MjHxRBOMwaTp5\nIfIu\r\n=pnWj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3ba24284e7fdc10c5aba869e2a2d3175867e0f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.8239afc64.0","@material/base":"9.0.0-canary.8239afc64.0","@material/shape":"9.0.0-canary.8239afc64.0","@material/theme":"9.0.0-canary.8239afc64.0","@material/floating-label":"9.0.0-canary.8239afc64.0","@material/feature-targeting":"9.0.0-canary.8239afc64.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.8239afc64.0_1607370642049_0.3249532107719211","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/notched-outline","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.6871336f1.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd42d384334f4938ef6d68be46ae631b41b91655","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.6871336f1.0.tgz","fileCount":34,"integrity":"sha512-rm0bYvlZJIqeef4rXQ5SvGVnZ4rfYGzXfyVtHJyfsLf+N41zqiOVN0+0t1+HVVDwWvMnpABESrZ9DAqeYJ3rJg==","signatures":[{"sig":"MEUCIQC71d0XqAWrTzyiBvSJ6eXlUdxIJX2JfyAVpWrLercxawIgerCk6NqSM17nY01U2yfIe2mS7dtDAXJj7PFN4H7EVO8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6OlCRA9TVsSAnZWagAA/x8QAJi3ewJ18Mh70JZOxSWZ\nSe4tmi+BjaAYCCSAB9534D7efP0SGAJl8w2XpfDqqw1qtaOrFrM27TdwkLtc\nBqgF8XnttgEK49rQ9aOvvJVhMO1mV5Ocj/Gv989TtHHP2WIHj8j4sWaMeJcy\nheKOidLOc4qnzSMOEo4GgOmYZiyPPbtQx1tg3P3VkbbhJhsvKixhyfqKTXBH\nW3ITcJs7OvV41qonGzpuHglJ2mjiu/7HT8RXjQkgO0cCchqeiNyu/Uh8t4tP\nOQL+3eRcaOke/66zn6hzj4wR9B16WEbhFFPjvko3HuhEV/G7Xi/n87KZoVjh\ntn5t8eo6HvBXUcZrItFxbxiCTDYugdBo0AkKKS8qlZ05pP/xyXER7/C0+msK\nXsEGkPJzuWN/DlYXVuGzs4am3+tm3gM2N76plb3OZUNML/okDnfoFzhY71nr\npf//0QLgJNnFwU9IUX5NuoCVC3rRATvJ0c3REE37kWrz9+X+G5huVvbw4ViQ\nyx2xwzbU+3WqJSWZJfLXpCSPKU8qRXf90hi6NbfaIPn90RWK5hrjNHCLJqbi\nOO6zOOUJpRFluNrzt7CWlYZbdpKpqUa/Stjg+t6+cwGHXoPeyFVGa8xMa3Ko\nLZo8rh/ZDzcbwK5IQOChxpPl7oPpghGrS6+d706ihimbvaPaEmO42vCLAc35\nvEx5\r\n=a1Jx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"aed20b07d4f2597c382a6ce4b7c723f6df0c3efc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.6871336f1.0","@material/base":"9.0.0-canary.6871336f1.0","@material/shape":"9.0.0-canary.6871336f1.0","@material/theme":"9.0.0-canary.6871336f1.0","@material/floating-label":"9.0.0-canary.6871336f1.0","@material/feature-targeting":"9.0.0-canary.6871336f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.6871336f1.0_1607443364590_0.7542873912267711","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/notched-outline","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.9f718da94.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"faec7613d61d8c3cf1f3405abfe1aa884741f48e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.9f718da94.0.tgz","fileCount":34,"integrity":"sha512-L1WAhzlqtMTWXYn1OxljAYqT90ZLfdQWRI9HaUDRMcJLMyXR4rL3xes3ShqWxgU2/YyDCW2pnBRXVMrp9e4u5Q==","signatures":[{"sig":"MEUCIQC4N9iDn7gN2tZkjTlke9fx+ubMumJKXvUHcuZXISjymwIgGf6WuiwQRW7cbsyLksgFB2QkCLkKKtT+VlLtXig8pAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6ZoCRA9TVsSAnZWagAAspcP/0GB+z6oLUWZNtSfsVnX\nppHv3/ZGqXEXC3354xSxy1K3ul51Z3/OfF3JEf7II/yWXbg5S9MzLtVadm+o\n7XDPQRlhRof02PZ6JHRRZqRrV93wSjiwpXIR97Z2XEsdZyLxnAsHyhseC11b\nEzFFKMGj+IYlchPm4c0Z+FmG9j2pcmPtpvv0qjIu0Eg0AppyLWa1aqoPsodu\nhVt66i2P7BC4+lvJHZoWeCAc7uW0pH+VntCM3I426ap7LvUVZZh788wtt2Hn\nvI6BLKkKX7B+CC6SJgTLCTj8cNKfToavkXnmjawpgC5YMKnpVF04Kk9/LFtw\nnYlT+rxH9JQwn43sPtS4ZDPJ1ipQ4MgUliqix69B7sxzDN66urOByC1fqiuS\n5Mx522IoAfeKmNRt1NbUiTi1mRezbnDruNWt+KtXtuhv9zlQ2m3AespxTN9c\nrKz+l1mKrHOlx1m7apSQxl7HKA6LdsXYNCF+X3YDVe9Ow7nwKzyJkhhEN7da\n2LcEjiZZjBkJM4snyUedFLsINvoeHviqwiftArHytaPkEWUR3QP6VAJiYSJ7\n4c1RWBfGu9WZ9bSnCENFFIeE9/LOsZa9rtk9dUeoUrQ0u3l7i1YiCFxLdb3C\nFrh0WkIyrbL7MX/ucOm1XgpObP8oruNgU3tM5BwU+dukU6pUMgiP6H+RUpFU\nKUFa\r\n=kIQI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7fb6692f329c5482f22dc9fe691a20fe4c6dd38c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.9f718da94.0","@material/base":"9.0.0-canary.9f718da94.0","@material/shape":"9.0.0-canary.9f718da94.0","@material/theme":"9.0.0-canary.9f718da94.0","@material/floating-label":"9.0.0-canary.9f718da94.0","@material/feature-targeting":"9.0.0-canary.9f718da94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.9f718da94.0_1607444072352_0.21321610990006956","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/notched-outline","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.1fccb1418.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff241c47daee50bd9413fe0a700a0d01e54033ec","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.1fccb1418.0.tgz","fileCount":34,"integrity":"sha512-KbPnaeB0dlZ5T1oFC01NkZ2ScDrUgt/egmNPRo7uZDYBFA23TTFSNmB1U5rFUSEATG5dPA5bJfktgyiYZx4KGQ==","signatures":[{"sig":"MEQCICPuElSLmjgOPBBbluWZcqoU7Xi5TwMUeG62Sarluj+QAiB8pTh9UjL42r23cm+ZZtJxx9haMlHoBTQSFXoD864DLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6nqCRA9TVsSAnZWagAArhwP/RU49KQ4LcOc1rneorOu\nsiOnF4zYs3fAAExSdjOvM1ObZ0WB7EQLd8+hOcHZruX9c3qGfC7eBFwRt4dQ\nR79kcePaaL+92icBgt7DhQqQQJ7HiXQHjqyEXX7WMCCyX8ztkdw1i2rDhS9Z\n4Yi7AeNR9egLqFDSmdlBbGsH7FcwM9R4bxi7mWGxNd4/y2jV5sXyli9M1xtS\n2ZOnB7PyCIkS9ZNYdJE6f3w6UT91hXKc81g0RdyOuv7UHfpusvUy8QGtebcx\nzh3/3M0dTHh3tQgUIniEwwMzzwGB83/GouT/C7kJiZcM0nQaEegvBNb2869g\nJhb5+TntY02c8CwscrHHHSJf69OuRdcGcqzRlM7c9z1PhiI12tSe1+Z5S7fn\nA2RhO4dtZyPnUVt7cTqaRpPHURayl8r6s7YA75mXbAGZXNTjPh8JuUcSRA70\nCbbar1gGPzXGE8+QM1ihDRFobm9/DqK7XO5pEZ3OCkVNYnbD+An1S1XuhhfL\nSX2HsPg3BIOwuTBGdGMkP1TXeKkbBWG+QiZ7AZLRTAjHK0CRgaNIeWWDdpqY\nVBHfLcK/JdIMkbJpp1DiYiEQ3Si4oz04369TVT0uRqCTHpaqwprCXNfCawYk\nqWiOZaZrgGqG05rNyIRbBkYlv/5dTC5itrW7hgPG95qmA6W+sxY/aiTJh0pz\nOfz/\r\n=Ao3X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f9dd96ea7afbac37dca91bc879dc44ce4523c442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.1fccb1418.0","@material/base":"9.0.0-canary.1fccb1418.0","@material/shape":"9.0.0-canary.1fccb1418.0","@material/theme":"9.0.0-canary.1fccb1418.0","@material/floating-label":"9.0.0-canary.1fccb1418.0","@material/feature-targeting":"9.0.0-canary.1fccb1418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.1fccb1418.0_1607444970523_0.14206209649537072","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/notched-outline","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.afb68894e.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"738fafeeceb28aef172ed4e041b8bc267e0e4832","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.afb68894e.0.tgz","fileCount":34,"integrity":"sha512-wj/lY64vcMsePPJZCKvrC0vNMqfmVoMRq0Z0fhtVD1NXyMLyVVEvc1wPb347t4+STj1eAxvATltmGfzZwhESqg==","signatures":[{"sig":"MEUCIQDS881dDvsNQHqh+u1haFoR3QlM+gJDndy8Oqsl2CgfTAIgHXbckRk/ReHexJ9bKnowRh9NGR1XJQ8WiiX/2bO6ugs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6rbCRA9TVsSAnZWagAAuxwP/jwuT9pFmDqo49FJWLd8\neY+BYghz5D2Vsk+Od3391jPg4eE3M8morG2zbWmjxSo1LyvHLwKrqrOHbeIO\nIAq3Svgls3BkOLbnLOWRnA39kigol1CNAnaPrPmu4IH4RbHqfsK0yR97MYk6\n8v7/rpWBcTWIxfLNfYffXZ/4Xpx2u1kWgYtW06TwMGbcYJjib1PjDc2yNiyL\nuOkoA777rsEt9Mp94TYaMzUGvycyOPb8DiaXUDK0oShn92v+5sbuP2xEurVc\nDDmLynvCrzU8vZYdEakxxveQo0hRjQu2Bhn2uwQ17E3bERBiJKdwuPmQBpBK\nQ4K5NAwlVaPn06Onri1XD2higQriCwrNqhVIyN34yMcAb2jU8H6Sw173rtJm\n8JDOCvIgKQchCJn49LxojdNq5Dm0mBiyD9azm7+5Zct48TowMA2g7K8Tjl/0\nyycsFLTIZWZam03RyNrXao4dw8UO4ym2PrKriS4W1zaRZww5L+fiBIRbA+nx\nNtIRUbodGxH37/4Rb3dItFSSruwbBXbSmk2U4cexkG+KLwbRcy9fE4SEGlse\nN0ac9zhsXEV1A+c9CabijvRg8k+dSpBMPn3fWp07i0vN4c5RDRy//oZyIcqi\nn2zhhA0y0Gb/d/AU/xhLv/KW0xQwWCiSOmwxXNZgddeYy/joteTJJ4JWk4xS\nWl0T\r\n=5l0F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8a3ec1a501083d67f1c342fcf5b11a765a586ca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.afb68894e.0","@material/base":"9.0.0-canary.afb68894e.0","@material/shape":"9.0.0-canary.afb68894e.0","@material/theme":"9.0.0-canary.afb68894e.0","@material/floating-label":"9.0.0-canary.afb68894e.0","@material/feature-targeting":"9.0.0-canary.afb68894e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.afb68894e.0_1607445210550_0.1794460176456818","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/notched-outline","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.fd88d40c2.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb752cc6551228c5d68e6f92bd69478c8088dd49","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.fd88d40c2.0.tgz","fileCount":34,"integrity":"sha512-/09XmTwjZu4qlgcDRN8tXwXiY1QZBYXySw9KC5XignPd+7Wi8Ie8noRw+LDNvfd05CLGGvCTMQJdGGFaW9Ghfw==","signatures":[{"sig":"MEUCIQClUsk5jsIkh76JPHj0HLLiP3GimKk1LZgTd7+DyUGrbQIgZAg18b2ohVLPu7SHnmWVUMyaRSAYU2ZhZvzQ7TGUxAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz64JCRA9TVsSAnZWagAAQeQP/1Zj2UnYVIO1k+Ft6ZTa\nDrPxwUVikG8Gnfn+UjtWpnNWIyRFLexbWFofxQbT8WpYxJ/aVKu/CLdAzs6n\nE8T+CPnTjbMOQlGA57e55SoVQvRmRC/SvU4jPFfP/f0C3Te3cSwaluoikeIt\nn1ByvHtlgm/ib45KE/i25bcGh0eNoEUYoh5l7ZNkFW+ktQ5mdvXOEUEUMraF\n5DO3v7n9Eo0htOElCNLpQrApk7flomYAuagAmpEH/HwATQ6EGWUyGZEM2rNr\nwT4dsrCb90k1ioa0AmVaPVYjb+9hKAHkjNx+us4McWSxruxjku7kP4Xc+KaQ\nhi76P6sYZCNpIN+Gw7tPXqQkVGbcX2TnUioCfkhgetaoel8cl4UhLf9AIVIo\nC36fZ7JQVbbCzy+ZevYz0TwLrdGRc7Vi8wV+QnaS8cK4WqjPKiHIuCVMTeDm\nvXZ8zS/Lrb1HmianPAE5MF4sklI8e1F6S/Ca+RKBoAR3D08JLibHN4vx/+fD\nKIp2gKScTHqWnwUoPeYjYdk8VsAzL3KYwdW+4WCrMiy7mJsKqjb+1fT+pNd6\nIyHZZeEegZA/VM0PsCy/GSdWrwZu+mjOh37fdUwtd31Q7bRcFh3Gju6mHz9H\nqwA5ohFlBON7RvD+jUSBCnkkpW1DnB+LcAI+6ZIRK3H3nHebXQ+9PnrU1n6g\nWGBb\r\n=JyKc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b0f8299700bd0ac44ef5acfdd0234b464d837131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fd88d40c2.0","@material/base":"9.0.0-canary.fd88d40c2.0","@material/shape":"9.0.0-canary.fd88d40c2.0","@material/theme":"9.0.0-canary.fd88d40c2.0","@material/floating-label":"9.0.0-canary.fd88d40c2.0","@material/feature-targeting":"9.0.0-canary.fd88d40c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.fd88d40c2.0_1607446025142_0.8501319383843677","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/notched-outline","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.ba9e3109c.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"baa7f5773cbf27a5f12b382eee97222040277f16","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.ba9e3109c.0.tgz","fileCount":34,"integrity":"sha512-P1WTQPWEN9qRXoKJGOoqV2H57wxeUNYL3qSM87tYu2fBtIhnL1eMsnpB/BALh9xhQzuZC8WSI7qwNwbHDixHmg==","signatures":[{"sig":"MEYCIQD5iiv9xY1AdteZb7y6BzpF6ARtZnfR2VoAjzYLU+CZ7wIhAIsNlAZcxG1S2aY/Hlyj5LSUoj1vfs19vhE1qllFJqQn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz869CRA9TVsSAnZWagAAHv8P/1tbZmMKwirPE39LSH6X\nthaSmnFgDKSI67JigB58W2FinKR2Dnjasy72TASv3z772oY33HCvC9CrPcPE\now1JCD5MDq5OzQM/YpoC28ZoGpiRogJwvjDdsdirC5Ifumw+zfT4Rob43+rS\nj32xdIJqvOqbU4FOu3u8sv9kqB3fPIJkHQi/29QcpfyNgLhmsqNsQelAPgiN\nonKvQy0ecoAoPDUF5TYVuKkbJ7dz64vPfwhVX865mB/Uwq5KeDQOHxJDS3IW\ntSc3Yq3O+Q0jsJ/R8tzQhQN5IwdrHZ/SVIaH/KQWann5xupzbFzAdcDgIAtB\nYcGf47xxFk6lT5/qzHj9N/ALgsQtEDOhSlb9rkKE1VHO5RKt3RdLQ0K+ken4\niN71rs9YJoBCvVfKIXHKlmpWxztKNKHZAZIp0zEVLjRwwAYMCGvGpujpMvhI\n8Oi5CcaNFbxmQk4/+PQgDw80GRJ1zAGkN4gKQZ4ZRkSB372G6wzralkMLr0j\n2PSv4H9sffUvFWsQ5CsqWcptwqNnHB/nzqwF3w29PJq1UzWxaL8WrRt45pKv\nur6vhwK3DDUxSiO3eG7X7Fg2OCXFJBTBZW4faGBFpRNyv+X+RlfgS/H9Xe4b\nBxHTvZiflovgf/5WacRiAMEYP+v5MxN4Fo7th5DXcpgeE+losGHnROxvhybk\n8FoH\r\n=RndO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"84bc4a2a193fb62b5721555a77b59e7bce321bd3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.ba9e3109c.0","@material/base":"9.0.0-canary.ba9e3109c.0","@material/shape":"9.0.0-canary.ba9e3109c.0","@material/theme":"9.0.0-canary.ba9e3109c.0","@material/floating-label":"9.0.0-canary.ba9e3109c.0","@material/feature-targeting":"9.0.0-canary.ba9e3109c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.ba9e3109c.0_1607454397315_0.26804193259190345","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/notched-outline","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.1085c3b2d.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"079ddbea2c400c494cc29fefa49463da14057a11","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.1085c3b2d.0.tgz","fileCount":34,"integrity":"sha512-/vAv4mvO6ePbcC2/rxBATeJH8iLoD6URGyp3TZGz54lrRFXXYYyWAroFG2fz2UIP3CsyxzF5qHPktBNmOrTKvA==","signatures":[{"sig":"MEYCIQDOiCkpJr1FseT+QGss5elzh8rEhdl+BkxTuzc36CSdiwIhAN8uioHhNUYuNt3gKnWINK7+DKk0HvUV08B8Jzfhuke/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SGICRA9TVsSAnZWagAAf08P/RL7kpgwBe/rjL0oKpoO\ndhynEqK/5UWDWksqSj7P1Y/Cm/8eEGE06GbDkCQJ1p9meaGuCeq7E2UJQOZW\nPnaVetDFrVd1Pc05jXeYP5qViijCruYdpNROyBdA1FLS3ND1ne6hltyW5AnO\nVM+e97jyGgYfbw8BnFf/XoNd7vZw+iiYRY2UCtbrKH7KcBJ4BsvCIKdYusDC\nS3Np6S/IH1A8n+nd03XdAk5JKCFzqt796Q7BJbOj3/FKVTOkvg1S3WVu2KdX\ndh4u5wX2CBBmFzAvX5aTQx/WfTc0JPElKB4wE/PMyGyHQOO++PdmZVrYdJnJ\nBfYrNauNkfktVn93InVuO85TZr6JNHRSM4oVu8KdDg0NafmSfdFlmlkTVqVk\nDCUqjJig/AniAm8gzE7dz/Qi5gsjAtoyueWca39obt0c1+qtFI0dcgG+kEfV\n6Ssu2lFuZxFNOjgwyIms48BMSe5mh0N2GLcTH2ZyMC31pFL08mFbOISxxwwc\ncvOKxGJYFBle2fHsGx1NWRWHFvikrLmcEJiVrolgTcxtzPetoiV32cmxAVcz\nfiycmQTwtNkSzguOq2p66Os2hk8s1VnvLvbqEHCfY+qxBE0DZj4oIrk7B2y3\npzXFCArxwRXSwZ5eT+fBIirdiqmKegoWgairAOxYyandD2X5O7BKFRCMtj62\n+9PG\r\n=vJhS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a223e0b83a78bac523ca498cc8389f361cd0f4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.1085c3b2d.0","@material/base":"9.0.0-canary.1085c3b2d.0","@material/shape":"9.0.0-canary.1085c3b2d.0","@material/theme":"9.0.0-canary.1085c3b2d.0","@material/floating-label":"9.0.0-canary.1085c3b2d.0","@material/feature-targeting":"9.0.0-canary.1085c3b2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.1085c3b2d.0_1607541127932_0.30241337657417633","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/notched-outline","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.c5dda809d.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d258000a33e22c2da9131977bbe7c6bf4b0c0465","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.c5dda809d.0.tgz","fileCount":34,"integrity":"sha512-HZT3Vgwz5BCZoL2WiDr0WGN6LwaAdxxNqPH1YzrcOLkWd14/HQROCOMXocHz7YAJB9/DxBxV8QAwyYm2GB1qTA==","signatures":[{"sig":"MEUCIQCIijlZOZ4405BPWtUnrByfkGcSeVambdlJMewuj0/n7gIgZ0uFMNHRMt5Fkzq10AjJB6lPyI+fxd+3Gtwuh8HNTzQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TjECRA9TVsSAnZWagAAOjYP/RNYcmJmEZQnuyMA8l4h\nbVg9ywvIM/aFoTfQeX+7htjMv+9pndcWKsaZcRsmBCACOeifBCqhLleul+og\n/HrVOXqiHsLUhTiH0Gf2utWo4SVSfKlbHLarPod4PdYZcbbgqjS2e0dBZV4W\nkWzbTh/m5ehwedfjZvz5gfQ9wHJC8EbFM8uVt4PiBHtgO7FbVNjCZGc445VF\nAuvpDXW7Et6IrT368+JXUmm/DI6/JgzvV2ico30frAFwkvaj6LTgW+nyyulc\npIoWa1wTcIcd+R5Eaaj5L4GofyBRatTqQf38HPnd4oPRQhbVhwyncX4KTumq\n3O5HNKJ8seVEvSDeeU8QMkxUjtUlG4xA2MQaIhz/P/5UKSanI38eI1abdr9R\nhLpwyCg1MiBWx0dPpWUaV5xjoIyfCXkWzV38S4ynzDXqhEscGmvsU56yWXac\nxPtxX6TxxiKbmbLXMqa6wZOZNJDnXMULMUlYvQ4DsLFiJh6VPTl2Wga0YUF/\nhOrzBUScecc6gsD3TyZzOtIk0w1a8Bb5E6sSxTlIDwV++/zo2Pcx65ujwybq\nwuCk5gJX3v/K3hPzpYYrIXMM2gv8XunDChfPcZ++L8eT3ncrTEtrY/Zs0srC\nYR4ATbs5rby2lyf4gBy7kF8JSQfmOXyYyMntJiL0D9CxWSydN1U+CE0cMy9u\nl/dv\r\n=IKmL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c2bc7206e40f2f31377a09e53af457109018ff02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.c5dda809d.0","@material/base":"9.0.0-canary.c5dda809d.0","@material/shape":"9.0.0-canary.c5dda809d.0","@material/theme":"9.0.0-canary.c5dda809d.0","@material/floating-label":"9.0.0-canary.c5dda809d.0","@material/feature-targeting":"9.0.0-canary.c5dda809d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.c5dda809d.0_1607547075785_0.507736142947063","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/notched-outline","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.f5f1bd86a.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"359e327639edbf8a0306af0bf66bde1f02366f3b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":34,"integrity":"sha512-aFFhfsybJTHa/n94kdpnrWjC9j60RkR97Z6tZVx8DXtegCcbifCyFbOphbJVnC8Y370NefYppXMq7i0nXlW1eA==","signatures":[{"sig":"MEQCIEgVcNvAAmoFKAk0Oy4qybdSPA2eon0T62JFDcj1szDzAiBEklrYq/e1IJSqG1iWmjSQu4smwM9/8YMLNchCfzL8hw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TzmCRA9TVsSAnZWagAAw3EP/iHKflqfmEsebSXy4RFy\n9SSPe7qK6esCXIEoTVb/vQJxy90I78c5hiJG7kA5huZkWPXfrjYw/p7Ldt5W\n5I1/zHW8SODOSOUnM8ji/cEXQIOoWg9Lu64VrWXzjtMtVCHtE3I6gsTqGacK\niiydisy9WReQHczx9f1ALK1+P7zaThAypAfx5AkVuapKLZ5Nbf3X3y3jdgq5\n0sOTBig7n2xmL9CAyGJTNUepqAPd+xLjyVM1cHXS869934O+gPZFSfK5fS8V\nmR0+DxIbeYn6IEvVPfIvgkU6t3tGbB0O1Lj4hJfsOEoTX/ATPfJca1qc0DDB\n6WFQ7JGglOZyk0ZjskhGFEDAjYxBmPzBe/wc+1/y1ZCTFtncA+FeK4XvDsD+\nyksPlD8QySZyaeLBhi4ZHKdcnGFRaJSBBqgqcRtowO7yHIZ5XRXjq+hxLGlb\nPtntVdjrQLZClbOTVdSbIbeEQ9n+LvDjECLSfRBX7Rgj3GUJky7M9AlTM4hA\ndGWI/1R4XVsO+bafkABZATlvwXjVayhhrKRtAr71ONUn3s2seM/yaC6W4GFS\n83PRd1wwzzTJo2xY2EP+LqJHW8PqeDuJYs6X34sI22tLSFJ/0+6COjDXVr6v\nPwDFN2vvxUwRKdl1M6icI+qpbD6EuYiLSxyFBIvkzIV0hZl8qXzL+8QGra6H\nf46K\r\n=oe4M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"86cb1fcac08fb433af0662cec8583dcdf435eede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.f5f1bd86a.0","@material/base":"9.0.0-canary.f5f1bd86a.0","@material/shape":"9.0.0-canary.f5f1bd86a.0","@material/theme":"9.0.0-canary.f5f1bd86a.0","@material/floating-label":"9.0.0-canary.f5f1bd86a.0","@material/feature-targeting":"9.0.0-canary.f5f1bd86a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.f5f1bd86a.0_1607548134379_0.2732082677281511","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/notched-outline","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.00f38200f.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"540688f3e284c660e29ce2edbea61b348ed5acc1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.00f38200f.0.tgz","fileCount":34,"integrity":"sha512-Afu0uO2b2TIxWg2EkOfu1+ckSGG1cRYq0O3zT+9HBau7t5V27CMAfTvZgbSfAbEGWi3aWrONK5QFzXf1Z3uL9Q==","signatures":[{"sig":"MEYCIQDJ3myGYqLGQT0o2/7oO7J/pGgPfcKf4puhuB+ZKjH8kAIhAI7AP1Ju8RDj8eYiD7Fnq3lYZYqjjl2jBIFK/cBXtddE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05SGCRA9TVsSAnZWagAAprIQAJRPlHFhGsqqidpf3WBb\nEcC/VVZF7JfsSMVUxVLT7ed3ihgH5FZWDULIh9ymgswjdTlv65iUA0apPeif\nRaMvaqF0gciUkufzYEbhuLR+e3a+5UYzyhfuYavqEnR3vej0tele/DlPuutI\nAni5XXHf8D5PY/VflsZPXIV16mxBAOB0f6I9zS84miXwT5fX7YW22Y5iFVJL\npAmWzFWSKqzgMBI14LoNyMEl0llfbU9J9zLkYgI52HcWu7gZ1cnhX38WvrSX\n628Hq2nq/LQyyG8SaxzfSIfNlzR10kgP+T75K2bWj9RYtMmx0xLI5yZ5saMG\nYTHB5SPDH+CzUAXXIEyU2LYGelbbtmi/17V021OfsCZYhKUjVNTdPn63oOFf\nsxnu7RacG466EyBIzkTiYEudi8qdzVtta4vxA/DGE64x9xNJ+tzUUjXfpXec\nL4nhhCu/PtcwBmtZreZjHsP7/XGG1vnh6IBhgZ2AH2u2K3aTaYLesdWTWkr6\nxXKUmDAXdOPPszPAprCm/7yyWRbDex0Z8e07Z0dBGpGFrAI19qsp1wWBsVAh\n0DHkN0xfe8rk+hYvWhf8LuNISF81Wm3aBRTRJYJZihIY4wVd/3GfJ6Ca6DcI\nCFsNXsKWcCRcz/j6gsebBMv5kcb/GN1uclsbRfbS7M1GpZHvIJH3bN065U7c\nZL2J\r\n=RRP8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2771c0048541c1dde142fd7f565741f0dbb83c20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.00f38200f.0","@material/base":"9.0.0-canary.00f38200f.0","@material/shape":"9.0.0-canary.00f38200f.0","@material/theme":"9.0.0-canary.00f38200f.0","@material/floating-label":"9.0.0-canary.00f38200f.0","@material/feature-targeting":"9.0.0-canary.00f38200f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.00f38200f.0_1607701637915_0.2753026315541489","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/notched-outline","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.ac41a5729.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7565d832c6619f247354d75b0209c077702c9ede","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.ac41a5729.0.tgz","fileCount":34,"integrity":"sha512-gXkjuEer9vNtruAp5m8g/IQKE6IAo1zVyE7T0TFxq/KrpeEjYB6amCfvqaHzA7oKoQKMEKW0XR3Cpu3CPg3NVA==","signatures":[{"sig":"MEYCIQCf6tLd6ZYpmUxzHjgldBgFqUlZrvnLrR169Y6EjRVRoAIhAIr0VJB2u5yv/BRd3BXrP3cNkBz46Fm8RkTCt4MoyyqB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf055zCRA9TVsSAnZWagAAGesQAIURtKSOsSDpUEEmPAyZ\nNw9m23E89Wv6tWCdBqLIT93L0Jf4Y4BPPCgHytm89k/aOM+f2gKaJjxST9fi\nq8akpGecH1PM4XQkhylpwa3Z/n4KLbrLPFSGqBl7UkiC4VAaACgedFd30oL6\n8GAnFqsPVpqeZccL6Pgy7iRwO5TyHWLrAEsFCzkx4W10SwnEdoKUsGgu5eCE\nRHaPHSiQ4NwVwnRTbJuukEu34vUVKtUA8n86zlurJu2jNWDBhm4Yhm+3Cbzm\naMOadNm3CwUQIa8e3ZWnfknKekHXbFss8PmOVBUIvjp8GRH3vssgyB0UxJTV\no7mkyxs0q0ksLToaPi2FNfKLd2E9mCcTHN6R/GkWLPDnlo+ecBE8saPKb8TN\nVKshRdSwdyF51BF26u1HQPgvJd0QwwdpQnk37LvAhjqL1lWC/o6rQMF7pfBy\nnQoiPQsplaGbIux9Pd5yds/IGFGcGE2rYhpL8UDjXxvtzmQPPQNSUtTRfMaz\nbRP05UJq+KUvqfxow5TywSHNpF9jz+LsK9zm0kDmNRBAOwcLrInOk9m/feiP\nZss6ova5nM+OCFHf4g2Mv9tzUBIeFOV9P+WJTWeSH//U9qorLcoroX33PjCe\n6Rd9f5R1lK/tghx/lDOlCnGVrcDWgk6aQxVzANyDzQi7dn1+baFQqVnWO1lN\nm9AJ\r\n=FYCF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a8313ebe32ee1c67ef38d5e9ba2b5a4ee2d08f77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.ac41a5729.0","@material/base":"9.0.0-canary.ac41a5729.0","@material/shape":"9.0.0-canary.ac41a5729.0","@material/theme":"9.0.0-canary.ac41a5729.0","@material/floating-label":"9.0.0-canary.ac41a5729.0","@material/feature-targeting":"9.0.0-canary.ac41a5729.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.ac41a5729.0_1607704178684_0.550406803574973","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/notched-outline","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.7fe0e4f05.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd0fba2114093ed50f9ee6be5e36dab2e2e72f8b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":34,"integrity":"sha512-zqBFrbjIu1nI2NPKpxLqSJqygLCJqZ9JAE/lNEY/JX5AuJQp8s58ctfhomJSWL4i1uZWf1dbCKBS5D3pgW0Y6w==","signatures":[{"sig":"MEYCIQCYPmfhUb6p8XOr1JBfkdTr7pc6nZWN2gXd28h4mF4ZYQIhAMsUVpQb7IhMfsRqLhL7xl5YSZ3om0Xmz1OJkmaHbsnM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06chCRA9TVsSAnZWagAAyxUQAJlO52Spk77qZqNRz9wN\n4F7CG/Udmk5+x6S+wT/g/lLR3gymWRU6BEGE3ntIZFGvvj8mfCTTnCtk2pQK\n7QAoc/R9DjgtWE3lFBC1K3Vipqdv7zxo2zge0GROW8Yz9XaKNjM7nAmiAO3z\nRkfq6NUIwPIQLNOiZdDUels3s5cdjClil9nMjQdshVcDzPNauE9rmvpe0uW3\nzssizVyU0+Lp1CdcKlAjizHdlyHF7RHne5VW6atL1m98HfhupqU63cbLI9+7\n2AHDoKWResAzeAqDUqO+fH3Afysb/Tj/CU+IYhBsv/fIXXV3677ez9hF+ITz\nIXkxjlPmel7sfaAVKU6WmiGEeRia9fdS2eAYLlC5kC359IVKzpJI7oorAFwI\nCvLFm0j055tW2bkpWUpmijvfYu6JgmG2qTW346eE893HUxnh0sRZL2xmPFI9\nG2aoNgBxfY2w6OaeY2WiZies+4bkoWn45Mx5b+xTP+PMNgGlj96rj9vEAY0M\nQkyxiFwjLFL7v0pssxkxlHGygyf764LgNBn0NE922PWGkVReeVQBnJ+uR5gd\nHFL9ZcNBdNpTRx9N8qAUji5rok21M3PYTVSYWAUEllDH1qnJy03x5TZ7SAYi\nuMixnKgNj0UGky1IqZqlNYDa9F6Hmy2GPTj+uoNsz9d/GPQlNfPke+JBa7gJ\ntQVO\r\n=/z57\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"174435b67952da2f175e31e1db54647a2722499a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.7fe0e4f05.0","@material/base":"9.0.0-canary.7fe0e4f05.0","@material/shape":"9.0.0-canary.7fe0e4f05.0","@material/theme":"9.0.0-canary.7fe0e4f05.0","@material/floating-label":"9.0.0-canary.7fe0e4f05.0","@material/feature-targeting":"9.0.0-canary.7fe0e4f05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.7fe0e4f05.0_1607706400814_0.4782217946606506","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/notched-outline","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.9244508bd.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f83a9990da6ded0e7bb0594045db96ea44d8d431","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.9244508bd.0.tgz","fileCount":34,"integrity":"sha512-loXHquN/wX+9eLtMkzEUkK3DOo/Y5N0RPt9GmzTVqWEsSfsgVYoT23/eWgVQt044bUAkSirkhfiYZvK8Xdm93A==","signatures":[{"sig":"MEUCIQCwsUlshQPSvItN1Ai2MxXj9w7Ko/SND38R/PpxHXnKXAIgeCkUO1GSt1kwKPGO5wixqb18TxJvip+0C1AcqolkNA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08OsCRA9TVsSAnZWagAAkxEQAJd+wnPEoqpzhMMG8P+N\neAySRXvAqMCn7XYFfdE1P0LfT355rIBZQmYqHy//afzv1CWezCM+WrGCr0wt\nJxPu0jjPALJAIHXFhmL+rilvmmqEhSQA6TDhm9K9X2z1SCmDYIWgOqRzPhsV\nuqrq5X7e5MSYTvwUvWeMH8jvi58PP+kGxfDBByicOZpNhswxY25+KrO/il1E\nMJ0OhwoLZEFKz/+lhSBY3dkvOSk7ZRMKWv1o27xt60Ck/aIbdeJDAhNq5V7q\nVX2BgUEVX/W6jlUZKpc38LHCbDwmguBd4vvljrrxd9oQNxbPlxHuqNWwbG4g\nKqlDR9EKdsDUH7l6yLwiUjWA41Dwre1jzg6855wwi2X+fPXwk6/MKgM17pie\nKOhTuCoV0DR02vseFmiIvs7bFQq05w/hMxW4ObIxLHUCNPopaResgEyX7CQA\niu68/ryuJTDkrsSCjQgCsHNYy+KXs1XCrPWb52apabJboBnozdmWjMtF+WRe\n/owCwJMkf7k9B/OAzX0doqJrznYtwxH2SMY4KdsxZQD0BBIsd6SlJd4OsvAm\nalYyOh891eCXF3nXvUWoZmvpgJWqrtCXQvu66AtjQsoENspc1drLjZZIzjt0\naVyG6rtG67u9GllakE7QrIwLtjBVEi52gU9Dtf5bfavERGGrCgWMHgquRC9l\nT/t0\r\n=d9bt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8d704729c3b4ba17ed088d900fb2ddfd57d5803b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.9244508bd.0","@material/base":"9.0.0-canary.9244508bd.0","@material/shape":"9.0.0-canary.9244508bd.0","@material/theme":"9.0.0-canary.9244508bd.0","@material/floating-label":"9.0.0-canary.9244508bd.0","@material/feature-targeting":"9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.9244508bd.0_1607713708041_0.10525754000821297","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/notched-outline","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdb9157a075a53ccbaa2e4047416465d7648f760","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.384a8eeb1.0.tgz","fileCount":34,"integrity":"sha512-qM3OqNUvLXYGgjDsQTisYlaQ1OtyTCUcsIUCrS8CVOoIm6HLI7gVMc1TsGY4/6nsjksRt0SHD3OHz4+MtpxuGw==","signatures":[{"sig":"MEUCIC2NYjy0A5WhP+61iG5Ughv4cnRPkf+avik0aH2gu6jeAiEAq7NQzjEzeZDY8ukIaJy+A1NajwkraR22GU7C/bkm/cc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j3BCRA9TVsSAnZWagAAU0wP/j9V8WQwzdLVgZpAvuIz\nqEwLRicaYt8Ypv/MOcwGFpAjgpUr0jtetssa29Y5jgqwSSCJW7gPa8Kpl5fy\nD79Ke/nwR4CXexq8tT055uLmQVmUIsmC6O+RrqlGL/fKIj7KCrFhu5cVOM/2\nK7KOx1OZQANMkBRdrn0J5kbCJLpCZDIkWX1Cnhw6mKIRX5IiTMB+1wMtVasx\nNj9zY/SNL3aiQqYyxQ/JDTwCXUtScynI4eXksAsIbXOGTp+C4qTEpUFAUC6H\n5RbGa25CJgmHfqcbD4q8gRPP6erkk0DALFB/YJ8FfX7zdHjjlb6h21x7gipj\nWM6vFC//4IQmqM7dstT+blX62XsPd6+3KEgOxPZoT9X/yHu+xWJEuver2qiE\npLI/5lwpvarvetTyKFGYj/LIqZcxZ9KqqPunOmbtpIefrR1OxsDxjJ6QWx/S\nJS0t63IsuDXLzyOI+2x03Fr0LVDnkwFnnYnLF0lGYWTTJ/mjqTN7tKG+2J0/\nmhqkahmTVeEqQS7AS7lO/Q6k0DS0qkhVNwkur6fbgRFB9erdEHkd9RQbThOq\nGJUnYu9y4klTy1WOsZuDDSaYSahyOhd4xcKknbDkK2cxQh9jjHbvjoLjrhmt\n0bPMXwJZaXHd5OLAMxtxSzl3A2R6U5hJxCBt8iJAPJjhOOnQzXRh5GLtp+a5\n4uja\r\n=snZf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"21b2ddce32077f19c001df17ebc3c8ca9c48f8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.384a8eeb1.0","@material/base":"9.0.0-canary.384a8eeb1.0","@material/shape":"9.0.0-canary.384a8eeb1.0","@material/theme":"9.0.0-canary.384a8eeb1.0","@material/floating-label":"9.0.0-canary.384a8eeb1.0","@material/feature-targeting":"9.0.0-canary.384a8eeb1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.384a8eeb1.0_1608138176766_0.9766137308144367","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/notched-outline","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1afce40204297f45233b3d09fe02c339d8c16e6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":34,"integrity":"sha512-s2mBTBGKWBvvs7Jmcm8O6ZcszWiUpEToXj6qGH9V71ev+AKN1obRHzRQPyXdpoRq8qGWraS344+N0OvvocMbUw==","signatures":[{"sig":"MEYCIQCmjnlE9yHx46dhGGlod9v1DtYLYRt9fljBzy+ymBcpGwIhALoTRShq/3lpBiLY97vtqQoIOeMK6U8VTieSbGtAiaux","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lHdCRA9TVsSAnZWagAADh0P/iEDm/Pm+pAgv+UYML81\nivqS490h7+x/AYHLlV961M8zty+hMi8Q4rtmieTGFlQclEqlRyYtQyRmfaQK\nBrKciT52Jb/40p6z6tZ7ALweMx65r2zZq2YemkY87ROWh3O/H+7Ymby6C0/h\nTpWUp/NVYPMuO647r6g8ap7ZwrDjzmuVGuVYisVYcOF2A97iuxy3wgFH5rWM\nwVVWKZVz5vgZP9LWFflBj6xudjwpcKlY3liAfKMcnOR6k9mdRWPEc7MRdXvt\nw2mzHseWI9Ksw5bCXQzSEBPoI/PArM2E2N2scCkI4eNyqFc/5DQecNyAEK58\ny3o9PhP2t/2VV2KYGKeJ59pKLGrk/gjVDMFsUCi2nTNx0BV0QdZNIWtx70Ba\nbCF+CSXiEXfFWZI3MpjU55MeRn7feTz2z1yf7828gHoUHI1dDZrhmnW+VDJa\nF7xc+nXgsa1xZpR9b2+qd8LjioBuDX1/I4o5pusDMGYiJC1lJZwI+vHpfs94\nquvlje4zBWnI7icTgaXIxLGcs7n8lWne2bHptJznj0bPZC2Gi2d0jh0cAPc6\nSln0fTx3yNOASEsJwtFuvnN+5CgSsqdCnWQnnS8RqKP7NWUxzuEVcu/Su09O\nj1AQ12k6CJybeqIbIbMevN5WvJuPZN9fjUs7l/F+JGa7fTpvHBSg6KiboC8Z\nkVPe\r\n=TXuy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"78b3a67c04374ddb43be73dc4daf2613746d08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.eabf9d5c2.0","@material/base":"9.0.0-canary.eabf9d5c2.0","@material/shape":"9.0.0-canary.eabf9d5c2.0","@material/theme":"9.0.0-canary.eabf9d5c2.0","@material/floating-label":"9.0.0-canary.eabf9d5c2.0","@material/feature-targeting":"9.0.0-canary.eabf9d5c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.eabf9d5c2.0_1608143325205_0.3736405383231536","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/notched-outline","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"587d9e31086f49e25d3a75aaa3917ba87dfb33db","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.30fdfd06e.0.tgz","fileCount":34,"integrity":"sha512-+UbtMazEuIdpyyqE7O6Bsq6xYbYRcklMNldvsbA5mk7WxWH+PiOMDmR4MVMAWCQL59IoGEo5mUNbSkSFnTcLoA==","signatures":[{"sig":"MEUCIQCtF6JuiKcAR7RD1foj7g05I/ackqUaNWEvnyuvVnK9LQIgciv3sOv6OWp0ZgIvvog1V/NyN9psT5kWD+n3rWW1bOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2ls3CRA9TVsSAnZWagAALQQP/2umNWDXNMKgY4brrgDv\nH2+FElZ5mlFUd63uYRFmSujbD3p9YzgfZQEFkUdyRzNfnYo+ikJre2Dlmhkw\ndwjUxD101LURyFs2eZTw0Yq/m3m4cUrf1yL7Mn19Q+v900sP5bOphx0XrREA\nA19a+OXlcAxNkQrVRIHFUEV/xdBXZ3JD8JCUKYtleICTRzXaFumr4boAgjjH\nS6GXs2f7+bhxfsDuKRtXDpnHDcHod7nMluC3Le1+wpNS8Ins7aA6k1WyuG2W\nKRWWobj/wXHlSRGWHWP//btwNV7VxMwobwpgLTxM1B00GloOLOi93CDp0cLn\noRme5wOhgOeMBEMql0Xh9zGWn1rRVp0Ao0yBi4zuXHP6dCJUzkl/JVmGPNX+\nsmh8R98uFre42O87ubCwxoqcmx2TyQaLdCoyhrTMlBaxnjbcTd8Q0czficOJ\n6breyPcD2OcOqhlROE/ygZRNCecWh4V3zbDnSZqwoVRWxFFt/DL7TG3kUSKy\noiuP26srkRNKs7MBqHQ+ibjyUcvThjVWt7kyr0TZ+m+LzwZQQazGE2vJL/7m\nd+wzuZZleQaWFRs14g3sS9ZbEtpk7lOkIXy1DdzufbEMbSoZ1wq0kufpagtw\nCoU96KBH6D9BCMWnwtskzvIf7Jg/tsswx34t6CNeo4fy49KnBKjZqkF8yBjB\nMA/q\r\n=B5kj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f9c9fe091a06230b038ac8a71ccd652c7c662b96","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.30fdfd06e.0","@material/base":"9.0.0-canary.30fdfd06e.0","@material/shape":"9.0.0-canary.30fdfd06e.0","@material/theme":"9.0.0-canary.30fdfd06e.0","@material/floating-label":"9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.30fdfd06e.0_1608145718578_0.3854053238404258","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/notched-outline","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37cabcc05e79af73b599799ed0f80ef8b2660ad9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.9590a8f90.0.tgz","fileCount":34,"integrity":"sha512-HODHXl/zoXFEuEIXoEYHiMf5mfNttLZRCBGmeKUQ3p52hmfeLcQvNZ9w+kHPuMuDzTG2k89UizIPaQOsczGIYA==","signatures":[{"sig":"MEYCIQCBbu7s+HDeuFcP3lYxLv8l47KUUSMJprTanaESP8aP4gIhALX2VsjvH79ouzLDolneOpoyj7a/724VhohEn4BgQv+2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4jAsCRA9TVsSAnZWagAAjgkP/iGRRffLpXD4G9EDwqz9\nlkQbs5+ZBbqIScGTY13DoeEhM/Eb9IF5jR+uXtVym2E9QeZS9GLwUvh14R3V\nhlNi1ReG7u7UtsQSef8wL7Vx2anHVGWkiZm7y/gTYvh2HE9YPzxcnc8U2/gF\nivFpRAEFiScbOBhrG4WOXNIRXF6yzcJL6ji2YnFkYdc+2XfdYYM/u/5FDrJP\n3WuAqxsoaI8MIrHdtH+lRQkHWkC1NSwDRwVbhOZKwvhB97XKogk7amubZEjE\nBxkNqHwW5TGeIY/knJUpjbwBzbuG5Itr3H2KpHu5bll4sHBgOYD9yCu7fGgh\nu7ofUAb/EuDboxi8WJRmE8DHij528WHhZ3vt4TdoCc+uShW1VUX+29+8BBWN\n1uUrUkVmoJGlJlcK7b7mBqtN+9e8aEoKjbbVi2ngbNzsdB56VKcHhrp9bLlV\n1zI6CwIVNAd5EaBFmP4OgyXzUHcwPi91wE6l2j/IwrU0s0e/xLoEeUGwLwyo\nDl8lx7y3X8P2RU6TV2xr4PZEyrcpyr77mW0HjxR04o4g6i13YBLiRRBwTXBj\n56JhzE4jEZAq6Rf5hF5HxjWXZNl6sviZJeMF6hJeGff/7U1fkHQ5vOXNdeT9\nHt2pH+jodLvtKxTcgKJZ/To5ONpl3vCfZ84EKoxIiNFiPSCINuuooPL98QfP\nIRgY\r\n=4ay4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a592a11a03887b1e1535d4d49ea05db1b6f72789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.9590a8f90.0","@material/base":"9.0.0-canary.9590a8f90.0","@material/shape":"9.0.0-canary.9590a8f90.0","@material/theme":"9.0.0-canary.9590a8f90.0","@material/floating-label":"9.0.0-canary.9590a8f90.0","@material/feature-targeting":"9.0.0-canary.9590a8f90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.9590a8f90.0_1608658987832_0.7901937449838647","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/notched-outline","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc61453a9bbf942161a445730a89dcda4e7bd823","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":34,"integrity":"sha512-zTvSWaK7afAP9fRdQJqo7cQWg/JJutMwH6wVUxDG6U+TszAZKDQSz91a0o5/EN57b5bBox/CIpXJKfFuiQAHHQ==","signatures":[{"sig":"MEUCIQDL1mtKYj64u9pbyl/0hCO6kznTCVMBv9bD9hGf8R/HxgIgZXkm64IZkbMcVPmH02SlW/yA6Ms76mrpoxhypg1Ingk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nvtCRA9TVsSAnZWagAAWJwQAJucmeIuwDLRHE0vrH49\nr1dHDxgnUtxLknbiIKzsvdS5IeDz3SR5LzPZAOF0P9JgBFaWE+7RJM8NwL4s\n5oNJ9UuFRdc90BBA5hpdlnwlgYnkdkz0le9Zl4iK3Z7AmcieRvMgThd5v1mw\nbSOidXeNGt8gZvi6uT6xuO46EwhYhkRMHl8HTJenW/5wp9FkkBmpfu5hEV3/\nSSA2/aKm9qBoyLgJMaYgVfv7+YEgUV+Q4PgNlFD0I23jkwdjuvga1Jd6QwcE\n6n6eY1BFymtyNsHgXFkRDwvJ0Lb4CgkDg290hyAd/jWAySNDCtbMpJZnR66R\n8S3FbvYKIfY2FsjVmVcsiW7bxxk/y4wScs8AMnFibBjErYsQDUVpFpZ/bLfr\nUaye5yuGpCLlxiyfSHeQzYxYG1xb6896tJXL/OoN9wR+FINBYrR6OYvmXXbS\nRWG9Ri2Ke4stIk8igFA2oVp9kib5AtDYgDVH+xNe7pQ43/eDwhOqn9YWB9ZS\nImC3jSTiCcTzSMsGtG62qs0ohEzp4R+PznNCtSnyojEuBEnovV5G1xOCEgVU\noHpYnVq9Xq5v82vGYw1ytl33juMrfMOiKmY9Rmma3A7lIMVTAgI7PL5UGiaE\nIoze2jXg8fRw5E5hafVyjmEk8rM+mVJf1By4EEFuRbEBhBecfdtSOxx29hrO\nZOI0\r\n=o/T/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e0d61155aa611a1a8573762d75379cbb25d2e7c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.f89d8b8f2.0","@material/base":"9.0.0-canary.f89d8b8f2.0","@material/shape":"9.0.0-canary.f89d8b8f2.0","@material/theme":"9.0.0-canary.f89d8b8f2.0","@material/floating-label":"9.0.0-canary.f89d8b8f2.0","@material/feature-targeting":"9.0.0-canary.f89d8b8f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.f89d8b8f2.0_1608678380483_0.5438058909014096","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/notched-outline","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a7b4b733bc00f168d3bf4ee05fa272b90809d9e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.fb194dd35.0.tgz","fileCount":34,"integrity":"sha512-5eKgdkKJU6WtfNC+Q9VWfU0M0WnuFKTSXRXbfZIU7sV6cy8ooLBVr0cluzKZd4Pcg3liFNRNWTz2hx8MwrrixA==","signatures":[{"sig":"MEYCIQC11jrkbrFl7kfS+Ciy9L+T/nrz3Yvp6gwazf78vIRT7QIhAIjSmAP7rp83VYpLM+YSZDfyIYLQFdFWrRxg/9v7iAXE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kQxCRA9TVsSAnZWagAANTUP+wa5ByjDjYuLMVr5FYDK\npbZajRlgaxJHPg+FjEIt+AqQyTaEp7sm3HZBrWwNO5RD9r7K5N1rRutpNzOF\nCyODTyjp89drKl0Wrczhn+w0PHO6pUgz27k9vGDjpDzDivyiAxwcx0CKm4k0\nJCCOh3S2tYnxWEW4UXw7k/B2E0WII7M8j1O5HWbywsXQee9oKqqn7n3+UCXj\nloMbWVx16KkVKdDPm1J1H6QJz+fds1bvSKt3TbDacCnaOCATMX/u30QCJKMO\ntY0Hkz2Vj6V+S4DhRa30oF4I7w9abGn6nnt/7AXNvfoF7sMHN/sWMsVr/in5\n69FE4CBZ/lKuTYPyAGu5xDqL7IhzA5o2oKOr1FJG04B9inTqXtxKk1wATdqx\nQtyP30KvLkQY7PiHYIUtzVZGsTVe1V7t15Np0EtWF4Z2bYyI6qUQHcfZMSE2\nuvmlNkWxJ6pllC05yiAOnl4/Rr2VQXHfiuhmROc4v/t1IaIFh5Rpy+TS0Vwh\nBhjge+8AFeYsiltO0WzYeCOCW5XZrZLa1p/2NmM+SCi82ZxXBXIgwxlgHqqg\nkDwvf1AerHuT7PJoqx3Wf5OB5cJHFtc6PstOSb7TFNzXbK+E96e8BJpMsD0v\nZCvbOAwGq+U9PAYeJMDlEOfjgB84PEwXzSsoLk8epSGdeYG20TTxFdUCwNS1\n7Lqn\r\n=jqPA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"57a5b34de1026133757436905fc54dc5b326d3e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fb194dd35.0","@material/base":"9.0.0-canary.fb194dd35.0","@material/shape":"9.0.0-canary.fb194dd35.0","@material/theme":"9.0.0-canary.fb194dd35.0","@material/floating-label":"9.0.0-canary.fb194dd35.0","@material/feature-targeting":"9.0.0-canary.fb194dd35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.fb194dd35.0_1609188401317_0.13576283107225873","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/notched-outline","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.64f36e287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a2f26e7bedebfcbaaa1cf579a62dbf568c6ed49","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.64f36e287.0.tgz","fileCount":34,"integrity":"sha512-4WWWhiW3iB3VXfd+VjGTa52SeiE50rxmly1l5VdSUx6CxLHSIqgYUHYjP2BHnPSgobtxkbFtdhLF6kMvkLqvZg==","signatures":[{"sig":"MEYCIQCx6FyCbxCVnsZe7y5Zkrh+VQlyMnxP53d/6YLh+mjkPAIhANxA1FBZJt1CC7AVfF77ATk2mx1lLcqCzLgfPglpFMPL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kmRCRA9TVsSAnZWagAAbfMP/jRNhWI8NLHxuXgmFL7f\nZY5Bn9+/2Ix/ha8oXa8p9jVCqHwLTjVFjOhaCum11K1oaxRvtszGOzBsYqE+\nUpOAkRDHhzvn1Vlt4ibUsKDkizWspaHrN4aIw99q61HVcK/7pRMGXamWP0le\nR3DL/VAhwu5IjjcyExum6A3FqvZkwaHIJQrdNKCX2A4pgWqSCKst+XBc7pkp\n6byMS+aBWVdwU88Pr+dW8udGu6Gpgc1QOdQZHCNT0sioIHQgyGXW4mSgKrNQ\n1neqLeQsomx01vLNyGxdDRlMqNLRKeGzVdWHP3kt0Y4q/rqBKkIMheWqL0q5\nXdBCsBYDGf/sChvsgQUF2chA550vJDeGUUlig/7BCUbyU0Ecmx4RU0M2CYnc\n2jbZYbSOIe6R9w9uPU51Ltk+2FP7rREscsIA2PiIjMY2jksWHh09TuKgaZFh\nbVzFmZviBjKvp5QcHQziW6OkQSPoSbGSE0s4fMU1Z/XxcCpcVA1Ba4YE+jvS\nzvxExzO54hk+LE9CpCZL4SheAVHqxkjwJ2lRgBz0CLHt8mENv65gUYmbFc1b\nA7iLR5Y2SyA1yYJuSdvywImSSrFIAVfgLnqw7Lw3J06Th0JheuQya1gOaZzz\n1MeJzhSlS1KcSBQqIJTRmQ/Fx3bEPkocdbs31WbvXiEH+il56PgyEWKbE49C\nNtdz\r\n=8Ns/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"23f6770d284ec6c17b1aad9913827f8d456418f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.64f36e287.0","@material/base":"9.0.0-canary.64f36e287.0","@material/shape":"9.0.0-canary.64f36e287.0","@material/theme":"9.0.0-canary.64f36e287.0","@material/floating-label":"9.0.0-canary.64f36e287.0","@material/feature-targeting":"9.0.0-canary.64f36e287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.64f36e287.0_1609189777120_0.7053879997801626","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/notched-outline","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ea199d2cf5e54556d3739123c4d1da58e864093","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0-canary.b7bbe7022.0.tgz","fileCount":34,"integrity":"sha512-DCyqut+ShQ2NKg3oRQ4WbiVE/q0bluvAxzjO6whiczcIcukU5esNyl7x94PWGrwgtxCHzkRbhDS6+ZMyBOKqjw==","signatures":[{"sig":"MEUCIQC6AVtZwU0Jle0hm3PXvQsQS0HYh7zKAcAmXtAxVtLqKgIgdE7Wt7KdNn99BfiI73SM7SBML0HfHnDv2W/1cPFi4GM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63ofCRA9TVsSAnZWagAAKvgP/RS3uPqwKvdp56qsNmrQ\n2LBhJCxlloLXOWu8Ce6l85cXKj3MbWMDwsT8/3FjmwZoNDKeACpZw4kikTv7\nQOd3QVWjyLGiC/ZgdQm6YiOB4GJEJ9N5b8B96mnaQkYt1vU8+OMz2zglbneQ\nhOz1SU34InJSHfWgn19TJG6Yu3W0FVIzvp4FPcXDyFKY8zzLecDwJxkmbHZF\n1OIm4WGCdIsXRNhLwC/qBpxEgvycRd0OES2Ws5bz+4RjsMBMjnFN1Px44Jgv\nSYkhZuBXRsAQavfjd1h16veEltWdR/fSvchonK5uJzI44xLQHmFKJf2RTGTl\nEO7VntiktOIMbu8ijsEy+pE6EKmw/xmkooCZEGTSPtm679/MM8Jid7MUfQOf\nt0jPeqnmxZXHdxUF+0noLURqKvoIUjUOYeOsqb0HRpTrvRk2UQziGY5A4ujQ\nx65tvTJVZDPrrQFm+gcOrPYwbzH7PocMY0XILI1KrDEF3QqDa0kxGlpr/8C3\n9N11RYjIw2MIXrV46xU3K6fHo506i0nFOESRGyLeuIpkNstAKzDy4dQloN8l\nQB3IXDw8l+ivBLvsTFLq/e0BeELm7z443QIlByUI5MT8uAxKZkXUEjERgt+g\n5VqcWDrDWVG4lmMq9OcksXmmITUp/TTLCN92U+0KaXvgPlWKT5QyCzlZuOt9\nlCVe\r\n=g59h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"81238a3912ea8bf30c97b0318ac2ce65f297eece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b7bbe7022.0","@material/base":"9.0.0-canary.b7bbe7022.0","@material/shape":"9.0.0-canary.b7bbe7022.0","@material/theme":"9.0.0-canary.b7bbe7022.0","@material/floating-label":"9.0.0-canary.b7bbe7022.0","@material/feature-targeting":"9.0.0-canary.b7bbe7022.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0-canary.b7bbe7022.0_1609267743264_0.2540568550724276","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/notched-outline","version":"9.0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@9.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bac14f4d5feaa60361b548a73076b7586a91d553","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-9.0.0.tgz","fileCount":33,"integrity":"sha512-KqMdGlwtIUGmvEL8IAqomIz4LWg1K/hHkepm4nqqXOlaHAV2iEneOMAlgNsNVgZEZmu47WDcNLsOTLgZj/3N9w==","signatures":[{"sig":"MEQCIComzMq9wnwap1v+aNWIT6CnlCN3ZWWhm463rB7ZemOcAiBP+L6Kls605lLtrU6bzCoxpjypegzuvBEvRyZ+YILsIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64e9CRA9TVsSAnZWagAAHZ4P/j2gCeCziigvEtNV5ChT\n49Uc41WTWcVlF2VSbwoWC+O2WTfEdKfvKZ2tJiCn+UDNeTENY2YqfSMbeqPA\n6jwkn7cPIxlPlLWPfVbsDHgt58uz2TC027JtPhY/skSHIyLI+jw0AFbn/zA8\n+DjaaYO+pPbvgNR7vXb9xlMzhHxr9kpUUgbLQLqlzRKmYFC7w9z8oLYzC9gs\nY4WGE+1nyzd0nm8bA9hX9OP0q1NJGffnETtNYDf6zAW3kroYJRZEOvJT5cH4\n+S1+WNPHzHMKsps3gu5h/eJKM/vWMYZT78LHUZk30E4UEqKZES+M36XFBMWG\nkLdZipzSG6ahQVI8nwiAiSdv7hgvj57G07XQye1Yh1zTEC5QtrGaGSZh86q/\nn++Tt1cUqgZdDl56C0fvXlfTxRkSrcrKtji43w798/mhT5EBU9H6O99hiYw2\nlLdvmfVO03HFpsSMayjNTqLkV6XDOu/RfstVgNTAkihC+SEUfGarYqseZBdC\nr1FFKCYehEhtyq41+6yc3HBaburBD+gcCFLcJstZcbIK3kuxAzkeunCqxpC0\nKfjoAfq6XsAvZu4GQbzg/iw2qOIRcG5BeLOpG2F+YSfgMjdrnrUUzeXMfCkQ\n3nTbVEbaDNG+d3bImsCygcyBuT/pYzLRGNLQVYr/LW+18kTQRdqtHWutxjD5\nHkD1\r\n=QwI2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","gitHead":"555aecce59125bc3f162b065dca47384bb5822b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^9.0.0","@material/base":"^9.0.0","@material/shape":"^9.0.0","@material/theme":"^9.0.0","@material/floating-label":"^9.0.0","@material/feature-targeting":"^9.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_9.0.0_1609271229118_0.4908427103596926","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/notched-outline","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.776c18681.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fec6e19885bf0907ca7eb125eb731ff066096704","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.776c18681.0.tgz","fileCount":34,"integrity":"sha512-n+EqOCZG0Oo2D+PYji4WD9VMuGdFc9t8Gf3/zLKV8v2VWSSu9TJ2pr2MbnWJIwlnkpJeNmwwmc08Ccu0aifJxQ==","signatures":[{"sig":"MEYCIQC8RBI9WvTb+4wwNs8OFfdPtnxZDOCc3yo89iCGmPa8HAIhAJP8gcgplBU4X3nPFyRzAxZI3SpIoRdRN22Deir7MC+T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68ysCRA9TVsSAnZWagAAN5sP/1YQYmelWoLE4Vstbwuy\nrQ+VCt5YBTsqrbuBiIqFhrLrvWGRfcZJKlnmBhbH5zbnFcZe3/yJ5DVp5gbP\n6aeWIR9BCXxQiy4qtmRqAMWIzU5inGCTO7KVg4xo3pvw6C/iP2rYJwumn5vl\nIuS7hqUvaOAlCx1AwbaiovAT6L2OnLQzqhXDAdq0Xsp/0Vfnq1ICTUtTK2qe\nMAzGnd5V7DW5JtHjOn2sGPV+wnbTGD00cSbcyhro1uXxC6tidqSXPhNC1bw4\nwF2DUAV0CvzgCBuyaVNUHXqvfpRI59hzqbzqMtzQY/Rs75S4zHzV3TL3F+B0\nsBMCmtOSe8djRna2jab2+dmVJVtTdhSIqfmY/aN50syucfVbTtlJR0KmK2PO\nzeLcr6Cjd2vxrAnQWtt7aUhsEG9xI5Hsu8zpqog0ZjNcvSetH8Z+8fDAbxeW\n+rgLSe5wAWL4FAdOyzUlN3olsSeLdQRtL5b3XAfOroHG8eRKxcoUBYSE5+K0\nM36IXYnr+DyUeeFh7QuLK2tPJKjYGal5IoyvGgw4AI0FJ0eJAHoPVoNI8cKK\nLAnq3u0UkXf7RIZJvfkwKNfx06IjSNG7O5b5vGoRDoumnpp73AtrdFkXX2Vq\nnUo0sIfWHl9qAvqxEOtgOaeCeWQ6fuQBuSfpEhAlAzYgLuNrCP9BowWoRWLe\negMG\r\n=UHtd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"920f8ec98e9709a32b0564a5334ae434137478dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.776c18681.0","@material/base":"10.0.0-canary.776c18681.0","@material/shape":"10.0.0-canary.776c18681.0","@material/theme":"10.0.0-canary.776c18681.0","@material/floating-label":"10.0.0-canary.776c18681.0","@material/feature-targeting":"10.0.0-canary.776c18681.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.776c18681.0_1609288876103_0.037298451855484194","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/notched-outline","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.671d72d95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5090a6fd772cb2e4afa01d7be518db3b27c1d4a0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.671d72d95.0.tgz","fileCount":34,"integrity":"sha512-iLMHWodKRZ9ziUrw84qOwdyTU+3ZT8AoAYlnk8pEMeyKRpKfvvS1KLpdfYkQHMMskvKeXaLflwmWFskZ437q2A==","signatures":[{"sig":"MEUCIENk/IwkHOZ+rsj5ejdz3V9y26qA7tKD/J9IgE1sVcR9AiEAzR1uHIYp2x003wDYCJgz67SH9AIOR8n0VypfAXY2nbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N9MCRA9TVsSAnZWagAADAoP/3bdQRcjZ0BuV1B7mPW/\n5yivIrUAgdorjxmEO5NzvR5y8nrvWr0IOJBTBMk7EyzEr0GGA3rXyLNv6Nai\noCkMv3vgyNDBPcjhI1nIQ5DTwA+3sL3ZXPkMWRIvVGR9azlgwBp8YbyNPdbS\nUHWVq92hTZo3IU0XA3s+e1FsHRzTt/9xvcHNewhSBll3CrU8v+XkSVKens8L\n65vx+Tqq9f7wsaqiPzJJv9ocdGE4TKgUDFnPHFgS00eed52a5/a7hYClTQR0\nbDGkJFcA02QqatX90bn/96KHQaTDaEbHHKvjevLwD81ckf2KjhdVmfJuAfZP\nbhpSsgq9CtpEf5UIcWeRYsd3t26qz4qWRZSrdMRJQE149kh0s7DGsg9aBCen\n/HT5c4A+8iZLo3pPUlbZXGM5+O6NsOdp7qOh4/7UCNg2Y0MAvYB+gO3uwtkT\nZuybO6B3jOCYlnyP+AoOcof/43VHcaNqTSbm0oL17zme3792QHOTNgY8pWwJ\n/l/3abFNdQI07ovVC6Sw7Ig+AC1Avb4+Du0zZ7cNfTd5lp9rJqp7Ajq4n7I+\n92OHkql7chb910nRQNeOQEqWbrkhQdVj3OxZAZE173oF8djKRHej76bIONpG\n/l/b1zXvNFrwZg/rn5TdPmWk7ymVfhtZYoDxQsxssLMZOVMvUrkdS9JhrJhm\ndd3X\r\n=13Sf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c22803ec93a76c661222622456cf6f5c5a17459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.671d72d95.0","@material/base":"10.0.0-canary.671d72d95.0","@material/shape":"10.0.0-canary.671d72d95.0","@material/theme":"10.0.0-canary.671d72d95.0","@material/floating-label":"10.0.0-canary.671d72d95.0","@material/feature-targeting":"10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.671d72d95.0_1609359179134_0.8888294643417372","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/notched-outline","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa96d2a6ade5f876adac303f7de32cb41e1617a5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":34,"integrity":"sha512-UQ6EcZ6CUcG2fvm/CCsqy12l2/a+71WWYWvNl2YqcimuNJikct2Kl3inyFWLuvg4Wxw31+HBwHyqn46/J/uD9Q==","signatures":[{"sig":"MEYCIQDA900/FlfBliq/2yExkK8k4h16gx3loAqcj6AOc3+JOwIhANZ5S9C5VJJ+4QXbdLMryLmKmefG4Chfet96+lv1BNfe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PV0CRA9TVsSAnZWagAACU0P/iZaS0O4FZvoQqEr1skG\nIfXeXjUMRIa0vaO4pzPTXR7n+dw1JFFXoszhLmzNHPHHRN5VkcItPnXgWFgY\nK1AybM/HPh/fZyd83bfrZJuznXJcry6z5MjkkR20MdEFYbwQRiqiGYmhma8Y\n3jSHo3KRJIQEbMrM7CzA1Hb3ZVHLazXn2xg2cJPqmXzRUekHQGxJHNjGh239\noujaj1XbHJPWs4u436q9A9LcmPZVfk7U1U7HzUKD27cPA6oWt0d+1K1xzj7n\nzR8lBJ+Pw2RgJgbj3ca3CcnxcmECDUDToW7xVYV+xzKuQIgVhW0QWmNhLN7S\nmecqjmQppP0ydgRIdHYFEfa1iCLQoTaT3oqyA0qZZipzJzaC5ES5+lTxb2Fb\nJvTOaUoNGMt5t+OsFeVJ9DmcHeIW+Iq2/WR7d1yhhGniprvc6r1t4TBfzzlQ\nWwvSqfhqbIS88HS/AbK/2qMfMX0VAje3ccEkji9jAvBcBuxZs1aZLLpEtTL3\n33vvisGAbT38WlvyZmqXxiNkp6dTkcxKERUQQs7C00uj08Q7b+MxqxW95Apb\nq1Cjp+sg7KIX9H+n0yCSQe/x7zcXyluoQqL15y4L20zv0/sDbNtpjIvvydfu\nKMMTyqJTgAI5m4jzsY8v0+wCNKLmrthWSviltoNumyPMjXgDY/bfeQRPWFoz\n4+zN\r\n=zmZG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1db47387aa8e99022677270066e7cba1da23732d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b4f5a1c9e.0","@material/base":"10.0.0-canary.b4f5a1c9e.0","@material/shape":"10.0.0-canary.b4f5a1c9e.0","@material/theme":"10.0.0-canary.b4f5a1c9e.0","@material/floating-label":"10.0.0-canary.b4f5a1c9e.0","@material/feature-targeting":"10.0.0-canary.b4f5a1c9e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.b4f5a1c9e.0_1609364852158_0.6892348090325746","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/notched-outline","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d9f52dadc2740b8039753584e7bd65af038e829","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.a94bd8deb.0.tgz","fileCount":34,"integrity":"sha512-F9MMKBxQ5Yo+JqeZMNg9Zn9pBAtz7ZGqLyGBzlxivf0QFr5NG6KPMkoqjyDSM8THAHjrn9jqvJE+iSK86sBpxQ==","signatures":[{"sig":"MEUCIQCnXQzNdT3Uwy0r/NYSlMdHBvEXDjgAKW/ndwbQXSBNaQIgBD+HkVCiELDd8PnzaAAowvkxhnPXYL0BgVBj26Ro294=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PmmCRA9TVsSAnZWagAA7QsP/jHefKvPLPzWawr4Bimp\ndMWkU5WCk6w6pNupWDkpgUAYtQnb3QEDn2vFNu0CObLshZMz2dGdHtZV3+HA\n5ipiyrKL7TIATLvaHSD+3M3D4nFgZdi/W8hSFYMmr0OJGkGks578SSGmBlql\n/35K81g1AtbwziIDfYxj9nsro6Hu+4uGXN2FEQIdT2qlM9iQZh3sXPubeBv3\nTZEhbG3b/xZGagKE85xKkR6jFUd5YGIEI8xZzQ7vvKeo93wqK/gIuIqRu5x+\n/BjUERNyascbdAPy8PhWMwMyUg7wEFWhWsEv22Us0QAhTAGEkdryKYEkla3i\nuaDMxxwsJx1mN7+HHIvOqGi6gSdENnJ2iN+uzCLNGOfZPEgZ2V9vQsRCma+/\n6n44OLYAxpAlit0DcpN0u3ekWr3nPKRB0YB1APc8zrC7OKxudBXlD0tNywAE\nAlhTnZbu1O5f8f5sP5u3LxoLchlIwFkPS4YIxdjyEobmZ1lUDcBQHUeYOT4i\nPtJsg6Q51LDPAFyAimXO+0ehfHnxsRKrmc+Hp/pUVJhlvtkveQBgmqE4QT9p\nWLJQbhLT8inpPrTDHo5oYu2wK9R4NzZSIRAKhrh4XnJiDM/shpKfQpyUYMWl\nWlzuhnodZ58tuhIm1Aod4GwCwtLRFRnKrAiFOCiELfB0B8xTXTCK7rTuAZJH\nJzyg\r\n=om+b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"12c943490c76f911dda3861f863c68d7abf77ce5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.a94bd8deb.0","@material/base":"10.0.0-canary.a94bd8deb.0","@material/shape":"10.0.0-canary.a94bd8deb.0","@material/theme":"10.0.0-canary.a94bd8deb.0","@material/floating-label":"10.0.0-canary.a94bd8deb.0","@material/feature-targeting":"10.0.0-canary.a94bd8deb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.a94bd8deb.0_1609365926091_0.17762820425822912","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/notched-outline","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.5d128511b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55c92ebf251a3890ac3d7f5e6205783a8ff24004","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.5d128511b.0.tgz","fileCount":34,"integrity":"sha512-yC2e3ltMnlILWe6M4oTtYQ8x7EZVVE6ug3sVF0A/SAVvy2sNGdSuxFSkD/oUi6lMEGo1w7ICgd+ogFahdmwp0Q==","signatures":[{"sig":"MEUCIBfLvKIk39T0bVQz6jI67SUfzymRLoqUpC3v2RqLLNIoAiEA3AuvGNSOZUJPQtw8XJDsIfvq6zsz47W4TbK0bmCqPtY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PrpCRA9TVsSAnZWagAAE9wP/0Pc2WDoTuWge9naTSRZ\nfpNjlkTxkXvV5j41H/8M0cX5+XmV+OB1irCZv27yAQq1Wtcz1UheEe19psaq\nFZNTxFNS1epo4+xUsvKbLNkumUwaUHVXwVxtsHSx6VINRT5SpSqziQdI0hkf\nC7Auy9US9jLGe+qyAEBqFwf85PmYnXfZ0dUYnPjUxHzjY39bOkDhsEja2tLX\nDVxUpmAXy3364rImp4X5lUXPI2k5trKiYBSeWIQjUXmwsVPWddqJp2REARe0\npG5LJ2pBEkQOQopmjLuyHfT+LDDJPayP0HWR+rHjXb+Sh2uuCCxaydj2Y3Yz\nt51KJD0qvVLNVpRCmvDZpt1L2qICukxumdKFKPWR9fXpil2D2G0gc6zC8AMl\nCy3B/a6p/s/npywR5r7iTuDFCzFUCQWJ9lXMgiLp9CmTlMN/wcqT6TN6lfDv\nwrCx+8UnElbQQV44+7iwwn3p8owzAl3Hq0tR8V9yK/GtioVWB2HqfaM13YGh\nIdWgHry5WMsYKbOLk78YqWuRnp9epiKcSr4y66pQToT8tvBP/6m1fkiIB4G7\nHo7xeiGerj+KzoiUBu9TnegNQkUQeahkuKUKoLSvT6HZ17O8pThX8G3tgL1K\n9mEGVxHy0njIZ2lKxx+xZ9D0EJy7dtMdNV06CzHFyWb/E/Uobfr/+RkwNgZs\ni1Q1\r\n=6DaC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"05d17b41cbad4a8aebac080f082633a26be09a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.5d128511b.0","@material/base":"10.0.0-canary.5d128511b.0","@material/shape":"10.0.0-canary.5d128511b.0","@material/theme":"10.0.0-canary.5d128511b.0","@material/floating-label":"10.0.0-canary.5d128511b.0","@material/feature-targeting":"10.0.0-canary.5d128511b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.5d128511b.0_1609366248564_0.23492814733572698","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/notched-outline","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.365c69360.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fcc242495222a9a798eba2a2e92aeba0923e61c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.365c69360.0.tgz","fileCount":34,"integrity":"sha512-OgQaCPHTkaGC4BeMbs7pbiNf0qPkOEM7psP6pQUigHv3+VEsFWcxeIKdSLkF1X+OHrRzMAjY+mHiy+CLLKPA9A==","signatures":[{"sig":"MEQCIGDts5b0BvbT00wtpn7rkx6+324H3pVaC/EXi1eF6Pv0AiBv07dS8BV2YSqh3wzFZCS4wA4J4k6Zl7pnULNJLAPguw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KaqCRA9TVsSAnZWagAAb/sP+QBi22nF00OMWqTAW/HU\nsbrYUs0VPYA5v2d2+H/5Yvc7ANbosG+G6LmONyqqtJJoXa/nSd5s1MnEAXLF\nXYuv5IW8wo5xFXmKh0giOWAGwO1ub6wO6ZHdmfjL6ZQsUF5vkkSlYKKcAIso\nMOyOEBrHceWfQGYw9PqWkcM6XyZodiStPIrC7E3+lnE+YmECkVYCOzFatua+\n3/jnd4uwdpIlx7EgR2w0nfzKZkla41l/OcKIggfi1ntvDgSlMvBrN2dzlb2y\nqrGbcKbAhPdr9vFELC+OXNz/mXP1vMkwO82uOoft+H8b4dMuNJY5jGLOp1oe\nMvgXXS9DhQuVC57M6T4JQU/IK+9B1l5c4/i1s6FqnNAIHzhEJ+DykZWfXDrp\njEiqj7/d7CU4G0TJNEOU9fNzvcTYkfOfxdmIbT/K9DzBTlZeYOuZqhLG8ysY\npGDatgq27eEKQWgUxu6QjmUZGCy8pxw7KXUh7phkbftD8W+34tEFS1PrYcm1\nkWyrTaDw0xgUzMkIzBiMIb4YHsV5yrFrZVC2f/PFubReUTqetmmSNdplJSuD\n1cHlSrhoboXpsQ23hMXZX9v70TLV66en4OQtHqhQqhhnzHG4kmjjNHBBH3J5\nyjyZku2h8cXyO/Kh6bku0IFKx3xrPwfT/ONaVIHuZHi4vRjaqrk43IVVl9iz\nox1F\r\n=AeYo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0b060c30e2974c71db5d5ed87e3ab7918656edeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.365c69360.0","@material/base":"10.0.0-canary.365c69360.0","@material/shape":"10.0.0-canary.365c69360.0","@material/theme":"10.0.0-canary.365c69360.0","@material/floating-label":"10.0.0-canary.365c69360.0","@material/feature-targeting":"10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.365c69360.0_1609868970358_0.15143809700563993","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/notched-outline","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.700a8261a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"439e06098e9ef4693fb27937c9bbca57a4f18ef2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.700a8261a.0.tgz","fileCount":34,"integrity":"sha512-k7e/A2+cd/pL4ikRDy+U29Nn09gSUlisp1iaGg10A68ggxv9r065AIMTKms0KlVOJ3WqsHOT+wzNLZBq8M5C5g==","signatures":[{"sig":"MEQCICSuQHzi+AGrVhg9EZOGLWKmnU4zupqs4lnR0UQF+n/5AiAOEdwObzwSrjvNjiCZhI/Fr6vQ6f+2MVVM+0rtGXnSGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NO9CRA9TVsSAnZWagAAWHwP/i1l9ZJ/b71WZ8CXGJRJ\nG0KV4WufUkQKAOwose/DtzrXHIhSkSfT42JuY1ilH9fQKWgQU63R92kDhUT4\ngF/QZkT3pGwPBexe3UQZbsOKMDPHQUjT9BD+VfKR4Q8uJ2YsmOw6Dfr2rj5e\nfzbdo0JcwItrXkwsbhvCH5x1ZJ24tpUkbvPHgSDZZSMEuzbA0PmEu1uiepk1\nOSanFOHkgDOu56kIXijnkG6k9tsDckPm6Tsvl7AWRSSGnmhWsxLJa0vZ2hPg\nZF4SpZku9gkG1nIDvYe3pVzGbVRWkIWmGlOHeo8FQSAs6BBtY1EiE7IiV//C\nvggj925Znzdm4vY8W0i6pQuJ6QVA6gHTmVr0xwgmwuGn0e1b2zXu2i5cGOaK\nD263UypO+M2LtuIMejkNuU3zJNm2i3Mtmd983uu/dBjd3mtrCfO/6K3rBebb\nWNNAqtSBANl2JL/rKkyT8JHb8BhoN2ZvcmAUIxCgKaomM06c5DDP6zm+o8Hh\nHgQNFGCeRpgg+9MZtFpKPyMzyYMNvGecrEzLrL/yxZIy4HqoxLWV3hRwTP+G\nhm3MFc5eQN/zu6jJ6zxURPuDcxr15n6/KnyePqMazDDH6DEwoccUuW3LE1MJ\nsYvuXd+C9O2TaaI545U8us1twVARjRpy5yfqt5PjXKeOYHjfbg51x7L9yQOA\n2Z2a\r\n=z3tG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0e9aee4feea82b83f34c723b52aac42fda1cdbd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.700a8261a.0","@material/base":"10.0.0-canary.700a8261a.0","@material/shape":"10.0.0-canary.700a8261a.0","@material/theme":"10.0.0-canary.700a8261a.0","@material/floating-label":"10.0.0-canary.700a8261a.0","@material/feature-targeting":"10.0.0-canary.700a8261a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.700a8261a.0_1609880508987_0.4437579999533363","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/notched-outline","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.766981c15.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5d0221f646dc7cc8ea32ecd2c50ca67878ad758","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.766981c15.0.tgz","fileCount":34,"integrity":"sha512-UZvWDTuiasvBsYFnAlsaLr8h+GNfLEPm0nCETovla4xH3Pf9YGNF/6ZuJKxXVWsH86K/BjSRu2aR3uDbQwa1tw==","signatures":[{"sig":"MEQCIHZaciwJ7OTR2Dt3jEq33IiiteXmfUibG1DuC7fSfA0vAiB9o0u7WGxtk230qTWiAK+bphRpq1gRaHHQRDGTEMbX/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OsYCRA9TVsSAnZWagAAFjkP/iGGbsF6uhE7mIDmJfSz\n16QhBKbmD2J5BddcZrH0XWdolXxtExfKzyoN09AAWxDr2L7Wq79dMoM9G9F+\n79j6cz1MzQno252wLH3BUku0HyJ40rSaDJpLND36UBkCYwQrLel6fRFl/FRI\nbMUkuF8qcbIahUP+RFNTK5m9SI5GvdyG6KI7llzoOt2yYo1C682RzuP7QNsv\n9wOkinsPbpjqklDnKDvntSqyUoVdIjST3IVcb2GzOu3w/RyXPea7JTV7N4At\nu/v6/YTdnKF5GJ1n790E287HzsA8Sl37ly3wqJuFAOX3ZOjEfxX1T8VA7Fos\nBa8aD4/b5ABT/K9eXw5o3UqYuHrjhP0QTCHFOOHT0ViAOcXV8W8sks+Zhb5s\ndu2wyMcra1CwT440+b4XLc3ZaHae0XYSSFtmze9tnZvDIjvlw2JF5iar0zvw\nIQH+pUbtPrtWm1r1XnrU2nT50pkZQs7vp7ilk0cJkzWsTaao6EopzRvHJIVI\nVlVwBZPhf/AFw0V25fAayrYx4ttzOQgG1D6+whupWh3huwxaTOjrs5hq9SXJ\nM5elI5NWd9HZoOczjVvY56JRuIJU795U3VYYaav8y7RYDcCuX5Dru/+eblci\nKOLRh58Cyt2kE1TBRrrxWU4570kSV5iM+FdABxW2ZqUp0WIXxTcqdKWRP+Sa\nqs5t\r\n=SzNP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"40a13adf47648f48d6dfb1daac9ded2f7f0bd442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.766981c15.0","@material/base":"10.0.0-canary.766981c15.0","@material/shape":"10.0.0-canary.766981c15.0","@material/theme":"10.0.0-canary.766981c15.0","@material/floating-label":"10.0.0-canary.766981c15.0","@material/feature-targeting":"10.0.0-canary.766981c15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.766981c15.0_1609886488160_0.28479813847507507","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/notched-outline","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b933d9a4e2b970c4c7572b34fc9e24128d7fc16f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.b28c576d9.0.tgz","fileCount":34,"integrity":"sha512-/FKGxfW1tEz9MNk5mCkL/qJQP3mI3H/JBygnM5/LVoIFC9BXF2Jnk86SJZOR832F9iNnrFEc+pHRshx+XApaUg==","signatures":[{"sig":"MEQCID0SRSHghN8DZfBFaGJz/1xnYHqOKgsYopHlXGN/zRIVAiANsyfx6Ad+DMC4zx4S3EJaXKDkjrUMwYMXDvgoJrpw9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O1bCRA9TVsSAnZWagAAZq0P/1QKuWKOhoryF0VzBlCk\nY8g+VzG+y4Mm90ZA/cUdFB2qSNXLWP6oP6eqKGwKZwP/kusUFIJ6oJZCN61Y\nwaO8SeVv/wlTDfK8AThCLQtZy3OiEzrLVelyFoL1mxnZiGpJJqDiIQxO4lBc\n15LPL+pj0zxUCQqYQZbnOqNgg6o4hDLPXPSpJhJw2AEOCtWAminjkXigE7pi\noNTOmpOOkU3nalkGxfkBvGxocx1LMPOIdQ+vGB+EMZhRLSgeLenEB1HG9sBF\nIlsWdTskUOxNteqyI9x3ZyJvOZbJAzbQ/uXpoN5W4avJpVnRjJ7EXBjvTLeZ\ns6vqPJVMWlrZV6r7f11CohA/uXv612iEPezdM9/ak4geRSxkTmfkiWuNulMu\nthJ2eefP9gIVgz288svjznLabD6UpqthfLCT6JM7n2zelaE9Hmr7DH1Yy/Lm\nWyDc35S9n4KvvulM6xf6X3mjAQRXMhHomYKVQp7fcURD2cWeLYf4WZbiNUdz\n3ReBae2WZ5uhCDC95UjsbCekJjMRSQcJHNnRDVkqhJ2kmQ3KqoD30jyqRf2y\nAhp4nACUJof6qTzlWUnq1xBqjfDHD7Fvo4OiuYLJBnuFROlhMJBPyTXdLFf5\ny+rLdrkK9JIOaj0bjQDu3ATEKCPqzeWJ6PDr2QoVMFrYaBrRuYw3DXykXuvT\nMOzL\r\n=GPvs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f11c5039e5e02253cd6e3eaebf7ee15629f3c182","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b28c576d9.0","@material/base":"10.0.0-canary.b28c576d9.0","@material/shape":"10.0.0-canary.b28c576d9.0","@material/theme":"10.0.0-canary.b28c576d9.0","@material/floating-label":"10.0.0-canary.b28c576d9.0","@material/feature-targeting":"10.0.0-canary.b28c576d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.b28c576d9.0_1609887066648_0.16032217373795743","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/notched-outline","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.968735356.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7cc62fa5494dcf7a39d04aabe9ed5289117a568","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.968735356.0.tgz","fileCount":34,"integrity":"sha512-TuUN1JFWYo++GF/OFGrEuiOsBHOV1bLsVutqLUz0gtRSBeVBdgGHxmL4Ioh8MNe3Q+j7KXRO5KblhdkuwvS47A==","signatures":[{"sig":"MEQCICXZjYaHpHIp9PJizPaqk3tIa6Fm/VyuEDMsS4txmy93AiBedPxe6cqHTvrAaxEC5yZizIgQWfvqwHzh4eGL5CoS6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dynCRA9TVsSAnZWagAAl8EP/RjTVaHZCrUrT1TrN1o5\npXqhvxTTURWBTmlrNHmGSlj0qxJxpzH1FynLiWbcnRQoKzZ9eLfIkHWHkYKt\nLIWHxw+3qqzhIuuY5V+pO6LSFCh25gmv+uAC/HcNMoFPjsfUf5xFjWLStFQ5\n1AX+ohL60wXpa+7CuipMIgMYqDvzZ8ld0E0oBXajnaU68vdOpAOQsZu3JFjK\nt+5j5AXm+2yq7V4wvl8U2ASBx/y5AHiBHYMlFgFllrWLYOV5sdTYLqnFDtyH\nAGMi98FfSo+1EdedggD1kzvyGkQoKBpezXfWGzraLY/petcQl1P07Mprh+tB\nuZzXK93+usUU8g1Bpp8XA9jw6qIWqqeWlY9rGT8Wb17A9XBIV2tsf6bHdsmO\n0CUCJJhjWBE0Ovn4Fy9VXm7nqgf6s+kqGtdvB7tQvfdXL54L+UwJ/LM3V4J3\nAxuBziP/AtpIWNL6qcQjarLX4UkjfigMpUaBGJ4W3PHyEJ9WNl3wSBiKlSPm\nlYIwMadYepAm2ZnBra+luYmhTjjQpsj3/qygH5Cj91R8Xu06G7/VDpCiz/gK\n2ezphTvNnR6CocdfDi2d/A4c+442Z0KJAbYei3IIS20Te+B7nDhO1T3ojZNS\npdYxP/tUsyakrnvNsngEupZMYttdrmw0/jsyIwGL6IMrJKrpAfvcvpA280zy\nty8K\r\n=WQLJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"016bf1732e983523c8ba8007681b058735467018","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.968735356.0","@material/base":"10.0.0-canary.968735356.0","@material/shape":"10.0.0-canary.968735356.0","@material/theme":"10.0.0-canary.968735356.0","@material/floating-label":"10.0.0-canary.968735356.0","@material/feature-targeting":"10.0.0-canary.968735356.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.968735356.0_1609948326704_0.9342393448050907","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/notched-outline","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b59dbae36f5e1efcdcbdf1e5414e12ff1df941e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.c5e18b020.0.tgz","fileCount":34,"integrity":"sha512-Lk5D09KBsD1y6aES+r1tHUW3TnGB2+M0FWst8KpoTkDqukWlODrqddVEnIiMTH0CcdtUJCs06/VoT383e81oUg==","signatures":[{"sig":"MEUCIDkFtEaRcU8cOknKvfui2y4EtR4KxzQkjSGT/KLywxi0AiEAp8F8LtHYPWRnAMs1w/NzsFY+61fjZCMKl4WjqoC1oLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hNRCRA9TVsSAnZWagAA0ucP/3u1adTlQMwS935wR0W6\nAW9S/EXxPTAsY36xKynHohiu+KWStIDlV+R1ucNgLuVjJec7tfzqztJ7XXcd\nOckf5z4dbmxQ9Yl3RqHrEaHd7Ea0kVhU8Wsz2c+HnIp+ZFm1nKd3mI5gffvO\nOf+daIloSmJtO7FtY5q5xjzPevh4EiI2GqdE4x/3OOAmcia0Sv0HUsewnEso\n3HPNxk8LHcHQAwXQjA49VT6I8VbBziyf5xBX2KvawBq0OXZ2vzn7MGGV0Ea+\npyIC+UKLW0KWfMR+qHArAzgWbDVF8N5lZ0Bm0bqfgD40nyAiKaTYD04TiBK0\nQXBp313XdRBJz7mjHFej7VGk/W/oIr1yJ7DnyJdWHyRqEPVI8ZxFqndI6ohk\nH5RyUysQ712TI2MncC0QM7nAjT4lthoFLgRRYafJqGW8qOJXicXPYDQ6TGSE\nW2N4rCnH2MhTmGSj2YRA/3LqYbfE3DcM/0FVodeTTPFmvjTPF0PV8TmOu2kL\nKyIX1rtwnMqRxTrtv+ZwgJmZ1TN6V3Hf+LIrtyQB7krlthluqHWOHB7MlkpR\nVhD2rqeWg6oIbhyoI4FbCFeGURJ0Sn9GhBsR78+Jaa9JlNCrX8El4A8DZmdT\nCznSjZ4Wj+gkdcujjmfKz+o2JWtZsaZK4DV+Ev3eGtU10V1q+S6lQ+xXHa+a\nVFP/\r\n=JDH3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"16a60c2c89ea18fb88971304d4491f612734e932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.c5e18b020.0","@material/base":"10.0.0-canary.c5e18b020.0","@material/shape":"10.0.0-canary.c5e18b020.0","@material/theme":"10.0.0-canary.c5e18b020.0","@material/floating-label":"10.0.0-canary.c5e18b020.0","@material/feature-targeting":"10.0.0-canary.c5e18b020.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.c5e18b020.0_1609962320514_0.15192097379158276","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/notched-outline","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acf80b0cc760ea79ff13c1716ca19ccd64b56625","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.bcff8a66a.0.tgz","fileCount":34,"integrity":"sha512-OSJWr0FngwLQtpc10Mx+BO/hEM3hgTfYVpzv/soe1y/nDp2LrHl3XWmrOknhr5b988tCXcjsjgV474EL9nGDwQ==","signatures":[{"sig":"MEYCIQDywZAS5r4W3WZTktjjiNDleUOun+xOSh8LKZHuzCmaHAIhAMw2lfKl92s7muykyn0jPccHDgiji7L+PRhFWhxpHPJH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9h03CRA9TVsSAnZWagAApr8P/Aiis+kA7r25D31rjBam\n39LNtlPu5AQervxMm9+eiX6iKIIXl6d+oj+g8X2KOgxqUQCeRiL0nedCf5f/\nuy25wWwN/z4U+KoGMMkkmWOd8cV9LYs/FIFcD/FQGNn+UB+hLGDqLcL5tRIR\nxrm2WCoFw2TZkFLhFLDXmBqtAocjrYvc0TlTNKIxUr464FLBc4UwHSrxriWR\n3oOHP4zcJPQR7k3ZaH1qMCFfN30q7HA029vXFy6MhHzTC27lhDKI1rdYNB8i\nywFBSNMm+pWXowva1GwKCB5JrxmPQFsQjfNogpmr6pEglttS7owsKScGok4v\noc2ha+3LVhI2w3k3tjNfpGoxgm030VdP073wBkvvKA/5SY9axxVj58kG/PQt\n003eX+E50+uDrbo9WH4T8hZU9idlk2Ubw97AKuJ2KDLoQisL9OvA7klTxGkT\ndObqhk3AjhbEh/AranGEW5yR4uMH5NRHpDoxXoxsrXX1rXwdU+mEacCXVrI5\ndp7V29ILHESG8kvAxoEkZd54DdaVzNnLnC2Z3oWhvrspuNDQvn1lKsBNIqWh\nIDofqWBjckS/pHSrNi8nbomiLUW8p1heRmIQt3uJ43ice8nK7vSIXx8fynTn\ndxnXdAATO7p2IbmMGeupnkzoR9diwhZzH2TvMYPjHpaZZBn/kUE0kBVr9qOB\nMHUA\r\n=iS4H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"81af087ae7601c8b819dbada709de8d76ddab960","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.bcff8a66a.0","@material/base":"10.0.0-canary.bcff8a66a.0","@material/shape":"10.0.0-canary.bcff8a66a.0","@material/theme":"10.0.0-canary.bcff8a66a.0","@material/floating-label":"10.0.0-canary.bcff8a66a.0","@material/feature-targeting":"10.0.0-canary.bcff8a66a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.bcff8a66a.0_1609964855259_0.823947526820874","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/notched-outline","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1332e482d79cc7385b172ddce773861172776b94","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.79328c9ff.0.tgz","fileCount":34,"integrity":"sha512-ytia6+EHDvLT/uIdOLuXtU+ghmt6WMV45An3gONocOHZeZY4j8DyZJcoQ8bL4apxXPg37YDJ2as1hI0kRURucg==","signatures":[{"sig":"MEUCIG6ounGDKVhsBWTuHcvz1gyP65Q+q691zET5pVZxYF3LAiEA0dWB/9iMbVk3JQF8wIfP98xBFGj+tyayeR4nwzEGF0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nNsCRA9TVsSAnZWagAABJoQAJx5gNTE9iMsGrHRielC\nnEtBMI2IcBqmdsb5x7TuSe4lM6I5nUo50OENlKNfzfyWvIF3sMJImPD31Ic3\nOpAJ25fk09NsE9mc4egfFTrgGsZEGvR9xbjkCfXEQvb2rq1I6WUEsDzmGNUZ\nZzaReclZoAqNf8vd1fleMheJwE1RchufncAosAYZ1eIgWTRUFzU6PEdIQieA\nFiR8s9FhcVwhLoDRxsaW2p7OxmPiLFZXZ/u0GxoPVniZ7ezTa/tVASpQs3vo\nDd92v6eO8QUT9oHwu2XoYbTHG2e0wBHihCWG936axuvqNuHPoECn8mMDD1oj\nC+D3uQd1+L5VQNK3ewxoC1P1R7UQV/G9L80t8xFjsoYbARiohR2lrjQDCYHp\nj3e12ee6nHAy+LhBdwZSjyirNqkdSNf1IXl2Fm95xPsXRs9hkfgmy+OB+V2x\nEIqxZCKbQ5GnqrkQyAz2Y7kBcPWoGaMswTeWO7o4eh0cvL7VXbCt/dxz3OQy\nudvAAV6/l+88aGGoXxnz/NaEnJjZ0qqAAVXZ0hnHSW2fZhbXPj3ijsTXMSLl\nuAn4zRNIfFy8li+qOneGGqiAYe+YIn9wdNGAkeGb2v0d0p7UG0qPrH9cchAQ\nIqgIhqcOY/xv7YvznlfSKEZ1EMpyLZ6hy9DiYDb4xbZ1gPfI38ruDu+4VbD7\nNhCk\r\n=O6pb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"15dd1d7d9065f275f9f9779094b959944d33197a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.79328c9ff.0","@material/base":"10.0.0-canary.79328c9ff.0","@material/shape":"10.0.0-canary.79328c9ff.0","@material/theme":"10.0.0-canary.79328c9ff.0","@material/floating-label":"10.0.0-canary.79328c9ff.0","@material/feature-targeting":"10.0.0-canary.79328c9ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.79328c9ff.0_1609986923976_0.6325585234468951","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/notched-outline","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.121e1f303.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1acef8fb696caf24ca716227786fff324bd83d5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.121e1f303.0.tgz","fileCount":34,"integrity":"sha512-UlX+oabZQKcG0X086w2sIKF9Pvf1Pp1JHAfefr9lzICGt7xKksncBWBYdpj/HS4o/GX0KaEhQn4z6LWotmmHnQ==","signatures":[{"sig":"MEUCIQDaUB6OMzUz861NF0pKveTszHl8PSy4xWamkyQjYinbzQIgRzdHU5dAb7Psei5VfwMhyq7HEh4nsKjhmnGTIM47+yI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95dcCRA9TVsSAnZWagAA608P/jr0qXMe+SxKMrMXbx5i\nhK2UNOuLp8cpadfG5+x6uW4ft3BKTEPUjuayQd1Rd60CmLvnUvzVzrKNuHMr\nb+YPjOyJL0rlkd9FQBQbD8Wx6N+acHK3uThiY4fv23o8CtktwYRcqCoIxTsq\n+grU3Fkp+JNdU235i60UgcpRi4fIicivZNpml2s/jwOq27fwh8wl3Vcjlt1o\nkqJjg6AajQyPuyQxonFugDX8zvJxQZNPV+8/k+ZsDfi/4V7o2lWKSJ9zQfP1\nYNvg/dlHh6WKgTIvNH8YaEC+lqMeJyZyy7CSPBXKP+xFLEBkqFe++tHwN7D+\n4RQacOZm+Xe1so3Ngw5KELoxLG7QDi9xue3Dzh6XCtoDpnFgXvFtd3hbK/pz\n35ad9fMIKpgFmyBkQCG6VXEqJUEq/YvrCWU1pPzvxEIYSOUAprZqhSg2WkZr\nppKYapLaTutDBWBvko91TILS0oieEnZHstbwUqIkGUzCsGioQKb524DUdQBi\n/5b1Yz8J6GwjWg4far6ISePH1Pd85l5vVpmwBTc6WiGGdoYUbt1XoLj+nE1l\nDYR90AdoTWrDaEmfxjz3sYBjpnc4Gle/wanMFP7HP4WDvPoT9sjQfHBNBJS4\nWpOgs+9/bo52UBvWUqc3dtc0IuAB9P5qrEz7vp8m0O78z81TGYKZn9OKC3fi\nLZRf\r\n=Ytly\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6ae814dae9eac40570f13ed9d7b821cceddf838f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.121e1f303.0","@material/base":"10.0.0-canary.121e1f303.0","@material/shape":"10.0.0-canary.121e1f303.0","@material/theme":"10.0.0-canary.121e1f303.0","@material/floating-label":"10.0.0-canary.121e1f303.0","@material/feature-targeting":"10.0.0-canary.121e1f303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.121e1f303.0_1610061659533_0.586334493234385","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/notched-outline","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.abdd10065.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bd5f75aa5b8d887c871afe19a27d1c529643176","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.abdd10065.0.tgz","fileCount":34,"integrity":"sha512-OEKOA+cnA+8Hy6dtbR58UEk3layydG4bcpTGLzQaVKWLcafvHUCxXyeDuKajyhjV4kThJmspUsEbfSaGFW5j0g==","signatures":[{"sig":"MEYCIQDBrrj5lWFinNCQBNUiiZcE1+TdpKC9MbLcCs5nxUzlFQIhALoE9Ygz29hkkRV1Tf4OJmrWeuFRocWtWQWEvaVrqjO3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JvvCRA9TVsSAnZWagAAEd4P/1N8lc9ghgcxZ99n2S2i\nhiFmPe632BncE/BBh3bdAk99lBpoLO4cH/94S0rRy+RZhUpYDLh3/FTa6Ru/\njcYmUXEUuTIcFgK8mptOVrGvf1T9xeDA/+y7sArNlE54x4mI1KNafc7pKMgc\naOl6luNIBXSaH9Vj24o8frnA8Eax5s5ibN9G6sPZx9360ZhBuh1kiULoCj1b\nYs01FDVU4q69NENuXesHPQJ2l7D4BOrF1Q6YHW4XuLxDNVWVimmZf/To7mVj\n0/BckEAvpXLgORBZ9F8as2AS1OibOhOTwwXYTtZjNrNzA5lF1mTgNTocs3mn\n4QblSat91og7vK4PdmhCgrY1alMR4M+nLIZ4YzaT9oN87BX+5J0oct4FwJwX\nHpfc8t2Ix9uapAcbxdePSOOjXNGxxbYmIBZxIVxJyOCPr1YIXnPqFDahoPgQ\ni0mH7HgDXllreCv3uROP2907Xtx1epQu1CTEgPZbOZ5BKOfDl7ZZlQvLGq4G\nC63tWV85qt+59ZHOjJb4ke6COnJVGco/h7cI1Io7cTGO7Ry56TdBmFDvBMk0\nBdfFYY6ae8avzYrF8HobWR4P7YuIpbBL13fLnbdYu2tunpEUnWHKviUTLm14\nu7jV0oL3PccX+0nIUdN0QTgDIDm2RBXa4uC2gZCHtqDOgcdLsHwnIUWiBhsj\nUsp3\r\n=TTYJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bc8986a19721edfc6facb62cf839cd222de97d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.abdd10065.0","@material/base":"10.0.0-canary.abdd10065.0","@material/shape":"10.0.0-canary.abdd10065.0","@material/theme":"10.0.0-canary.abdd10065.0","@material/floating-label":"10.0.0-canary.abdd10065.0","@material/feature-targeting":"10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.abdd10065.0_1610128367010_0.8491054991174762","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/notched-outline","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.089de519c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3a086388ca8a89e6567ca1547f68d7bff99fc59","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.089de519c.0.tgz","fileCount":34,"integrity":"sha512-F86FMNyP0iyrd+qkaEx5d0fNZFdpR8KdOKhAd49gAABn2QU+xou4Rf8gENPyhxL946n/QfnSk4tsCtO3mABHVQ==","signatures":[{"sig":"MEQCIHKKKLGinrkMBQI+UyPlY8kRS61MpHPc61n6sFtuCRC6AiBmH3+UgzN43bNCnWUQyPdfKylJUyxoLwkI/eFULEVaaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+Nr6CRA9TVsSAnZWagAA5/EP/3tGEjEz77Qcx6mjAOFd\nN3NfMAEop9mo+vWb9y2gG7zq5XTpUZqpWfZNv8iDNho9YZ3MRfVX1u7rzUnz\n7RgoXqXNpmFIOqqjrWkbCKNZYSJvm6YXnKQBlzpXmic9OX+SIVI9pB9zRM3B\nfc9T1isi2wDh6pt4zBs8ZB1p/gxunXIoiQMeVenKtkkc9OTt3pHODbMB73NJ\n2vd42Dw+JVj/4TMW1v6ZSfFAlRAOVokm8IVscucDulCkjLVELQPKUBg/NVgS\nieVPyWdN7PNq2Q4jI+aiLgSrZbLN3LIfh4imRkPwS4daHNjTp2FFyYExCdKk\n0TkrZvmxVkre8KrPSP4eCBj091oFY+BrfG8Rl7vNOcR4Oom3gSl+IomF3ife\nYPd6qSiS+ju1h7rGMA5Oem7meLxyP6vmeNVqKTtAjQL/MkEkzuiH1RnCCniu\nDi4HZZXSXmic6pX3JXeEbTGg+uvfQRqbN1bO9AO2PCzu8DlDOtag1G7DS+dP\nDSTG5Q1TyiHHHG39rhzqirptKwKTshHI+XhfALKjAbuTZlxCvcqkOwdqYH2P\noX5Fn12YVRMY8dEoyKZB8eybsIevROEHJnnB6xCxSJxNOxf7oPpa6X8iVCYm\nMc+VyZFkco00NLEZXrAcwWGuKqHwxqI3D2bz/aV7nr80AOeTlQXLnW4uUws6\nyV+5\r\n=y+UB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6a64709b5be73a45401fe82d1e6d126d7312fd21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.089de519c.0","@material/base":"10.0.0-canary.089de519c.0","@material/shape":"10.0.0-canary.089de519c.0","@material/theme":"10.0.0-canary.089de519c.0","@material/floating-label":"10.0.0-canary.089de519c.0","@material/feature-targeting":"10.0.0-canary.089de519c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.089de519c.0_1610144505949_0.6635531649373116","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/notched-outline","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.163119837.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad5ea8111ed6f2fdc08a1c37c04bada081ee5aa9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.163119837.0.tgz","fileCount":34,"integrity":"sha512-E5hDNC+uheH9CXoZ6kZdrn9ZtN9ZF/wQWkEjcvNALfs+8kPJmishIWqMNhJAbboyXBDmKN5+my5C22qn3FydWg==","signatures":[{"sig":"MEUCICXXAr2ySavOmGfgtsbLWKffetQ2j6BMhLqLaOV9aT+UAiEAn+6IMDqECOnRWm1hv0ZezW8BOycJhO8tN1vBZRdT81k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O7QCRA9TVsSAnZWagAAdHQP/37uAccRr/mq189Ygvwg\nwJkFiADojE+wcAnXwxGBlLQhBgQ53asQd9C8XvTRww9G0CgrluYCqsWcjlTL\nsSylI3HeKOdZqvZE9MzKLuJ51+nC/yXRDF+TudPCVXxBYrWdg3O100sKlAfh\nLBwaRckE7rMxoJ2UcTHeOOHQeSQph6foZ80yivuVrqcbB9vZPf1YHfgwEpL7\nj1isXT4548wExOfRppqXsZtDo+n9vW91znO9InakLV4rFCv6i1lO6lgPBRmL\ndyClIWFoI/KJmXY8Z6picrAb7OVaeKtKV2gX/l5Fu0LQPI1VO0e7Q+lur0c1\nO7BV+VHXlp5+eQOszsRcsi5dDb6TN8gXjGm3Wi6qxRX+azbHRFjT8WvKOqyq\n4RIUF+JQyD8KmHIxUVEjBj//sOSTHm7zlByNdi30X66sshZiKulrafPbTrTI\nUIXDlEAxxHun1Y2UBRYVrHdKIG5rOzVLy83maHXanP5o3WxqKEHSrll3ndpZ\nEur0B4Y316mlAuTr1k/7ts5qfnRq5BoxnJopZLpEUsNGiWjkfxhwcFL8mh+W\nsi4CdvUUTP5wC/6fiI6AB9R/TxAAtfZjEZSwF8nrZSzkzNV2rOSwlNcLBBeJ\nT8I7nURCw5FEo8b/20yhgYBklOcuHplmii8DpnvCa5m73HKfJY+A+7tlKD2S\nXNtT\r\n=TPIA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"86f8af57c151ec42ed920ac445544bc384ce0975","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.163119837.0","@material/base":"10.0.0-canary.163119837.0","@material/shape":"10.0.0-canary.163119837.0","@material/theme":"10.0.0-canary.163119837.0","@material/floating-label":"10.0.0-canary.163119837.0","@material/feature-targeting":"10.0.0-canary.163119837.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.163119837.0_1610149583759_0.8079516731258172","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/notched-outline","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8663394a3dd8dd11fe8b8d33ac2aa18d880a9c81","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":34,"integrity":"sha512-mKv6mY6XkLVu3Dvh2hvwfLYawuzedfRec6QXo1JaBLGiXWJB+NYQdvVmqrPZX4aXa17ffund96WHerVfZ2q5VA==","signatures":[{"sig":"MEUCIQDrjBNWX2QcSp1gJE3ZmuFq6lA6iMzHm7vI4R/Db85YBwIgT3RHZ3GnVngsNB1R947BwNNgSfTrzvwCoYc7THhIQ0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HwLCRA9TVsSAnZWagAAxrYP/1idhLalk1gTNgjO5j3m\nJA6FqtAd/6+dL1sQLvNO0azpyut/u//FhOu38USHpbZMbEV5FcjFNi1jc/1c\nlGrf8lqcjSynCR8QklRKS0V39kxep9iT2HkSPXnBCf31Zz0ADZ7FkmdawbE+\nHnaOcM8aZh6CcQsU/ianBhIOHAeI3jtN39CTyAxaFhtibfU9Sx2FpMJsfcF4\nelLywUzGeBwfi+T0luEOeiJijZ3JMQETDQQYWAD3bKS8YNLgn5GHisXl/LFe\n9VrOxLrCWCivYxwetQUsP+2d0SbY7GSqnG2jN0VlVkrs10HmL+VL0pwz7J1U\nBILY2qVljjcZnDJaGlHRRDAOdEYM4yRKcskkRZ4JVr+G3LAkdy9c96DZAuts\nKlOn+ucbV59iZGXxGyUS5dPfJlVz9MX/b1gn+PdAuDXKdmtQabnnbMKHg23W\ngl7D97qQJm1zIb46/4qVRycwAEuL27g8ra1u9Koc+wNsN10qHg4OQOBs9JWw\nVIeahknGXPjIQr0rFTz2jbKVedIC0+uNa5QEjYLCUX1jSMUVER8xch2tLtqZ\n4E/HKizs+yKDdMSvmRl+RIvfWjXvnW2letsZFwYHdr27iF6db1zgIXwwwtbl\ntAyhByOkKiB30bdbX1M17UXSmYhAWkImwWuXPcWDhYdpO514RB9b7vkjwOIm\nJxeR\r\n=9jio\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3b735aa03cc784b7346905168638eb6a486435b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b8a1a58e4.0","@material/base":"10.0.0-canary.b8a1a58e4.0","@material/shape":"10.0.0-canary.b8a1a58e4.0","@material/theme":"10.0.0-canary.b8a1a58e4.0","@material/floating-label":"10.0.0-canary.b8a1a58e4.0","@material/feature-targeting":"10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.b8a1a58e4.0_1610382346951_0.8950471971721201","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/notched-outline","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.7584267ff.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccacf9a384bbe2d5b29051333298f8506a9ab3c8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.7584267ff.0.tgz","fileCount":34,"integrity":"sha512-Tl88GQs84CtWJJsifi4gWDGZvrdRqM0eHtDQRZFg4t63X7WnWDi7bOFNRwT7WbZW7AZep5CpPyxd7+zeHWNFSA==","signatures":[{"sig":"MEUCIQDPaig4cINTzgdkYUvudRLSA6WkA5ZklDaQ+s0tH0oDlgIgbt50h4sGColOR70/s6P0byb9LYvtGNHJ9SMZy3V1voU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/Pe/CRA9TVsSAnZWagAAjioP+QB8y4FAHx1NE+b3swtG\nT9e+TxWPFDMteiuf4MDgwWY0Bj4R3Iri7TY+PxYe8dC7/R/HcR8rtViWcIez\nHvsUJnrgKpDgidp1WBbN3KY4ryTVST2orl1mIF2iMu6XycXzoJtZDXGTQMWN\nDAORvzZJjSSWRqyvOAxh9X9HVBipfBZYsqATCHDhtlt9C8e+90NAzFTlnaPM\nB0c7vIgCgEeFszxWqKhtHT9hyyetTgLqL1O3VBvZ+w+4y6YJMd484Y/+urS4\nIqzpcBurNbjb8iq0vXyIowAjfZcQXCev5HAquohlzY4E2uFpf9RELywhrEFV\nWLAh7mh1JwZ2ZBXk93Nt/5iw2tRFMBuEKXKtnVLcEIu2pkddUgsmC1iJcqlu\nK3BN9EMFldqLGZGuN6vtW+B6tBD5Wu49QuJk1GSwjaUK1oDh3VrDAiFoSlL+\np4Me9MQ1d4r8NuUk9LG+auJTw7HMnp/wE7ykF2xy0F6hnF9jupA/+wa9NCwP\nDwpcZNce+1zL3PtVTDWK+hErsRmbAcaU/kgBySwRiwre0/L/tUj9Bd1U7Xz7\nYmS8GHM468bG+MWsn1tADfmEEE9QQQxde/iC+nVZVpReYJnkheVLpWrgeh3r\ny/rW8TdKaQQed8oc8/gN4l8bF5/dpp6fO24pnz44Bz9o0Hj5+4nqZa1cwsP7\npSw9\r\n=7OZx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"89cedd80674ac536aacf2762f084fd7d1640873f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.7584267ff.0","@material/base":"10.0.0-canary.7584267ff.0","@material/shape":"10.0.0-canary.7584267ff.0","@material/theme":"10.0.0-canary.7584267ff.0","@material/floating-label":"10.0.0-canary.7584267ff.0","@material/feature-targeting":"10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.7584267ff.0_1610414015131_0.07959112736042817","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/notched-outline","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"198b8925a198d4add25cf93027dae3d8477f4c23","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.251ac04c0.0.tgz","fileCount":34,"integrity":"sha512-jvgHQUwrfh3lUH6YH2jVf/UUALzxZexy0dHvFqXa1ymXTFFaQJX36JwQeSqIyGS5VTDPFSxiWxq7xejmymmUVw==","signatures":[{"sig":"MEUCIQDMWOhIjc271F93WQpNs+PSiBWROiWu6xKvxU/mliog2AIgON46OUkFff0F++iBCAQE5uaAxvOaj1fsPehNslchmjk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f7tCRA9TVsSAnZWagAAI0IQAIpDYpRfC4sS/m6OUHlw\nbc0eK+s521UQzcmnhxqEzmnUXXFn6ZxavSbkHjMDXywX/OsU2qBPPEsd6dj1\ng1tOWGQOLMv4BWfYSc3XmBr9z0+HHffos9LNG9tp5uuFk0zbQgvLZ66DP8CK\nzXo/3cq1DH4AokBPsbUG/2/mYyHJwoxlUSmpAJTU9h5qvTBJbVkKmoSUhb8L\nDYJ979OiI1d1kiytyxFGj+xeaG5EDFfFI5SIAoUGsVWCj+DZBhtFareLnmdV\na6Q8GMYJaFUhMiN+ICiqpAm69HYkt21mfEHLlrlalIOOoLEiI92fEr6P0XXR\nkomKsXDJJTXT41h4/FVXMEIPfknQBz2++cbC69zH9oTcUeZNi0jECeKvF7aQ\nicdF1TMl271tgeGuoIE2LCNaaEP4iNWc5MJEYUWKKoG+cXhosPBLlKErOKRf\nGP063vSUaRsHbWfnP7PqxtiZ0JH/6YXQHI8uyQwzWY60FoCA4b6FO5w0KfST\nmBydFfyXbX1i7B36vw40tjTDYGuQgpR18RBF5WrDd9wjGd6P0eucPyzXp/Xr\nnsqZW3KeybdZIkXcVI90/Ee55PTJJd4nWrtANE/MXAJ/9Q3Bfc35sfrSiXD3\n1yPf2zppsI51Gj5wjhrTiN+LgrLzveGajtZckHiwe6tE3LVZw3qEnMLN5vcW\nPvbf\r\n=QTvO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bacdc97357600156630f8321ac8a3a8746474194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.251ac04c0.0","@material/base":"10.0.0-canary.251ac04c0.0","@material/shape":"10.0.0-canary.251ac04c0.0","@material/theme":"10.0.0-canary.251ac04c0.0","@material/floating-label":"10.0.0-canary.251ac04c0.0","@material/feature-targeting":"10.0.0-canary.251ac04c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.251ac04c0.0_1610481388546_0.7541938956537919","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/notched-outline","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.772cc1068.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c0521cfb810f2fe5dd5360a10310dc059ef6bf6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.772cc1068.0.tgz","fileCount":34,"integrity":"sha512-BvC3+dVrpW0CU1qr9/FFU+mfrxOFBhO5hPSvweqS5qEkmVoM9/LJC7B8BwrNEy+M83GiN96XpeLzREiD9BTc4g==","signatures":[{"sig":"MEUCIQC9HEF/rRGpCASaFEKyVaPweQytdWITxnTb092744IYGAIgGHhUu5NKRQfIHf+yr533dLNcWL1D74kmBT74OKPtZ+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4t0CRA9TVsSAnZWagAA96sP/3K0saCArTSIiEkwGzeK\nLAIr2PAHmdcOiVTWrwu8/2eDSD7KChFh/5dlicNDBwoy0N0bPumC2y9mM6Vw\nMbAU20ADy6wnl/klKH/Jj9F2J/LtNo7HcvQuK29Xd1BF4j/72/cqbwSn5sQG\n6vbRdX/a4DFElu6fA9kDyauEl2ct5AXXePkEiZWrYP+qozWbUOk6zOJbH+d3\nELHx/LVu/xkIhuBsv/36KnutHlEaGQ+HUWX3l27PRZw90dvExpaVTSA8+ExI\nbiewol4S3wx+7v/eOHoe9/NKk4WZm7f4I41SoZBYpkj+FDbGu2VU0Qb8Ub9a\nX2OzTsW3vayhIO6GvKL+xWxk04Gaxlk6qvoQdbe3tSbBPT0EjRXoTPagQG10\nJ7JSQzyBPz6w2d+qXUujT1ao9aTQmpS5p5BkwNOGZ3BxQWa54DfFuSlsbAmq\nlPYwtJBYGjSzSIMc14tCnY3GAJkiQpaiXTW0pxnyKFLKzSxOxfIgxwD7Db9j\nK3ARiL9QD1+l6mrvYSTelu39looEXd7r7cG393YvTIuoo+QCs5SPUQ1cqmKW\n0NOsRgyGpxAOTs+5UYKn/0DUK5LhvMe26QvNSZVhTlrvvj9l782lwOb+FcZx\nRz8jAN7xF1o5ZqsPq4Yda33/KLXqsuH1VkRxeATh4UG2h/S0OVPT36Jt3jvH\nA178\r\n=221R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e8dfb103b25351e76ae27e482ed4f13c4bf997c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.772cc1068.0","@material/base":"10.0.0-canary.772cc1068.0","@material/shape":"10.0.0-canary.772cc1068.0","@material/theme":"10.0.0-canary.772cc1068.0","@material/floating-label":"10.0.0-canary.772cc1068.0","@material/feature-targeting":"10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.772cc1068.0_1610582899898_0.6032014466508264","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/notched-outline","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"638b856bfa54bca70da2e4b94e35eced7c429d08","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.fe13dd130.0.tgz","fileCount":34,"integrity":"sha512-OAKfPqavWGlZhUI7CIG+u/oDISOG1H6ijHEHTYWLkqYTVMix0HOaB1RJ38EPxMxomC6Q8hLrM2kO2TRgElTRiw==","signatures":[{"sig":"MEUCIDk+VHDuI8ugydb6ti1qoNUPBWzp0j1pzp5YtOZBbKcIAiEAwKJ9vdhXjSI/pvj7D/1cHQI6tMb6RmNa4yCzep2h5CQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5o8CRA9TVsSAnZWagAAT80P/AipzqdEkQMZO76P/YDu\n3tKle69bDVQPK/dNKngviB+MN+5Qa8uLV6C/X+ajw4cYjCOIdYcV926ng2Kn\npgSo8OTHB6jOTjO20cbZ4BDMSt/YztkPSqAZYw67alkfSl1mxLJz9bJPgrp4\n1O+cSdgKI9vHgS5g1CcG/cQYLKpPbAWJQaaLqfZS54kGtiCXYW8zk+2hKsfY\n88cqN5uAqnafKrE/cEd+ThgSS7VxAnbGCIDaaPJONS7SY6H4ex96IlZiHXCJ\niGpIXnHgzJ2cWNavBAux3XS5FEGdngiUCXpU4KtMUqPEJVS0v1pMgm0RojCb\n7TOmEvOa4Dx/SRWyNOiPBIPMniqmfxVPGibHd6dlYcsmTrmqlvGwYLz6yWwo\nFRaGSnQZyCkpsKcGAbReXRY5WnxIvF7KgjZZLpeKCRjw7mmJlr2wGDJzj9hs\natqB14/Dhb6CYCqpFMqLxyuiyVF8IMiKujYPhnhyUE+VQq/XuinZN3fRg0UJ\n2j6hnt3noCb1ShO3OIYTTUgGLjQdkKjo7YG4SQZUNBU+wkvaZpn+hgpAMXw8\nYFXz3uIuRYOwoPMW/o85d3MzUqC3sfxwJAc4qxeVdAc4j6o5byNOX3xMxUZx\ncXw4xMOmLuzOFor0JK0c2N+09svOIMPKDpiUs0KV5sOpxmCI1UQ14WMcpGdR\nd4T/\r\n=bqrH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8825c25e04c8e88b7430f2f8e148da8a9197c02e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.fe13dd130.0","@material/base":"10.0.0-canary.fe13dd130.0","@material/shape":"10.0.0-canary.fe13dd130.0","@material/theme":"10.0.0-canary.fe13dd130.0","@material/floating-label":"10.0.0-canary.fe13dd130.0","@material/feature-targeting":"10.0.0-canary.fe13dd130.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.fe13dd130.0_1610586683721_0.7745295837217074","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/notched-outline","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"190bb1eed26ad9a82c9af2dcb88fc262912c9cb9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.c7c5da28f.0.tgz","fileCount":34,"integrity":"sha512-Cdc76EW+cXZmdmnpQfGGXim1kPeI3qUsqSx13C5kho5GAOiSCXcwDbMR2SbiZ0q8+86TE/+Kg0G2L5qWe8xYlw==","signatures":[{"sig":"MEYCIQDEcZXWVDhvlxFP5+uHDgQOayKjTIOHx7jZOqWkdD6SOgIhAKuJn/v1SGeqF1IUkMCKbggNrxGToMhw4j5F2EdRxWDC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5/TCRA9TVsSAnZWagAAv3YP/2zyXYmGhcZvrxQ1AZ+6\nO7h/B+gdWrEFEJL1Hhe6/N5r07TlnauhE+8rGISwFlb/j7rev33H9VqBjNVj\ntTI+4Gbki2yFDzY5Op3zgD7If8qC+277ScqjHvQiR4Wv5MPc7iK7BQXS7r7j\nIrkGnpHB7DfhpgvNfr249OWT6jiQqMNDUszlUvP4NQ/Qw8VLjyrimDFuXVJa\nuM+I5mQoPPIG9HK6LB8bDV/9nhJoZnM159/ppuNNh8kIoolHG9GQpDmdRgOg\nfTMgFbaC07MMfHQstg9cGIap1Iqya7/ErtmZmw38jeo/1MUs059Q6WzJwgr1\ncZq3wnhekd/hSr/jWP6HtuwfNWUrt4xSB0Tmkhk/TqIxfZWSX1gm3aEVUQm8\nelK6dMTqMRqDUGO+nacW+YUmfXn31PzWrZM7TQauLi8Tkk7XNeEcM1tmFgxl\n8lXHO7kG+oZHzrf7DUVxoRf5TvuOHNQwRCFbWJl8mqB43LI/T5aWCLcus6Ar\nCAp6s/v90KhKySnI/RnmTyKnB8tFyTXBbDgFSVpeT5qoPZCWBJUUaXtMPOXh\n3oRDTpn8MWi235xUq208OaFrlmntKzm2OofQOo9LfHPXl5iSbSliMfXDcP/R\nrA/comZcilUMNjwcuDyXcKZqlXawDk7K8NFaML6alZ+IFt0XGWWb8bbGbvbS\nFCHn\r\n=DzKq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5d3f3a72d4e9757f2993684a89928b04ad29c6a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.c7c5da28f.0","@material/base":"10.0.0-canary.c7c5da28f.0","@material/shape":"10.0.0-canary.c7c5da28f.0","@material/theme":"10.0.0-canary.c7c5da28f.0","@material/floating-label":"10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.c7c5da28f.0_1610588115441_0.50961313612309","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/notched-outline","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b01b6f396f9ec6ae5b438acb31abbb31e594b81","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.b2faa116a.0.tgz","fileCount":34,"integrity":"sha512-Yu+7flexLQQ1yWOc/UEUhLtTMnb88Ya7wO9ispZD6P76dUkKAzAFE9WXuZjyYjIPRk9As8m1aw85PliSfOefng==","signatures":[{"sig":"MEUCIQD6k9pMMTqEjwTp8qvk0IrKZ0kJxOZOdlT5XWzrmRM6SQIgLQY9qO5SYYBwsLrafScwnQ8aT4BFmRZlbim1OmCVEvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzKwCRA9TVsSAnZWagAAnOAP/Aw9WjvMY7oSNLJUQdrq\nMYEK1mNW7tmFTtOmhv2c0xg4fA+gbrvHNzeBvxP/shl5mVfa3kwsKnBSdeFo\nLhhjeKT2NlN7CD2UB5XeygllEb9T2fJjqowHsXjWJ13AqKjaRz1mWDV3cEL5\nAj2AuZ0vpCmteAFdi3ZFm4cq7gxvKtrFBReyaJ3OFfuG22U9QS8jnVfuE0BV\nTqEBHyHZGyj8eNt+7PUTnilFZFRAnLPN+Q60CyqyzilEXWXQoJNkazZKSrdN\nq2vs5OfIGUjor2PAGyDkE6/4L8uk8EdkTJiHWCl0Zvlbxhvczh1lwyix1qy+\njRlwNFARCoKy6701+7lgxjUtzeOCx1uv9PzQHMTmgcuKQMhHXOaOwKaFzeTi\nJhjCIeCjUMM+De/L8jtPdZ8dAvFIJiEMfZMfpezVRepyrpPuP2l04kCtrn9d\nMobIS+Ugm3axMrooYO7en1bJ+1b+kKJ7IclrPv4iOEY7cdySilSHlVUI6c3B\n2FoYpO2qUPOIqtp3o3XNV4S5lvgfmWbrI/d5YV5EL0zqFzqeU8z79MMLvrUh\nQuP5dXoPK48ecgMFG87X5EYt7K0xapdl+1WSVi12YRkFqaKuRWqiwgkHfaMW\nSBiWr/2mKm0qGyntDhtx0BEqFYIPpj5NyeAsws9GTD/48MlKCSWH0nzhU/ul\n04n2\r\n=eN5h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8c83e6751cbdbda8095b6ae0686196398066d600","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b2faa116a.0","@material/base":"10.0.0-canary.b2faa116a.0","@material/shape":"10.0.0-canary.b2faa116a.0","@material/theme":"10.0.0-canary.b2faa116a.0","@material/floating-label":"10.0.0-canary.b2faa116a.0","@material/feature-targeting":"10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.b2faa116a.0_1611084464125_0.8263057037475448","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/notched-outline","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2134965f59a2c77847b90a3c6996895a54a5b2fd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":34,"integrity":"sha512-X+pn9dFIvJBfJL1hBSkEueWZ72yQvQtJl+uaxsVaVx6JLqbZ1vJ3W6v/qTpIDOLC8K7BH2Id/cDYCo1ycpqgOA==","signatures":[{"sig":"MEUCIFzAk3blhORR8jwaM8DFbRHxIXlmYZfwKY+xXdXA6bUaAiEA5y0ZsDq2n1GKe6nnrpFL7dz+HLn7E2eKqlWjsnUQY2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2NHCRA9TVsSAnZWagAAL30P/3FL3F3gRryEzbgwIGbQ\nISU/N4rUQo3d6fTxxvuK3SKPi5ZiOkwWNvkc7VSHkZDNxmKpkHwVJEzPuNPd\nwcCqUTNGk7a5+jw44foRIhpd0zOO1ZsYcepAfy7+CATW2Y3ve1nePPRbWggY\nC2/J6jtFnedQ089fOkuA5exK49Zt754KG8aGfMhAnJdyd6a5msLnRFXi9pOC\nnuYVv/RCq/0kQynMEfK0IZNSbmNf7eJkNTRnruyGIQiODdDLSxSMeQcqyCR4\nCRlGK/X5pPxkEa3x/r6za12Ul6FaxoZBTwfMQfKWhPElMSLpJDARL98nxq5x\nx2UJm1YaaXlhxH50ETLBl4kDEW2datBqsKeqS0zU05MIecTWUZHFtCQ7m+g8\neCcbJR3mpM2zPyVWBCMVp3rDTh9Fl4H82T+te/StTobeai2RXRENioS3VUJE\n41jHgVu6o1OCwCH0Hb1KbwFo0MzlBJPe2CZViBiz3u0tBLYf3B2dQ+PMBsvt\ngf1OY5Oady4VvQuMxJ/XPL0Kqx8txg8z/kTIClCnQx0jc41pq+RYsgjGawem\ncFdzQD39qdUtYE1T1MCQf39mx4mX5pJgxOie3w13sg/BYlzN+mBua7cJ39VL\nnICuvUrKr8lYBUFRI/W833fmz4HdBFu//dveHFvqDFSVCFf1xzPmY44RgZBJ\nyiMR\r\n=VZjs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c9db31c38cf439af3f1498600e029c2dd812acb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.0c95c9f7b.0","@material/base":"10.0.0-canary.0c95c9f7b.0","@material/shape":"10.0.0-canary.0c95c9f7b.0","@material/theme":"10.0.0-canary.0c95c9f7b.0","@material/floating-label":"10.0.0-canary.0c95c9f7b.0","@material/feature-targeting":"10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.0c95c9f7b.0_1611096902637_0.5834770068494013","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/notched-outline","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.5268222c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af39b30ce72154e3813230e9affc644c0940e637","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.5268222c4.0.tgz","fileCount":34,"integrity":"sha512-jpQGFfAKYYnb/yxcDHxsBM7xKyOm0qODBHZZ70YmOoJa3vWgASyJblRHtX24x07x4PZMm3SisjxyWGc3+yrgjA==","signatures":[{"sig":"MEYCIQDScEp4BWTbhN00xEXUazQW5JKLulAZSzOsqOMl1uq92gIhAMx48B589FDFvQmS84Rq/0UMhqoSVWLgQFOsTLTsD2X8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIKGCRA9TVsSAnZWagAAm/cP/2vCJWRP7t2N3w69z1n8\nKG26Yal6SLSgoDhtQJZyEgqhPXcXibpZrsjicpGKi2cczaYoahPGzF3DsY/P\n2gFCp9D/Bp5RJiofiFkPp25cdM4fyXZ1+zPSrJffD/yYtaEooVR52UwbL65q\nFJNXQWi3mbiqDV3R7XvIb2pzDe0tbp0tIxkfRFi1mKlNpOV4EOxG8U/1zQhw\nEnsD6Z915tN7wYK4ij0+S7rhB+xMH2la/xf8mIwLnh9r48GD2bfZTYCfdvtI\nJWZ8mE3SvOupm3GSIt0Bk1EFmFu91GanMYkifTo22iPNiTn6/RwU8uPxspbe\nCidnL46uV0A3QIobcIjCJo8kic2LLF5HdW4262pwAw9WdVi3iy4Ne/SF4B2P\n5O6qFi/HTQF5HZ2tBZ2GFUF5fHyFZAlYPTjhIT3IqUtFJmjpPAW2R3q7d7FS\ncSCVRVtwl4ymS2Puv+CtFqxTKVnk+PmvKPfyu9fZ95AAreLCfo/dfBjR/CqI\nkrym8Jt1Y/u8sxXnBHik+89ImiPWMY2iKff2DsDGPNivNqIK/0AYuS6Azt1J\nzeSZJUUcE63mD9DLZwFPIGtanBhTfPu9r5zt9MCeIeAMOnesCpfKrHunhi7K\neiOyJMI9djJs+mpQAAq9hM0HGLmRWmK4eh50teL7vs1R+FAyAJcahbUk1VsR\nO55s\r\n=E534\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"149775a975bdac97e3f25a99b254c8b632e6ebd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.5268222c4.0","@material/base":"10.0.0-canary.5268222c4.0","@material/shape":"10.0.0-canary.5268222c4.0","@material/theme":"10.0.0-canary.5268222c4.0","@material/floating-label":"10.0.0-canary.5268222c4.0","@material/feature-targeting":"10.0.0-canary.5268222c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.5268222c4.0_1611170437816_0.938467379539131","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/notched-outline","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6119b522edd44cfee03cd7328071cfab583d0069","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.2ed2d829b.0.tgz","fileCount":34,"integrity":"sha512-0+LSg70ue5TP6eSZQchp4Zb6SkLMrJU4fmk2paO28ge4Pc7xZh1mn6u44McPDx91UyPzIEsR8rTvvQL1uNS3WQ==","signatures":[{"sig":"MEUCIHYXhQh99ugCFlFFq51yUQl/Qe2LfowOGdf53KFo/n4eAiEA9hvrPAVYu3Ubhkm9gL+P6fbInmtM8W4BYNilbDEU5DE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLgdCRA9TVsSAnZWagAAv1kP/RKSPQvMrvYXPDLjgJ+W\nyO1MzIg3/5/PvOIBsFPZtULAbBgxZ4//ShH5pSPLQTk8urJUz6bLiU6RJcpr\nckHkUpszOQgm5Qb2hOqXe/q7xhGOAmSqXRAd388SoJXUCv3jKReBlhFKWnFY\nKklI0lSki6V59VamQZ6MA9YTc8Wu5106XAoAWT0MIzl0wfOdcQqJb5ZD7O9G\no0lgZtnPtsO6lJuT/kfNTpNtDxlBLeXiMqM+g9GRWREiMyJXnYgHhCzY/wD9\nSesKLr3LkbJE6R8/Sd1fofljym3WhGLuSx2IRmvdU0t+KW51IuXsgN/7N7wZ\nM1x8ngtjQUo0ZBnNa1+RMp7xmNa5rbsMbEnG8Vg2navpc95H/+P/ZPghaFZ/\nV6IKEBmBscua1eZ37B8ChSGdLfqR/P62Y5Q8uiqhf6gWz+yVUx7WDQpnME6k\nnjE+BUhXEInY9HcQh7tbMcYxEUieStQuJTARcvZ4bLvOXFCUwS5B3gkNUmcE\nnRkL/xGHpp3KAu2WeKPYpm8X16eO9HH2ZRay1pxZ5zcHA5hNH9WmiAtyeKsF\nCIVF+DAq3Np1xyGyQF+GGpZV0Lc0DGevvUk4U/Rp3QlokcJh25g+n+Jq5ojH\n6u5irmCYNfPTp7uq5heyQnOmJ9BRXL9cJPJA64tDQE1L1ZmNcL5pdqdwu9Gc\nTl/R\r\n=cH3O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e937a8c393e2170307639b8126f0a461ffaf9e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.2ed2d829b.0","@material/base":"10.0.0-canary.2ed2d829b.0","@material/shape":"10.0.0-canary.2ed2d829b.0","@material/theme":"10.0.0-canary.2ed2d829b.0","@material/floating-label":"10.0.0-canary.2ed2d829b.0","@material/feature-targeting":"10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.2ed2d829b.0_1611184156585_0.6281584710662256","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/notched-outline","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f18b47cfdc4fa370892af1688cfaf586b25a599d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.df00c2b30.0.tgz","fileCount":34,"integrity":"sha512-EFdvhexDzEwHsOBwMEZWsMUZcKOYGX3OslGBc2zfqys7sAMTynMcZQQ1uYGSfVq+PV7z0bsKtRLCak4PIQQgDA==","signatures":[{"sig":"MEUCIQCfjoc/5NIWri881FNiNVAerAq5W167+Xh8lR9qh+hSuQIgEGMbQ7TzpkyF6IcZoK5dQHEZDfQSdPuoyC7J/1zhrUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdxbCRA9TVsSAnZWagAAI8kP+QAw660TbIX/HenkusuK\n8p5zl7ltSmBZT0yClHAHhx37i0E/FrenSqag0XbZ5udNHHHo2a8deA0IHh9b\ngQEZbPTcOPPrS/Jfku1nHcfzWDBndrSl0M/rBJqIxRTBOHj/pTUwwQlgpokP\nMDref21hVuuBR193B1P4yWUpzYXT0J5l5au+4X0QyVGquKCrc7YKhnUtbPzK\n0UB8SU/IdleQ6d/tA9hCQOZXG/cs/xzRBR2sZDOZVKmng/gzFSJ+rPSVfl1K\nWGuMVMiCOHhDNFXmVSSTwylGdfUQFKaJb3Jdw61ky3/YLMLa025a0lRAW9kZ\nWDWmn0uVeDuUlEFSfJKb29+TPdtoEwyTKsqDwHBLmBq+zeXw/euApn2v5fcX\nlz8xOzQKuAqZJWTyyrmHra4t1HZ2oiBnNIDWcYonzg/lf/bsh1pVYC8psWVm\n6O2PuSCHG1S1+zjSP0Zv3R781bqsBQX2/4YIaf29KTV0oY6uO99Wyz8vEIBd\n5SiE9bz4avnlyWAUgzQqeh2UTb0ya/NtlGswuuzbzqIMv3BKHrU9pKKV8qFY\nWqNx62AUb4JVO+5AWPHxHbm7nlvhhpESCQz4pjIsc+gbkgr6eX82Lgl7kEo1\nss0kU+v9xVFgcjJXuVfNKtMHKiyJY63bxSLB2/iC9NDaSLOCHBeNu3hjdmkN\nWWnU\r\n=adQ5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b80e68ca5ce1e4ff7a83ec06c805029869aaa5fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.df00c2b30.0","@material/base":"10.0.0-canary.df00c2b30.0","@material/shape":"10.0.0-canary.df00c2b30.0","@material/theme":"10.0.0-canary.df00c2b30.0","@material/floating-label":"10.0.0-canary.df00c2b30.0","@material/feature-targeting":"10.0.0-canary.df00c2b30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.df00c2b30.0_1611258971112_0.4502631760300002","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/notched-outline","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6564f90aeb37dfc62793513841e7eb7b204965d3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.fd61b0476.0.tgz","fileCount":34,"integrity":"sha512-MRJNvWgG2BM0PCGHHHuqk9GDdoNiLpdRNVvdHqJD73ObnQEpYVsR8Vd9sfrCwr0nagvGnGNOcXXi+bPKT0Ej7A==","signatures":[{"sig":"MEUCIGBI5qclQ0+9AGHPtYxiPqZ0UrD4u7iAoZAJ2nqsuMK7AiEA5qQnfTxPcQprkFUtJ5xvtjwvhlWMQQR7eZ76GwMEWgA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd/HCRA9TVsSAnZWagAAqAcP/jOzelbGON6GkOCk8dKw\nqYr8nnDWrgBbQz3eZSkzKB4Dkup6s7bXeoOJPee64D4tCC0gWAIHV1s+riOm\ngT0CiZXUxhg2DfrRndzAxYLJgfBKe4VzvNk/pc2NwOVfUCIUFejRj2NbDHza\ns7rYzXiPrbf7W0A66TXTfEtQ0VYadjl8zWdNUFZX/BmBzETi5OQk3cV2urEG\nGIFLhtTf/hKqz1iVZVq99aXZC8aauoHpbsCEBhNmDixHQk5wFK3llz24F/Bv\n5b3d7JxTWcCDB8/+TcFZTculHzLFoIqorL1bSndBlh5Ezl9y1SPQWFZrcsxa\nNbNWyuNU7exRFqHUHZMr8o7n1i6ivJKkdh5fBR/JdGLGxqCbNG/652OtlsWJ\nBWGp/XwzQBiJpIWBLYQrrF3N0d2aFhiTj2T5zU6boHtX3kLeerZsrVWUGC8u\nXsRFNhJFe0ts7GWYxw97dDSN5KMnYifvSgZd6/9EiJFxsByDEOC5No1z1bzf\nyiYp1y6Yg8AxMK+D3fIPzpg8xFGd1Np85um5qGMBtnVe0bA7VCixTQCKMXNc\nDFMioCQlK6gHBNBQNyd7e95BKQ6noz6LlbzgsWUBIm1KTpXKwqURfiRONozy\nWb4rxpSYerXWRxh07Vr1kGxdZZ0t8AW0anywLsZgAoB0ht+qCByrjnKbUCqK\nBX/9\r\n=OwZp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"67853fc809fc128218f211f5b54f854f102d1ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.fd61b0476.0","@material/base":"10.0.0-canary.fd61b0476.0","@material/shape":"10.0.0-canary.fd61b0476.0","@material/theme":"10.0.0-canary.fd61b0476.0","@material/floating-label":"10.0.0-canary.fd61b0476.0","@material/feature-targeting":"10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.fd61b0476.0_1611259847310_0.523841097193601","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/notched-outline","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f12060d4053835a6861452660d69b90996f89bd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.3fb3a0265.0.tgz","fileCount":34,"integrity":"sha512-zfUmhYlxxllN+cWQISo08nqmH+xkYBlWE/Ftfq3VCjI05zI9vP/sSy6jUpNVos6hJcvPsJxHdycsJAvczeaD+w==","signatures":[{"sig":"MEUCIQC1zhcF13AydIj8PliHBZz0SjNXzKUzB/0wl+md8l0AggIgEEP7yOhDcNRpBFrKSlgG12r3XatYACzP0YFMEBBDeo8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChbqCRA9TVsSAnZWagAA8yIQAIQPtUJKxqocnZQ7bnrW\n+0HYMimHaOKZdqX+n6bGIKmJKKk5jBoLUeHV2kNcEpY2t7VrmtmxD43YEOXQ\nIV2Ti8IHNtSYTl7CXRs3YThGyXGNNZTVM9MUo9XhEwjIvlzLbFp0grwA4vsj\nobGdGtnbFO5Jb8VxZkMivGJoTpJvctnxQfSJqHipfwgUDms48xead21qa0J9\nvQuR3/Afoi61ajBRIsQsquiwBAKsE3x7QWQHBCz4WXfkCR1AFYf3R96iVcHR\nbLpjtZkH2HWm3Fhxd2yIFm22Up7ncvlROPscEPiwEh+Gr3xTW9Q8ZDxL56I1\nTGVrs7kxP5Z3+V86qupzchfci99NdJL3QU1DyEkBdVnA5dtqwyWuF+PlrSq6\nKzOpdcI7Yj1loVG5pMzMXV0k8MQRAExqACnIuTW5LGKlIjG18YGhpK3nbgzM\nEd6z73ZTPFDUTe0pxWQVlCvIbgzdlJKbapSSaB1fklyEz626RMn6eXZZYElG\nXhlpdpTI6yYu1ixp1TM6ThNWLZKlPO2WbPZzlQTbCqeBI/vXLPkLzqRMuesR\n7BFrGNHU8supxnwAffcIrjydbVkqASnpk1Sj0JRVpqBMxixZ98QPtobykmBo\nvSCdBijZBR+pe5xBp2knQrnCPes/gb41GwhLc4B0i5i4HgUOQlC6POAdBtCP\n0F44\r\n=v/hq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5e619e42cc5398fa779a726d775cc7e9a72a1acf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.3fb3a0265.0","@material/base":"10.0.0-canary.3fb3a0265.0","@material/shape":"10.0.0-canary.3fb3a0265.0","@material/theme":"10.0.0-canary.3fb3a0265.0","@material/floating-label":"10.0.0-canary.3fb3a0265.0","@material/feature-targeting":"10.0.0-canary.3fb3a0265.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.3fb3a0265.0_1611273961700_0.02514566379759775","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/notched-outline","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.07deaec27.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9a287fd275637c91fb83f3e0d5981ab971dba40","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.07deaec27.0.tgz","fileCount":34,"integrity":"sha512-Ya3hGzbx2RfWYuVHXEABQwICsaY6eFI6VIOSGLGk7t1fYz1d7shVVBIoyP49vHtBC/n6nBrmcYUnMfo2NB0ueQ==","signatures":[{"sig":"MEUCIQCKQAi9EqGKqaVenJxXTcom0+PAo2V7mXOP/PA/4ZKXDQIgOVTt6UYafsIrPZfnzgrL5gqSYJejA015kdy8XaQo5Po=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwP+CRA9TVsSAnZWagAAhswP/A9ZDGPyoe2xPfzA4nQJ\nvD3CbI9yKpotF/gDl7OM4s5zu3MVUlnt74D8bPkzmicTj7gwSS5R5OYAsJMF\nbjjgtIzjysF7TCqQaRGz6+rG8n+OQNygWWFmD96n7c1+mpQByKnpBr0TXgVa\nHG4I/sJyOl9haT1Ro1UNzoKtSnEVUmrDoXhCxVAOV05rXRNBYJU10gEttO/I\nXYDTZtFM0HIDrYuUygOocyLBrBr6ez6yNVBWpeqULAhYOrtZjPRc6zDZHexb\nqC/yFZPzbfc9rLurOPltARmUcKzehczdghhCki/VBDcwSIpE6Jde0j2N8vst\nF3E+1NzZ4p+EgXioIWcBL7y/4FJLwti0n1iCXUSoxj6KoOt02zvLhbdlvJ2Y\nXux2LUBwWAGLNdLaK1x7XRXPYJzLGw/ezYKimf0vXsU6iZp+osUfRzk5ODLQ\ni6eej5EAc6fuFdYDGrtyQ0M0nJS7b80Bc4OnBnwOr5xiqAjJSouutLoe6CvY\nvW4huKx/SkbRR609Mfnl07BFiRQPkk1D+XVWkZwA47URD82YZ7KRE06Df15f\nXrEfHXwJETAcq0tXZ6XWDRQiorKlym0nG9usTgWy5j0NEr2r5ShvlmU9uR2X\nVJXa5WBiOWrvdDltCHM6Yn8bH0oj867vzp5o08N4CxAdU5InWk4nzgBpsnFA\niqdJ\r\n=fgdF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"be75b8d81f1ed6f8ebe94c8673f32110d71cec7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.07deaec27.0","@material/base":"10.0.0-canary.07deaec27.0","@material/shape":"10.0.0-canary.07deaec27.0","@material/theme":"10.0.0-canary.07deaec27.0","@material/floating-label":"10.0.0-canary.07deaec27.0","@material/feature-targeting":"10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.07deaec27.0_1611334654004_0.014571427006702331","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/notched-outline","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dac958d52c84e87d5a3fb8b22ad33328c18e7a67","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.d2959b16c.0.tgz","fileCount":34,"integrity":"sha512-+/5pDGZtUDyKRZv196cv9+qhTKsPeATOWECCHBZqLT3zBjAYucS7A0RbUOzRdAUFBks/NS7jcTf8uR262tYvQQ==","signatures":[{"sig":"MEUCIHon+sMSBF/6CGCvy8hxEwedr9VgfuzrF8pXg0ua78dZAiEAvF7OLqy+xThdGLczKEZGmcwsC+AVKbYfhofHxB7hqpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx8bCRA9TVsSAnZWagAAgMsQAI3steTSAY6KRtKUntnL\nihIGPESpvH8PV1ffysA+wtDGZYJW1tQmvVwBGFB2CcV2GdoBY0PzrT8epqER\n7/03y2a3rDEqmKoljQwc+LOxYGUTt9aHh/+loCm2cessVwCwAy2aw6Hx4yJy\nUMkUm/TZlfdmqDbmihnaPXd41NRn2P8WcLlnby7rfwlI4htov/H7vat5XFjA\nWbY4OSpRGYMo/BcNeOewjQDbFg1e0c/Fs31MyqC08fX5tjmy2xnzzbiY7Jqn\nYjprkvQpOLxrUvfAJHQtdjaDSA/cwMibGRNK+SnvK8MBzgpH8Yl0Pi6yQeRz\n/GGT8cTPQ8MHX0myZhTZsO9L8xWzeW8rbXd/I9C43CsQFkISUqvEXDErFx6c\nQgEjAwjlDg+0+N36E7W8icBdvoyd6ljxrbwgNZ861mnjuiHIYm1brQh3Kv6e\nh3g+yuULg1g9XCtrh23zhIgwtmSm0oN+sKksaJFcKZMpc/CP7FO6VNggpZrx\n00mb4aspr/rsoR+IACUOtut5Kdj4+KcQKTP6oQjzie0un+CbYG/SU2XOmBXL\nim7LeIy/qlAifJu84mIZB8MLbOoufTPtNHb7Jy0/NxrbqNQpgJA+s1LqER0I\nZagMZQag+mv54ifceFeEyzFQ7CNQuGqZ3A7+DVrCpaqeYc5qgLY5YIRcnx03\nV4jq\r\n=4RHI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9a89df0257ea15e66bbd565cfea291993f0c4ef6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.d2959b16c.0","@material/base":"10.0.0-canary.d2959b16c.0","@material/shape":"10.0.0-canary.d2959b16c.0","@material/theme":"10.0.0-canary.d2959b16c.0","@material/floating-label":"10.0.0-canary.d2959b16c.0","@material/feature-targeting":"10.0.0-canary.d2959b16c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.d2959b16c.0_1611341595082_0.4365725925938835","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/notched-outline","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86f67be6a0044cd87a08180e91af2e40e539198e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":34,"integrity":"sha512-bjaomAPbq19k4k3Yyf5p18qShbJTy6LXrJXnqrzEhT/IiSG3Q+fPj5Gdt9C/RlT46wgZnjhMVnfTHE3jsx5Ccg==","signatures":[{"sig":"MEUCIQCNqCZPNuw7AxsxF4deoHopX/egdNhxmbMGvDth4zOhGAIgU9jfdofw13DAkJdeRCVH+MuwbSGl2pY1v9JSTHrqiak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1c5CRA9TVsSAnZWagAAO2sP/iou7/R2wOsIN6xEpn2W\nPrHar7Za5oICKrDQVImgEpROY9dUnBc36XdnG5v1yteXKicnf2XnLZkavGau\nua1PFleiFCAdA/W+lJ0f+9gTV234OfRYQjuWKiW1q9N0RqD6VI22GCF/fKDS\nAz0zaf18WoqWdVGtlEeS38FS4Hx7KBrvrT5Poi7Z2Sd+ohpJj6mPHLzqG/UN\nTDAAbrxh1Tin9hTXzbwS9ORS5u9lHt+hhPN4ljMLng0DP924Cr7DJHF+a3Yc\nmB/SUxUrp3pKbITgc5LmPI/2Zr+iPBcBRVNH8JctdmcrTJh8kkhW8nZUILCy\nQ4CPUeh48DszxNxQz/lmbvIxWOeVyqiG2Aofo+0t87w80cAcFckzJAuYgngo\nCC9RFJVCD67M2rZzzDqSgIGAO+ciGoDSkpGHBWwY7xvFBMP0ExFAKdcvVEug\nZzNwiOnMaCwViNmtruCcMLEQAdfAPdVDoWRFLR3EunLair4kO8k5SLGJlkCr\nt06IFvIPkLGw/Y2TZSKXtwaoET1eIW97Tk5TT6HRwJ4O5E+2Ob8ee3T0DYTK\na8T5BYXbdjhQiEJeMkqV5TuHx0Vso11rCunG9DSqwDrsSiuZ2b9/qhS9poxE\nwnh2/NdmsofAiE412nGwyJ/ZYUV8TfgEkT6pNmSYfCpucUXnlPq8hcBWRi+A\nG+vQ\r\n=3CQM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"057941e604e02f88d571d61967040f58bf499bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.75f3bfe7c.0","@material/base":"10.0.0-canary.75f3bfe7c.0","@material/shape":"10.0.0-canary.75f3bfe7c.0","@material/theme":"10.0.0-canary.75f3bfe7c.0","@material/floating-label":"10.0.0-canary.75f3bfe7c.0","@material/feature-targeting":"10.0.0-canary.75f3bfe7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.75f3bfe7c.0_1611355960619_0.6598116406368826","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/notched-outline","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8e9a6a447b934602ec2dc248f1b81207fc63d07","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":34,"integrity":"sha512-MWN2FFwtY+UdIe6lLHM1dtq1Hm8j0N767vgR2ECbB/el885IskpYTTl0kEI53D6VuIEUbe02+areDgSOnUFtpg==","signatures":[{"sig":"MEYCIQC81M5X/lAlCxuBXnVfArZ0QXM8+e4ab1uBop2x5gTlQgIhALwRT79ySVNAC9p/cR6bfTXS+J+ehZ2IjP44ok+ISA3K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2GfCRA9TVsSAnZWagAAik4QAJQQ7FXEOtG+N/zlqB9U\neKkw/QflA2T+7n2gicEq3IYch115fQrnPSLiQ5iIx4VyorCEW3chUs+t5gxK\nw+IU/XsScGgV/FbqJvfit7fL3eR8IG+nUjBx/iWEM1WEd4ka8Sy8mdegLWSM\n7EzpMdSXfUWSWgkr5gDlrdGEcsDKlIixOzTvhdhUtZwbiD1m164DUSMtNayS\nwY48V0BTJAUcUR56w7Xsx66mkHw+WD5BGPBGChR5GbgZWGhCNz+xR+mdiOB9\ni0TYLLm8ZstmI5JUSUVCVuZ4t7DxhI8ms5HRCuhuyVr0uU1zBzVCBiHL6iZ/\ncdynNVuYNz/HKwRBnwYLm2VT9Lm0xxfV6Be2rwPxdLwwidSNNQPtgm0Fk7br\nn+LxOP0oRfC7zPNg/1N5PTwS02Qj/4ZlS+/dUAX4aX+9x0uwopBSPWa/BVbS\nxdbirC8mhnHB113V6xy9TE7wr4V24POGzqgfXKc6IqV8E+1f/folgOPM8QG6\nFM3qu5GNw/55xLh1apRumXUXcZG8MUEY4FNcm05IRgjZJ9NdGSJ5LMPr8cXu\nb7UIOoD3ptKfkGW4bT50L44NxLdt/cbo75vocFwIsFzdkyu9zgsCFbeUb13m\nj30U3re5ixsGTpQd+uNb+2X27qdS0LGYURuXPnZB/1Hw8DOchzgCRq5+wid9\npidG\r\n=KJTo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a591eb080c699d02013eb9ab0090fdd5e9813a72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b9adb7a0f.0","@material/base":"10.0.0-canary.b9adb7a0f.0","@material/shape":"10.0.0-canary.b9adb7a0f.0","@material/theme":"10.0.0-canary.b9adb7a0f.0","@material/floating-label":"10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.b9adb7a0f.0_1611358623101_0.7296549121002303","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/notched-outline","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32b611bddb3217d30a74044324eef618a4db7824","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.d29ec2862.0.tgz","fileCount":34,"integrity":"sha512-9eqjYXdJAzFa72d2bVRXH7IHQrunydpvvogTv1L2O4JXyfxsYRUX/oPY+eMa2VS2vyGO7dATlMiJI+yCWQPUdA==","signatures":[{"sig":"MEYCIQD/6afeH4Rn+FHb1pTH0l8+tPMzEqZfw2DioEdm8PB/egIhAPqzlkEDJHfA7oTR+XY7XFMmgKYEUZr9ZKKIOkTN861R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvDtCRA9TVsSAnZWagAAfb0QAIdLcv5DjuSkLUso4Mva\n94YsdRTRQ3CtB2VlWP4TYajs10SjERKgPAksVCAIPgq/NM352hjMol39UU8O\nUvVr//MBYzlzURXgg6TIeUE9BTDpjJ/+s23M+JYJL+vaUwFdkgnIPhwSNG45\nb6mStAmTak2N7Do+fqcocm+oM1r4uD8JZo1t6qRksbI4yhRbZmh1owzWCn48\nYzWw87ldezAk+sXNdxWpzbM/KeGrNWv7+Y3rj4uD+rHCQcxGqcXES9tmcDZI\nhiZj6VbL2iaYt6LlbidzQcZr8UFVTwG671EkiCIfA+vgjHtIohazUqv3eGT9\nrtlvgOeoy0vODhl3I8SXKD5qjUKBxqTxbIqdbtBqPqPxRL7FEDY1bGTIa8fl\nHEVQF8dh1Md62XyLhwmfZuwcCat/pU+2Mx3b19uw7STwgKMKjVw9lWZQpPL0\n4cOC/hxxL0Mnd0gk2tZ0beSc2yoVtkICKXKfIdFp2QYNOXzCQE7DQlEjE4uL\nrN1gDKxys9HAy/5FFabZqfOE5QaolYj6IWcXwc+8ozpwISIygzhp1uU9QoBj\nP1tQh7aa/it4pZ+SNmELxq9ivV4ux6PfM2n0yMIEMig7/E53r9Az2eV+CUQ6\ns9UHXHy4w/oDzt8yN/iuGnZgc9fnfiDmbwQO1vpbsHA6Fyv0FoxU9YHAKhC9\n/xOE\r\n=w0mI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1f2d18d6e94fa1f0808b7d768169b9f4827dc692","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.d29ec2862.0","@material/base":"10.0.0-canary.d29ec2862.0","@material/shape":"10.0.0-canary.d29ec2862.0","@material/theme":"10.0.0-canary.d29ec2862.0","@material/floating-label":"10.0.0-canary.d29ec2862.0","@material/feature-targeting":"10.0.0-canary.d29ec2862.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.d29ec2862.0_1611591917156_0.6634329608958616","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/notched-outline","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.96be07c68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92d361a2bd43157e66e61382fe6bf89860eb98b4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.96be07c68.0.tgz","fileCount":34,"integrity":"sha512-+rbIcXinSIN7P+o4z2/zwfZfQqZ6UypO+ky5xGoEWzo3jzJ5fO5wIaik4tTyxdE/pH4quABTlWpIyEJFVtRW2w==","signatures":[{"sig":"MEUCIQDGqCNdf0m8Y1nlUWG1nhyXX/jW5uEVEoibfLTjvc+tRwIgNL3rAd2ZSW0txlSrFuldfhSGXiC7ryRXmyZPGCeygEc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD14pCRA9TVsSAnZWagAAEKoP/jrOXdS8sQCg3tkW0/or\nSkzscfWwrZh2+KsSUXcJl81AGLr4bXSjLSbdKg/+5dFT+pO9N1p3EqKK//NG\nQARUL7aJVgaDhQXSE58TH6z1qCFZoj8xkC40DIHxqOBhsEBRvQMxNjubIfNR\n2C9MNEmLVVyeePBJI7bBjYyClzHvfLabyC/sB1DdXF3kfSj6x5OQcvumws8L\njYD+wfH4RPLH7mEKwNdo7VDixfpccj3jZqFrzzEWb0Hu/VDrBR01YJM2XkMj\n0zK1N2rShAAaHvRXYwl5zMXyM+kP2LM4nGMLOwRRrzlmS6nvUuv9154+43zd\nyR4jS8WRMK4JYOT9zzxO50hP0XyOcyueEolQOrpslrWrDXQ+M1EvbPPg5gQJ\nwkQXHy+PYb92sm3RXWLeXYF1TRVtsr4tAADz/PiiVHoUfzRdOEAuq6IKXGnN\nCwqyRDTA79wI5nxjD+Gs6aDPWmyNhdORWzHBqc78diGVokU4xvmUZqLv5oZ5\nFT1zSVfg5I4SFdQjKQ/mbkg8qys/j3uJiUPwSB4orEwK5BkgwUAjMZBf2s5O\nIeE/bBQ9mhAARsrICzd3ABobsQefExTkHUT4OLW7simpR/fAjaXlUTOd3lgK\nmTkmui8D/OAxQYlYkW+M0sgjafaanTb8Gc5a0fRev+SQoS4Ayk/WhVK+0oC9\n+1Pm\r\n=IAig\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ad510acabea4f02cd7399e109ef73d3b0bb52e0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.96be07c68.0","@material/base":"10.0.0-canary.96be07c68.0","@material/shape":"10.0.0-canary.96be07c68.0","@material/theme":"10.0.0-canary.96be07c68.0","@material/floating-label":"10.0.0-canary.96be07c68.0","@material/feature-targeting":"10.0.0-canary.96be07c68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.96be07c68.0_1611619881230_0.09089116551706633","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/notched-outline","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.e383944e9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e05b43c5f88a4b91e0b901e0599f9e0d7748419d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.e383944e9.0.tgz","fileCount":34,"integrity":"sha512-Yn6oA1EqZkleBH5yw1cgQahTGD2Yy7RGQtgNYoB02/STeb4LBnvdeIAesRB9p7lv/AxKvJyuQ4FPr5dtIKjeow==","signatures":[{"sig":"MEUCIH1VUGxFkSclGSMWAlijFYsllThgO3sq4Y6Qu+njpAJaAiEA1VEvJoY8RIVUtfGHK41UIdq+tM7JXsz1GQU75VMkGvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3ReCRA9TVsSAnZWagAAPBcP/24U6r5toJuECZp8VEWK\nAeSMXDBOnRICQc1NJBT8eushJ84m9YgvilQCYp67TmECW1CtSmrgr9PuVu2V\nQW7r4CUcMbqbRmkmU6gjkLU0Lo0vKeWT5yQ/2W3fI+Myl7d3JmcXIPN+Hj25\nBMyPLOF4ecUABJ0v6MbAipr1H+qNzsF9zsOcZvxG4ITu0Ztop45sYNZnVq2g\nowAVs5dKm5AqrrpUOd7vG/LVVIbXyN2QDIQxKxq6gOn6W/scpIg1d7p4BZ7U\nqKdGoktA8ICEM4yKVvaL84rXDX1xw93fVaBh1kEA+tK0ZExL1HPaEcTI7Fmb\nwympisv17xaGFxMha5/f5GvjXSbXMIqyqLUcY49C7uxKPJG2y8Fl6Im0ujVr\nMI0LNr/bosYsaJFblFqvvzGVXaQPesjrMY5Iev8tl4DbGnb1uXwezmtviRrk\nMx+7QCigmOkjB/VMwsdGlK0B7dCoDgxUoUWcFMKIGoagW86ODGacK/mw9b3C\nqUhUMvYVjpeVJyJt4pkx8b7N9mtBMdcDv/laQKomBRojmITgdHrXdJ2pPxqZ\nb1zyEqRVJ3xUVwc5Of9m5qJa0MX2eNTVfc/Boe8QhZzfhRyr2iI3wDR1xhZf\nttdZ4wntFw0aMwnXQBD4aoP71SpEwdWM1dvDBppJVm7VYhedPPyLA2qoJLl0\n9l4w\r\n=5vHQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dc6dc4efb9210fc9c70fb089edb90278a8ab66f8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.e383944e9.0","@material/base":"10.0.0-canary.e383944e9.0","@material/shape":"10.0.0-canary.e383944e9.0","@material/theme":"10.0.0-canary.e383944e9.0","@material/floating-label":"10.0.0-canary.e383944e9.0","@material/feature-targeting":"10.0.0-canary.e383944e9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.e383944e9.0_1611625565677_0.9215249448188862","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/notched-outline","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.623af861e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e658a48673116ca10d85b0493856b4d002d141de","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.623af861e.0.tgz","fileCount":34,"integrity":"sha512-A6gXvrpZri8mEno98sofg1cEk3Pc4bwN2Y8vfZrBQskqTtQfR61ZiSvWAXSHQ+uxrmVYH7W/4ae6T5dWCVnrfg==","signatures":[{"sig":"MEQCIDDBEYL2XazlwGrpRM5tcsXCe6lHjU0rIRJJrkIP/20dAiAurTwri5i+X1UiZ8tQtqSebfbdPTK/E/6LkQTI+yJb1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5COCRA9TVsSAnZWagAAIUoP/1kIr1iyYbl+wp7xzzu1\nRUyQL2YSGdweDcqFpG1nWgtDBuVtKyZdWi3BblmEiJPIgG/s53Aglq58jwzU\n/d3O88tYgbipZ83EuTY/7bspCJJ836fgCjUYNEAERi2hDxZtXljfHoEhxe2F\ndxwc7ED71KRQqUhIfjqDqklJABirauL0u3F6gH/EytG6f8bj1kK2uB1+zdho\nTZ7NmIRJ9GqGdArjYod6fjRuPQDnF8MZejSuJFJ4PYvgkzWe8zzqxBjuXN/k\nFS54tVUCNZlJTzrBUQcHRV09WfYV/lLh5JcdBgAfx5Ih1sD/Fw2HyvcIGTd1\nu1BOlA2crn/R2cXU97m3sUD3WQmZjTOO12r2hAUaStw0+OK94WzEz48Nl215\nwRjZaUYrhI2ajw6qLymlr6gV44X/JgB6U2OJpqI6pPd6DM1IQpo/i+mNpTi1\nWouuKCvZM5QQNZkjCyhLxoKkqJkawp68XlgsVRJSFrxJuynlvj5QF0or0ZPP\ndm22Y71NbaSF+pEkCLTzaekA6oP7ziSc1eUv5/ocBJtD1vo6LdQmHNZlkix0\n/TYJt+nbmkyGm//xcjrk+8we6vNe8BGUrBQ60uwH1N/6y8RNS3Pzb461cBeM\n1pYnh/OS1GeyCBAsgAjje/weotHiHdzCjjZdy55ano9gvnqrl3yKWZuRWuX2\nQcpa\r\n=lyvi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5906815761339487fac225651c29aa422211a72b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.623af861e.0","@material/base":"10.0.0-canary.623af861e.0","@material/shape":"10.0.0-canary.623af861e.0","@material/theme":"10.0.0-canary.623af861e.0","@material/floating-label":"10.0.0-canary.623af861e.0","@material/feature-targeting":"10.0.0-canary.623af861e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.623af861e.0_1611632781929_0.18495279022268463","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/notched-outline","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f39ef37100fc372b7bdda059f18b720a44587fe5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.6863fd43a.0.tgz","fileCount":34,"integrity":"sha512-Q0sYAx4OD9sHwmOFLN3kOJHy1vn9OWWOeMZFcP6tcTn5GUx6JCGcnXHv4Fzh4ea21cqX9VHAOZqKfYNr3NYkIw==","signatures":[{"sig":"MEQCIHbvrOFb61uWVwhDStiiIiSJkDDdUHThtaNfMh687jVeAiAiwHUWlWB96gHPn2o3IqSlpntrgzkGu00k+vVtbCZw+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIrxCRA9TVsSAnZWagAAaI4P/jdOX+AxZPy5geLrB514\nyP3F2hotxsnxiheqrBKYF7d40wQYaFPC7v6MGIRfnQuUXGNPweFvw5ZHxS/G\nsVIskybB9p4Qdz7YXrB6PY/Bp4MBaXqjY6jhGAg5AIzFm3UcrxBMVqkHGVWr\nZBT48RubOiJD1RjMhcDcyaJDarTSxSbcaedVGsA4frcw5+YKUMClZP1AeD/m\nMgiLFPMwar0RTBQ2DCwfon3oqamd/S89ARfIOheYbSZMW+mcOXwENDRfutYK\nvH5iz0wfggcHs5Sn1+B6JlFB6lJctEg//TmlGiB1+OcBHUm6pBYh+c+c691B\nq2P4woOjbH514jyB1uQBena7wFD7noitXx1hXPwt3wxzdwPx3m2Iv3fIuRi9\n54pneCc1w2xE7MWdFqcxBta3zn2rWbzNncUYF8B1ckNAOmZ90uLKnqNcHdxF\nzLadG7UC+Nd2tFvAoImJ2H7+6RgvJwO6ngCTEk5W/uaJKa4QXzpWpRMeO9gK\nvEqsXF+qSK9w78XAcEckXT1+nZhNwqqEZpyNyl5eUfHZzfjyc9mxMIywBomx\nKjYuxpe+1fKPf8qBl5CnCmn+4fNeuJz0llkiq3klRy10ZlaQ6oMZfEgeJjiq\nFbsgLCLP9snS7OKyzt3MNL72ut8cCGnJKUp4f0Vrq0nbx+90fFRerrBmVDOS\nYWsW\r\n=p2wA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"49d0dacd3a675991bd5b8c454304b1f10dbcfda4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.6863fd43a.0","@material/base":"10.0.0-canary.6863fd43a.0","@material/shape":"10.0.0-canary.6863fd43a.0","@material/theme":"10.0.0-canary.6863fd43a.0","@material/floating-label":"10.0.0-canary.6863fd43a.0","@material/feature-targeting":"10.0.0-canary.6863fd43a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.6863fd43a.0_1611696880982_0.22898157097786198","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/notched-outline","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69a881433bd29394276b6a7f05999aa92b859679","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.ea55b87ca.0.tgz","fileCount":34,"integrity":"sha512-IumkEh4cUuye1QMLxfpJja00FTtc7zz9foDCPVuvNYifzQ+x54wf1XaPDbIm99qD8kPfdRwu6nWoR1+t6pt8LQ==","signatures":[{"sig":"MEYCIQDNxDKRbL3H134Jm4y2QGYhu7mICYXGTtA+QD3qKdLILwIhAMaP8eqqoeGx8fJj+zt451vhh5vqILWBsasebEeGwLtp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKoICRA9TVsSAnZWagAADLgP/3ixow9o3Di1aM0ecs1b\nXcw/Q9pnQVGZjAEMYD9aU+BLMcDlwZ3Hy870w6NOmEppOpwvR4B5xpGuQXzf\nIx32Ly5aiVJIHVK4uqsAbcAiwphj0oySMhXqWOyzoVG6nJy7Dk+tab66Es+i\nSWpJYyLLbu4aX6NN6lsjJkKNBl1kwtQkgvncdRxbAQ5CE+oPZHK4UIfAkNGq\nTDCPvTok211qsTyDavmX08zxi2A6wHpZrh7F4SpQi4h7esXVOzDH13rPnCPB\nTddt1iE4u8P1aoW+UlNuMznr57OiHfdPRfEfSLY1zq+pKatRkgkYluEc0wAb\nxFrsseqlEFpVMrPnI9VE7vOgOmriFaup6Z/9QdJ4E9xYYfXzGooxkm0kfUrO\n3AlP+XNwNd/V8Ch7ZezlR2X8i6pfHGYcljqXDB2wuuWDAOBbqiURPiqZrveV\nvhVnzJwPAKsiGCs7RRfmBI27g8HoNoaJzuGoMW+jbFJzw1pxIOZiXuyTBzGF\nr7oLxeZB3nvqdM2lntjHgvVGUeSKUzTEs9mV7q0/6H0dWDfo6eCtjH9AlloT\nog6FRh6F2bvPgMqTmijPkXQrDTsdEnSRfWCvpi+C4+vjrnOHB8GLlloNle15\nqExR0g6sMdyhnso/eVcmPSzU9uOSJ1uJFVJgtnVopoOV5Iu06SH0zENF3FLA\nuMXw\r\n=mnzP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"00e7569feb0aac4c4dbbfb9b292c9f53adb608bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.ea55b87ca.0","@material/base":"10.0.0-canary.ea55b87ca.0","@material/shape":"10.0.0-canary.ea55b87ca.0","@material/theme":"10.0.0-canary.ea55b87ca.0","@material/floating-label":"10.0.0-canary.ea55b87ca.0","@material/feature-targeting":"10.0.0-canary.ea55b87ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.ea55b87ca.0_1611704840137_0.6007411070656692","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/notched-outline","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d4abf1066e26bbbf42b026551a77d4f87c2f0cb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.e902ff05f.0.tgz","fileCount":34,"integrity":"sha512-8cfnKU+/eR36KvDjVTwjTJeXg64j6z/KRa8ZgDsueq/m7VZmIkCGKFUOG8zxxfcx7De6EWrsp4h1OES+x+OPJw==","signatures":[{"sig":"MEQCIF+BMxHsdXAeTQOskAj6lblhiMOK/UuneeI4TAVsU6uAAiAOzmepg86bpd5fgUfOUeutZ1ZvkZ9tj9jbrf3HHCExEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK5ICRA9TVsSAnZWagAA8rgQAI5zSljVmZF7M4/RnV8P\ncuW8i2gVi3nEyAKIdu4fKfzXuybAcsSgpGmBpsfPPYBqTycxuneaTb05sbrC\niLTOmeqnzryHJ7fcalXP8iZpID8nPuhSfLZyGKI8W7ZmgkCwndPRv65dYFEW\n28D+Or6s3rzNJisweYensubR/Sp/BOzcu8XDikOak+3Z0u9D3Pe5clIov9Ly\nLaaVKPNDfBKQWjQaF/gzJc0xDLPkFp4JtC6ClAhZPUYo/yqgsxjZdUvBzRmH\nse9j9uYVgj/M3IvagRfPl2bWWxtpCQ1agnEjQ236nuhmeotQAyTw/abW7eiP\nMznu7FiGZ34teFb8LZERLEGMphWFcnnoWrtrvP2R0POVya8/jCuTI5MyFxTo\nFdyQdzxIAS6rI0g5eAqUWIGXACyPMyySuFuTTxaoWGXdp7ZTPbhr8StkdAEm\nB7AbOddS9mNat8fd2D5HxuJjlgUHMfvqATSAaZufJy1YkE8DkwBj8ApSegPs\np5ruJb1iGeXCMU9E7QuTheLofXPQP7EmtHxcscef/ZxxDdrr5pAgAz/Kh8Me\nm2QKbcBZwOipYHLBebzxefeHtCYt6QLM0D6gMmAQFEbDRMLRlp0mGc65ycxh\n9U3ckogTzcPz8nyM2AWtm0blvpccniSdXYb28roqcZdbXNb4rNTaDlcXxwA+\nZiQL\r\n=DjV+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8ae6ee07772b70becfa69208ee5a4849f86c2fea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.e902ff05f.0","@material/base":"10.0.0-canary.e902ff05f.0","@material/shape":"10.0.0-canary.e902ff05f.0","@material/theme":"10.0.0-canary.e902ff05f.0","@material/floating-label":"10.0.0-canary.e902ff05f.0","@material/feature-targeting":"10.0.0-canary.e902ff05f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.e902ff05f.0_1611705928129_0.13319384530998812","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/notched-outline","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7a9557affe644d70dfd689506fd44ed77a5bbbd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.2c9fc538a.0.tgz","fileCount":34,"integrity":"sha512-L5NGLlC3QsqssWDf8ug8eGeEWh7BLZU3cdgmz+mt9FQafTWnLEPChvAPJg/z0o73C6rE2VGGoOEY4rmKomsQxg==","signatures":[{"sig":"MEUCIGFiy7Ha2wLWEY4NNd4pWcezf+KBSTXqQBxPDR2SejnKAiEAgxdvtyxCw//Yq1N9Y8/kTjkbRDgRTMBEqPxsOSqPQOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELOtCRA9TVsSAnZWagAAekUP/1resecibJwrRmCPfYxZ\n31MyxJ5WYs3pozLPX/Vz5lw0RdJE0s1rYeIsJJf+qVz7h2+mWh2261rjEnnO\nDNXLyZQ4GjfzHdIT01y3bnKxvhgp/+pOtvSpWhOMaBz3YVaB8IyAY+NG/AY5\nQ76gWEn4tesynJTJyrNjwFF+WjZ9mTeHeCzfiY+3aVJwmNPGy7DDhra5t3Sj\nOLmeok7k4ejXUzoabl5QfpUkADO5G00fTeCo2hkFdircwQR0IwB8z2owPxTN\nTt02M5JEQ1YDl11J0+9mjcPyLBXjusqgnUPuZc3b7vUkm7ScMp8u7osjNyXU\nS0zbyugm2RhtAFwUEfEgq8pWYgvQOAcQOhoKLjtrZ1NPD5luA9gPEJ2Wy6ML\njgP8FHRDAJLeRpiV+JJP52gpk6D/TVMDOr3Fr10PQhN8Knk3sWCvbHJz73+w\nb5UpPLSr5j/tpnqpkCKYVD4C4QfvAjcQGWj5PHL9Hbc5GdfoiSQGRB3H+n2t\n29kyeyhwL2o6gtxDKZSiflDEjOTuonQiEJH2PDsMxib9EB1Q04nFLk5XS8tB\nJKV/iNu5wn2d91jBRVk2372MLBhhLZEr/ZM39/lFU9RlN82v0WTHdLNzlWeI\nYR2twenhw0iUOVdw3ldnEwer3mCcaIET6tkYuiWJfh4b/x4IV4WewhxTde36\naRGV\r\n=H4PC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4bc5fff9ddee1f7703010e418626d050ca883474","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.2c9fc538a.0","@material/base":"10.0.0-canary.2c9fc538a.0","@material/shape":"10.0.0-canary.2c9fc538a.0","@material/theme":"10.0.0-canary.2c9fc538a.0","@material/floating-label":"10.0.0-canary.2c9fc538a.0","@material/feature-targeting":"10.0.0-canary.2c9fc538a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.2c9fc538a.0_1611707309411_0.7687586664006083","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/notched-outline","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38a86d8c3dda1a2901366a0403090d5af40b33a8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":34,"integrity":"sha512-G7jcwEQCMFjhTS1BcBeyq6NWlmK/mNaRTcSmJB7sG0lACRNPjPIbdsNgpgFPLhCfSSpSzF+GpFY1cgcMKyQyVA==","signatures":[{"sig":"MEYCIQDAIr87Zf1ATSDzanrxCrw3pJhGfQpazdvYmfgFrbopUwIhAOTHCn105JqPHnzZ5l318lzrAy3g0XNd47JWJIx6JLC3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEMAYCRA9TVsSAnZWagAAAkEP/jVJFGvpJlUIVcb4HGTs\no//Up3CeQeaKOm68n6UVySTJ4jc9qcBwNMmOVBpAFHi4ksogEWgbmI4WIKgq\nGZB7vWOzezXdI86J69RT+hn+Lp4EokYV3jSUcZoQBzvJh3uQVqQBoqF94o8Y\n7+DliIAg5YKveUz2ZS1nB+tGfFXyj26GgAKPEyg7uW52uiTOiC9b3Dm5sTAG\nonEab1r0k3raavorrJKDixrXD0kZunN69xSH+NwktovUHeIKHvDEVMk/h8oK\nuRlvzpvUdUr2GbWuwZJMeGKEDxRWYriJ1iV2ii83kT09f9asunpZ1YAcD5GV\n5VOXvhlG50yFdOYde7gHzDx8AiVpeYga/aw7mpBQBUINLdIi/J0J/N/QmCev\n/0xMCU2GgBk97jUI0yFWT+/Xd9DzpAKTU/eHpnG2tzXQOxzHubsT8N+l9Zd6\nJfrtaenyIAyOvGxyVmjBQ1IqG1JPEdzazlzRmM5efbEodxLL/BbSBaStqWd4\nIlaBw9r1G7SMfeWS9JnNZdLmlk38PEPApXFBihlKq9JOV1nBQJc1Hy6ENgRO\nZBNvvccwow4uN4qQKDNiMuKA49Fu6g4whVz99jJ4wAEAaoJu3PLXFCZ0CfaL\nnC/P6TyYzXuLMznncJvavGpOYaM4n6sDrthhXPNzJ/iKCxEaPRPeKBKdeFXw\nuaKy\r\n=V22l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"557b9cd09fc15e60ea09bd17651230487a292b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.6bf56aaa4.0","@material/base":"10.0.0-canary.6bf56aaa4.0","@material/shape":"10.0.0-canary.6bf56aaa4.0","@material/theme":"10.0.0-canary.6bf56aaa4.0","@material/floating-label":"10.0.0-canary.6bf56aaa4.0","@material/feature-targeting":"10.0.0-canary.6bf56aaa4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.6bf56aaa4.0_1611710487932_0.08318756426720864","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/notched-outline","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.994873795.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bb386288a2b13559b45f14cdf0c5a4e0b5593de","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.994873795.0.tgz","fileCount":34,"integrity":"sha512-3Lco/GjWNuMH0Xdhq62Xa/Et7GUhvTqpDBsCF8ANR6A0xAJOrMJodVNnPYg8ksqtj7Xf+1YGNQU0CmXUHCiOvQ==","signatures":[{"sig":"MEUCIQDM9YsrMLn339cpEsPVeotlerW6yUBX1cFBeHiOcT0ZXAIgYj1BrK6UABf0MsfGIXjaVnJP2i7BKckDdroASvOAXnU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX4mCRA9TVsSAnZWagAAIScP/3tyBCBu5xwNXCcg3WQx\nwKumHR4oHvkPIdfzcUb3loFpfBtEmWLONaWGMoyx98zh19fhfpXJTc0SvXWX\nE3d0ec1o9NlEaMUdD4OMpFP//YTZIgAKGm/oRe3VrSGprnaAC2vhe90sAKi6\nNOXj5Qaw18i1ixeNAq2yqVPN0uGSHju0HiVsZ2yNl8mBpE5NeuP0LGm8/zsg\nTFCEEJdHfkJ9+Wop35JWM12j28aLwmF+jWHBhVjZYXg8nJ6yTDhrT5Xb6P3I\n4E8Eaksk9SO255C2ZoWou7R8Cf85lWe6RmErbOMpOaD7FMNtTlln8CLm75gf\nBx48biauNioMEgh8P/8hVQt+WF4FhZ0bXtsN8MgtFwvl7n9eDQbIkWJ0pmb7\nXUO+j7g0dTEx1dfbYcMcY0Yg/NB0HCDTYDqzv9Ll6+kKRo8G079pCEjWePOu\nilfvjgTY1bP23YZ0ksOz7aQ9AU9bBoDXl4mp4YGFIwFZkUDTJYRWvXxy/P6Y\n0Zu8bmWdjAKPDkuxhgYfNUNsWN8xmCA7/2eu5SfakwghO+Z91oMXa7oBw1RP\n08ab0KEKXP/bERWpJ2t8TRHdchwGC2sA6NDzsXVLADFEjKAJiosNTbrOtlla\nfa9yQ7r2u4aMKIFhvo2egf9lLWnHhRtFlXUp5Y/dJUCkcOynrH9WPsPLxAvw\nX9J2\r\n=o1EF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8d1337af6a27bed9f06167ca1cc1c996fffdd9a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.994873795.0","@material/base":"10.0.0-canary.994873795.0","@material/shape":"10.0.0-canary.994873795.0","@material/theme":"10.0.0-canary.994873795.0","@material/floating-label":"10.0.0-canary.994873795.0","@material/feature-targeting":"10.0.0-canary.994873795.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.994873795.0_1611759142363_0.045572225056524474","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/notched-outline","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"744658745649a4c76013a6827f15c3b01d59f7f4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.96878e1d0.0.tgz","fileCount":34,"integrity":"sha512-2O6vVGdbBMqwaBL0+UaRak+ouV3yAzQE5LaBTcTxUKtvjVrk4ivd5IKjAjv6Dots30ENqWHae42ops73tXboMA==","signatures":[{"sig":"MEQCIAIbiE6rFsdVh41sb6JR2HsA/q/P0c+YZoK9dxOhep5GAiA6aOvts4TafDhozc/1Pz6OP8ohdIBWalpP0rHTRE5RhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEar4CRA9TVsSAnZWagAAmNsP/3pHYsxk2YQALSas5sys\nOltZuZewNcAAsefCWC9knVRgrQjVvMJA58pRztrtZNt5jANOWzep3SeBk7KX\n9kCK8ZsnM75qk+qN2fBLXMvq4f9W2hSAzlml97rhuH4YxNmw3s4X6e8Oj+Am\nNU8ZBOpzeqpWC777juDjjkBUiG9Wm1ZpPsCHMHLy9PolD+qmk/tdRqiIBGP4\nj67BPYVP9zVkq4t3rP9g8Ed87oxAn3ZxV0uLqiZy7/WU2SuC+2MAgA7Pz6zi\ntNzMoou+2qGQ7c8eTn/LMoOaGgEL47cZDLwmsoCJ5VrDtzDbG02XbkR1cIa9\n9a7nxFkKKlEMYqa7SEjCcdSHlvMPKwy6fOP4seQ2KruGNr6fOo6COQ4GzFJW\n1jNeb1Hv12Nf24h/dPskxjOdSsZ3Iw0na0144WDSCgWhpkUjj7rnAunQl96k\nyCBRTwlMRGMu3vZvMdsCSf/DAsAiws0JRgPM3k4eIkd/0ilCiaPtlmZ8Jhfr\nRcv6/lB1TL4W1ZD+uxs4TtV/OQGAFEXvjt9M75hCv0swceurZ2dnYkrm0zO3\nsaXlIDfT1UaOxBBDLvLgndk67/tQw+Zi3cmR2pSIVm3iyL0s4KAkMKPrZrLa\ntluoAe7c3NtYgDSFxX82ZaMW46fEf+v6XpZTW3DeSmBdMct/E+fcB42pEP4y\nlcgs\r\n=rV9r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cc9f62002fbbf03874065eac25971ed2b49a47ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.96878e1d0.0","@material/base":"10.0.0-canary.96878e1d0.0","@material/shape":"10.0.0-canary.96878e1d0.0","@material/theme":"10.0.0-canary.96878e1d0.0","@material/floating-label":"10.0.0-canary.96878e1d0.0","@material/feature-targeting":"10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.96878e1d0.0_1611770615883_0.9527992323315408","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/notched-outline","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12dc8570c18a095b39138194a0e08382176a5682","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.3c117cdcc.0.tgz","fileCount":34,"integrity":"sha512-6aDfwIU+nPWySKj4zS1IkX4bZk1/k8XPy88THlsP+XAhyyejzrPLP6Raw8CyeKJu+WA3jqmJWciid66kgQXpYA==","signatures":[{"sig":"MEYCIQDd4Gsl9YY1mnrzICNOnLQxLNek9pItncSdF8cpGLBcxgIhALQIPVESA1SAPL82h+VQcw9sybhwsE81cBZGq4FoRhfy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbIKCRA9TVsSAnZWagAAodsP/jDq49FdfTBO74l4V6mM\nNU7d5oK62fs0NiLwDAZYHefgb4S1bqXUysZc1/hUpLgAKrRD+pu0/6bRPlmL\nSayBCJ9o8giuTtF2h6g7xQvPUVrflf/AMgwocA4vDRDWemvrWF6vzCNkyQHu\nuzTekW1sll/LByu+Bl4z1ajokbh8iNwyMlY6m9Bxnm1WmCVmLyAAHuKi2pym\nhyE3qbMPJrlC8qCMm8jT3yYOg9XxNski0i1AFcES4cKaMukDqtQWUviD3Vs3\nKj9xE1THqtyXL3gVcdCPDOD2+svWn2uBXhHzja9bwGzmTaRGhl1FurbeDKuJ\nDkKQp8KlWABHPMLMQ/E3Ub8oE0W6dfxnjRD1S5Z+XTdUDn7t343Ul58s3ctk\n3RSuTf98IkZQEv3mxZ8KmDAuvBlg5grt9enMQ2X+f4smw36jEjQjSKHrYt/X\nO6mQMZGj9bgOUTPbIi6hUeWMi9xuoYwgJDv9uVHINVZYDhS/D+Iv1zg6tX2h\n4LCqrGinWH3TN9hJ2ro+aOa7bxWa3zpsM97d2M2/zjUZYFoEUwDWp3Q57Hmh\nLBoOKHMq4QDA/4tpiUHNd5YGw7P8bKJ281K4/9snOvgniGhw8/EaHraL3VSJ\nK8s5teFaiW61Dscic7RjXr9N8+X3/mRaVOqs94pTMMhDhoFLbR2Pb9hxOdmg\nREp5\r\n=c4CO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dfd1ede4a4727199e63765d305bb36d91509dde8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.3c117cdcc.0","@material/base":"10.0.0-canary.3c117cdcc.0","@material/shape":"10.0.0-canary.3c117cdcc.0","@material/theme":"10.0.0-canary.3c117cdcc.0","@material/floating-label":"10.0.0-canary.3c117cdcc.0","@material/feature-targeting":"10.0.0-canary.3c117cdcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.3c117cdcc.0_1611772426032_0.8038899558753907","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/notched-outline","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.b411e7033.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a3b9c9cd57ce613cfa7af8cd4d32338f4fb514f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.b411e7033.0.tgz","fileCount":34,"integrity":"sha512-D0F7IK/jtnfO/R1DiJvZ5fsK0qawCkSh7kIoJm79oVG16jDgDyP5HvkfYuIbBbI+y/ohwM+NkaMkWn3JuFJdOw==","signatures":[{"sig":"MEYCIQD48n/ZVmW5UVyyoBxxqsQA8y26XnrZ7p56G8CZtl4ZuQIhAMAkA42WQImeGaDSJ2gVGe+wMC2bhr1HeXjlCAxO5F3T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeOQCRA9TVsSAnZWagAAgMsP/20Gnqr5xcuzilAMueQ2\nu+/0fW+RcPRccw8Pewh/1aUDeE1qc4bW0Vma1iqBI9buf3QPgk7+kZy8IbTQ\n9iiBS4s3qjkqSuTlsL9IjKMmEoLNDCMYiRmx+J3EfPRi32O6Sjv2lr7b+bjF\nWYMM1haTetuyFr91lm/T6PnJ8ngBSi2IFgicohwDJCqn7GXRzLMOOFl3xH2B\nL9kPkwuFU13X4XdagNtJBguLyZdga8bcBIuMp45d3/yjZsBrnG6PrjjA7wU7\nSDorjGUzZ18w3+/Bs0KK0QjeOQFukCcXMCeJVdhF7K0fpZ92dAhDtB9Purc0\noacLBOiKfCsyu+V9o1+etFC/GRwSwhETcdwLR0dm8x+PQZiWWi5lvEJMboRJ\nb4Jhw7FoEeXVd+6RGIx1mBnZTePU3+PR5O6DCSYmRH0B6My2cCNuaMrJljC3\nawdfsNrlEBH/wRSZMVrr59EZ0KbavuFqY5TXFHaBXftmHrkFwSoRIA6HqN5z\n9nx3ljlFV45jVdegFBH/KZdEeHR/t1wFFwieiPQmiw93X4nUjpblEtRV6oRo\ndzsnr6VPmDkEr0JjdVtX/+tHfnRxlKuxj+wJYeWbAvB/t80GyOAhNZh0jX3G\nYidtvv2co/Tv6W46r9Bn+V51U+sn/RIkJ1mXTy1pD+EAmM2ux0QLwZMPeZXu\nSQxm\r\n=xmIS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1d12550a6229cb648f6739f83d7ba5feeaa67dac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b411e7033.0","@material/base":"10.0.0-canary.b411e7033.0","@material/shape":"10.0.0-canary.b411e7033.0","@material/theme":"10.0.0-canary.b411e7033.0","@material/floating-label":"10.0.0-canary.b411e7033.0","@material/feature-targeting":"10.0.0-canary.b411e7033.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.b411e7033.0_1611785103768_0.12577249376126276","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/notched-outline","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be4d04fd8ac889a13b36a33aac8eb23a3b4e3369","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":34,"integrity":"sha512-6y8IesYmD2YnGRKbwgz9oCds9e3q7PRuBRYTkYs91G9NwMfeE1n9VDGlAeJ7HhuFFlXTp4ujGo4d7E4bvkPc+A==","signatures":[{"sig":"MEQCIElZRq4jF0fCaxVMov2gYQ6eAPFNkGMWDyCJ/Kc2V6aQAiAMcwtIK/LomtPaMAYNU/N345axxHxNsmJQdjiup6gXEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfGUCRA9TVsSAnZWagAAgKcP/0/5wMOtx6fV1k47FQUu\n7j1mSJ7HiKuuolBaQGCSDnfd/K5d45y5aawXIn2Q8+E6EuRq3KMs2qXwjTcE\nzeQcL/qeLrIhHlR2Q/cylSn6QUSFVNeq7K0WB9y0pYVDMV8f8h+zX7wdFFKr\ncTAZrm0JJoXOWwkl2ID0SqJhF+wsCwGYt0lb9ZELk7A2RbnxR8T4RbejIYR/\nbnQkIjwSozX+DBD9MTyZhal84cc/5hcLjnNubFILB7Tepf0rIuVUe46IbGDc\nh0z5A7gifsnVv4F4FXOqRcqz3dWkwdBUp5HnVxEQ7GiLbu0YNPYxWFjm5O5r\nU5wbP/ORcjBxAVdzn8qzylMhjcRv+uvV6eotFfkqWYhD5P0kLHeDdOlXWHqG\nIe0cXcZD6s27r9KyeDy7aGaQ15uYdLNw6JTrbdlOG51Sl1rpXgzgnwLVuIFn\nxCqin7WYjJwEAG+ghPvuLN95gBn6n8M3uI+NkqsgnDne8cbZxkwNlmsjJTIi\nhi2tkqHUTxmrJTUvrxJ6taZVT7T+vOrvyfBjurqg7Sax53HR9greBDWQF2p6\nCFix+WifXM/vm0k+GmnVU2iO1pNJQziWMFPe59x7/lduUpt4JXXokFwofhH1\nvEDnR/9yeJIJ1qCPRIhI0rV1jRK8hBVJ9P7iulRASdgBWUniyDDG9eu40HAr\nkkK8\r\n=VPCJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1635bad405a8d329ac4e844d0a2b5f3bac553113","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.a9ac16b4a.0","@material/base":"10.0.0-canary.a9ac16b4a.0","@material/shape":"10.0.0-canary.a9ac16b4a.0","@material/theme":"10.0.0-canary.a9ac16b4a.0","@material/floating-label":"10.0.0-canary.a9ac16b4a.0","@material/feature-targeting":"10.0.0-canary.a9ac16b4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.a9ac16b4a.0_1611788691545_0.48590896194177247","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/notched-outline","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42e79697eacbbe8623b21d593568e0f08bec44ec","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.fec7b42ca.0.tgz","fileCount":34,"integrity":"sha512-6oa2dBNu8v1WPH6iOkjaoPHJaKvgNXKFde+5vSXBlOJMnY3/EZ81JZWuW7OHf+p3dgabCsr4++L4L/Ylpr34VQ==","signatures":[{"sig":"MEQCIATU0gwaQ9NjYXro3Pbaoktk6we6Uk1a6+9ncOg9eXt3AiAiM888xhEtxpsE2FLRfQMtkH8w2o9VST5fmo9JqGp/+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw1rCRA9TVsSAnZWagAAVV0P/1FvdN2cFzdQtTJlxR4c\nRVQz97FtZp797Qp+NS1/tkSXAkdw7H/LVzo0PpMmYaJC8PsxEXiJ48LSirB1\nx989RI6MYpgB9YnWYqKgkQVhbHhZF78iv5G0irH3Y1O380UpmcuqmE9fqhI1\nkMVetEUBUOfaTG9BqoK3tRKPT98WsGIpMGPYQTpbASfSul+TqWbJMxUKSCw2\nxd5nFbAn+kTNK3l7RUf/Wv+kHrTxCUXCClLYwCQyfn9M8vkW4YgQ4LBce4QQ\nJG3/TlJvsiimLXxoUSsbNiMFF9T3un0+APZnfnSuqWIOJZFfDlZZvf9Hvyp4\nQjDjhGfSK8p/izk6o1HBA6M1dp06Bb9tfcozbjpjhgXhzAJJq6kk3IzM97HZ\noaaUbE3LT8Cvx2cHpVutvjjzkWLNnncxNkDCw2OCKrvavK5PmuC0uYtyD2G6\n0VNiRVNgQoRbcJNHfrCqPE928jgpN+Rdl+xOFWnAONSCXCxWxCQTQ0IA3439\njfqnCWa8aLCHwm1Ig3zrSOcKhCZzRI0Hqvbkljt7mmFRPH6GsmKCq5vuOLYp\nlURU50B+RP7NsNdMnLAuO69zsc6jKljSc4um0n9d65y5wK+FLQFMoGaTGCde\n6+stFT3o4YiQvcyBeFdu6ArzptcPfMsaAUFB12feAUwX0dOQSPajOKnENi9p\n/KtC\r\n=5G0N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c05b9618cc2b93ff9a68314dc20c83c691206159","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.fec7b42ca.0","@material/base":"10.0.0-canary.fec7b42ca.0","@material/shape":"10.0.0-canary.fec7b42ca.0","@material/theme":"10.0.0-canary.fec7b42ca.0","@material/floating-label":"10.0.0-canary.fec7b42ca.0","@material/feature-targeting":"10.0.0-canary.fec7b42ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.fec7b42ca.0_1611861354655_0.8919909323284767","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/notched-outline","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"048e7178517fec8db48c822eb0268b8b99500721","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.8e66dbfee.0.tgz","fileCount":34,"integrity":"sha512-h8CvIVHrAsPK8uUEduVts68hOQwpMsF+UWcOPtCrHZK93wEKQzHeDF6VUpaPYGHMW868+mVqCs+d1499YZkOMw==","signatures":[{"sig":"MEUCIQCTA5tZDOYhzQ1+jkn/kS27AkLVN628WLfhuCY86nG+GQIgTW1DLq0vs2VBjK8aTfQa0OK88G/fuUyYqkGo20EO3h4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGI0ECRA9TVsSAnZWagAAAtYQAIqXAAiklvXurzHZ/bCn\n8r/sniJjoMnZcYrQ+gwwx07tMyqOVy6n/AyVkWn/hVF+rUHRJhRCdhUuHN6i\n7KxzkxrM8nAP0FM7i0FOEkzstHgdh0bHNPXErlWa2aHLFrrQ77zXTsSAqWIZ\nFa0VdHm+hIm8DIHeuapYD/HO0L4TxxKypUTm7TyvVXiy8NBZJRfzOgbNJ+w/\n1kDjowc6y7CvoPSI6KcYL98dNxShw72flHsuA2shfw8atK33papFzBE8qxzr\nOS9B1EsjWWNE3PhFCQdwCk97k8VeFmcX6ZuW3wVNDRPEDFSVK6L0rPFJvhI/\n1J4q/dZGBuSzHIZO4lyC2j0osBLge+Os5IbWHG9a/Uluq4QIG01/ZJFdpPi8\nyw0VSoJbtqoqwFhk/uXJcaN0OENa47zq8vGXxeXjTrb2ADHz0hMD74r/icn/\nxT+fXwRIVcBTRO3Q8egihhM6c0L6ERB4XPKu+ZwR2OtbGIy8tuOItz13e3T9\nfyrVBtm8+NYtbgR6/PeneUT6F5peZ6hr/k1gyv9hVQOPp6vmWY28nhCeBMPM\nW9BnbFrzTG4oNGOAfRz7zRfpkaCgaO4Iq7KrLz9vf50MtAtNaj0+jxtSdt8w\nxR1E7wR9DVzwgOofuRhk+t9pjMdwkH+eVCIt/ZzRU8MYPXSpd59R4EqCkxqO\nXGwc\r\n=VdN5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"63606d4d60d94cbfccb1897812018e02aa13bd18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.8e66dbfee.0","@material/base":"10.0.0-canary.8e66dbfee.0","@material/shape":"10.0.0-canary.8e66dbfee.0","@material/theme":"10.0.0-canary.8e66dbfee.0","@material/floating-label":"10.0.0-canary.8e66dbfee.0","@material/feature-targeting":"10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.8e66dbfee.0_1612221699948_0.13949686085250934","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/notched-outline","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.637d15da6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3d5ff3a6b6ad13c6c7c652f4292c46493d2a2b2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.637d15da6.0.tgz","fileCount":34,"integrity":"sha512-MlqpBGdAAL41/odQRduAFHtj50d5vJGsNtGyrBkqSp8XsEOGbk6sgl8Xi6/V87kRzgF+eNvXBVzsTBdR1PjWfg==","signatures":[{"sig":"MEUCIQCPZzQZrO7a93vDhXm0AtGICMjK8HlkjQVLY2NcLvKwBQIgIz5YKI5MNfnDuAUSwODfSkJFD1BO8aMtTxR4r1I0zpk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ78CRA9TVsSAnZWagAAJRUP/2yoZo+IGpNyq+A6jywW\no0d/le13GPY+tOu7SjTfxXsU8Y+yOvhao73R6h7Mr85jva2ikV+5sPGomR3r\n3MEFJzv+he0/jvDGuOsgCxYpvZnjE6wq6RG2hgcZoGk6DKLQEr4JEaIcDwnI\nQwQDXtoKFNEhUuan4gmekMhif6OsprOsgjL+jKnvMXwUspRcV9gm24WvoK0a\nMUiNJ4xis2sZPeqkHXvtoL7z+MplfRwlXaxJryhL1bBn3ntrEmgKiNyBM3/F\ngfEDnB5PTAF5nueMJ0mjCKtOy8dXcRfqfq0fSWJs2cmJ0QiCI7fCwepWSZRX\nk6gihr680s5xlddI/6oVA2Wu5jXA/RMtfErT4qPEJD5i2K61edYcm75IG8g9\n4T9wy233HjXE7kB/V131PdlLUrstOMdYzpABbtXhEx7HaSmZ3mM+18tLRuQb\n67F/R1T0S+ccNYATiu18JEqfoPOK95q+q4wPmN2g5PGFaV8lgW4y3/9vP9PP\nt6FedIWPoYFdOOTMzW2hu7tqG3QHn4wNC1bAFwrGvqy1r9pQePrYdwGaunny\nSDETV2Bmb7CRgqEJnqn2oAUiig21PP4NkeeKRc2L/ckxvnwCcR7GAK+W+wIP\nyhZPdfYIOcBzsqo0zdfOtZ4CaNemrV0xGZv23Wt2gEJc0zM2uJQmRFthyYCT\nzHLq\r\n=Feu+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"264dfb09f81436a3537d88f2366133e250344864","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.637d15da6.0","@material/base":"10.0.0-canary.637d15da6.0","@material/shape":"10.0.0-canary.637d15da6.0","@material/theme":"10.0.0-canary.637d15da6.0","@material/floating-label":"10.0.0-canary.637d15da6.0","@material/feature-targeting":"10.0.0-canary.637d15da6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.637d15da6.0_1612291836265_0.4984869425181604","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/notched-outline","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.fb793939e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97e1d2749ac3bcb764901a4076c92be6051af3ab","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.fb793939e.0.tgz","fileCount":34,"integrity":"sha512-aSUzzfbp7clR5qP7n+jpXA8ubS//fuXe2W/Nz9o9hxVUm3aFw+jQEA30k9wVfUFOUKypmDkHvRFtC+5TTtK6zw==","signatures":[{"sig":"MEYCIQCTv+JYg7xuA3XaoxY+MirjirH4JzB2gE8MHWuQbQXd0wIhAJeUj+u7YS26smYLPRdOpMhKaEYvxN+4fcVALsmHQygN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGePWCRA9TVsSAnZWagAAaVEP/RvNqqycqGVvTSDoyGO4\nM4Fqu3zZjc1huEs80K5ZCzoueIVDFy5sAS4U9lFeRN5bt0Ofib//SM7EkQ3/\nDOG/7HHOVlzRTBDgYJq0Q49z6q6ANbXJnxvnlMSYFWQQUnHaTMikC8nSIXQP\n83PwPFmoXcOQ/sL20qPBGtGnbocfEVM9yyb4yRpXxOi7tnq1jFlJWM44rHCx\nwjb/2isxCzS4S2uUwTZjpFeSZJ3uLXXOdae32d9TPbdiWHs548Z2amkNqdut\nMtk17zPl0U0JmlwX31cYB6tG9WvxVEIFOnrWn+/Epcc8HFNZW5j3oS8PnFeV\n80iJM6Pnw5GNTOJhAICFNqLWe2vKrpRrDqXKAVgaCuZ9MOqkXXk6ESRSNrEu\nzGzn/aW057eN7GzjaXGAPErtEMITrrZDVG7qLQ14PZG5SQmxu95qNcpf9mBL\noHsG85PiVZuEJiYDi90CKiurhFduyIW2A9beqf5HMhNc5H/nJAPFPb3p6eqq\nIEPCRKk0FR4eydf8hrsosy+c0XXOLMOZ73C+CrzvtTuEDqLOc8GpNarC7r+J\ndCNCPFxFWSU0dql+zl09s+tRHkv3z6V1DT1dep/9Sn6B1Kqau9VnLCWxRsLv\nC9mPfBaALPnrDdojnMbcrCA7hhZFh7li7H3xSuDdHPzRthA/GYbz3JClJmrt\nZ8aP\r\n=qdAX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b89489007d2a0c1f3821bd2291e448d44723ac68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.fb793939e.0","@material/base":"10.0.0-canary.fb793939e.0","@material/shape":"10.0.0-canary.fb793939e.0","@material/theme":"10.0.0-canary.fb793939e.0","@material/floating-label":"10.0.0-canary.fb793939e.0","@material/feature-targeting":"10.0.0-canary.fb793939e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.fb793939e.0_1612309462204_0.934108048132734","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/notched-outline","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b001a841031bc04d04bbea18d0b42aef73256cce","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.15a4d40dd.0.tgz","fileCount":34,"integrity":"sha512-JFWfx5PX8TVUNJDboDcBvJxDmwJhhcSbN39klWhQbGq5oHLq+dP/36pH/AD3/Q4tq7pmnChAkVdgfqOlsuvExg==","signatures":[{"sig":"MEUCIQCgsxs2vW7HB/IUjFHaLCOIcOFi30+bh9P16435Nb2vKAIgQOPLcEFPUniOz/PdKAw0rW+RECxiSQQLFJUt7Gw5xZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGgg8CRA9TVsSAnZWagAAv8cP/iD44iy74CmZjr8Nk04d\nUI8QmKFMb/Z6tUkTTa1VCxC6h7PkNr4v+EgrKyUiCFwYNB36+V9LYh+BzSMg\nFOC3VqBXP4qLtX/4FSzLRMp5duJzcAROWRbj+MdyuprgjLar03yA+qRo3qob\nVe6QhU92PMo3DemN4RPDXGL0yl2YkELLzDATs2EvCb1KM3za6L9z9GgK0oa6\nl9Y1opXiQBNAdsKbHs9R6LR2fnAaDeGL5sXwGmFUgaWctQG6vL7K79iyyQIo\nBKL98r1Y+GWytSUDjV1UY2UAC7VMWcfL7geNHh34VYyPOghUU6zpCv+QmF8q\ni/jrog4IrQxSrxyrJ93rfX2za2t7O8iE3MAWSDfUO+DjuoT8qxsu+XWoslx9\nGlXOyaWAfePVBO/hP2fEDCNOqhOl8AMbsiB4bOZEgJsHMjs5loDm9ghCrGTm\nIPbnIZrBzq1WZ1GF5d3GWxPSL6Me9ZMih6jMIDWV5X9tJz3Sz/VLHufb05eq\np8UkIW6mWKDQbK8EI49II7BSXBrNmqFlFZpKulalnprWyl+ZTwzpezLML5S8\ng287sTd7VlhUWmRz/h1V5Hiycy1Ajy7x3D38imI2zsMWiZCHH6Okcc7zQzLM\nCX3YtsbK4/r8bMycMhwg55L7rKR2EY0Zqi1W8J/iqoyRdf+C+0JB/qn9G6k/\n6QmR\r\n=QbJo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a6b5f072852f1f101d03fb492c57fc97f7f0ca9e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.15a4d40dd.0","@material/base":"10.0.0-canary.15a4d40dd.0","@material/shape":"10.0.0-canary.15a4d40dd.0","@material/theme":"10.0.0-canary.15a4d40dd.0","@material/floating-label":"10.0.0-canary.15a4d40dd.0","@material/feature-targeting":"10.0.0-canary.15a4d40dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.15a4d40dd.0_1612318779667_0.2275659999663895","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/notched-outline","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6de41041c8c226b92c18854e08ee1b98ef4ef730","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.7a003acf0.0.tgz","fileCount":34,"integrity":"sha512-vwZ2hx8AIokVLMBkfi742KBpJS5LoN8uey2PbT8zyLlqfU7AAUt3CUjfv7so2/4aHMMhPY6ygunX8wh4tLWrpA==","signatures":[{"sig":"MEQCIGGXDYtqeNDd/CyOIk/d12kTvYDRPswlXDf+zFnUiDusAiBO4u29w/guaRMzm34yBISwPe9jNmbZKJ2QvzUldBQ/eQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG11lCRA9TVsSAnZWagAA0mYQAJCdBHzq2ZJNk4V4eMJm\nR+9oSOO+cZO9X73sUDCzEnjyrZER3JM85Zkf75BfZQRk709+AhVgGsx+91HP\nqWmpiPAkX8yZfZlCrnUU6QkTyLMeuSIMR+Ap3OKub7wXCHsL9iEuuPLSuQ6D\nv1Xc3nOyr5REVK9fXbjfUYC1ncAKzt/h4o83rkdD80jleubd/zKH2jMi/CHY\nlEREz3byziRCfbjZuHWqH+OKqiL0fIYHijSyTDHxyt3JjG0FJ6uGX7DRZSIj\n0+zzkgDI9gocuVp86SHqQKZN6Qds6DdqfReufKohXPP1hJC2P3Ni2CZWNCzt\nym+5QXSawX3mENBD4xHNRj/SLDLkSwT+cSDceyRcDzZud31JASb+ZzpVkqZr\n/SO1igr10BAw6E9AamhgLENuzJpy5Hppcvc3bPC0HuNk5hgQCf8AZ2B6ASn1\nYjR7nG49jbVr5Z5ztniw6eJ4xWFRQ6haoCeLUyfUQyp82C4N5mq7hA/y8JyM\nLyHflT4uPg0gXe4NxJkv0o0yeQCJH1oZeuh1Rpgew0fSGPSGVeGBQAcAVJRJ\nd367XVtAtTUbWn8hWGQy3xZLL6KQoDflTxvBZP3qNPGnYiugW6swnceDikRv\n+JdSvP/8RyjQXDL1H/iYMwwb2L2h2cCA06idwiCLzzhiISaOLEEucQM8pPOe\nr9+3\r\n=osOp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"50aca8110f6412e14432e118e1f9229dafb02d85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.7a003acf0.0","@material/base":"10.0.0-canary.7a003acf0.0","@material/shape":"10.0.0-canary.7a003acf0.0","@material/theme":"10.0.0-canary.7a003acf0.0","@material/floating-label":"10.0.0-canary.7a003acf0.0","@material/feature-targeting":"10.0.0-canary.7a003acf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.7a003acf0.0_1612406117306_0.7451100111902638","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/notched-outline","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.05f249666.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"833b2506eb1a67df9ac88bace8a21d00021bcd19","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.05f249666.0.tgz","fileCount":34,"integrity":"sha512-WI8BDoYXdhb1FULOCxRHzlAfNVrqK3cOtadW+ExPUGU31/6kXvBuBfj6f2wNEx3bciNaLpbU/vzEv9qaceIKig==","signatures":[{"sig":"MEQCIByTg1Ab/76+PPDsJcvO1QZgVj9YPVnXkKKvcp4w013OAiBA139a17qWhnRqqGkCXKQ51c3vSbFYJhg3YYKvZaA3Zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDQjCRA9TVsSAnZWagAAI9kP/2Mpoc9sizRfFfsFFFDw\nXIxSDVf28GRsTfNBu2+3lEIi09erFDGYMxVky61kkdzupELmImpr5KSJ00wY\nyB9EfQDRopvCaJvmVy1gHIndBJ1b9hcGbPRq5z7kzhd1p6miWm/dwosHyfwd\nNMmgpR2pH8DFpONjJzVyJEuE5Vtw9ZfEcS5A7VGsdfnvoPOUWGAEgrN10yJu\n1GHgGpVlpO3D6ILGdUaLUk7j5Z+nX6xrdEMGkfiwc0KG3K3bsTKuqarD0VDm\n1xlR00PPDDOrtGcUUPMjWr+lwsj/OtKfKV4Jfd4odK79OAP2RI/Pl0aaqQHQ\nSJ6d88/1TKpr/9jyEiBlcdb2M/Cy1amFQ+mWD3nKv2xNCvX55blkhKBm6THL\nBiNW/aUUAzlUNp3rMvpdX8KNh2w3wyHhPCgTrHhkn9EsgYS5xZ3MfjFuGSWR\n0RVt7JaZdJrIOA0nXjkHvsiEOThG9X9doMah8+MyCcEXoJ7N6GiM8H61iyZa\n1R2D+AdZx9rOBY1gjz5F71+86YjL8CH1XLbRltkQ+f4QX9mM1qi1/JX/cGEQ\nk17o7UDZNpLEpC5ud6l47Asy5y22rUtz9/9AKehAyLLDgAxQKRyFscfoOX5Z\nEQfiPY4Xe2q6uJCpe/AAYtZzoHDKs0JMgOFBhawHux5I12cT64lwzZRVWfgd\nzpVk\r\n=jTOp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6f1fffc7e905a3d49f007f288c26a4b5ea11dfd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.05f249666.0","@material/base":"10.0.0-canary.05f249666.0","@material/shape":"10.0.0-canary.05f249666.0","@material/theme":"10.0.0-canary.05f249666.0","@material/floating-label":"10.0.0-canary.05f249666.0","@material/feature-targeting":"10.0.0-canary.05f249666.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.05f249666.0_1612461090780_0.08134139914081717","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/notched-outline","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"308846b709f28d53f9031407b33891d77b40b7fd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.1a3a39629.0.tgz","fileCount":34,"integrity":"sha512-fwcWinSQ6eIg6muq0jqp6SDEyExuUpvUhcUjc+qpMPB69dh68nVdHw09cHM+f72mDZ+RWSrbjtrVrZtzAxdWLg==","signatures":[{"sig":"MEUCIQCJYA9JlpnK8oYPj0+QIQIG1Hd3LVlQRk5OOGETnXIfUQIga99ZfgrUglwKaKq6ESkzbUhkRRXQnxtA7avOWO30lUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHECQCRA9TVsSAnZWagAALncP/2vKZobEPdb1qY8XWzVX\nN18wgEqIH471kfVAScWvr4AP4oMpSFpWu702c9JhWz2kN8tSwq9lIdiwu+p4\n4RdymYK3e3ivpZww1DSR/aGWRaVJ0wgcr6Cm0zS1+Fw9jGy4ORnUZTFsewuE\nnaBioYDIPtLgcxA5ch2yllU0yOPSsYyFQU65heFMBTDiR6qnTDb+JyrDi0Lb\nFhT/iYbALkQjYKYwZedObd5GH5TsLSU+LH6Jnilq/cnl+kgmhoPeMe0dfJmr\nu9PjWlxHAVMThpoGQl0tLU9+HCHCK/FD5bldHSocZbkAaiIMtSSrNk/wfcQA\n3Ph95/l0l1svpm3Yv2DTIJQnmDsvTNy0sPxJIugnIRYBZ8uCIX5GLNnnqQeX\nx7bARgfJR50/iV+dtk37of3BuTXtAZZhancECgUyVOE+aVOuSomOaxBXWrPZ\nRZOUITmwqu4Dw07bTQSsmTw0cgMJY8/wmkMXJTDivO4q3HxofCDrMNqDvpEc\n20Ic937l2WyQZuZoFPPQMc87cY/7hIZCwhqz0sQJBhD0lFXJOFdWXWVZS3XN\nsn9Dv2W/oqxfTAkR2KzebjhH+v+XC3Kghl96ZexTM3nPmoQ2VzGNv1E1II2j\n7feUp3Azc3P/F/tp1AzcMN5Kda4Sx/9F6s/NT2tZGNjtynfwYmreA4ryFFRC\nlGb2\r\n=l9zx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"87d65275f85db5a2c4e630df10d231afaba36449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.1a3a39629.0","@material/base":"10.0.0-canary.1a3a39629.0","@material/shape":"10.0.0-canary.1a3a39629.0","@material/theme":"10.0.0-canary.1a3a39629.0","@material/floating-label":"10.0.0-canary.1a3a39629.0","@material/feature-targeting":"10.0.0-canary.1a3a39629.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.1a3a39629.0_1612464272161_0.12241577701203443","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/notched-outline","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f91e7dcaa7a86514b005817f684736f423316543","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":34,"integrity":"sha512-q8H70U7E/Rl6ql/w1+PvQw+RqXtnQChPsXQNXciF863GeRRQ77gk1x4QbiS8FfAkFaJfWd19MfCAd9KRlBYSIQ==","signatures":[{"sig":"MEUCIQCk8F0Ng1fmvIfEbOrjn9xNJLQRNeSYuubUiSOvF2htwAIgcnLgGODNtLfqmV3KYoOkwyXpqwNB27p5ZAL15x0xB5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHbYCRA9TVsSAnZWagAAjSsP/RvYfRpcwGUOMclLnlIV\n5qMBcmwdI4HOCw9dTn8sjWLE7sxePX+EI0Kadvk+Ewxh7q9Fbfe5i76k/fTl\nUo9yEiZUYs84aStVdatECy/yIcdejmQrZtEnATIgGv1qA0tFOew4V50HMVOX\ncToY6G+WjdKqcuuL5MS7qh5GZlvBe/W2b1d2vKLhgqB/L2R/+hj99P7GO69p\n3NzKoGbhPA1ibxm0a+/DA0M+MwYixY8jYq17pGNYTpWqj0WHo7jyuAi8ec/e\nr2MCt5OiZFmDDh0cnBT3x4riSH02voF8XGy358DND5VixdZuN2sHCpPerpHh\nBYT+Z0UGT7Nybvy5snpOwIHittthD9Sc5mt7PnEy4TPCLqDcP15QQYG5VNG2\nFNTyInM7sSfXgd5FsvTl1SoszJ8TuBzI/Ks9symdKOujGwqdQK97R0fpno1P\nc2wUHSfv/bwqGVwrUKIGNp0it+sCOsRMjJvXUu5gJMXlD4szwuY3rfguApwI\nZ1P8EmnYIcemzK5PxkOYtc+K/v3q1YdCu5GAFKd7Xg/m1Fd3+wMO1i2ZnqA0\nN4qgi848UiRPmv4O2WitiZEeTrDpXhd+EdN0EzSxOkBBgyVf2U9aI/hXKLgL\n/7OXYxLRl/u+/q3xNCrM56azyCBDRUBRy1ILiYfyhs9Q9IdmcApSaR76SySp\nvdSg\r\n=uD0w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"73f8ad23c72c2fe32bd1a9e5e102b6aca8ce21d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.8b1cdb1be.0","@material/base":"10.0.0-canary.8b1cdb1be.0","@material/shape":"10.0.0-canary.8b1cdb1be.0","@material/theme":"10.0.0-canary.8b1cdb1be.0","@material/floating-label":"10.0.0-canary.8b1cdb1be.0","@material/feature-targeting":"10.0.0-canary.8b1cdb1be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.8b1cdb1be.0_1612478167701_0.6480480831829738","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/notched-outline","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5438b527b7f7a1b54bda3a6a46266222e6aed2fd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.8271f00f7.0.tgz","fileCount":34,"integrity":"sha512-Xyqfyd90rvv3TwQSgYdULafFPcAxaGplrhT9ArHr3ZZagFt38h5aRSYjjvuR8J/CeaHPghHfI5pNXiVYxTSIXQ==","signatures":[{"sig":"MEUCIQC976bctcwe1nOO41QYILY9IsNf7f/+p5o+qn7wGFB0WAIgPk1ofLdyGszWM+4S69LDlQO/NsVj+c9pBcexadohFXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHzdCRA9TVsSAnZWagAAD6UP/1QqRryqcM/uM84m2kjA\ncPOgmBmgLXrff5HGvsRmunp1otJejIW+gtcBXFt5W9ReER8CrzZLZvvCOIoq\nHo6R1cZBMLVSgeUh9SzCWfjyd4FNCdZPrcLkxXqEe6Z+jBfRe1eAitLb5/2d\nPSKC1TU8L4xNQMIadGMgHyxzL0bFBRa4wH3TBF5vb4mVTv0n8HnQlpBEcP7a\nj5zTeshFpnhcq4sGcXrJX31VbHqGyXIuzSC34dYqnwkhoBSlzg/rq1TuuJOx\nuKGS1AHQXVpYh0RWaiDqFK38e94w8Cng0CSBWM8dv4IuQXbaGio1QboP0HB5\ni7/Z+ea3eQN9NbiEaNAc/NcOpTyHiZMahf5G1BoxZVHzqoW+vrYL7L7V9ap4\niBfBQzW7UDBEr8zKpuIHr1cxZclwLYBiSvjsYxFSzRQVK6eNtdrBgVxec0Bc\nqQ3JCKiRCr6ZHenDbQdYM4aUU/sfrIy4/46zQOCpfL/iT+Wc4/gi4wdZS6tx\nUfXDqtoKGWLWPniVhr04m1nE+MlyXXakGklu+k/hg0zs9BhGUzGxGweziE+n\niCA526JuVKUPzqPouL9sABtRxRLgYA4uUzdomf6BO10NENAR2kn6F/yJF817\n9CrhHH5zaq+lu/JI/3pIfdZMndY6dTsKLOu0lX7kdVjfQ520yPAiaSkl5u7Y\nJmqB\r\n=TwzY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e210c5292564fea23c9cedf08acd2b8ecf86e94d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.8271f00f7.0","@material/base":"10.0.0-canary.8271f00f7.0","@material/shape":"10.0.0-canary.8271f00f7.0","@material/theme":"10.0.0-canary.8271f00f7.0","@material/floating-label":"10.0.0-canary.8271f00f7.0","@material/feature-targeting":"10.0.0-canary.8271f00f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.8271f00f7.0_1612479709193_0.7571533360110463","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/notched-outline","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0-canary.533092a90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bca677fc6731c3e8084d161a32eaa591069af9e6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0-canary.533092a90.0.tgz","fileCount":34,"integrity":"sha512-5wmZMNPDbEiwrZDHYG5d5ABxGGtaNWn2g8orsNoydZY+dEpyJBdphs53pPTGK10pA1Slocj180oAEHVOsEy68Q==","signatures":[{"sig":"MEUCIA4QUzgB5RWcNHVkiWSJmTLyT9VuFXnEZ6opLnR5ovxOAiEAnmyYvIPFibluUMe4Z/wG9WLwxPQmQCCh0AWUwxhd1Z8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL/pCRA9TVsSAnZWagAAi8cQAJYeYXbJbVhrqQEPF2VZ\nrOmhSBZGuorril6AU/RbZ0W0YO/wMsFLC1MjH0+SmuLX5Zb/mVD/GBCKGPZV\nAXoHf7YKnbGfliMggalhAqmsnJt3ya4vuObmravJg8zuAEiUgQbIVztMACKr\nmibgidKbFdB5/JvEmOQrYv6huMfDsaqeCdcp1y4bmLcFnBGv/XXFnZUxugSW\nauKj+bi8oNQjF9KQdyEJnvqTwYXa+GJuw96+jCRRJMw0hh0xWldyj0gTs2II\nrWVjvaXhzrQs8zLuSjTuYaL4D8qOOx6iVGbARHSurCjQ0osBTWu7zt7ux8Kv\nV7aAlWqYbAOjJoKE5KTOBFlmHJB6F9bzOOnmRR5tV+7rEqakWgGXn3B00aKh\nqCTIoesUQJTILphYMXXo1hICp88Jbps9jFvaE3oYV5OGUHEfgSVvwGBWp1js\nUzPsHkQj1Szo4N0XdZcVxVEefK8vNJObY+TvZRW3mN4If7Zr6CE92FoFU8H8\nqETpcAN2+UJ6iqql2zcHHatLZxQXkXIp8HlgTaeN1SWzaKH1PFzWRJoZN3rU\nE5mx71VwJXQa8bkoiMO7ySAaG/yfVZzSkPBf7ReJTEzyuMXLGer+onZW3wRT\nT2gFptMarZrw02ICJjizTA89xNPEvjCXq1xoB02+69uA+LW5UsX0eSIV8C8v\nePmH\r\n=dJoV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1f76aa244e85ddde7348716259e771c739c09f23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.533092a90.0","@material/base":"10.0.0-canary.533092a90.0","@material/shape":"10.0.0-canary.533092a90.0","@material/theme":"10.0.0-canary.533092a90.0","@material/floating-label":"10.0.0-canary.533092a90.0","@material/feature-targeting":"10.0.0-canary.533092a90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0-canary.533092a90.0_1612496873457_0.8002794917387146","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/notched-outline","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c733ac35e718b916d84e00a125cf2a78810bbc02","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.633a9fc7a.0.tgz","fileCount":34,"integrity":"sha512-sKSg6/FHx5izGrMSxykb+fNV/Vf3n0dmKK93/8JSMIx5sBBnMJ4HrgN1JEOdAuwRtGVuLe5E6s58Uwjrge7brw==","signatures":[{"sig":"MEUCIQCXFdsfuuQickrD629YPqtDvfaAK/WXdwdecojsmdHl7wIgOsU5FFuc/PuhKpkgRty23i9cSuDVGHfkaePjZzd/0W8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW/tCRA9TVsSAnZWagAA56QP/1lIZnGEhnD43RTX9/Tx\ndnzuKS4ab2YvZMu4JQvC7cijfEkIn1M9TaxmTIHB/2khX/G9e+cdwRHdkGb2\nYQeXdeuTwQ9FcOxhph+6I9xYMU5Yts08r7yj5DkKolUbZqLbuI/dCCzdf/49\nH3GaJ/Q1EduSe2L+PotuYYw6WCL/pIqA1YvuUWxfaGVFJzDsDqHfMCfAf7VD\nSkIGgVwUo7ySi/8axd9T0drEnn1IVoTDqNJ/SaE8IGXQL89vCNvj/cBjKGWm\nY+Vp+5bXW4hGst2HR/dzjO/3t2W1yZsxqU7i67QxTNQMjr8xHNKsUiFaQNqr\nIZnK2pZxwKzZ518XgEP2aXMw1bWIBJ5dge3rMIr86+xartvIBOQ3hrBmqtWq\n/2/VXGjnRR/8TsXow2csO6HYyzdPcnLeiTZns+xxywreAILyjD8qgpd3GUti\n7psjtunR1t0dPUNXBGWe0HQURICbMvVHK81gkcE9rj4lUtQ0VvilNN9meZSH\nqVBStjfBVmb0yrb7oczcmnwe9jm2PCo/jf6x40iq0nTNuUwA19ahQYVeKvVo\nUsnC6M55EWTZBwpCumbZYjbIAuOQE/LiPaKGO7iq6eTFG+Vzh9E86Qv2I7KN\nezR16bU/p4b262TV1f3yoSJTI5zVeTdne9Uq7RcR0UKOqneYhuD2t2fW/TJ7\nSDgF\r\n=OaZo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9fe28e8829bc50c384861e340d551c0718dac053","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.633a9fc7a.0","@material/base":"11.0.0-canary.633a9fc7a.0","@material/shape":"11.0.0-canary.633a9fc7a.0","@material/theme":"11.0.0-canary.633a9fc7a.0","@material/floating-label":"11.0.0-canary.633a9fc7a.0","@material/feature-targeting":"11.0.0-canary.633a9fc7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.633a9fc7a.0_1612541932683_0.4407714994538856","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/notched-outline","version":"10.0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@10.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a38bf4860b93031c04a30820fed461134845524","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-10.0.0.tgz","fileCount":33,"integrity":"sha512-SgiLTX2Wy15EAVl6eve+5ruBpnmkN3BclB/6RARvswld6uXhJ4HFSM01sztg4QPhCDehyqNIZvo/LdtyK+99vg==","signatures":[{"sig":"MEQCIC2nVl0xp3d7ea7X65f+LlC3WaPDJTMOSWprLMGj9JIMAiBPzjJ65UOIDQzKIE7OAT9hp5oHIrOeF21+i5wbmyK50Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHXA7CRA9TVsSAnZWagAASA0P/1I+q4RIc+RG1UJR2GlA\nTngw17eFqNkNEGZOSz7vLoPZdLlKpRbKFnyDyBjCIWwaxmRyAZUEY2GQJplD\nGnOTtq4dqJmR9xbfPjWsvz0LKlcX4C8wUm9hBtmVXOuQG5LkjqXrqf7bn+Pn\n/OEKpRv/UfFAxyvn88tqY4IoFnS2UD13oD3p9QaFdNBOftOgNOuE530SbZ1I\n7NGPLcCaTcZnPB+viOmvuQzDuRTfn1SrauQhebnritxYY9Zi8QJnuR1ZB3Rd\npXLTSs4oUpDZguZXv6N2rlfquN3hLgXgsWNGzvbm1uX/83T9dPK4pMpQb/nZ\nL8HWiHNEluyGTB/d0eqoIG1zmzlmNhXvQaMPY3J7KPax1UH2kAIY2FJtltKP\nuPaT+eyypLYOzS2h7jHmDHDOpxVHgMHICEeWe/eN7rxgkDSPbVC3H7A5+H5d\nl67PcLyu2NrQTE0TTuVhOm5IV2/+2H5Cx+jOi3+CB2ps0HeNvcUmP6D9r8MB\ngJpAL7Loa5Qh6kSYzqaYi464/W0jcLW23QHDRmZDf34X0wt4SqFi6ULTtm16\ni0dg8rEVQZNHJvI5jQsO9v4w9cwfyHvpY9vlA3TNeI497/kXj2yERi8C/cNH\nMwwEQiFqp5YUC0HCaTLWBsVkGHvE+nCvtep9rNAHHT1KxR6dO8sbaf+hPZxV\n6JF1\r\n=E+v+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","gitHead":"633a9fc7a98d0d9bdc177bc9ccbd49beb25bd5b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"^10.0.0","@material/base":"^10.0.0","@material/shape":"^10.0.0","@material/theme":"^10.0.0","@material/floating-label":"^10.0.0","@material/feature-targeting":"^10.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_10.0.0_1612542010607_0.5949268674449271","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/notched-outline","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.b5227247d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"764d621018065db21dab2991493d8e452d4f21b6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.b5227247d.0.tgz","fileCount":34,"integrity":"sha512-3GTg19bzEqFAKZ3gMv6aP0cxckfiMgDKQ/t9cYzwT+zy7ZRktqhG79T5KefM906S/9xht6oor9m3taS5nd1z4g==","signatures":[{"sig":"MEUCIF7l1HnmDEXB7LN03Ho53dGS5+X5TCKKVzt0O1O+x3WtAiEAnWqTXyd7MHSaX+/XKlyOWWFgrprqc6dFdpPsOadmMHo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYO5CRA9TVsSAnZWagAAV/wP/35tYpVY6Sd7ePx7pqaG\n9kJkK2WSdu5siJC+9MOHIqU4Foz88iZn2qgBnJRq/X10Ks2YtJ/uII7SeY6I\n+nrCMhnKzmTnD1EPrz4c3DJiAA4Qi4t8Bf771sZGCBnwSBDJCMg/ODoXKDSI\nJGzZBxkues6ACF6VLX+hAHtWR4/OJeHALWHJcQM3/WcCyxTIsmN3/FaUMSVW\nnNG7jQOHcUay3nMbPSSUu6Sf2l3bPSgJk8Ylae7ac1rk3PhbT0St3+lniDJO\nI+q4SA+r8MjGqyRQD1B8A96bBbVYprHYoNRTYX/q6E8DOzHx1V1IRg/kuBae\nJ3RvwnB3OP8rgg7szSDayFEdO7bA2UtyF6hkw/FzEC5RN+XesgLdRt8WF1XT\n0sbWWDnxcQzTDv1Ty0t1qXEK5t3ZUtKG7hFloAtlx6k8Qg+zpedHdSIk8gY/\nVBIi9OnTsgRSxIAJhNGdjuTHgerqBoXLKZn9zysGuUSkSQVXZlZIosXM46mT\n9DTEi5izonWMRLZqIiYBW8hBkOSDJ7S9zJTRV3EdS1nXkAXy/kcTVcwhVMRe\nSzJmNB8w8MfhIn+nE4MFFsLWXNVVOeC449ugD63YkPnclU4W4L7/OMyO0lVx\n99x3pRNsJEg2ud5rtWVZDrN4xF+dcrdDS7ZIGJoS3dCWaRep+Ir97Ccmpzj5\nnUMm\r\n=Qcnw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6f733c52a8cabe9fdd3ba4c35cb19e5526d8b312","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.b5227247d.0","@material/base":"11.0.0-canary.b5227247d.0","@material/shape":"11.0.0-canary.b5227247d.0","@material/theme":"11.0.0-canary.b5227247d.0","@material/floating-label":"11.0.0-canary.b5227247d.0","@material/feature-targeting":"11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.b5227247d.0_1612547001225_0.36133284028766655","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/notched-outline","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.95322b11e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c82b655d0e624342d58af2fc4b5e9fcceefa1875","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.95322b11e.0.tgz","fileCount":34,"integrity":"sha512-peefB3Wiya1WagbtYQzRxfdgVVaw2hIlBM7hVGQyJ9PNq3x/mew662YYkv+z7q05Jny1DnZWUN9g5Ui0JGNdgg==","signatures":[{"sig":"MEUCICkah4x2cWAEORowXeDpG/T8vA35uGagjp6vrUADwQ3BAiEA3NsT87qaoXX/WDq69AmwWmX6d2QO8g6l93pNa5g4wBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdWiCRA9TVsSAnZWagAA+fQP/iWJhELVElin+Gr0+eDd\njO2i0QC2B3IIVG0E3CPn37d6YD4gPyAbcYZpHtS110EKkOWT/mTMMhr4ffqF\nCoe3kvJc46wv+VDQj834T7jRnjZjsBsjDD5UgYWzVAuC3sO3njQFvxsLZM2l\ntzU+Zv2f6VM9G7OjFGNNla6ee2xCS6a1tA8O1T/r4Ma/QEyRWGsUdRoZl4G7\nFNVZcgX3g5hLVSAg9qtmdFYTfy3cH3oT87FPdREb8OOBgOogtuCCStGl+rYC\nUW3FR90ND8R1ZA/uIOWEzZRCbQKvvPlcdr6O+K+sPzX1nMv5/gKRArXx+oOu\ni/M8FMVRXrBmIrFjpGErzxQPX7l/msYSLt8f805EbjIOytakQObmcLbLequr\nAMxeJLZFYH5UWRu6EVMcYKwZNrW6ErdWy9Nz6HWheOFw7Id6mX/NqCGU67EX\ncX61a2C0b3P0dB0KjXSC6n8EaTSK0QTuU5yMsiHdvCB5hmZvdD+EsmpJ+lx+\nZT+scSgRnBAgbF/R71TeZ/gLhjxkXkom6zYi1SGEbzNkpkW8V/5p01BzL0rd\n73UTofOY4LmBVAnYFDSAATZzBMBUp1VlR79ET77CMPG+mij7aSgU3G1//9N3\nLLlVNw/ojo9gzRjfHvtn2Xuut55tLcFb1V5qm//e55vxeX7KWIIZIh5dKJay\nvoII\r\n=4fr1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"96cbc49ea4bd39eb1c275fdae68b6bae32b59ad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.95322b11e.0","@material/base":"11.0.0-canary.95322b11e.0","@material/shape":"11.0.0-canary.95322b11e.0","@material/theme":"11.0.0-canary.95322b11e.0","@material/floating-label":"11.0.0-canary.95322b11e.0","@material/feature-targeting":"11.0.0-canary.95322b11e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.95322b11e.0_1612567969933_0.8465756605841606","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/notched-outline","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d400ac8ee1c708c89a6aa73e854c3202a462063","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.1f318ff0f.0.tgz","fileCount":34,"integrity":"sha512-dHjKljWAf2q3lS3mJ+Ixs1REb2kbWxHjK0RKpEBEuojU9ZayoLMUzuok7/LLCGdqgSu5u9rigK0xkyG4gRXd9Q==","signatures":[{"sig":"MEUCIQCklgSsIh0U19VLzvtD/x9Ju4sobx99mprjleyhPDQyCgIgfF5Ibx6SV01itUUDBWhbnkrE1gyKZpJUH+LbQ4uAVVw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd1tCRA9TVsSAnZWagAAyf0P/21NdoW3c7gZfmMaqsXL\n3AsI8z8x+wOIMuAzymCdLni25Trsd50iJSxcSttZIoO32gWTNbVp3OCJtgkI\nvnuhj8j/k2E+zYtWTW0+voRGVyu/POn0s6x9s+qosqIWX87m/K+g7A2sVIdO\n8D2cjjX3/fBk/N+PssYQg4Ftvmp9VPbXNvvk9Pzy3CgnVyGPw56gi8kvc+6x\nRzRhcFzksWSdJ+elDaw1xh6wd9LYsYSDdfyGNvuuIz6VOzxrWX20Cc/AIRlW\nJqix4EUZW/yUiwRuQMyF7GDqZsZ3tMINr816Sn5LXR1jw43zuXFPlwEcHOuB\n8fsljP3U4L7rccy4wtJdXe9/BOCK755AOXHTvkehWvboqTWVx3mRp93SPBSF\noEBqyrsO4JwBrV9RWg4fDwkTII6qI3shtGeQiuqntgC7dk0R4JQmj0n2L//a\nUGBGoDkVkcxnDAGe2UALZcymsiLl9CUEfW7GWixvmQejJxkjWd+YJBLbKwy3\nhARygUodUT8RAzDZocbttseS+XKUSf8sJ8BZI5nTaAuhI0vuVq/mf1wRodaa\nuIfrBau5ejNZQ98NOWT0gq+v87F9oQ+6FZvzWU+MTp2nqyVs1qnek82yDfjt\n7cFPu9kCzz3RmceVH2Kduk76nq1Bnco5HTwZ70b0Nk/W8KPFFx2sLlBzOY/3\npsCe\r\n=4VUS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fbdc53421d5701ba23a43e18a010bebd179dbae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.1f318ff0f.0","@material/base":"11.0.0-canary.1f318ff0f.0","@material/shape":"11.0.0-canary.1f318ff0f.0","@material/theme":"11.0.0-canary.1f318ff0f.0","@material/floating-label":"11.0.0-canary.1f318ff0f.0","@material/feature-targeting":"11.0.0-canary.1f318ff0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.1f318ff0f.0_1612569965101_0.3672023371343107","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/notched-outline","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f62b38ebdc9ac59adcab0084eebc94b35664954","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":34,"integrity":"sha512-aX08buuZE88hU9rwaiTums5J7UxQg18MCmgV3T3woTcU0sSCIT/jZdyPF4e1xuQZVpFPpr7FFnpMBAlYcKVbew==","signatures":[{"sig":"MEQCIALPamgnbq6H61BcECRo3sVP9BRNJqwvmWlYTRUhqoAVAiBFN0zqYYwV7xSG0eQcNUy1mgARFWYUeyiCeD95thJFBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVMfCRA9TVsSAnZWagAAfK0P/1mteQXnalKgGM10du+L\nN94C9wr7fJ6nUWvVXNu3Emn3cM3JM1T2sVxJl/hGylrCdJFiwP8rutMri6zY\n35ln/G1DhKhgmiRmMBwbrRMh5EqGC6p8tsXuALDqdBaM8rxNAJvWNtFqe1YP\nzUZFWyVRR8LFACKKwRIa3kpMxAHvusgqwRlj5WBEwUyXV6vDkyiM3FfGO6Gx\nKEJG+8TSKuTbrxPS8Jpvq4U2vnA+iX360adIyEVO5vy7PUPYaGirWo0wyShg\ndBiT/hjNS8IlLqKBZYKmA9jSEsOBoRuedSSzc7pu75OiGM6E2HuQartOa+oo\nR3wNjn96cNiUCScH0BfiVPLoHYWHf82U0U4b1SRlNXostsWeA9haHxvmDvc1\nYDmWvpAi+UrPzlHdTxofdDBj/mebeh68/ZOYzdKgwMCiOjGCu0srraeAn12/\nIO19JoW+o37TyZE69YM5+YlLeeAEzlEdgf36QkaovjicJMYOXywzL9uDMIpu\nV08s9lIctMcWPf44j9dd0Eb7DuSEJu8qkjT4EXuisTYtjDY7a4La+zdE/p3W\nmyvjJr2YiF7L/JdKv81S/a2JcrA5hh5OhoLB/faTGC9Wmbkgn0wnR6NpMI9C\nvxatssz/KUdS9vOJVLvsw8CdH+M8sbThajoZyUko54oBCxe4IrPyJ3+C7eXC\nuTiV\r\n=0njP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b1cf52745607ed664e2dca58a230a3b3849aa273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.ab12cf7a3.0","@material/base":"11.0.0-canary.ab12cf7a3.0","@material/shape":"11.0.0-canary.ab12cf7a3.0","@material/theme":"11.0.0-canary.ab12cf7a3.0","@material/floating-label":"11.0.0-canary.ab12cf7a3.0","@material/feature-targeting":"11.0.0-canary.ab12cf7a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.ab12cf7a3.0_1612796703490_0.9549164068587817","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/notched-outline","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2522d4d358d6568f3f5c2789b993b751f41327c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.98db2c5ec.0.tgz","fileCount":34,"integrity":"sha512-MfvRtqeMwrxDwF9EjRXI49ynznEAe6QlsRHNwQgD1kfP7DTjc0xZv9U7mDW3ir6D0L2LUP5E9KSg2Lg7UWer1A==","signatures":[{"sig":"MEQCIBknloFokgAOHOSFQWmdndVPv959Dy0uI5dEc46xlsLoAiANtjLGUtoi6TuGzndzz1uJJFU5gbqqCA0nJi28y45hsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVpgCRA9TVsSAnZWagAAjlQP/Av7SDXcLd+UxKLca2bJ\n9tCxkkXjoP4UX3vdETdmKheiWwpLDYJbZbbKiDuFzQ28ZJ8CVYuBXMFR2mFh\nW1ot+Rm5227XvI9RUiQ1+TIEy9DIxYeb4FRh4IKEmpCAaDNB5gDgVNuLt24G\ngPsNxHomii8V+ZfA0dLz3ABuOGQz1JIYsmiKJsORJj/Bjv1JrHn0L8zzAecc\nVHkUuj2rVQJUgWsBLCSMfRshAh7BgihEwRuPJiC0/3EovoYwisiOPnw9O5rY\nwNVFa2yLrk9fZOVinY7N5K56D4pIZhKDzwzAAGZm2AoMGtNk6+Fmcoy+OCK7\nrzgzVijz6anv81I129W3LtS8afkWZvvy7/2RFjw2oNcY5XfmfTlC6B9t3pl9\n6TbSwvYWO69mjzyeF6UXg1dW+nuGUwce4nNtwbi2+PjvgY9G7uclhCp2FG3o\nqrGz6T4/rtYgyJf3CKi+3XaRJBYrLKnZiTgEFYAcONuXDk9MWClE9LB7Rpbh\nfgO/624RTFVj3E8IMJmBPK3yrThcEehjFjjH7DSrvqyvgXPJK3aCcils+s7V\nFKnZYNrfkYUGz5s1isTR++dgo9oeqO5tB8BHwGMLvsLiADvBBRdDgTKaolhP\nWU+XBjeTsB/wVpTo8Bduaa5Kg3b39Fg1emuYAi3wdYIxkTt/P37me2TJCp1d\nFYyM\r\n=nVmH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cc1b9da2cd7b871fe0f5c8370793e0ad9b1a5f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.98db2c5ec.0","@material/base":"11.0.0-canary.98db2c5ec.0","@material/shape":"11.0.0-canary.98db2c5ec.0","@material/theme":"11.0.0-canary.98db2c5ec.0","@material/floating-label":"11.0.0-canary.98db2c5ec.0","@material/feature-targeting":"11.0.0-canary.98db2c5ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.98db2c5ec.0_1612798559560_0.6438070078067535","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/notched-outline","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26486525ed5625ccd926260db25bf3048f2842c7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":34,"integrity":"sha512-zO6tfl8zmD5hmiv2kGG0ABFlfvFteJ6/n6Uhx3q5gIp12YEQNd4xaaYM/pjgzr7BMh1yLRUYFtZTvoRA7ld5Tg==","signatures":[{"sig":"MEQCIGtz0zNpjr4Z2005U+4ieJTlnn2J3neVGtqYLPTch8jkAiBA0KrbkklIHr7x844fF80g3lXyy0HQBxNgtLf8hX3I3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXJzCRA9TVsSAnZWagAAYasP/1I1FjkJvpv/yHZyY9F1\n04+M8d1L6szkkp0y09p4W9OBuDGnSAIXOcChNNZiDK4TAAtJW3Ymia1HfF/l\n58gXNTRXdSfsw7DbTX6ywsI7Iz/Wt8+Ms+gBKB/QuEBfC4LaFXSPb/XmjDdZ\nRM176Fe0ZNOSbpvJthKnpUiV5lrWVmHgv+A68nAGvUy9jMF0mWrgrjKyqtuD\nIIAEdZj71etyBs4iR67CpxvtKXwAcxG9E+UFmWFjnUE+6NSor0UosZp7Dxkx\nUfsu3aKKVw7n1cLgT/94NHos8Y70sc0rnHyfbcLdvSpPSRqP0GjVDS55/HZD\nU1y1Koiv7+wOmuy0O3O9zOh/UKSrDjDFfk3vPjVcbU4Kojf2022K82FdBx2l\n9c/AiweohHDFHI2mqcC8LDjH7ZhxNH/n5tRQqYzM+fWZyjoPwsFV0wYDL6H+\nFaWytggvXLrv0u0SjUbhZo2uaVZv22HlBMk0tqORa0mL3M9pBxBOu02Hh3tC\n2qY+gXVTGsjZIyZz6ZPF2SLlF4yre8Vlet3vCof1AI8ABEAIlBd20T+stEzo\nU1xiGzogB6arGsjImK25cGUHVdW+catnSI4xGy4WIXo9qkf9vVtWLmtSJCXk\nsNyK0HjEtKG+9LjHpZaQZ9qxVcGpWdNjkQj1Fvbf1ZNdlY8UOo4S29kXDi1V\nH77z\r\n=pFoH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"aff88a7d3786743558ecb0dabd92c225698d2b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.1f86b9f6d.0","@material/base":"11.0.0-canary.1f86b9f6d.0","@material/shape":"11.0.0-canary.1f86b9f6d.0","@material/theme":"11.0.0-canary.1f86b9f6d.0","@material/floating-label":"11.0.0-canary.1f86b9f6d.0","@material/feature-targeting":"11.0.0-canary.1f86b9f6d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.1f86b9f6d.0_1612804722443_0.140436814470696","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/notched-outline","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6b9c1ab939dfd95e658004acc22fdcfd79b56b3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":34,"integrity":"sha512-APi9sFhuWHl7NltXBjPV1t64WEsarKrifJOkLWjDDOXIFB7Vy7W5UyCPx9k6Uqp4nFyOywMoIKUetpqg7+Abjg==","signatures":[{"sig":"MEYCIQC6OyMK/ctWBja2oVMuDzmuOpAes3pg3mMYYtWiD5n9oQIhAPjyslSeq5F4wSOtVAwQZYbca4D9Cyw4Krw7glEJFpBx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXyHCRA9TVsSAnZWagAAK44QAJAzrfYQ7zaFbK+8elxL\n/y8JZcQ7oErBYQHLQeuoxJ7X8lnnndLUBd7j4qogEHT+Dk/v3s6tEViRk1IJ\ni14nXy60yWaEgACbSjZgG6PNXGSIW0KC+e+cXOndD3Ad3fE7ftxHZTSvObkK\nJmUlsYcSnj3LB3eDVCga2drMbSoitkA4pv3CNCTjVJkqVcVIbXs+7kxwuOB1\nWMZ6A1tSiSKBDZDSk0iiCG+wsYuj5DOleI+YMfqYskjEXgfMoXku5mMokP+k\n3S8uWDW7vqk/Ks61npF2OVJ4ubnwkqL9NnxPPek2tbqOuoFFj+0HFjATuDnG\npT9BQLcBpaYbZ5qRC6wElU9uU6AS54S3hf55h/RZ94IPnPsasvZa1cFosE9Q\nxR7y7YkJ4JHs86GLHNHGldIdpDz4tpaPo0uGA8bPCOhkc3OxU4mLzo368ZBQ\n1Hqg+jps3Zl2x6a0zVOAZIhvenNiexMjysK3pwoHqFSu/Ie3xZKYRq+l3G/g\nEJ9AzSevTnVI5W4mjTqvnl736OkYCkfrzrCvgNwJojdCzV+53yoDuqRt0OoW\nJuIXGtHtG0+7ciYhobde8OVFnGVSd8cX+VlmHRUw6gGRGMftEMxQ5sDhCA+s\n40N+PehbEqMopGODNZXG/othdzgaXj8ooaLTXQjst/7lX/gm+ISxdIR0cbTV\nzt2s\r\n=Bb93\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5accfac22392cfbc1035dcad920093851b33cc79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.aac8f5d9a.0","@material/base":"11.0.0-canary.aac8f5d9a.0","@material/shape":"11.0.0-canary.aac8f5d9a.0","@material/theme":"11.0.0-canary.aac8f5d9a.0","@material/floating-label":"11.0.0-canary.aac8f5d9a.0","@material/feature-targeting":"11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.aac8f5d9a.0_1612807303252_0.2583701136157055","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/notched-outline","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ed600f58d226fd12538cd3d53619845d5cdafe2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.750e18fc7.0.tgz","fileCount":34,"integrity":"sha512-k+NoSXIqEOaTHnBcRr6iwVvjW8CLMkehbhslQX2DFsN8/CnstoDfogfnp+lR4tYKpwXjAz+LIpAKDqDa3WRe2g==","signatures":[{"sig":"MEUCIQClYIVV9PhOItQ8b2XOSmbnqq+XzlW4vtDwG0J4XUVVrwIgMyh83PGeo+arT3o+Az5SuwCwtkni3ykKGmEZK/p3NyI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIbBECRA9TVsSAnZWagAACQkP+QBi9eePckKbxvsSR4mS\nwMnSEbSrIpso2pq3GALqUuMPbHWfw0QB4l188u+WgjFd6k8fnJp1CjI3GTKL\n86cC65+1ORlYVrCfTGyFPY5oUd4lPB/LAZawo8Gjw/k98VlPc+IIrAQsw1yV\nOl5+gJHLfXYIVC1jmi28Kcdv1x46789k1nUTglPGrmMxF/5TehV641yrX7Jr\nyQDfVKs5CqJRIBpN4PS7BxdocvEksG1n4efGYE5+ZgiYejFtEUuCsrC3AayP\nyHqGfda6vARJTZ8fo0mZbUjBF2/7NVo2H08t7C/xUVXKnF2IFjwVdb2d0jDc\n1VSZyg6Ftcswp4ILxJZH2Z3p9KNqEqskv6Kvn1npVk6iqqPpM7NY3gDv+qk3\n+Tg4tt/78klAZXBrwsLqzOL4UDzxQuYRNLg16yfU7DR0tHVjLCLyI/I2wH4e\n+E8ek5N+kIsj66pK8uX/G8rtEjVljaNNjnjVT+WZVGYkKJv1KjiKgtlsWkoS\n+p9jmZq587NSbAs+/GLLrqSc1htQ99gL/qH0mM5PFCEcFkW8tjEdjvgQZGMT\no/CyvgOliCD/dsYYXez5/z9nhXbMz/dp6EQwSE8YRUOUjZT6TNaFeX2TdxBE\nde3rMCx6cdWE1dqeeE/KJC5DCrdJgMCeCEKZqmOiv6diKaWC8bOoqpA++aEi\nq0ii\r\n=xJJG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1bab3bfc895c50d4159c7b24b69d3ab3a7eb9e72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.750e18fc7.0","@material/base":"11.0.0-canary.750e18fc7.0","@material/shape":"11.0.0-canary.750e18fc7.0","@material/theme":"11.0.0-canary.750e18fc7.0","@material/floating-label":"11.0.0-canary.750e18fc7.0","@material/feature-targeting":"11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.750e18fc7.0_1612820548401_0.10117076329793684","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/notched-outline","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d08bf00ff042854ce2596c2d063dba9ff288ecd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.b62b1266d.0.tgz","fileCount":34,"integrity":"sha512-MUoKFMmbIWc2/GS+iDN3wRo9789I1wYDSfe+W+AFQsaceAUA93+caTleK8PbxPmg/op4HqzgYhMqXqwM+xhDQw==","signatures":[{"sig":"MEUCIQCkBQj8yJ2DzebQMsyOwsghncVVK0o+/VKROJaorWDnzgIgZuYTIBJBsLLGoQO+D9E/WBGBRh2TvDpF3u0sfane8MI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwRzCRA9TVsSAnZWagAAnQoQAKQZ3zlydG7SedyIGYPd\ndN+AlVZq9uyYQRl68H4gyR27PCFsnZ1li0+eiuNrXB4QYdwYRuFUanQMeWs6\nPcR7fhBU50F9gRe2kCmUfIXWVNSDwA7JR9uwIoSAoNpMDMY9UxLTW65RX0kd\ncsPNXtp3MGC/STKbrgpIuwC2kduF7Yx1nkg/q0gzSmT7MufADPkYlfYnEzcw\njs+bV1QnYKiEwD19vqnv1aIcqbku8GjgDo97lgHZB0rApUaluyecslH3BXpD\n7v/QMtYQgUyEjNUzr2Ay/erfnbkFJqcJB00SbzYuGeyh421k6UCYgJxLF6Ui\nV6hwS6a1yTdDekssD6LHApUnsJ3S+er2ZF0S3D1VUt3h3q/EH95bAZzJ7Hb0\n6yrj5fVUx1KeoCQn8wo6B1/1MdFzQOOrI1zUD9rdfsaTwKztlxuMJFSZ5pVe\n7sV4/wxJhTgucBl2aT4X5uPqT85OzS3Z/l1toGvqhdJFeDdmtkkOeaxJZW1z\njNsxlDMKTKnCViL+Y4Tlm1LZbULftEsTQBdFtaNBkcIMcol0J0/Qv5QXucd3\ndi5/I+TWpVu/K3wh9pPnu3BvPdrDM5bR8ZaJspAQXghq0yPRfdyHXqf9Cj2q\nZ8+QNj7zCj6FOw6LVpToKVqKSQ87RuAiOXFpP7cq9AR8SzcBDUzqVY9TKGHZ\nZ1+s\r\n=62ca\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2369de5a28b7ff8c15bb5f1b2ba96320e8a9126d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.b62b1266d.0","@material/base":"11.0.0-canary.b62b1266d.0","@material/shape":"11.0.0-canary.b62b1266d.0","@material/theme":"11.0.0-canary.b62b1266d.0","@material/floating-label":"11.0.0-canary.b62b1266d.0","@material/feature-targeting":"11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.b62b1266d.0_1612907635292_0.6962408026597897","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/notched-outline","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"385c649cba3b3414e76037b9f0944a2f146bf9ca","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.a6b3101fb.0.tgz","fileCount":34,"integrity":"sha512-/xoZMBRFzCciIYih0bgGSSsaoZLQPvU7ru+S3itixJHYNZNso1WgYA0AHH28ApOFPlcW5ILKR1C93w6tmZYgHw==","signatures":[{"sig":"MEQCIGEBowwlgkQYE0S45/MOZwDVppOXA11FuIxY1EAsOA2WAiBSRgjEKCV1SI6M8WBeZFS6QaXsEYul7O/SENrcM+wsCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbs0CRA9TVsSAnZWagAAuP8P/2Dx18k1LCBK6Dv2d+Tr\n23S3+UVfmji4SZK6QgqKpH7zWI+py+eCB7zBeqgIytec3N9cZzLhSnYglJWH\nKG63gawbuby7vjmLSknySaomxct0+8+DfT6v6J0Txk0KE+aQZSs7+fb9H3hy\n5BTcy5wc9xBZ/KbsJpz6CKSCvhXqbIek9+Ha263eEbyAKUvzOaNmdfa70O0v\nb7Y8dV/RwiOeLpmVPLP18vYl4aJk6PovO2NgU9m9IFryKSXPZ3kXK1m/XkYN\npUCWWZyvfBgdL8QjASGRiUh9KBP1Eevf5eCCMoArtJPQSfQKL/REjTqC9pE+\nkHsOvvsdjWW92pa3flwZownGE5nm4W6E6SfusldCOL7QC1aj2sKotK5Igxm4\nQA0kkiKjHBHWGI5Q+U3hGdv7trCth1CWH6ZbevwvU7apMi+5rkxxRCTtgkuM\n6Xwvj1MC03JlakJLlDKJuCu8HOPHmFOgmqT4p4Itp3QjM30mufcc9ukWN1if\nJvfEsh4GtC/7AwsgqXRAqfRhtdZvr7G/zezC5WEWKw7jmn+Nr2SsPeOAaafb\n8SJtH2DJXKGC1OaAlUCbUFYk7HVIWM9LDB6cOOOhm9qVxidvl+tAB4rdGgz4\nQGO9H2mxOp/B9Wh5V9iNK1i5ElEC64lfjNDtvA8whcqIk6PoQZfZVHtHykpD\njY8d\r\n=r/fg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4e94d35f86983ae07d81d1c7893ffdfca50c2afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.a6b3101fb.0","@material/base":"11.0.0-canary.a6b3101fb.0","@material/shape":"11.0.0-canary.a6b3101fb.0","@material/theme":"11.0.0-canary.a6b3101fb.0","@material/floating-label":"11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.a6b3101fb.0_1613085491965_0.6523112457030136","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/notched-outline","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.ed88df700.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7bb6c6fe5ce98d577eb592d2d695b032edc1240","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.ed88df700.0.tgz","fileCount":34,"integrity":"sha512-ERlqhXNfcmTidAyVKQZ9te/MIVymL7RdE5yokzesP0q+7PiZoquFOSOEsTaXDGrEKIN7bBEqhNeXyqgWZXHBTA==","signatures":[{"sig":"MEYCIQDIpGLGBae2nH7jlPGVOWXqbMN+xiNGYyIvT9y5Mea78gIhANIPfgaumomSmLVBjLBuNbZndakf+FwcpeZg8E+uw3L+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcbnCRA9TVsSAnZWagAAD9sP/2Z0M1ebqVAJ0lErDCjX\nILIFi+XwV3wcHfKM0gKcvGWbZfXCUYRTDl5DgHGRla/DciKEu/AvDTZe5ZG8\nehwNSfyADf1aL3u3Ly+NHN+Otb+ORVOb2RjkuXsBC7CIfW4vrlChSzYc91+b\nI8No1LdIBKHILjxk7/WnJLSBFhlLlg6LiFu9TgvqSB4x0KFNlDXQCUi07zpU\nPH1eAtZ99q+9RATZNYqD7nC2tM713exxk4MhRB48/UiHtHI0GCRGOJw3OAsF\n44lj6APcm/36RV2PQLDYbCBD180KJbodX2hecQGGnL5jkQhUX+ff6foQE3Bm\nc+b+dc/Sf5l71J+uZPvRR6OpPmkRtcMQsYinkZ4VWN91+Y4bpjmvucXfchlx\nZV+E2j3PA870a3b8nTbeqsoh/BgHe29uR4MlxPhzoN/RvtCxHNjPbTLMPpA0\nBPSsX1zGGxmcrshXTO/5sxsn9hKrPjZZCxBbrzOdMJNKQwQNo8XmC3x8cZ+K\nGkq3+MY/IBVbGGtW5mW1ICXsYvZ7YArIz1Gi1y7FRtRipOYHARShP8Hw0k/o\nsqszWE4fX42nKDHGUExing3FpeqEtCP2Z7W+ECwaHorBQPzhynvuGLSyTxyX\nFHT8UlOgFVGkQdxtUVLK95hzTOkBiluYF5AYawzNZwXN/Rtxe7OPVVm9nmBl\nAFls\r\n=9RSF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9ee8b051c4fdfde9d63ea193e791d71e20094867","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.ed88df700.0","@material/base":"11.0.0-canary.ed88df700.0","@material/shape":"11.0.0-canary.ed88df700.0","@material/theme":"11.0.0-canary.ed88df700.0","@material/floating-label":"11.0.0-canary.ed88df700.0","@material/feature-targeting":"11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.ed88df700.0_1613088486764_0.4281154407374088","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/notched-outline","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20766bad1985827c6afb79175774782836ac18b1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.d30efe6b4.0.tgz","fileCount":34,"integrity":"sha512-wpfvDY867z1SdtNGnuwjf2t8aDMTAnCnrUrv7oFtBO2rWq5F7h6YyKulnX8hfjP2q8qvFaaXwPr3bazQJAyYAw==","signatures":[{"sig":"MEYCIQDHv8tAQZQYRWEyibCKz0Kc/sVhdKDjOuHRdYji/maiAgIhAJj1DTJF/pj6L6oq6uYtI9eQLUcojr4LcgwVqmOJh8Tp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJes3CRA9TVsSAnZWagAAiJcP/RbqDZg66pNScYYPYjim\nPzNcwp42po948dRfsY+eZQGAd2OLVJhFyKDx1liqnXnpGtsDNqaU3qSwr2xK\nuhmhy44MD8hTeW9GHSWsztNkAoT3DjbmcC0YHmbIGQPG9kfuzYuQzs23aj4G\nvv2pcXhGdl9Z1ibY1W5isHjl74cAv1fSsgMRz8HaX58izOVhWZ8e7RRh1L0v\nSH1XCnYC9/IbHw8vthbXuS7PnbHCr1FWCAHzu0wRdV3i2ZfYve7wDvQ2IAdW\n/fo0pmyJN55fJc441renuRnly6N2WdpcQq1trYZw/rfOMkPwo7qgZsT9STo4\nRYCR49iIZY2JThDsGcXZCC9NjzXvjUZJkR76tvfqoe2rpQd07aLS6L+IaOaR\noQ3S5lPiDlyIa6x5CvQpzfHNSINbeuGdHPKhtrkh6zse1/XRXSVrBIe0uL0x\nmuLdundfSVeiQP11C2jgT4ZioGueeljS0z0cV6TZX+NpQzExsJl9K6YKv1/j\nMovPStp4JUFB1036cQjJJI2ySHyDXFdWh50x5Om8NXjUz70Tcze1J+d3v8s2\nuT5SbTfZkn9Gir1b48HNqw+nSIEEtTao/4flyJy5RcYEtbZTCueiHTgL83GM\nrx7yvkgNyDqclGSkqjEW7wgp0Gw2Ah/dBrdqzP5bAzwWK5137FGreqHtB+3U\nrwXr\r\n=Qs/y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0d2a46d4ab9ca5088511e4e0b5cf2b261e3e644f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.d30efe6b4.0","@material/base":"11.0.0-canary.d30efe6b4.0","@material/shape":"11.0.0-canary.d30efe6b4.0","@material/theme":"11.0.0-canary.d30efe6b4.0","@material/floating-label":"11.0.0-canary.d30efe6b4.0","@material/feature-targeting":"11.0.0-canary.d30efe6b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.d30efe6b4.0_1613097783056_0.8688366184719996","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/notched-outline","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28ec6d2d60a39b601bc071a5294a472377cb4cb7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.0393bdc4b.0.tgz","fileCount":34,"integrity":"sha512-8kL5Bx+zCHHxqcgUVFHOj5EEb19G9V8yr3oi+ZUWG1ZsvsvEXjwUx8RkFVBJh1aagoqLW5E1+Ci/46Y7uf9Kxw==","signatures":[{"sig":"MEUCIQC+JbIGqITrEDL025zhNwvyqfB/JJbjGxXov+8UPn4eNQIgXwnOkiKVNydsGSGnBguC/17Ym34UmjPvwY0HnOi46Oc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgTJCRA9TVsSAnZWagAAemsQAKFXP7jGpy4NZEZnfXTC\nokJtWV4Y6mB68Rty2m89f1fqDykKScIy7dSQcaul+JYFI7v+WIQGac5S8TUW\nT2movSIt0ijmrAUya1Y7oQlA9UUrg3T6pM6UP0t9bLIYcSdwqrRoIwmbnCLJ\n5V5HYQygGjnooL4IU9+Mi69GQRHYWpoq4Q6LogEJFONF5/jvQdoSFUJltcmx\nuN0CX0dbagqDRh44+aK2EaYmwdGqThgDi9hTjVtDc4PRZhARStO/8qexSw1u\nRZw8cjdGyfpFaxqcLN0Yw3WAo55ugaw7Rl4lHssuQgS5ZIDjbcgp2fOx002h\nY3Asq8PlYZI8zF7MAH9D8x2ltgpD70/9k1Ab6pv+vdkSbLRzm9zNN6hB3frx\ncHr8Ol3lTL3J2+aHEy1aCibGuFErhzvenDmfbDARKdLNG1yaqM+f2VELDkzN\n6sleb6Mzo6MQO2acKSjU+kXOp/cNhmx7C6Rx4yxtsuCz9EHspjKrZ25o8XPf\nT8qtKNDh4RGhwXZ987YT2lm8dx8CRAtydi8WetTKcDmHGE6jeBX6r6vXIIJr\nsuSDZr1WZPEbee0/DZAKIr45GYwW2ZHkgdj0tb59FWP4CC2Y+6GoU1NdpCi2\nMKEZGZDrZc0lJARi9hg678Xpf7zDZOTZ17qbnWBgNoAL7lmmqYbh+7C7cXth\niFlF\r\n=qM66\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8f241a2f549ae5b1fefdbb0c93ddadbc1e1705a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.0393bdc4b.0","@material/base":"11.0.0-canary.0393bdc4b.0","@material/shape":"11.0.0-canary.0393bdc4b.0","@material/theme":"11.0.0-canary.0393bdc4b.0","@material/floating-label":"11.0.0-canary.0393bdc4b.0","@material/feature-targeting":"11.0.0-canary.0393bdc4b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.0393bdc4b.0_1613104328946_0.6674204895738425","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/notched-outline","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddb518ea344dc863b8d58b8cbdac0d93e0a481b4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.7cd26af4d.0.tgz","fileCount":34,"integrity":"sha512-3J862eEMiPoxRKdwNHRzZ2sJ6M7EFcQ9lmUiqjzPwnEW0S5nzxUi9a6MxPZrmvjkIHvipWIy3BzgHCIkaMY4qQ==","signatures":[{"sig":"MEQCIDxbh9/PHEfWoxkxZWHJxBDYExqF2H6GXVvAsNpiS7zKAiBUgskr/2VDM9ieA48JRIPJv3qvEcc3u2I0kUKHLMTnYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqYmCRA9TVsSAnZWagAACdYP/A7QJIHgLxqCwQNbjUXj\n7Y50MXdd3Oc8ZHrzRPHXtkiwm7lMjQmgb/MkSBSPGMDIKlZgPfMcW68BRNHp\nnhuQuvmxgLBpw2DLglGPCHVNFK5I6W3jZKLJNW1OyAnHG/Ty+s3B4Lmj559b\nnSCQx5dg/Ibk/4OaX4LmvE7UXWBOqK2/5ZcSpyAu3GAWVwLC3VPph6WA441w\niHESobkQuv44raMvRvAHvPGBQvrQ39xFFoKFSVoRJbqF+qxf6lgA3Zggirvu\nshsrRwNA7PL+FVGKhnoWomMM+Er7/ECubXL5x3yoV5BOGzcfPl6lgSS8Zszg\nWDxanCPOcm4+a+v4ItBCCex5vR8HikqAM8twcFmqpsGwuRK02m8TWZO3sOpn\nsReiUKl/8dkQe7Lo54V+oousXggq0u77cCerObWlA3ghKAoAlk/HPpmWE6AT\nDOMcuiWrYs/l7k5bmFEpBCmk+4jADubsihQeZSUJ79r486uxSGm6Aqr2w0vr\nN+xxsgmRsdi8TYbOje4JhsHm9quyJO9XQFyBddVDfj4s+oVMaAeUyeZZcBNk\nMcj+fDl5nHFA0trWTPliXR4B1PL+94inb/aAmMh4MKNbF7UmtpTpyBX5wpz2\nyp0abvVgZGP8jq25PUX4t5yl0AufDX9hbJGXd7rDe70os5ZtJWVMUp+EX1fs\nqk8/\r\n=UJSl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"da78e237011a9e38abc623fed26601ad22a7426d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.7cd26af4d.0","@material/base":"11.0.0-canary.7cd26af4d.0","@material/shape":"11.0.0-canary.7cd26af4d.0","@material/theme":"11.0.0-canary.7cd26af4d.0","@material/floating-label":"11.0.0-canary.7cd26af4d.0","@material/feature-targeting":"11.0.0-canary.7cd26af4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.7cd26af4d.0_1613145637776_0.4144645182232565","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/notched-outline","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c64a571efa30f7242276ec9dbcdb88a4d61eaa8a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.71fe9a067.0.tgz","fileCount":34,"integrity":"sha512-KCoBWpwwg093WcX1mwYyUB5oBsXONo4dYqhEX+x4BRq65RzF8N0XK/9TIlNTl6BZ0pEajRY3ZkhVBT/zyWZs6w==","signatures":[{"sig":"MEUCIQDyKCj+FusoHCtbktZtRaGWURRD/S7/S0ImKgS8BrruqQIgJysdbLOh0UbdJmjFhlqCgOKJ7FF+TECDObz/Xa3rt5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq2MCRA9TVsSAnZWagAAsF8P/1pwBNAYu9EkBXfqTzIG\nk+XLSqYqHZabqH+g0MmPNhTg0QS31vOZLbvMjSjpunW4ew8ujua1EGpeXTGm\nG2vrnmN9v3Ti88x8xoosBKteM2KjaZhmQucCGtgtP9+2YiGiZ4GFsle9CiSf\ncYnMb9hm1xUWfgg20WpnPK5vWEuN6zuCthDEx7fBuQJ8ZvYbo0hb6BGiwau+\nMh6oLpsL3T4+TdKuELnLpDFKzQWLxYYevaDGY5RPEJ3nye/BQYcTH+tc55mz\nyVV2RfDNwNgp8H3pSL8PU0dF3BsbaNwaNIhw8Ow7b0ut+HoESKa8hi5p7vgr\nBDsTx87qutb2ti8wFr80GPcd3zZOBOHYMW9T1F/RI4RCn96Foyw1D2ehBHe7\nqTl8jkG8HkGd7DpYYQUvP+xiEkKJaj4bv/YMDmWPRv0L8GHjur8drpy/l1gN\nqBeHO8t25kkHWlDMKuX4HY+9/JE6x3PYnaw6upSFMFtavaGOETMHpxZLuejN\nxyczhYscI37AjjwHw+uJ1+x74lblCJjzabAxSfACRylFK61vmytz01tPVUZJ\nThOGaq6oCuf85vzhPA7TkqzQKUGQrQZUqhRcdxfS02LUdE2ArhdqoyPCxcaM\nLwttLBIq62YbYPxX0Xi0Xv6dBo8/QP+1Ey2wqAe0SmuHdyB4aS8M8j7Zhl+9\nEjA5\r\n=gnPz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c79890da6d0bcf08c3d7c57e31df805b50394019","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.71fe9a067.0","@material/base":"11.0.0-canary.71fe9a067.0","@material/shape":"11.0.0-canary.71fe9a067.0","@material/theme":"11.0.0-canary.71fe9a067.0","@material/floating-label":"11.0.0-canary.71fe9a067.0","@material/feature-targeting":"11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.71fe9a067.0_1613147531748_0.21485760474643567","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/notched-outline","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07b876423ccbde1226a36abe74419f50c32c693f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.0fd56a86b.0.tgz","fileCount":34,"integrity":"sha512-+wjWHlSj34EVU61NSfzBraLAgGepTwTAhE6L3AYlR+UmEXa1CVW2wh5HLXCcIxD9FhESLoVc3ck0Tc/vHfPoCg==","signatures":[{"sig":"MEYCIQCjRIHxduX0CKFQybeqr//RAjEdllaU7/6MFJpD88HDpQIhAOZWTfxJx/bZiIqu1TnArhnTUzmQD1gJQRQ/xyPkA8fs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxmMCRA9TVsSAnZWagAAPuwQAJoW/3IH9rcEm1HSK4In\n/7gQsDWEkmdFAfTmbI7v1PZWeHR/NXWD5/rDjK2y/0NOLngXEYQBPdnKMIXp\n5PAjqB+WU4NGY/G9R68br65QtaF/fFD4unTW4wJdJ226DhDrTh1tb74Nc4R2\ncWgMvAqS3RBCkbCQ+kZq1weKyv0Wy01KRKaMSp15sAPFIpMZ3MZd1/08L6Pz\neRUl4gHf+QSDYX8U6sCHnZK4pvCNmwOIv5VEFHfGcguN0+s0XfgmHBmQvXr2\nJ5UIonl1li7POg+IeZjYUc9yNfbjcQkNCXe2imxnqKmfcg0QVwUIujqdNJMk\nsEZyqftNva5f04wbxIGJKerEB+L3TUnPfFclxQZS7XDuhRjtvdGMGoPXHqVJ\n4dnr47qgLr8/nh73w0SzuzZkqOoBsuu+En6Q0Cs2Ao3GX/0zE2VPnICXIEJV\nFJM9XlSjhvmplRVlPh9CPQ7ZrI1h8xXHxorjyu6R6r0TNgJEzRepUxUv5ri3\n9s2Tc/fT7WN/9Xm/q3Z5ft/F+mNNSf5cMRbAPQHFHPU/EeIPSxzkLPSQ+Yix\nQQtqxIQcImvCMvjEU3pCBROdXOfIcI8gkMF6iCaiAWdYUNvg9w5MdIQiIaeI\nV6fET/u2vwac9kNpGehmuetVEyXZFkLZObWIv8w89tu5R9s+mcjR8yG8zs3k\n/eZF\r\n=spNy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b5d7e78bfa318c864343a15754f4c5ab98160ff6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.0fd56a86b.0","@material/base":"11.0.0-canary.0fd56a86b.0","@material/shape":"11.0.0-canary.0fd56a86b.0","@material/theme":"11.0.0-canary.0fd56a86b.0","@material/floating-label":"11.0.0-canary.0fd56a86b.0","@material/feature-targeting":"11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.0fd56a86b.0_1613175179935_0.45700720143638285","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/notched-outline","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1458de3aa58518741bcb1f9ca5e34ab561315742","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.f19bbc4af.0.tgz","fileCount":34,"integrity":"sha512-AO/6mFxgittOHppDwc71sdjkr+KrIkw0riAgJYYZAM/qbuNZh8/UjL97vwLaJSEqSQgphqZE6cKEUJQcK9TauA==","signatures":[{"sig":"MEQCIFuPnNrX1xSzcZnospevnhxYnBEI242ybxutqsZZec7IAiAvXezELh+KEgRok37ybYiECMkhRhamq1vDyTba+KsAlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLER5CRA9TVsSAnZWagAAMUYQAIyykrdw0C0RikLUU8Q/\nS88fmdUDXvqMiPKpbKIdUroI3A9rr0BWgC1APCSKa5y5TBk0G9hdHuFzJJUA\nO702a0xZLKxKyv83V7xJ42+tqIHW2c5Q49zxPFV/ArBLwkgQagbp3dKBBoeX\nrn/Wwpn5v/KCFI88CB9WWqgIcewuHruFk6Lg6fckjTl4yNU7L2gFYrhdx+vW\nh7gRSalpZvXyb3E0/eiLziL6L6YHPb/Gfbu1lPEJz9v/o24/WFmOeE8ayz3S\nR/ytSIKeB9YpLPEaQ+6l1Y0BkcVD2PBpcIWls9sLmqovtVJgK9Bc6vQjX38e\nB/xnJYpDehYSwuHznpvXa7mDygMGbcSwloM0R9hZhmnlIcuLwLnvYjxUkF0l\nxa++r97ArcHamoC1BHVIfwKZZMcRf9aYD2gxBQVj3S0JINfA1swjIYB+PFdK\nlXfAjYYpaEerpMJSFwfbdsWkfIAFi8zn+1NAeUzWF1ldDV2MsOBNcSrCz5KX\n66UMnxvU9qFMw2uXbmq/8aCyyEUrO3msWEPdkOHdSS8N2ISPBNCVAsVZrRL/\nWTZNqSZNqdE9bBWhXtPJEBFaerLBfLJImdhyVfvXkwZ293SBySVdC6UaEmPd\nMHCQbyjmC9+iPOH//jHi73MQ/OEJUQC7DqQKmvXxJB6FVtmkc09wGmmehXLg\n959S\r\n=3OEp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"842729c260f5a3be9fec8618b41657a90e725af0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f19bbc4af.0","@material/base":"11.0.0-canary.f19bbc4af.0","@material/shape":"11.0.0-canary.f19bbc4af.0","@material/theme":"11.0.0-canary.f19bbc4af.0","@material/floating-label":"11.0.0-canary.f19bbc4af.0","@material/feature-targeting":"11.0.0-canary.f19bbc4af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.f19bbc4af.0_1613513848584_0.9497055546439237","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/notched-outline","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84028c2ea231bafa465bcfdef263790ea70208b1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.f9cac96cc.0.tgz","fileCount":34,"integrity":"sha512-1+PcHAmjMtu1aI32H1nzgxA3+VX+Sp4oD9cCHGUDE6jmn+J5w/QPQ5lMGH2e8aJrb/uPYbRb75u34WRAP1I8Zg==","signatures":[{"sig":"MEUCIBd6okijQQUPi1vHc84kaNTYCtcU7NJlU1jlzCBJnlv0AiEAvMQrdDgjaLweI8hW/Hewx6s0FityuP1jME6J7NhQ9Ug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLUAiCRA9TVsSAnZWagAA9o4P/13Cm6iA97fGjQ1PqMT/\nnc+/7Yu3UcjKoPJH/Yn9eXFtb95YP3gRD//xJzSg32jfdiG0QmkEsie0N7hv\nBTqSjvVubBvtsufOwIKUjgoY0A8oHzTOIx43uehWMqqLw+HuY9gv4ckG1ZV8\n6H1QmdGMf+Q1zsoE+K5SI8G55f5k2Bm+GKmKM6aF8b1bxmBqx2bmdIXc9+DS\nmdTDJRpxqwR8SIaI6/+QyyEmLNiDbPdkEn992hTeoS1yWbdm5OFc+a9yRDh2\nf96stO3CYk/GA9B0ZVO4VeOgDnaDnVF5YPjGBP0gt0q/+kF4RnHfcCZBwBAv\nR8LUTspvG7Q1Y8U2/jL7yyabx3HykO+B9H+tBr3BT/fzyoP8eiGeLH455UzA\nTpWFkJElj3pWt+jfypZgOTBbrH5P/chpBItSg0hzch0g8Kk6IgMg14Y4Hos9\nW1TNRVnfmYwPwB4dMQdCMD1CVHCLvx6ppJj3LoU2DzwC8E+yy59VXIKWvxqc\ndgtjSL44FwxG9XqXxAWxJF5pc5TvbAMFdswWC7IbI3fvCD6aQHJyA62UOVTN\nERjD29psUs1U5n6d6II5NSogLSS4dQGzdl6QZ77r3CqFV/NeuNtX3o9h8nQd\nObxqdmjSuT3Ij2z/k4or/IdamSEXyVAhx3fRvpeiT9TQSEj34CvArxstsRnO\nJL6y\r\n=6XSA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"993e327235c8cd36a8c15095389eb149ada97cee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f9cac96cc.0","@material/base":"11.0.0-canary.f9cac96cc.0","@material/shape":"11.0.0-canary.f9cac96cc.0","@material/theme":"11.0.0-canary.f9cac96cc.0","@material/floating-label":"11.0.0-canary.f9cac96cc.0","@material/feature-targeting":"11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.f9cac96cc.0_1613578273777_0.7192072677059504","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/notched-outline","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"479151fdfed704ae0292fa612004c11d9570cce8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.79ce0878b.0.tgz","fileCount":34,"integrity":"sha512-4R3sbBcfhjYxgdWu8aFWst3JodY56fVLdxGt5BvBj3Wtu+c20iTgJ8rFjgawaS+zpSAkz74G6PAPb4MlboxgCw==","signatures":[{"sig":"MEUCIQCtI3tdaOuvh356sZp9RSFpplALwjsNjPHYKAw52ltL9AIgIJCZDhtM8vCfgW2mSQo1p8DEPtHhuzcbgJq+2kHftYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW3YCRA9TVsSAnZWagAAfgAP/i2Loe3a5vvEBHPTcdjT\nxDg0zxNyQPwkVNTMohIadRTy3TEibJ1UmO4N4qVi2TusEm7r0SNvEj6Mi+Sw\nz+8WWyFDm+8iNWfq5GfuZWjoGA+qOiu+/V9LoyDNt2dFFCZi7rCyU5Jmfe0b\n6RoY/q2+pNalAWgPnEkRGc6Rgtcv74+FWua4+Y9qjR3CXM3nv4zYhfb1Ba2d\n/jS29uRmh3E2cwNxutmPPN72an6wx4GNjM4IAyu+r51oGI6A0/sD0UQJazKP\nJxVstMP6JRQFvT/dR/jBeijYP2Bvs+seDNZdMc2NhRGtelqm3RKT8KU/njND\nQjfrlWjwjGOCTKldPeb33nkEs89wv+YRh9/76Qc20XYmqDTopGdfPFHuynj9\nzZ9PeR2yjFTrpDPJkSfX5O5M/Kty812BfM9b7zDFt+aMdzmrMvcEvlj4WEQ8\noigFGYwNpD5ojw2FTTD4QakeGtLfH1toNgxGQkNl4bQ6eZ9UVIo7JOvNXBEU\neQ+G9AWzLGz5sbB70dAu2Xfv6GyV6jiRF4pIIrBww6qF3rBmwNnQsOk6blQh\n/UtJoykOiF563mK8IHUlRsvcEEa1LoFiJ4NneDB00gBvp9WNIDEVJNvHgbN5\n0VQNhN3Ow8WUC2H64i6Z+hzashJuHMSz07WhUrwQUirmNUEBgY93KjLxRS8X\nGB33\r\n=TsEx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3941c218ed650b1d1767cd6b17652d4e1b5f7ac9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.79ce0878b.0","@material/base":"11.0.0-canary.79ce0878b.0","@material/shape":"11.0.0-canary.79ce0878b.0","@material/theme":"11.0.0-canary.79ce0878b.0","@material/floating-label":"11.0.0-canary.79ce0878b.0","@material/feature-targeting":"11.0.0-canary.79ce0878b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.79ce0878b.0_1613589975770_0.440266799660064","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/notched-outline","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2ff83f18fc3dfed111c5519a36b2424af8028c0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.d6e507b5b.0.tgz","fileCount":34,"integrity":"sha512-r89u1B00PXD/RaijoCNjI3f67h/5tylx+9uAW5k0prdvS4Xsddntc3HOv/tBR2D6dM3cAy76SMGj29gy4JiAbA==","signatures":[{"sig":"MEUCIE+2zEMJ0YRWEuZ6Mb2MGnBpcAxOj81OfjW5kLydaq1IAiEAiUzo5Tkg3ZB8EhWVWuVBK6lzh/3/1P7gwyOjbN05tcY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXWXCRA9TVsSAnZWagAAOA8P/izlOphbLhpo1ay/82an\nntgKKf5j7GwZquwbnmMDY+zg9PjVGyq7RoBg/1KzOdA42g6dCbxLa+CsTULW\nG2saNHFLJ8yN91wNCvmkZp5uS7Uj+d3h2Ho4vYN9Xhkjt029/PmVqFk2cVFB\n6bjJQH4NzZI0phGwIxwfOgq1/jTMNZaavgUrrAzhDdWR9zvSnaaMFA/QgMC1\neOeKtilsTAE2wlsijVmarhUcLmq50zqvmoj/5/k2D4bPKzEN/YqWADp0t3dx\nSyninx029tgXax+OlRXU74gZUa5grIOs6AqHrRcTO/fpeQ8VFOBmTT9ZYLgt\noM6tLapPvY2WK8gRgvZAXL8KqcLOVRWlD9tbyztW52Mxw33Tr/8VjyWcksHU\nMbuitZOIMW9WCLD/y7y4VDgJx27x2zdp6ASdA2H+/tYZTqt0WL4EMbVwGGvU\nw8uxw+3mSDIj4K772K4hZGupydtT6Z3YySr1VLtaSVLDdUFxjFfTvsOZDpmE\nlNLDE/rK6JShCufQqpCs1E0ow3n7kbCF2EOnDxNj9h3BneXRu81zi3p0XgOF\nr8h+ZpIyMRr+dE2yJ+j5X6c2915MqAunF5z4FbFYW3GXdpJ5+cWEm5I4Mn0n\nvYn2DeCBET2psd810ZMWylzFAer0YSVrrN1/N1aN8l/as3HTTUhmsex90PVN\nfu2O\r\n=+B45\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b20b73a4aa16995dcd0b73e46e4dc31f7914a367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.d6e507b5b.0","@material/base":"11.0.0-canary.d6e507b5b.0","@material/shape":"11.0.0-canary.d6e507b5b.0","@material/theme":"11.0.0-canary.d6e507b5b.0","@material/floating-label":"11.0.0-canary.d6e507b5b.0","@material/feature-targeting":"11.0.0-canary.d6e507b5b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.d6e507b5b.0_1613591959331_0.48037876919485134","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/notched-outline","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.f2658381b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4611ffaa631bcdf9a476186fd496cdc704d2335b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.f2658381b.0.tgz","fileCount":34,"integrity":"sha512-YZ3iPPb4Oiyvq2lFWff1cygKaqKjLP4pFu43dVzpCNZTo/4nqjzhGuqjLvxclyszZvV99ZMDza9gX9d3lo+JXQ==","signatures":[{"sig":"MEQCICeAv1HNPok4a81XB/VtxaRD5umeLud+ieBltGjQgHFuAiAJcHHc4PvSi/ASBvDRoSMEA5kO92us6QSwN1lERrpP3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZynCRA9TVsSAnZWagAAcWkQAJ55crp1hikoTIHzhUHy\nmczkC9aKrHPNzg/GiBvRCQeTmC5FgB8es0bHyeKBQvbpVETAAlSpusOftjTB\nhRzwepc2br32o4/JoFAQg95GXgX9X0SCE3EWV8VXTEnkgPMuGS0SFtxoWNKr\nyJuIBadv9ncyCQX0E8UpREc0Wq5reKmQzQ9DTJZXvH6v1lvjuv0s0mkjLFZ1\n+/slETg7BsM7ibvaHl4MA9Pe/zuU/RM7HhYnrtPc1pw/JjUCo9JcAdWaslGL\n89k216tdTnYrdSJNA5h4lWihhuHHFEe+Bct/Gst3h0UGUN/2Mk/P2W5GojKw\n2ETOu9axzF9h/cHhXlTwFq32BsWjXzlK7B0DuzejPQlC5xeQENl971SybXGu\n2N+rVxWZ8b437eCMtghiWcNby34QfJ3obmLMEZ7WgW1jphr+nmkdZeB+9o9/\nR0SMJCgeCVN33zJlkv423wn1F87Fjz1fS19aNabuQa+kMHUPqZB60MwvA5AW\nkidWdP3O7R/DsuKuiGn+P6TRE90lYPF+XV/1KXybIDNCdVLR8rmEkNzlJPeQ\n5YYJ9j3clAuBBYk5YP/B+tJOINP6oGI2zXjWL7CI4CaXanR6Xn+6DVUbIfoG\npLmTiXX/sa0ZzQqE1+x5D1p38sR8ZiFqpUZyg7XPHx4TNBblypDTpl5YzcvA\nsBzw\r\n=bOSl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bb1b60f60cf9b1a4184aa52e590bcb4003d3c09b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f2658381b.0","@material/base":"11.0.0-canary.f2658381b.0","@material/shape":"11.0.0-canary.f2658381b.0","@material/theme":"11.0.0-canary.f2658381b.0","@material/floating-label":"11.0.0-canary.f2658381b.0","@material/feature-targeting":"11.0.0-canary.f2658381b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.f2658381b.0_1613601958568_0.25945399522469703","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/notched-outline","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"025983247d104d876079a290c24c6ce29c08b6b8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.97c4d4035.0.tgz","fileCount":34,"integrity":"sha512-lQTGohGqWI3TwF2WPmP6nmNSP9ydtAutYE7Hi7twcJe52eKc4jw8xH1oM0JNTkspomh/Q5nPBD0TpU2QyMfVqA==","signatures":[{"sig":"MEYCIQClzZMmUyBqVuckoqnj97Pl6LhIoJJ+hp6fB92rY2ab7wIhANj/gNYU8EyjdOGMlDyQn10r2iC8gS4kA9hVHZPtPFGZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdKfCRA9TVsSAnZWagAApNkP/1+sbnDwuj/IIJ2fzxyj\nec1/f7yGeVfqXq2iNqSzbk4VkSJSb8Toq16aarRgp4J9jhAhrBHYr6u+aI0D\niNXdodbNSNoYghbPjGtXL6jQmpzyuZcdYENt9JWWSReOjGCKw00gQ+CA/Z6N\nZ7WnWSdymT9S0E+NNJbHG5tVm+xuTQnCbVc+r1KuaRka4WOQdzHjioc3dU62\nzdZCUpZ/x4ngj87f4t+BNasOelKXPTSoSaYz2P6ei0zv3/S0+nMQsYseRtS8\nOxYOW6mU7b5tMieA6UowezjH3uM2kiscj4QuJNCmneJmdykWNPmnH1rJj6Ib\nqD+kjMVCir6hSpQM8pBhoRcQl4/XAFrwjKpYttWQJPSNPj0BDJCDEYDRvnW8\nLxROxvSmAmr7xVSuqBR4sMGEp1wycKkji5NVDuQyoAYqV1TgTp6fNr8Sh5NG\nzTNiaAhH6WLAwLRqrluZYui/R+1d1Hq+rVUXLCUXGolLxxnF4/4/o25kIrUJ\n6tlHegWLtS0tyb1m4tMOXUrZFV0g6o4cbRd77RfB2scEt5c5gDXbW1LiosPD\nuePaLjpc61/+Qugxn0BX5Wf7mOoQIz1ivhwpn8qHc7Sc70l0HGz6kq6qpbZq\nHfOC5joFDC49/Mmhm4lSVl8M022neQeQPVJ8pQRmEAJzioYhpks2bkCb7LNL\nm1hK\r\n=9GLx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1d9a223ae17277dc00b76dbbc4263232d38e50c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.97c4d4035.0","@material/base":"11.0.0-canary.97c4d4035.0","@material/shape":"11.0.0-canary.97c4d4035.0","@material/theme":"11.0.0-canary.97c4d4035.0","@material/floating-label":"11.0.0-canary.97c4d4035.0","@material/feature-targeting":"11.0.0-canary.97c4d4035.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.97c4d4035.0_1613615774721_0.04075437574931873","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/notched-outline","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12c343ab8fe2a231699277e3760089e902886bac","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.f5bb4648c.0.tgz","fileCount":34,"integrity":"sha512-YYMBvp5tjK4Grcdsg6zy+gD42sSb+Fmhwd3r5acmBeTZUiuvgq6+0k5wNINwB5qtxPlR84i+rweyiPYbJ/xpeQ==","signatures":[{"sig":"MEQCICny4Rh7L+nvZlhuFy8Jhm5gjnmr6PQZmqIIlwRHv8WhAiBmkPBBVeImc4uWKh2p/bWPrDtxUqz3krafOEwWd2ks1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpCWCRA9TVsSAnZWagAANU4QAI8QqMMaCFoLuIsh3lku\nP/aIiVib+juaeA1KgjjKpRzkBIMn5KhcdT6vXW66CRbB9C4XEj7WLiWLlYwI\n/HAhf36TNvKDkW8URY9jvrsGoLsGaGQGtkfw0d1aDhIiwlZE9yi6BOoIgEes\nDBbqNLRExmAC2OfSRkUqtZTYIUQkg2JjotaVCp3fH+afqszacClm0WfvKHqP\nuQBdlXDCHTTLT4f6XGEBekWrrlbLHInSwkP28giA7/V8ar5vCEh89gkq/JcH\n+ZniAPBEjYP9/tP6MqDayJAUblrr5RRtC0mATCnO3ua0N60fEjGIhB+rkYuI\nIYUO1AZ1lOxCC6ArRseBLUeqxRZqzostXyNAH/+RtIUlXRw/J+ltDosSO6hW\noA5mKCraDFPYNykBJlgROJ/Gp51sGb9k9Hf93B75pEucAq4bpkBhzyy6qKvf\nU1pmJgwZ5q8dDYSamoNL6/Iv0EGqM8rl63TSlxDz7bTGaWF1HO0/ZSsWpaq9\nqUyacSoyXYkFv9IWc2g3LuqA3/HoFLVB/rGpWQ9KU1st9O1XECw3fKcix4yW\nbD4Wu2Nma5AaT/t+fw5mj911MO/MMks3sA+lUGTX1HPo7DX5/Auh8LM63rqd\nTgtwUD+B4xObuN3vCAcxy5GOVDfz/ABqn9QIH0kKtdIWsAUUPHRev0Xhft57\nbyNH\r\n=wrYy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3abc3c2f94ce48fd3a6cc689419e03b8f7769ce0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f5bb4648c.0","@material/base":"11.0.0-canary.f5bb4648c.0","@material/shape":"11.0.0-canary.f5bb4648c.0","@material/theme":"11.0.0-canary.f5bb4648c.0","@material/floating-label":"11.0.0-canary.f5bb4648c.0","@material/feature-targeting":"11.0.0-canary.f5bb4648c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.f5bb4648c.0_1613664405929_0.4120010687856397","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/notched-outline","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.302c7a960.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9e3eacb4178d0a74677d8d0893724943c65a1bf","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.302c7a960.0.tgz","fileCount":34,"integrity":"sha512-fx/C4NW0tVE+w4ysFgN4MuIGKQ1B3rg7XJFzN6etBx2VXd6rmqNPfvTqOVEBOTalato8iIx9HigGVUJ8PD6Tnw==","signatures":[{"sig":"MEQCIEWSFbeGWn4q0gZXHfAO0KAJC0fH6IpLbErDDJlIsd6NAiAjzmj0BipXeUkdJXgLLSTp1MakipsdhsGbKJNQeNyTnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrRgCRA9TVsSAnZWagAAeRAP/iA9fHFE50e/n56hj3hx\nYY3HhfPPf6XgTfP4Vq3AwCqlBw8A0ELZb/mbwu7W9OrfqFiZQIE5iLXoR/pE\n3O0iwO71th4gM2n10e/qlFZx8y8vUnDTQYTP3Lu+6PDIAqUpwqF6RFR5fqq5\nxVdQW+faDC7+yFd1M3NwqDYHsiMv76zUPyNS4h4VkJhCNwgWkVEK0lLte8vk\nJD+O6sdsgwVw7OxEL+mG4htTl3XMatq59+rVZKQ4aCA5gVwst7PN2cjmPWVB\n6kdZLQMsIZeGprWEYPd0iisTNbkZlviyfNPyK9imIlXzCOWI+gakgL4yns8V\n7wMAE4fXbgSRe5wFL9pMLp8yFogD2pEo/0Vyb1d4mlGkwB2Hfj1I8ymrCvsp\nSdA/rdz+HWyM3mOmycrEygMYSuBAZ9FOpF0kIR4w34QmERaveZl9TF5bRZDh\nHfRAUgWiWxkNdiz8ful+D+FkfMi9FKmk33IGzuKhWHIus5qJIPrt2PVcJNOy\nWXjHXOIjkUmKh3gbtS5kGaRe4Vke7Pv2kaod0wvp5yTDRQUw2lU0mjVClkKe\nPODz8S4UbTY1ERQDSx2dkhzBkJlEWf0gsQjyPtG9B7tTPhTcN1BW0op4muAy\nVMpg8YJ3HW1d7HbofqWkYTq+JD8+zETfaJQp9tshhWp9BG8gTCm5qxth/MR5\njuDg\r\n=gu4l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b16c4cf1d0826970ff04a72b663f1838cf8c37d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.302c7a960.0","@material/base":"11.0.0-canary.302c7a960.0","@material/shape":"11.0.0-canary.302c7a960.0","@material/theme":"11.0.0-canary.302c7a960.0","@material/floating-label":"11.0.0-canary.302c7a960.0","@material/feature-targeting":"11.0.0-canary.302c7a960.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.302c7a960.0_1613673568242_0.35296847986750035","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/notched-outline","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a29e93f57844c2195fe5ade1164771aeb22145bf","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.aa0aaf026.0.tgz","fileCount":34,"integrity":"sha512-cSy9X0wvq8DzIeliriy605nWJb9nIgJJ/LFOJDSSIiquyxYfKFlRtHWm84+lr0qcVBTIqmKCqomrjG1GCTQ6lA==","signatures":[{"sig":"MEQCIHd85r9Nwp8B3kDlK/E8ZKr0bC9FmJmslw0CIFhDITMSAiAjvJ7Qb2NaENe0jIn0FvvNyK60Anq7G53K1iS2cvd6rA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr74CRA9TVsSAnZWagAAl9IP/inAmEqh3E2UGX3g3srZ\n0l77EuCNp6ZPSqL9V///63y1YUcEVDErDlXqy6i4v3gUC/2oxYF63yROYUGm\nbtpSF8GxLU/JpMMUVne3waFz+3cxyNCRLVOVG562BuTqCtaKsNIYp0yev8vD\nu/LpqKpBxhvzEW6dtAAkP6bX9wLGrzODbqjtqCcPgB9Yrv27Om6nFFOuf5zS\nC1y0UX8qKfy+OhamBBhQ5fpXPgoeB2m2XXz0loju+3UA1Zb15+epzhAugRrI\n2AWX262IKmCKt1Dr4W+CCPX6GQcTSJEv3xcbMoWx/6fk/lRuNctsLY3ETsJP\nLujq81lI/TE9nWtPj9Bzfm2YqYI1Mi/CiCSBB95oXuTwdFEZhE/lDrAULJqC\n995OlmlYj5q7kWUOqVDyW178e9fauD0oHfTeADnU6KCPRhyqXGB+yg8a7D65\nMi/0V62ekw6MqSuFIDGyCZwyhuhNR9BVEhZI6m5YJlmjciBZ8dm7c8kVU5zv\nSuTjGmEW85OrVZBJ4cT7hdhxgGKanyMHzzQwUW68RysH6yOjLc+mplsQf/9H\n5mMGxmghaZkvxt/tHy/Zj0Fww2I1Vlutc+tFfIZpQw+tyLM8RquU2ZxUTYJn\nsM7llz9QJnKOKYFANV+BnSmlwChiYX0nUXosCI0a0/WZ0BJ2OETSQmb+Cce3\nHNRb\r\n=7F7z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"de542de1d7c4c8f5f51199fe207ef527fc1265fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.aa0aaf026.0","@material/base":"11.0.0-canary.aa0aaf026.0","@material/shape":"11.0.0-canary.aa0aaf026.0","@material/theme":"11.0.0-canary.aa0aaf026.0","@material/floating-label":"11.0.0-canary.aa0aaf026.0","@material/feature-targeting":"11.0.0-canary.aa0aaf026.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.aa0aaf026.0_1613676279916_0.5684431884656638","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/notched-outline","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1b12fafa440ab97ee50333fd0882602920de18b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.07ff0c452.0.tgz","fileCount":34,"integrity":"sha512-LGeMr85gLK/EihtAquOvhr2x2ZhfmCNMJHJ7zphI30D55WFZHSJsldZyd03JHV7DKtYPeKvFGHfWxiUZwEuvPQ==","signatures":[{"sig":"MEQCICEJVR1nspwE5UJUxEI56I3UmTlQN/3qqAAMPlRdSR94AiB48IMau67+9jj78RwbLRyDlAtx/fmkhJ4xB3hn8lcv3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsN7CRA9TVsSAnZWagAACmAP/iSgmB70yz09pXn6VVXn\n5EVpDMhV4ay9XNmTyhtX6ahdgzNAwLn8KMczqI8gG0RxfkXysI2a4VAG8Iur\n/93+4TWxthnZarFNI/2Vz1G7P7EgPHBzMrx8HOyAqE3RGt0aedBA3n1Ps4l3\nt50iY5h4EJKtmUMcTOZZMzRNvIA7JMVLRx/2fhGxDJ/qSaoHOUXEMVLQLFx3\nG5iZ2E4MhJimj4AUylP4khRo2jISm0JdPSWLT1Xz6EaxPI/k3BKWY215Upb5\nqp9IAbW8AutF4Bp+8+0hOCq989ecgRtLbmns5DbhJunwpyT/sguxTmME1Unw\nE3EpnzRs0RjsvacrUPxultHEUiHqUKx4le5V81HnbLMGFhBIa0Z6/cY4n2oq\nM3tMeoqjFEn1YQrrFxElGyjSVDXRFqXLYnvrdlxhMU9A3cQe7WxlP4F25hg9\ncgY6zcDxhBf7wAHjViycobvRn9yUkJgtm98iE91Od0QmfniGGCya8aSSlp95\n715MMBfv01WW9H6caXZdxgTT0eNnLXXjTVS0RlFXEbQEiSi9JDzwi2b/7Szk\nYXPybj5eB/UErP6qBeUmy7PjrhSsvT7WZm0leR9n93ajhhQocKKW4wnR5L+R\nQn6Yl4DqoSaoAHkfixDk9whli2NqzsjjIXUSAWOwTQbTYq6rzeAsKbh8p4es\nyXvj\r\n=y3SG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"52e3f1cc8fd4568a48ba4314f982d5613f53ef5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.07ff0c452.0","@material/base":"11.0.0-canary.07ff0c452.0","@material/shape":"11.0.0-canary.07ff0c452.0","@material/theme":"11.0.0-canary.07ff0c452.0","@material/floating-label":"11.0.0-canary.07ff0c452.0","@material/feature-targeting":"11.0.0-canary.07ff0c452.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.07ff0c452.0_1613677435400_0.39702156456066917","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/notched-outline","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5aa8bc9893fd160ec50fe534aaf52aeefea269c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":34,"integrity":"sha512-GDZ05LyNQyTSssbyFMnq8Vg+EYjvcKtuBXdUdri0XAyxuPHwKmbuD6CYiCeypKQN4tatF9z3/1gtq+wj1RX3+Q==","signatures":[{"sig":"MEUCIHaTDylNABg85eulIB8pBlRNtxpkIkPneTW2EvZpqsXBAiEAm+VDjMlZ5CrFmG6PG1dtIC8pP9bh2EWSoRR5zTOCx7g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvgsCRA9TVsSAnZWagAAF1kP/09xSskWZEqjvbn8UX3A\n/WoQaHYBpsXIJKzw7TKQI/SDXR89IQd6SlCpaTSk8/5xcSaJgA/kmmI8seq+\nu8w+rFkM5tyQIv5ddgC65eDRqX/vhaulPs6OHVcmuVprpWCo7lu1GWn4hIkb\nDmM2zI1t4B2oerK9d4zkt4ih0XLmlau8nAnkZx6wAsk4M79n2MhvgI46HAix\nPCvWo1cOOYP5Un10tZrob/D2g5IswcizRyQdOvhaNXKgXlj7wUexisjt5ROO\nN/82KmGqBk0o+7QuHlicxefvWETGb8V8sDecIR9o/WjTWrYv57ukurAgsLrK\n+xx605GDya89MbQXsai5MkOOwRPUAgao7gLGX0BcegslTvYiFIWGo+k1UDhD\neWx84i2ZRBDqbo1yiEbVSf4yrjtSx4+k6OjbiSkP0E/LJJTw0rqmb50V12y8\nyax+dRwlIUNM0rPSRYb1dVPtNkfkIM5ZsZEOWM49Fn7UYvp802U/s4jhbAyW\nt1D748qODuqfqnjeIPcqPuGWl2anW8aia6G2cf2BF5tsOj7pDa2RGIeQjE2r\nh2Le3bGI7CkWFG2apKtyItz6Go571rZHq13aluytFYiWh6IPHwn5qKi6yOiI\nU27onbJEWkn10OcMDKD7tD7+647IJb9YA8/xFdhoIBQKJe9sDHZybHpZKQ6y\nWEda\r\n=PwBD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c23b9ab547a5ebb36a108742217a017fed1886a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.bed7ecd3e.0","@material/base":"11.0.0-canary.bed7ecd3e.0","@material/shape":"11.0.0-canary.bed7ecd3e.0","@material/theme":"11.0.0-canary.bed7ecd3e.0","@material/floating-label":"11.0.0-canary.bed7ecd3e.0","@material/feature-targeting":"11.0.0-canary.bed7ecd3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.bed7ecd3e.0_1613690923627_0.155785932435059","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/notched-outline","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9af50a0f6e9c63b183436420f745bc60393283ab","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.06dead2d6.0.tgz","fileCount":34,"integrity":"sha512-n8vGRYUXv666HCcszPSuvbaRC4Vde08xcyMpKae5gYuQDR3yUrPIPJ1RwP9ZzpC6y2raXy/Rbtf+Z1DEYdy6EA==","signatures":[{"sig":"MEUCIQDhyJFXJUyS5Yd+6aPIadB4pa0iC9sJ/6FQ1FuaMQtxBwIgPlIaEbgQYbOynHvXz+GRcTxZnSnzxzXJWXqhEm+FvIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwh0CRA9TVsSAnZWagAA/5QQAIOBZu2P7f/s2t3Ql4m9\ncTjv7eV98nPkW6iXHKo60MKnr0DrBFL9+pyOd+89Bn3wVHHdPEBREcmKWjKk\n3TfIXqNoQSKyTDkw0s4tmDoqNWWy/YpxmrnYEsd+aDBQ76OmJsMBk2vUGW+v\nMMF7g41jo8U3qozBoD1+e+5LHSQ2/1rE5MHD2q3HXiBCz1qU5vL88QgditnE\n16Ibopno6iVzesDnuE5htu+uEO1L8SVGmG0v0lanrlRXRlD1FX1vcK3OAloi\njobFXl/Z8+11eDe7xu8YTzH5bCnivX3FCFpyBqcNbHaIExOeRz4WRQr/XrZg\n84oR7MRSh4zvxP9hBEP7Q7iABnjMaor6POaxhT+ALwP1X3bnGuPp14xh0bFL\nmsLtuc1aAhH2McQg9JJVMMRcsc5S2IxNFvA7N3teuxFrdHxu3Y8ofwveN2dy\nH5ySqkDuuiwc2pBZn8CbbwxffhEj7VxoCscVMYyT1y9FcBdX7QP1BRMWQCb2\nosQZenpv5S3H8XZh4TcFjsodrjEL5ZMyBWzf/iA9Q8uTCgRILCixf+WqFYm9\nofsaQtwWInLI6O/sI0PfZDpRcSiSUkp279ZZzMgacPyjJTa/WO+b92/p1ntk\nAGl1oHnNGE1BVRCQPu9S2lHp8bbcY9j7naOwjI/FBuTAkFnBMOcPFNg4q7uz\n0vn7\r\n=2pxA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7458ca9f14be94c1a279bd594f262289d278bd39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.06dead2d6.0","@material/base":"11.0.0-canary.06dead2d6.0","@material/shape":"11.0.0-canary.06dead2d6.0","@material/theme":"11.0.0-canary.06dead2d6.0","@material/floating-label":"11.0.0-canary.06dead2d6.0","@material/feature-targeting":"11.0.0-canary.06dead2d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.06dead2d6.0_1613695092303_0.2017427508669276","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/notched-outline","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.cddb03553.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13f23fcaff129485d78bcaff9a76cf2d79fea573","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.cddb03553.0.tgz","fileCount":34,"integrity":"sha512-7RUr7/yTigZeHdGx6HsrSg//vQrr7Jc3xBoZrDE0HVmt32/qfSCFzMIj6ieQ9CCarQUQ5pXpDI7E7WFx5kHuRA==","signatures":[{"sig":"MEQCIEuoWrN7n2ER8MZy+BrzcZlD9RepmCLyrLhFE9kBSn+/AiBgoO1uNNh0xBJ8WzBm766CANGSt5EOln+IMVM2bckPLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLy0JCRA9TVsSAnZWagAArasP/AgjbHvrs+xG4x5I6sJN\n2xLfAQaChE8ko24AAGFkna9ntZ/6TlgbT9Pv7g81PglBvJJ4WWCusOd/nHB5\n5jMYAu9Qnner10sphnxt8hiuVBoc2rVUKUVfFNXCm8zBA0VuCX+/v9qmHJGf\nyekyRnGX0KNpBWvc1NX6rYOiTrhBSPMdqm+a1JTkJgIsNQZoWERvvjc0sTqs\n9+zy5nrmwm0hw8y4QFCGtYnXIlRbqZEgmi204SuQ8+3oXAf3/g9Ug8yjFQDb\niWRVTzmPCfZ8VZdcQ0rQBT7QAZx+tKWgqnYWq+kdX4yYfW43MugHA+wPO0Fi\ntOovsxL09t7kGJeLOGfOJ/WAhKq/1LzDzEImPzj24cMUpAqorm4G9jUb77GV\nDKhbfdox1cx6G85MN7jXis2lW/F3/FlM+KLUR1EQAGbenEdEtf21GxeVfz+Y\nw1KOQIJmO9AiUJqM37mp4QAMnrUltCHGDPxN/g2xHTK7NTP2qccw++SDs5t6\n6bhjrSZiua59AapgLgXw14XuKxGvYU+nj8YLJX7zIQ54IZCkgZUFhTti4Slo\nvhDCWsaggYHZwPLN8DEW16DlWleoZELAhI/yGW0bCzYgXXPIf66PhKFsYaRR\nN8xtBwgRjSpAxzT9DKare4q4bZVlTojHAGKz0lY6G0VAiHSlqycnVnW8CTce\nJgF8\r\n=hmdN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a8deff13e5978e42ae51f60c844f7ca0abf64b45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.cddb03553.0","@material/base":"11.0.0-canary.cddb03553.0","@material/shape":"11.0.0-canary.cddb03553.0","@material/theme":"11.0.0-canary.cddb03553.0","@material/floating-label":"11.0.0-canary.cddb03553.0","@material/feature-targeting":"11.0.0-canary.cddb03553.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.cddb03553.0_1613704456480_0.7086503253717662","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/notched-outline","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc40439889ed406abe5c4f2d3a0539ca6be0abf4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.d6d8d0476.0.tgz","fileCount":34,"integrity":"sha512-ZC5sxcRVYYQvYc9gKNxXVdNS3+sjOwHQKEfuivvKHfR83B0eoEn+ptq+i3s/k7abvfcKbC3g5da3Uxfl7TSIMg==","signatures":[{"sig":"MEYCIQDve8i6GEyP+t/aGYEM/juCwlLalF0WlwmKKD07CHrz0AIhAJhTEZmF3PjhbLZ3zeBS5qcACMd29Gqy76A2dkXVSswR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL06wCRA9TVsSAnZWagAAYeIP/0bgeq+Ec47U5UTmQdp0\n/Sw5Qi4nF7nDkTDTN4phpkLELqHxVQe7tZE1EYVAfkny+6KhaJ/hafHvVBC6\nMm/1nTxe09Yju46qv5cKgVd7fqiu+82poGnll8pPjb3nwU39quNS+Bb+OqsT\ntcLQN8SuspS9Qz9E1Ih1JSAz3deRphiPb+39XG7LQ6vV9TyNNCfvh4qHcc44\nxdgrDy/dDNsRRKMP8VFTdl0sZRNaBA0WkVvu4TCVb02p0NLk4EPfe/NSJFJi\n4LR6NpLZRK5hn5Z914YOSWgwM13eD1oJv2uF79KIq2RBFe36iUgZauUCkbZN\niALIa9rQhEST3PhNI3iKjrFYYbASJdXwMjdT0xezx81nn8CS4tt/geVgKIOu\nIdYoGPZtuoMnkeQrnRCI5Gmmvr6zJs1pSYUr1Y1GoaimaRnKibCTeoKTaLJ7\nu4QjUYF94h8L2DuivDIP61qdvlEZGwP2j+AKvGS2Qr4SPO4Fnwy7cXvTaFLf\nAwlebbfedw2F2zN8f8eILKZwjDEX1Ec2P04BCbFPFNrxcznH16/0TI7C5zGM\n56ctLh43Z1JYhWSR64xLBFx08OpK5PQ/Sq0wrpUQmuP4XIAbDz4lV8xvzRT2\ngmVV7Ie04OME71Bw9TbrIaa1kKHKQ9JhLQMNYC1adRw8MUn+hnlKdBhCDHJh\nI/ix\r\n=ql0Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"17aa6317e2c1a8109a8bae34e962d438f170f811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.d6d8d0476.0","@material/base":"11.0.0-canary.d6d8d0476.0","@material/shape":"11.0.0-canary.d6d8d0476.0","@material/theme":"11.0.0-canary.d6d8d0476.0","@material/floating-label":"11.0.0-canary.d6d8d0476.0","@material/feature-targeting":"11.0.0-canary.d6d8d0476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.d6d8d0476.0_1613713072049_0.8803726502961842","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/notched-outline","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29cdb6e3ca14e87602cb0d1c78e889c36b41070d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":34,"integrity":"sha512-7oOB4rdq58YiTy6XeMqZYC2LkmtEGFK1LaLOys7eU/QC82OF2mDKSK0/Hhyu1DGyXT7Bv0ai3OY5Nuk3KmX9Mg==","signatures":[{"sig":"MEUCIBXHVl2phGgY7sZXIgVyPko8TASJ28DXsTGH4lO2VVtqAiEA6ZQBlqbMUTX9vPG67hAEdxUJO6Xnu9mp7w+9wkdVHZ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL910CRA9TVsSAnZWagAARAEP/3/fw0YqqInJYuODwCz4\n4OoHO4LmFFk6D88ecWXp/HyKkP7Nbu6lfiPnvAQizeDiXn2UyQd1kKUkYjnF\n65HlknvmF0C5gAyCaia8+z3UfqV1fJqBfNG857wKrbqyCs8SLjRfC3X058eW\nxszHG5HwiaN6/qZA2dCmCBvUuMdJykcs6Y5NY4WM3XriUxmTYNwb4VuI/Fbb\ng/g4zvnpYmCbJEXSHEgn5TyNcT/+D2Jd1TVBMbJugD7Prb+DWSVWBJd3kLIT\nyQ6iSS5qdSpYhEG9XgaADjMrxly/o4MFdSpVKTsG5NtIShRtveHkTBanfl65\nDdAq9zUXPnikvFiHhpnEWaHVWLtRSGAaYXcfLGt+qPwS8jmxbzHgzIyrC8CV\nBg2yPQT5sxjK3l4ND934cLfPEp3SeuGtCH4x6A89DjdIBNoBKmAqFi2lcKAS\npg6KnMVgNkzU10JO4eIOoW1hXK+9hh54rsH3MruyxC5BPErGLJXKLHlRkpNd\nGVmgAZo5pPar7xuj9+evTRlHKnMnh9AWot5MBDYuX28jbyjejZ7HHZZ/ZAfO\npgaFPELJlQuEoR84vfw+5kJIpK90SdvCQysHOcs0AM4sg6KsmBN8o+VOfM5o\n3kXZwaMlP07YObKVb52vcFhRNAwEbRMAay0iP/sDv2E8Inwqnl+vYF3yma/P\nR2Cb\r\n=Ng+J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d96f438a60c2d44b9a3f9ec055d1dad78d316e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.0b4a4b2eb.0","@material/base":"11.0.0-canary.0b4a4b2eb.0","@material/shape":"11.0.0-canary.0b4a4b2eb.0","@material/theme":"11.0.0-canary.0b4a4b2eb.0","@material/floating-label":"11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.0b4a4b2eb.0_1613749620100_0.28296470351051295","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/notched-outline","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.3201cae47.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5abcd1d8c7a31fcad0ac2758fe5859e0ed193b7b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.3201cae47.0.tgz","fileCount":34,"integrity":"sha512-IdtvoEuKU04Av7lbZbcjZbX72SLHGiTAvTnO1J3yETOoGCePg89EwUTal9XetzsFFnkJ6R/deEjyrh5YlFEO2w==","signatures":[{"sig":"MEQCIAWDAkOV4NnIVbodq67nn3ru68gpqZmf0HHluF6upmC3AiA2B2cBwztHczXEmVsFAeoKeQeyZ4uJlTawX720tZb5GA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMENfCRA9TVsSAnZWagAARCoP+QHrvgMQkDe/J1ag8qqd\npxkI4Q+xwLAD8D0QpTnemX01UhQDPMS1M3KW/9RznqhPXrvZ2tt3NlscRmwj\n8W2VIzJAkRmUNADULADpmiFH5cC3fUd1m9c2FgsmiW9i2w/rJY9I+jzTpoT9\n9RdBQ5UOpBCUaVKTc8s+jL/xtVNyKqVMIuu0YS2x1T8g6krvfDdkT+DTz3mX\nzMWZkrmz3rtklXa426mGSthEVpIGqJ8KU/2urwPrSp3W+IpS/30pZGRLtwkn\ndpDtpAFuN3OG4RMPMypDraemfb27Mry+1w6a7aXlE/AX33nov99eStF/zRGF\ni1xkwCCjo7/TVEne/1/W99ZKJ/8R28AUSkokXw75sHsSLguffJx+PkxzSHXM\nj5EfWbIza1ygHrpXcT8kQAV+DGLKYL8o03njWyodqGj+Hrty+F0/E0kCoLQJ\nJRfOowbOBC22zN/4UOHGEc7icHkasCP/8M+GSWKpjdmVM8eIgGUaiu0OOqA6\nHeFjK9+CDyMklEgVeKgjuG2ZqsMiHY+VjUXBis6WejrCI7I35pyVHLGz+euW\nyMdmMFJM5Gvj4c5zCmUzSKFvAXetWRNtD60DWTEdk8nbgNZRXbes+QhyI36G\n26g6ncJdymPkWXUAHV8IDX8rv3nxRKs0i58k3BEdt4sFENHJzc0CvByLVAHv\n3Q8W\r\n=urnF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"274d3ca7227bee74ffff3d46ddf3ae266226bca7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.3201cae47.0","@material/base":"11.0.0-canary.3201cae47.0","@material/shape":"11.0.0-canary.3201cae47.0","@material/theme":"11.0.0-canary.3201cae47.0","@material/floating-label":"11.0.0-canary.3201cae47.0","@material/feature-targeting":"11.0.0-canary.3201cae47.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.3201cae47.0_1613775710637_0.24202953746170563","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/notched-outline","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc72fa37008601259b3f457fc5921a88f41d42ea","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":34,"integrity":"sha512-b3b/mgtb9HzNGns9YZE46+OaOsgQ0oNuIhX+Cv1bB74O72UMH35fUBQlguYRXJZWwhlBcvMfUdTaZE6vvRmP8A==","signatures":[{"sig":"MEYCIQDAqJQTYYhMtGSJ4VdeDA3uSBn3QfbV5SpdVzrB5/opPwIhAPCCt2h5vJW5JwLpsto1sXC68tEGQymrCOGo7HNPHseM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNAsRCRA9TVsSAnZWagAAi0sQAJnwHC3XPIJypz64FyqI\n4QJGv6bk6HMOwSRMLKXXPGpr1rB1B0nQXQZOWwKEqm8ABq9R6VwH+gyeX43q\nddTq9REzqfW3j2PCGoZRn7Yaum3uBDdFCBwxBY0Jwoi2rw24VMM+e0aUNREV\nZgJBIPkJ8qen8B5i+eIj9mrDeeFZJYp6vuME6QOxxlMUAL48uEY8r3cdWpez\nHjHc8QptyyDrPuGQJaHhPjT1iyzH94LLuy/mAUYVirUerSz7aaAukKa5S/aq\nH8coC02tSv80f9s7qz3pYEZcWicRicQDP5g8KFiPnEEmnXIfwZ3BiLgHiIX1\nhKOlCF3ETCwOioO5svgCejFTzpEjTiNJw0MEbXsyndbKceLxiPgxpCTZcRTf\nKSk26QHpw2q2l1STZqIxt4irxZbWzIYnPxhC20QbhiJrFxC6+Zosayp8iz+x\nREXymWzLiP7lDUQ8kLEip0d3yek1j0td6xa6dwphKrxs2xs9FYCpqefTX9Zz\nohXq4dRiDooO6whwaIFeYH0ie4AIATV0o+cvG5SQ6FRmvnUJ4FUrgr7biO20\nxm41+x9fZDOC8n5pVDBtsjcQUd+PPSHAsvqHvY0pbYXCllHqGUCIFz/GVCcu\nmlQi8Oc7MJMX3vXK0w8Chib9lp1K3e6vsY17Ty1wRzXh83qU6J32XeMZz39j\nD4Dz\r\n=FGtz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b73a5cc3b15b450664de92ee70312cc1e8b17304","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f1b1fd5d3.0","@material/base":"11.0.0-canary.f1b1fd5d3.0","@material/shape":"11.0.0-canary.f1b1fd5d3.0","@material/theme":"11.0.0-canary.f1b1fd5d3.0","@material/floating-label":"11.0.0-canary.f1b1fd5d3.0","@material/feature-targeting":"11.0.0-canary.f1b1fd5d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.f1b1fd5d3.0_1614023441382_0.24112698244185582","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/notched-outline","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66a3d6c7cabe39dd764eca4dcc0b69c5e6b8a42b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.7899e0fe0.0.tgz","fileCount":34,"integrity":"sha512-G4yFqIrX5H1NkQaY2alh0/H+1t6CAIW5dfZvs3lNgY0XIzTlHYWMoNyQt3tvg5+8OI2jpMhKBAVdo/TjXUofKA==","signatures":[{"sig":"MEUCIDz/X5sFVf8Vlp6MHB8Jc5xlfGHOrX6OMX3yMLmm7ZLBAiEA2aoLYmiG9MhKGrb7bWPhf6rxG3R/HyaJ8BVE3I/pwCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDRmCRA9TVsSAnZWagAAWpoQAJn1XliXw2CmZs1DZElp\nGeuxeoXqh1EQMN9swN4Rktn+AACJQ5SgTyEwiEcNAuvvVbLu9pISOpEGiZ/S\nJFcMyna3yZ2EyRe4h9+DCAJ4BqjcS10sC4aqS5Mtkq2q/LknOehRlfA/3ydH\nl3bT7lFl3vsK+sEw+J5KfN+kCrzs5WaXLVxCNhLw/jMAYMXzzXF2kL4YAXnO\ntBZ/se55tuVBeBXvvRzmP5Yp7I8NJXRWoBKsczjdPnm/iRXlT1QSAKWbtHCx\ntDElFsGdwpNQNUmdBIA7CzKrL5dfh3kp49bkfKn1O1U2ldEXozrlHakhKKyt\ny2vDpL/Zo5nhgHRT0oZI56i1BDfJj7q7oG3A3vx4EfqqLw9hjrUh4myRD4bD\nFwqwwGwG+tX6vUZh1dwx+Iqvg8pQxPboFPMTcF8+qkZHknT4Kd9hMFcUHC0H\nH4qFV6zfWPWFJOMu9xR/fsCxiy91bcOWsUQbMzuXJoQsyWc1FNt4zvyyw0WZ\nehvyL7KzMCWc7wZiJrJv0tcJuzGGJVSmQRXdcihD6JFcvaxsc9Gx2e0wToMg\nyTVodZric5Kg3uC6NeXKxRo/UbNxwyPR6PJIXWxbUziYauAf3LkNeWTnXrmj\nuvwu2gy5nF3ulO7Z+6QQSOsF+ADwp037M09y5EHuvLNz3WkTsmguLu4A+o+0\nPAaz\r\n=g4wV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"73b260d2233a31311cff76e4c10438913b91c2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.7899e0fe0.0","@material/base":"11.0.0-canary.7899e0fe0.0","@material/shape":"11.0.0-canary.7899e0fe0.0","@material/theme":"11.0.0-canary.7899e0fe0.0","@material/floating-label":"11.0.0-canary.7899e0fe0.0","@material/feature-targeting":"11.0.0-canary.7899e0fe0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.7899e0fe0.0_1614034021632_0.736068692718729","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/notched-outline","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c120ff6b946349cf89485f398dec0bb25295c5b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.f19c86d13.0.tgz","fileCount":34,"integrity":"sha512-sH8Z3Tqi+rprg40EEKpEz7cMUu80t0T6WnkQs5XEZs7vjf4yODsY1SuXWhN/QBg70bAjmM+YG+BiHF/cIhH9MQ==","signatures":[{"sig":"MEYCIQDnEiDeZRS1b2ggv+oSAJJDqmFnWCkTdh+nH1hCRWVdHAIhALc06ymspyxU2K03TaXv1LSAmW8UWf55YZJKaDZ8tH5s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND7jCRA9TVsSAnZWagAAbwYP/iK0/SherOz/ql1M8k0G\nxUc5xXnbJ91o4lBHcWuFnLLK51j5N8SS5IvzcOm6PMsGjxtWMotq1U+e1S3S\nPbovqeRFZj7LKq5SwjrKqE2tu9Gbt0TpLqs5tUTjJiv+EFK2CxcDCupZ8mAk\nk8E67x9svgiv7i18u09LrE+LqsolKK3/3IELyNQYcZT+ul9YpQ9TRpyH/L7i\nBNWbNgZ2a7UEj0qHO7rl4UwuNPWPhq7qUSPIA1oAPsg11T/pTHgVf3c+caJW\nM0P65JaKvjZpl0w1S/57k5QcXAzRNhyPbQLqt/t41m0RQEd8kdmCYakNqjPB\nZo3N4q2qB+aWWK5mieIBx4/6EAKFmGmJaLHV+dCeSEcbLLfm3Rj84ZBIXqMh\n4rpxBLsm+XbrVDFwRNA25eQOQfCa8c6YyDLRQbanyGx87iDPW0RmYV30MSg2\nzT0s9MV5Yd5cXU5cvJfAMUs4UFi/gRWG3n7235bTopCxFLSi9GSdA0HkAVLe\nxhSUn3Kz2v+jZ2z8nvLv6o2UZapNHPV8Ffzte6H3s9cotQiWuuTv6Z3fjrHx\nfPRk7ec9eop+gUZ/YmZQtKRUm6imCm/hg43WMYXmWKzKjGcrzpFKwhZYzlSR\npEJsOA6mp0TxMLhuO1l29zPkdE8efoIObdtxMvc0wCUaBRtE6PQxciuPXlbU\n0gBv\r\n=mlwz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a4b2b851fa6f3895a9e915d4bdc5b6b6715a4260","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f19c86d13.0","@material/base":"11.0.0-canary.f19c86d13.0","@material/shape":"11.0.0-canary.f19c86d13.0","@material/theme":"11.0.0-canary.f19c86d13.0","@material/floating-label":"11.0.0-canary.f19c86d13.0","@material/feature-targeting":"11.0.0-canary.f19c86d13.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.f19c86d13.0_1614036706942_0.3721364448509157","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/notched-outline","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.60e892d79.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2ef57f9f723a82e4eb551d1c1d610898bbe1d89","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.60e892d79.0.tgz","fileCount":34,"integrity":"sha512-xAtg/88G9Sj9Ad8tfaUBTTltM1Z5+eoI7YPkZWX7QWA5Ta2sn/tvmM/9NRUqi8aWu5xjUBWXt3bgAdZ1b6Zaog==","signatures":[{"sig":"MEUCIQCFntZzJlYPSIl23CW7D36iJ7Lzo/810Que+dQteE21mwIgQj1rHg8O4X/LCFtpfHnX+hePLugddzm2u0lRlqNygwM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFctCRA9TVsSAnZWagAANOQP/1BATAvOC98og9Mga9kJ\n5BGWDHotKgP/vG0BO2X6aks4pxVpWZgAf1tOjbBZLj2iSSIqiLTDGk6MLNJG\nu6kY5qllyNN3ff7sx8dHJPMG0foBD1TXw4edJx/l4B5nS6AA+dEoSquYFTd8\nphb8PW/tAa4lqJa/PC8hgfiFQSrje1kHhVud16OHD9OJfVdEaPB/U9P7n9nu\n6maEUX5Y2pwt6ZGmMsTtt304+UW7pzm+Vtd1aUQIlMbpCCYsYLUIgNKC2CrC\niGJwbQepeCjJWlzWmiORFMrn/vnjvEXZYo8DQsorC7LF4SLYa35jn2jgn8Qq\n47bz8wBFfB/HIniTVOdRq6OAXEf4/qruieOE3pcG6o2KDeGehj0Zv0/91LI3\nHaBiy/cnSjlUQgA+hS6ag5/yR7OBRe9sC+e58LDXUe4SIPfS+Vr61tQjIjtT\nnU6dPldOQhRWMH/9IL+xf5vI7rSkyz7KP8ZOWD5Ab6ANVoW/up+/01zRWhiT\nyUvW55W4w+JL84Xc/0oC+is6xcRUkFhlekXVM27TSOsRDQEVHAEIn2oY+ODh\n0kSSlo9it3lvCDW9HwhRlf5qJFfThxs9CQV3ULj9egkAI9nwwhP1BmDwYMej\n2VSjqOX5xxEOHL7oFYWiF6yKW4qKmvwk9y8/CjzpsSgSuOFMGmCBiKxAJY55\nAtt4\r\n=Tqvl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c94f9f392484897a962a9b7101ddc6d70e5df67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.60e892d79.0","@material/base":"11.0.0-canary.60e892d79.0","@material/shape":"11.0.0-canary.60e892d79.0","@material/theme":"11.0.0-canary.60e892d79.0","@material/floating-label":"11.0.0-canary.60e892d79.0","@material/feature-targeting":"11.0.0-canary.60e892d79.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.60e892d79.0_1614042925290_0.6397007554695107","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/notched-outline","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ceac2a920d48aec17a133b96ce7706336cd924d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.c96bfa495.0.tgz","fileCount":34,"integrity":"sha512-7xDUg1435SzEcEV1fcbJxdttFi5DF/slPPiTZJDMz5h9CQTqa3w7FuffHDXHLqNUcWIOs1CZHcaA0G4ssSMrnQ==","signatures":[{"sig":"MEQCIEsdvgse6Nxvq5FzvpefCJy6VW1Rfxm1p3AnbBvKoy1AAiB8ADZggTK/mpmYH/mzk2ICBPPJSM5+lGp+PtmENngk2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVi+CRA9TVsSAnZWagAA6ecP/3/TJ40o4ce3ufTHdIN/\ngcXxzP4uKo3z5yddHlaCBWZqwRB+/l8b7T1RJGNimmkIDkbv9clQ73dEsRxW\nvPnDkXmAFo/H/ldWpqjU2a9KZuQd4G8Tq/bzIrB5UNtCR9Se5Cx3iUt5MM0i\nm4tezjGQ8OorS77jOukLxAnOUhvaykp/tIeeFv2leojVdi0FKlJsnNhm3p99\n3XxKe7jZ6P5km46K6Pm3trnkj7NjKVXrb4OATjlvc3xhN9dQToJ0Cd29tGRg\n0d646r5R1ZELEYNaUMQP+nvVi75H8vidgtM8x57RcqQWJs0LTV+r3Bs7tDPK\ntknR7Aciewx1qGPTJSTbrk4XMUMYf4TLN0FKU3k4/tL8xwKq+sB1tOb4F2CK\n7iX14Z31+TNcXmlzunBCV7OU8vErl9K3bnKXIhCaoYlWmHnUHzha/1bkrZOl\nDZbW5m6qw0gkfpxX6rT5OvU8EfKbS7fevd+iejvNcqZVBBrtNKTj2kq9kOtx\nY45/UZxMp9H3F5+L0vM+SWvhyRiCOiuLxdojpT/if4n1WJpOhVKVPTPeZVAD\n+13Qp743A8FKgZRpN7BSiNCs3y31dByMxa4V3b3hlgloGR4CD0FyHBOZZuFi\ntrYZGane2yMoUra9LM26dhpt729g8MTGeVpYeXqWLca/47y3hMOl+a70amQE\nvYMd\r\n=G0Yl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1fd35f98370bc606c6677b7045a8acf16c0ea7a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.c96bfa495.0","@material/base":"11.0.0-canary.c96bfa495.0","@material/shape":"11.0.0-canary.c96bfa495.0","@material/theme":"11.0.0-canary.c96bfa495.0","@material/floating-label":"11.0.0-canary.c96bfa495.0","@material/feature-targeting":"11.0.0-canary.c96bfa495.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.c96bfa495.0_1614108862315_0.8726773207487961","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/notched-outline","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58b99b74fc5d308f56a8ba5952dbaf93bde03524","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.fa9b59f67.0.tgz","fileCount":34,"integrity":"sha512-vYJir63JMtthLwRkRtE0jkkCrFXJ29HiJ5D8LTLpfN0DB9NdU3AlbK6NM5ntYTUyZQnuCXLJbeQFbTgXkU9Luw==","signatures":[{"sig":"MEYCIQCeHuOR16QDtzn+kXJX3bnEwjbe0e0mCwvjN03AOzcUcQIhAPLF4YH0OGHD58UF+hhXBSeVXEWeNNd1QPODC2w722DU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVkNCRA9TVsSAnZWagAA8jMQAKEsvZqb667Me4AhsVwA\nygIaFAq6O2jruWVDJ/dK9vurOyOGKZhcPxN0/ovro0JIHTSmzLLkAJZyzto1\nHoSVVzFBnok4E0KihmN/OItKt4gXJOyMzmjpWpg35Rhaw8SZEkyeIU3phN+g\nNkYzA2uvwD8A4AvmINMdkaxT3fpHlwpGOK/8s2MCzjJPq21jgLrgSg7KRFck\nDcDdUkEu14oruIbn33bmK/u4z28/moLZLg3+B39ws+3htF0S8YZyH9NPEaVx\nkzH7/YadjRYHAMIhpGIW6Jio+SJ5CcPuOs3kW+FlRvO0N8bFYbw2SwNGVTA3\nzXDQJlg502yGLAvRyj6fF2gElHd00Acb/4AnH/wA3cAz+I6qd59RO8krz79m\nKv6DYw5ioSGGC2kVnXq6AeaRkxRfldIx7MCZVIhY5lzG4sBQP/O+K9Ycnm1K\n/7VuIRvCvBqjJ47B2clABbrs4POtKR6H/PIwIAJh7C1ba9a9p3APDa7KuuwR\nuyi1WUsTXIMrs/x/HBQopopAL+I42q2YMSmKLyRblfzc09EkIeemNcsPYmrl\ny9Ss3uskbnzyNl/KqC/zWYdV1X72KQralbpBIrbRn7Vp+IdYztY1c28N6PLi\nG3TKP7DYuP8YyK6VqK0RzpydPbVGElkdK1MPzhi/1iTyf05O2lgDYd9PuXDO\nWUts\r\n=Y1Or\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5fd97ca8b5906f3b3097bd333237976e3e93d192","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.fa9b59f67.0","@material/base":"11.0.0-canary.fa9b59f67.0","@material/shape":"11.0.0-canary.fa9b59f67.0","@material/theme":"11.0.0-canary.fa9b59f67.0","@material/floating-label":"11.0.0-canary.fa9b59f67.0","@material/feature-targeting":"11.0.0-canary.fa9b59f67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.fa9b59f67.0_1614108940594_0.5135451744842503","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/notched-outline","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.869e3497c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15de75e66497433f5cd6ac7f782736edee0deb49","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.869e3497c.0.tgz","fileCount":34,"integrity":"sha512-9lyA+UdaNGeqYZaRWpZhLyuiu8Upnjfw/nQNuI+s+3GdR/mY1UCEAawxk0xMrcphuq0VVxIiHNodvhEQaf0uew==","signatures":[{"sig":"MEUCIH1zQjwUcA/dPmKv1qmdCBUuRHz2jjSoo/HFmZhw8PVkAiEA5T4DkytyBabMqvmkAq8azpIcLWfQZdnccpSrO/oZ24g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVknCRA9TVsSAnZWagAA6d0P/0rr2Q3TpDxhU9jBB7m5\n+T4/xJR7n567Cirl9BXjDD7pBuRJ5RRf7l8zO3LXPQnUkFoueCzgDZv2IoMf\nG4/b0kgmENkxSLcrbUVwBvGz7T1n3+S385JLJA+F5OcYq5R+gNePGyrzSsxx\nsSlYv+LoLZfFJUKrnOqAHIbuaELYRSP8PFXB/i50f45yv5TMS7wpEuERlaVx\neABZOvJvRGPWgEFq3Xq3fNWSRLFzF8I+97emni8A6PNqPbrWGjITwJjm5D+j\n2uRH8L5AlmGgx5LFWRC29VTIIm5ZWa6REjJp7RTZuVCcQ1VCOHXCbQbkQlUY\neigMSX8icm+3Xdw/dWPqZjZz7NeEbUQXqYrBWYVQ5B9tuCbSeb33SENgt4ck\nyFifSHxrsnprR3fAADCNPIquZ6jS0Tp/bMSPhAWLr428tCVYZcNk1QmS5g2F\nwDAtbb8ZHMQAiWnS5zG97KFgkvSLkjfS3tZdXjajGjSoGwN3Sr8wVT1H5CUg\nspz2JuyZUk4Po3M8koplvzmSJ615rhfpSotU/AsPkBbXakd761yLgpVyIuW+\nlGB8o6z0CPwPLHtnMBo0CoPIBkCLjXPWJNCmDBAm1AU+QxfB9KrYGQjaV4Fi\nSeWbYG2RHup6q5DjVKyyKIgbt07O/kMoJqTdgC2AjhRm5D+WZ/px22twyAQj\nCVE6\r\n=HxDS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2e1e116734dbd0e962ee4e11a9952ba9ee6684da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.869e3497c.0","@material/base":"11.0.0-canary.869e3497c.0","@material/shape":"11.0.0-canary.869e3497c.0","@material/theme":"11.0.0-canary.869e3497c.0","@material/floating-label":"11.0.0-canary.869e3497c.0","@material/feature-targeting":"11.0.0-canary.869e3497c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.869e3497c.0_1614108967191_0.4507076321419581","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/notched-outline","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e273e105bac83fae0590a6de4955e5f7af0e89d6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":34,"integrity":"sha512-CHyKpkfI+Z6lQuM7DEGD4nQAfoabq0t1IBfUxnWUZKqaTvZgL74hqY9Pgrwh63TwRGtaC84WTH5Gg/NTGqM92w==","signatures":[{"sig":"MEYCIQCVnedlc12CorjUERdozZHNItzPokaQhFiUCAsPr524fwIhALsSOjTBpDm5RL4FSOB43XrDNpas6P4fzyUT0Qh41GIG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVzUCRA9TVsSAnZWagAAlucP/3xTIH220T5s8VbTn4L7\nkKUKIjiOeRQw83G+goKamkzj4RVzBK9UIpg8rD5iS0sFc/Mvpp7N22zldV1d\nmaAz76uDRzYSzqKH7i/vp39QcWFyWbeJwUldWWyJeGgV9gx2UZpij0XWG/De\nSa79WrWS5lUFKghZVwxWQBqTv3rWFjVjgWTxDKlW35DWXY5fNg9LrMCNu5DC\nt0w5hbhK3drQO9jlFWE3EB3sPXcq15Amr66kzxN/HkpfA8KAh0NWH4gj858h\n4CxtY/qntQs2OLZqxn60Bfpjt1kpJNj1Qv1aHYmhCnEw4P05X4v9qK+gICfm\n1odel2RoQlhZUUR0/4H92c0+st6QvjKlv7N2h8fe6M+cmfmyEtfza8wYfhFe\ngvCWZNSJOcct29IMtUDxolymUMvdtRlDRKlXnPQmZE/fMdwpjY0Nq/vJhQGo\nATGsYkNB8NeUFkKT6Nxj7p2dJMhIUosRAPyl/D8O0ZQgEuF5eufLwiyet8Vw\nyi/nZPnIyC/np3RlgL1rMzNLK4yOiGgeB1w/DJHByXNJszqpaZbXvvQ1bH/p\n7qwrVjBkWhHECEtp55U3yAKMHmH7Gklyqn0ihs2iv7ZZbLDNcWK447tef4ks\nOk2HH78iUVNhSC9fGH2KxvxuUIUSR9ES1Ci0BNEHkkL/vFLLdVlGSQa8GdSR\nriS1\r\n=5mXC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ec70d22f543f79f769bc5b509c9dc06cb8114af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.8ecd7c9a9.0","@material/base":"11.0.0-canary.8ecd7c9a9.0","@material/shape":"11.0.0-canary.8ecd7c9a9.0","@material/theme":"11.0.0-canary.8ecd7c9a9.0","@material/floating-label":"11.0.0-canary.8ecd7c9a9.0","@material/feature-targeting":"11.0.0-canary.8ecd7c9a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.8ecd7c9a9.0_1614109907726_0.8876295213110807","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/notched-outline","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb3ae1663bd36c4d3a209b7ceeeef6185c498738","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.9c85d505b.0.tgz","fileCount":34,"integrity":"sha512-8RuqSsjZu1G6OthDhNQzIwowPa+wyDhq3PSOoeP+iBJRboa6r2km2fT952MsChlKfGO1ru+8y/IYuuzk7ULNWw==","signatures":[{"sig":"MEYCIQDQu3Sfe+E7CgRKZh5jdvGhsyX3Gf/x6/H5vrO6WqXxewIhALSD7Hdvfy5zw53e4oM107vvJvSKDEMiyP9a/XvQSoBZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX7SCRA9TVsSAnZWagAA3bUP/jcjdUNtSYnYsKGigHMP\ngA3WnW7ChHc69shBXUnlC2g91es6QBuR4hNPoIHUNi6CdiiaJSzHMFfTipmo\njD9oi/A4/1lFmlIlN2oAPN/g4adKvXXE4dO6k6sIq0fcO9g9KyWu4YOOpp0/\nG8M0jV/c8yJ78SPMeL8Sb4lHpyK7bahOjJ9dYAK/LtdmdgnZlqpzXo0Y8ff5\nKH/n0kpLjVgZSEdNZpmJhf1HNdO0b3NpG9d4k876Z1ChLOoX1HM3vyp+2kDZ\nB7b4yehQWC4z7rufBrUu2QQ10KIf7yHQ5bc2tlZmaRVWw2V5bs7kBk8TPnR8\nN/upm03zCLZIhagUlNvyIlHuBMmwvEP1k1sm/ekPRKvgOrA43R8UfaFSHylD\nV4I+9C3I/VNiyS2eEa6SDMgViGCiMFcik3tm1D6Szq6TyGU6/fRdO+LqxvDe\n6QsDt/TmpbfHa3iQnr70lhcqUbuZ8iFq7aUFpSOCUBPUtYsxok8YbpTNd0Cj\n26NChJLFcr6eEiHp6CtaIuuNDrH5gr6vzvyBBnNVC6IsTua4dCQ3szw2jTpp\nbYFDz1LYhVKoaZy/dhJNMwKqKDkGu4gdQbAPkvjpLE4NrMhVV0n0qL6/nqIm\nyp6N4dz1H1HaV5oryreq+v7UtkWo4339VZXtgho8fFAgT6tkGmTlZM7Gl2KU\n0oaV\r\n=yxWw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"374562c85250daef48b37a0e27a506a7e81c56d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.9c85d505b.0","@material/base":"11.0.0-canary.9c85d505b.0","@material/shape":"11.0.0-canary.9c85d505b.0","@material/theme":"11.0.0-canary.9c85d505b.0","@material/floating-label":"11.0.0-canary.9c85d505b.0","@material/feature-targeting":"11.0.0-canary.9c85d505b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.9c85d505b.0_1614118609661_0.03262318733717562","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/notched-outline","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0c91658abc2c479c53dae238cbaf0cd43a50184","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":34,"integrity":"sha512-KrCFQ+Gq5BlXpr0jzFZGZpiMJkW7DV7mIZwryIeNpNXr9CXohciiqWp97QUEhWlYyDyehYBE5FED8zQ4xLip9A==","signatures":[{"sig":"MEYCIQDXmSUMdgHx/0IwhJY8mMXwt6ZjBsgtUtGuqTpJ4KU4bAIhANWDEwBAErBGaaSPorzahLJlKGsQoH1WblU6PIqYv1SH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbCoCRA9TVsSAnZWagAA+XMQAIDtdeLwVNLE7qcCcGYd\nu98ND5XnHrHDzeJfMkJ4q/aAK5DTIKy/KDABJ4o+Z2U2BKctL++Ao7wBAKYJ\n8+Vy2Oew5snvwkCgJZIdyrIIp8JysN3JI2W9oMfqqEHUpZ61WAx4uSElOFBK\nVTXTS1Dad9ruQPFha0C4cVfu6AnCf3DxvCGH4Qm9hQCDx+cAWEjFwFuk/El0\nWoZZgP18KF1gb6uFFflrcsl9a5+30FNG5+EPSfFhS8ElqrYAGrNc1lGL7kjb\ntx/FjwOQrcbUm6xn+fMNLqAfiwQUmUY1RE6p549wX9GJYwRlXv5AqdrLeS/d\n6vFT9jkLkzXOzOiTynH1bt9UEQwp7zjmvlsk7VXFe36UauhUViE7zIqzA7Q8\nlesNSPkD+EwiqRGtA1CZJwT2KZzxc27b9vDGMr+3q5OwUrBFO5q5EuySRwyv\n+JOQZil78JqBIUvPmMRqA3mKty6D0VT0m4+sUDGFa2OBTEWhLcNqbRwlROqa\n4e1KH5SNrp3p3S6SADGBYZcRszN9yIOBk7IZoDRBHyTX8lrKnJjfa72YGJc5\nBMzuhKLl4e7CUv+Ybg+sxP6sgAK4LONyr1WbQRcb4qYq87AYiIn42KH3M/tP\nolcS8jEckF1ruoKmHyaZ6OLwKpKsJXlu/vQmhXbGQDdvhROEMvpicUAs2ekO\ndg2W\r\n=PKuf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4dfe4e49ca9339b2914b3dfd9e5c12642a0fd60e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.9f2e85fb8.0","@material/base":"11.0.0-canary.9f2e85fb8.0","@material/shape":"11.0.0-canary.9f2e85fb8.0","@material/theme":"11.0.0-canary.9f2e85fb8.0","@material/floating-label":"11.0.0-canary.9f2e85fb8.0","@material/feature-targeting":"11.0.0-canary.9f2e85fb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.9f2e85fb8.0_1614131368269_0.08146762305746291","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/notched-outline","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44042e2c30b01b1f1ebaf1b84067a24040f8ea72","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.19c4f29ef.0.tgz","fileCount":34,"integrity":"sha512-M76p0tImAPfB3gIKgtA6vAt6l8q/P7VPlKliTZuz2HtyeRcvhQvzTcIRMr2q66O/fN/5E2lqqNX5XoAToW0OTg==","signatures":[{"sig":"MEQCIA5TivRlRZg/I9sHCU8TZ4GCBlduilNVy4vbDUxfLNWxAiBuXQslXnyx30u0niA/p6lJjYVTkHbENZhD+mobP4dedQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/lACRA9TVsSAnZWagAA6SMQAJ2Sx99RcqnAgQ3oWyVL\nNr1fPGmfLAwR3OlHKUdZwhPz+kpO4k3hiuUvuGd062kTpMCGRqzcCBxYlU5Z\nGWozPqrKygpDEpfmFy4bClKpEK9uBL06nJdg2j/CvSYViACV6rVowlEIRSxQ\nPHbZo2nhftunWoRiakfVIBk+OzsiTomOcXrYJzTOwcSkQvK/I8sCnTQVfUPg\nir5BWRFq3v2iiC61gcncNmBrzWqZU2MNZmDagBwfDPdgxXuHtqcTMCNHtzWL\nIVcNvd9gg5qO2EE6+5XpEs6LnKizqV6W7EQeiuO0bYNTfM5GkaGJPH90FCzR\n5obtyC6wEcFG3hlqsRHIXO+fh0ffGQBKvrI6YYs9tX964kjFMZjlnmUWfnze\nId/E2MHahiAHYvF8N4bDRAvwr+A+ZAxp6EcPv2CNWHccAVB78vGxigM1XtLh\nDktMafQ70HhupTQu/jmMyGzC3+lamN7aC370zqdHVtO83c8sHp8TDF3K7uqL\nUvDI9Nanv1PjgXLx732xXU0fxzE2nb+I2Sx5W8CTnXtsfD5OVadZSN9O9j/V\nLyykw3UcynMsEMWGZCnI1Q5LJwkk4iE2lJAm/024Ip+41ptVLbnAPjFzC7mo\n2lKkTHMG2snRSOyxG8fh7LrNdyOe/cP29y/gOht/kP51pMGr9WiehVVHNGUZ\nKMhV\r\n=fNYH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cf61b54810b37e81ab57d447f7d050104a2f6f46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.19c4f29ef.0","@material/base":"11.0.0-canary.19c4f29ef.0","@material/shape":"11.0.0-canary.19c4f29ef.0","@material/theme":"11.0.0-canary.19c4f29ef.0","@material/floating-label":"11.0.0-canary.19c4f29ef.0","@material/feature-targeting":"11.0.0-canary.19c4f29ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.19c4f29ef.0_1614281023306_0.9337972371071646","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/notched-outline","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"023e106a1d6eb8dff87404879701c33348fa8411","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.63df6e9bf.0.tgz","fileCount":34,"integrity":"sha512-jo3d+pnHXb7mFBhehGqEWtjWeZ90LpGaPR+xM2uMujNDpdhKlP2x2F8b9pWUSh+1R0kxk0V8dSAgdT/pLOb1Lg==","signatures":[{"sig":"MEYCIQCVNShTM2dbGidD+/4k7bG3zhqdq91dWLX7E0d10PH07gIhAN1OfopgEHvgRxYfxm+EgHz+xq6LWzVNy0xzAl5o/whz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/yqCRA9TVsSAnZWagAABQsP/0ZjTXqZBNN2NEIEEnDs\nB37wrmLtUMlSSBhNegZWQqQReba23EdJqph/dhdrzjWbX8jBLQgeKN8sW+8m\nXDCiMNUk9zkIFEaoc4A5QpySNLyJZtEhj25Otu9xrQfLnxT0rKHyJGw49cxo\nPijjhCnMg5KToYdGTYFs24ye+ufrwizeq4J2BPGWakcd+F0Ptmctv+d8iiaU\n1bbxlfu5lxkFRW+smytyVWoZF9Icjz/6mMCoMwZ9oMEeK2uY4rnsUngZZV5u\nvvFJRkP1GowbmCKgMO+K2KLq5JnW033w/NAedvjJxgA395Oy3anARmun5KaD\n/uiNFpfTEa/ikpdbldQg5KWUd+dImhsatNjfEt6HBUwEkZFE4k8oTYSxGqIT\n16Am4hjyTMXc54PpJzZm8aqMqQcD+pVOJNthR2FzPt4nsUUGpMjFXmpZNNw5\njfjTVgYsmRRTDWVyAPVdzFno6al7jFQmDl6aI4nOKx9rG2UzuRhZH8irkRss\ni2dmBLENhJtBW8CNkCXkwk8gPlzKTSxuzuw/QhtoboIX46tSvsEFOxTRmJyL\nun3ZjIsPuPmV31lcLjweot13MHxFLNSWBbhtuykXGVnlUPJ5q9PtkBtfjOeY\nYfV+isJg+yuLgtwSAoHt9xqxgRSsDoX0inLpz6fggmtWtrRzEfkY1OZEocCR\n0IWp\r\n=ZtXJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6d11b414d4ea43b5c780988e2437ee30c9f1c0b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.63df6e9bf.0","@material/base":"11.0.0-canary.63df6e9bf.0","@material/shape":"11.0.0-canary.63df6e9bf.0","@material/theme":"11.0.0-canary.63df6e9bf.0","@material/floating-label":"11.0.0-canary.63df6e9bf.0","@material/feature-targeting":"11.0.0-canary.63df6e9bf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.63df6e9bf.0_1614281897705_0.5361873562619914","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/notched-outline","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.981ad970a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b3d3746e4bce693bb84695cf38bfae01f5b721b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.981ad970a.0.tgz","fileCount":34,"integrity":"sha512-8jnc3RZwezNInLdlvLpNjmYwzjSXxZgG58t/ovmU0kK3ZYBNdqo+B6GvoV0Y0QlhSzi0LmEn6g4DonH1eiImmw==","signatures":[{"sig":"MEUCIQDJbgzuqol+DpoQyySlWBa4jl7tOvjenJW2Q6JJFv3eDgIgVae3MHQmqNHHgCMai0WJsZVE2OZJcT+LRblB48xYHCs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODwlCRA9TVsSAnZWagAAzwsQAIHDetQfJLIDr9ocbvWS\nha1isNQKm5zTFM3sLGwdaMEdHI3MSW0sUYeLkqXmOH9DYXW7t/SRs47KAyhO\nBGZrFrkoSmW2Lu83F4UESvvuG4gAc7AnvnZXWKgfzg/s20KBs6ULI6rCU8pv\nGt1RCRyKjbt1tiuWqI+U0PDYhhgJEEYzsmCqI8ngUU0IELB/K1d/SWA2GD2A\n5TPzFef7lDn9nnelfpXifmOxHM+yU3c5phCJqUyoaCCFxTZYpMVaBfeqLDsz\naOPMxnroOPD03yl4EHigxgeGFLWvP/SjiBmuQtSKemiruGIz/GZsUKF/7+0a\n5hodLmSWWi8saeeGAPtcWdDUlV89kiY3kz9n8A+7OScdB9zb2J/8SHlFDy1J\nMn+WhBzrOfqrjndkRQgr2dOQfQOR2OqPpuuQ4QBa9R4W/0YTMe047fiPSZ8O\n9KSrMplVufDghK50SuDnmremM51YVVq6AAT1PBL2GS3Vgjy+AqpE1aDZM4AK\nWrJZkTYeuWRB3oq+bKGDETnZsxjgTwnFL+oPeD1U83LXmp6zLsxbV+LQ1xZi\nkYESPzYS/CdlXVY1IHMyvFJ5QJRsE6rRIvCMwuQOf83PjxMn3VS8hiXm7DTf\n4XwDiLD6NWimJUE1qmJl5CCMn+Z2px26Yri7Sb2ahjqJQDONg0W3PmLjyliB\np+Rh\r\n=MvnO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0faf6e6b78f0c9b2c63f416ae85331d13aea198e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.981ad970a.0","@material/base":"11.0.0-canary.981ad970a.0","@material/shape":"11.0.0-canary.981ad970a.0","@material/theme":"11.0.0-canary.981ad970a.0","@material/floating-label":"11.0.0-canary.981ad970a.0","@material/feature-targeting":"11.0.0-canary.981ad970a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.981ad970a.0_1614298149025_0.20727588929509522","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/notched-outline","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc3eb32b99f4f5015265597752358d5e60256499","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":34,"integrity":"sha512-K8l0wPcsQH6+qP8Tni5ChvELl5IJq85DaY4pyN+ApsO24Msf2kN94zWG5LX11v3E5kBbSi4kZ68kivM/gHQb9g==","signatures":[{"sig":"MEYCIQCFGs5r5+cLqmdp5JDb9I3kg+WIjYaZw7WyKVpKRTmIMwIhALUwIwHarmziaaWV8kNAHCzhsRv7BjW8X7rLlKDdyeeF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUCICRA9TVsSAnZWagAA5P0QAIIPD70gowFSK0XW4IPB\n8JlBPAVa+L595IKEYNzSvJl1Ja9cM5vZRF6FTI0dW1UGBuENfTxFgDcgCL4r\n3QrHPpPU1/5GaoQexHsmZV9DS0CxI0zuTC2k4b8xaDIAu2h8YUv59xSAf1l1\n3cl8vZwVH3P71sxpE2Ezqmd0IDYY/BSQ9cyBrxvhVD/PvGrjrf8G1X4AnylI\nkjLUKEKa1Wd099Z7+LKv7E8vtuduYKdvA+yHs4/f1TbxnQNNoMvsPmj948pM\npsK6h3w9YcCODhSLIFnJR0tUtB9U39aQSGB4+8L9GQsl5y13WC8EpPWBtzob\nSvplL4vjm3VBk9DC3hDESgzo5NTf4P2vuiWZ2butF/rToXZo8N1T8kfvOi+0\ncD8z8KOiG3dw2LlTfac/4gtlPdKt+3DHH0nAhwarjF6FtvUKmD1Tt3MEKxdu\n4g2+1C6BlY/TBU9ca27atLSLCGGQ5UFCi2lnA5ZsGIP0OqBoIxIP7ZFaVF4i\nlhZWpLsNO4yUJM2cTPHq4NaqNG9jL0oNR4spBOxb6+GBsM10BBBEICf7qPdw\n4fzRQ8Vz1cEm0aiQsjtjdgGXdOHXufVV67bIKD09aiTgIHszRlpPh0olJ2Tg\n7M1cGu9onPF0kDLC7qia3Sjx3Xqd1epz0DtoSFUiiSbqayarEv/RnfFDHlIF\nTfVq\r\n=qloh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"81d489ae3f1defd63ee64de05a2a330040ae6406","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f9c9e39d6.0","@material/base":"11.0.0-canary.f9c9e39d6.0","@material/shape":"11.0.0-canary.f9c9e39d6.0","@material/theme":"11.0.0-canary.f9c9e39d6.0","@material/floating-label":"11.0.0-canary.f9c9e39d6.0","@material/feature-targeting":"11.0.0-canary.f9c9e39d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.f9c9e39d6.0_1614364807594_0.8639384301924067","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/notched-outline","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8646f40b3937c584c74fb62122d7982c8a866cc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.c97d7d881.0.tgz","fileCount":34,"integrity":"sha512-UbB3ZLX4wiSLx9Ee+NznMdCq7Tm5zFaTcO/QQuh6EwZUpUHYMFFtdTIGcZflvGkfD1HO3bIB+f01nH4zvGEXJw==","signatures":[{"sig":"MEUCIEIrGVmR+RAQ8Cs9SK3Zg0c3XpY2Up8ac9DQ56aIZOclAiEAzY2xhWesoRpXe7CXRclK6DTUsW9KPkhB4/ghRDSZT6E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVR8CRA9TVsSAnZWagAAGx4QAIepwHd4wuwP5rMI7b4G\nt2y7JYkvCIggiiho5O/SVbZ4gOLH7K75xmzoiOmHaDk78sd/s6K0iTaWjf+r\nix2BYPO8EL5UoqBFRSMEqxro9xoGg5XpmG6hX5lXwsfE87GhVg53RWzhmYRM\nXC3wSxvMp8zsAVo+jeOO1ZS14F6h9dkyxwucNbNvxj6g9eC+gChCf+Xl6dVI\nRn8zYOi9TZF5b/qeYEx/n4KYUDeBaJ0zm0ZkEpX9aDRSnaMYKp8ebJoBFQQ9\nDt+SnTT8gB1ju/Lpozdz+tVg/F7ptGQdEokUH6KvDprNnirN3ufBEAAMpBXI\nAYwd5SK72BHZXu7zo7u9nuBqA5UwYhsIxhnn+JWwUgFVx7J66B6jZcrDFNp7\nnGNirqKG3W+gycVqtNGxGgGcMjRjNB9bNU8qIdbjv16JaW2M8JmwTsRIYyZe\nuywTst4isM2X+DmQ5/H9h59buFF/L0wx+91ldggVEwIt16XYCgXP9q12kfYx\n6+n0hyW9upF41UVuBdvJC1cjG/uvhMi4HhJyQ1KoBxNqsy+Hqff+IjImLqe+\n3Ic0bpxF3P0ikv4hEovXx7SYDYOHi40vXW0ZTidYkqYhEsd7pB0IxVpSbXM/\nH3L/GglWijUjXcaE9dDeuZ7PGIP5RmvDA4dN1xR1/HBhCM5OVlLLYDOilo/M\nzhwN\r\n=AQSs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"27a49055320511cea9f431f9c62d44a6490bb64a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.c97d7d881.0","@material/base":"11.0.0-canary.c97d7d881.0","@material/shape":"11.0.0-canary.c97d7d881.0","@material/theme":"11.0.0-canary.c97d7d881.0","@material/floating-label":"11.0.0-canary.c97d7d881.0","@material/feature-targeting":"11.0.0-canary.c97d7d881.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.c97d7d881.0_1614632059851_0.9774736218333966","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/notched-outline","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfacfa13901d243192cc6305364971f003527582","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.bf670dad7.0.tgz","fileCount":34,"integrity":"sha512-EatOgWh9i9lJenxUzPgsli5HGuoGsh2f6F/22g+dEQ9L8SQJxSAhWpowf9TaUvbR/lUlA39gnoyXb321ibQCLg==","signatures":[{"sig":"MEQCIFRJbzSwEJFNV0cuvGaHs3HPCa7V36zvsCfo5B9Q/LBTAiAicGM7HxC7mGd+Bol7lK6nj7111r8Hl6bZi+rdTqmnKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPta3CRA9TVsSAnZWagAAP5cP/0F2hPn5rLlSxukPfqjy\nCG5AfTwPmjlpIdheTDsiYSO4BiIxnTWQPnGDoBk08ACgeWAvzNwzL3rayYZ5\n4AZBp7l3PBDoFBCYGPhZPRHhg/4KmCs+HTDBAH38xX108a0v5Qg47L6sLmWU\nM6Oi6EQuJO6pG9oCfobOhT+fe2QoLmXyvBqtoqNetd4nAp/rYsYSeDxzIMIo\nqMt4eZHzdC9R3lIbSn2zB9fCZMG6Rsy2BcFNuNVhinnqFFvfJO8GY40AH8xm\n/I/JcJR3rxm9nKfHsxFdWWEgBZgLbXFsxf+fzkEeU263JkrNMuqBFnxrvzQG\nBw20SDKN2n6QklGSxtR6lw1EFq+zOv2gQhYiaSKkX3vOzll8nhtjH3JkndUJ\nVmfKWsfZVBx195ibM47n7ECGeAB4vOJv2F0/BiGiKXe0YsyY4bvspfC9xyU8\naf+YtNj2CCkEx0ISrlxOmzwSAWkuKQlT2eSdBTy6JGcOTEn1aJbSIorXznwY\n85arv/wNWjatiK9rtDxI9JZoxxhdIWISV2b7u1hu1qWPmyg6FHkdxhkOoGwr\nuGUn84MRUx4QWskAiwfJg9VIB+I229g63sFuUgeHA0KRri6GWteDSiDNhIoM\niGHVvdzT/YBQVP6ZsH2bi6rHB6HAXVN7a2yPs/JcTOanY5sEE9DiwuHQ/k9L\n9xL7\r\n=Q4//\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"61b03e5331bd5c886de5c4a57a4edc1b53878e47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.bf670dad7.0","@material/base":"11.0.0-canary.bf670dad7.0","@material/shape":"11.0.0-canary.bf670dad7.0","@material/theme":"11.0.0-canary.bf670dad7.0","@material/floating-label":"11.0.0-canary.bf670dad7.0","@material/feature-targeting":"11.0.0-canary.bf670dad7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.bf670dad7.0_1614730935273_0.9922594065687673","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/notched-outline","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3626ff690cee244e5a41f1de1885bc16a5ae9182","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.c7d98fcde.0.tgz","fileCount":34,"integrity":"sha512-LO0KSlNbmmGjB4ZL1HggfrQ5TGTiICn+T1YYPanuXMtaa6uJwVXj8GCTIC3k4YcxydoAqwztUJSs12pbfRKWDA==","signatures":[{"sig":"MEYCIQCMtZ0tLQlqPLicLxk7b4ksROFQA9L3H0+CFBxgvnwktAIhANuOn6N/cayPLT2gS0y0wbwKuRPD9wpR9B7b3qi607fG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/KQCRA9TVsSAnZWagAAFAoP/2SORq3SqLD2mH04k8Wo\n92HVfQONjjgZ2smeTGDkpeln5e4ZxHfCRD5B5CbENyuCXrN4F2Ms4iBy4CAt\nyL8ZCdr9j7DeriWH6LtUQdUR/blwicxare6YXbdu96THb9XsOTPSNQ9FQX5J\n5yuxiAAS4bDXLG2w1TC8/pqca5jnhDDBcQFqD5Ee5yy3ZpnRVfJLyUI06Q8+\njjJKJ9OnBSFX7xWKdn3mpvApRpCNfX0xv3bpBzb6Kv1xW7b0HjnjKGkJppFp\nevB/qUdOUz88cI8wWfsSL87sq610OC9ttQM/KBl7CjCy+rUgMlSvqEFmBZ1d\n7N0arStHdP+oe7MhJ66KD9c2BHmN8PTIQj4tf+z34xmzy/rYQXwzoGlId7dO\nSJ9y2CepM7qxtmaxSbsrAv4XDBY4h3WM2813tEFWgdtwG63OyaZHeAIp0ZBp\nEBKYHGYsXIdeW1ylghqQkX1clEHNaH/DnVZqFcLYzd+IXSitis4hvHBOrMEO\nsMPPJdaWHkj3ygYun47O0Y7va7apc2871SKn5PQ011onWxSGmc6sxZ55QRV4\nbpdL4g4Q7iaFGHZGCdhGBbn3YsdM0C0j0X/wLGQv7hpy3x5hpL/sXmJwPDs6\n0XEZ7/jQlQLwCu4XAPfrSg3zYqNupTeeCwO8KKw3U6mTe63ZdL8atix3H/oH\n/vIb\r\n=fDMj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c5c4c5b417df34d141edcb1fd743d83d7a2b49cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.c7d98fcde.0","@material/base":"11.0.0-canary.c7d98fcde.0","@material/shape":"11.0.0-canary.c7d98fcde.0","@material/theme":"11.0.0-canary.c7d98fcde.0","@material/floating-label":"11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.c7d98fcde.0_1614803600068_0.6584099343171188","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/notched-outline","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"338ada373e3b4004ce5efcb9b74d80a1c40595ea","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":34,"integrity":"sha512-n8lVek6Kxb6SWSSvSgP5eODyxcNR6/fV3env2V+NrYPru/EVjM/TwlokV8qXH7hEb32A6XcRvESn7wmptBbIrg==","signatures":[{"sig":"MEUCIQCL6XWuT87/Xkuno19fW7E2bmyXCqWw3E8Zw0aLPqQwFwIgfUiustOXo2M9O58+EeUgF19H7iCEB2gkhA+xOAb/NEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBrfCRA9TVsSAnZWagAAfBoP/RRHC4KUV+lsBs9hA3aE\n46kfbJl9+5csFzkAEnKnzObwH63teGt4mYEKLH+C8lMHziXfTo3nsJMW+zXS\nSgRoW0+xAHOEcjxwAa8OxTtfOmxWh8FyZJiKz09VzefOyJ8JfodvZYTtUXzQ\nYlPIJZlTp+VQseXL79mCZbGaluLvR9gt4tqoFjnMdfPBwsRbuft2VptnyUk4\nd/1x5fxQY54h3oR4/S09wA42ThqWdHyQMNKBlPSJ5lwXUuDRmTEwLqn87Soa\netBJgrAAc9V9xNGhlt3XpJjoOKzSI+G7G+2bj6S5IOKKMplFsJfQSxw8XPCv\n+FXkgkbqPO1psb4ZcmTRZKE+w9/J5Twu81ij+Q/V/6owXHsjwc2Qw9fR5lIE\nS1pAKLmpoXH1iJWKKeCj5qtVPd75E9wg3dfJBVP4ikPdiSrCtghVwLxmmpri\njmIvg+dWlv27x0zCQ/+euqOtDgIF+jeUpxfjkhxFcsw+HuZ5kbmxuprgZwmZ\nIKs/OS+R7vedp48ttYifC8QymoqrFPy92xj+W3yBdTH/XJKoP3joSvpbqWvO\n+h7Wkb3hebvH/nUvfD3oDlqMO3DUnmbeiGdUJqslkRX9HEiqt6tIOqdAEDv+\nul0bIItdjP/YYBtK3tj2DZrTILZvvbx3Pb7bagtN1grx2LIX4qdFUNH8v1LH\n9LE3\r\n=St5L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"933905005f9c16276caed5327bc6ca581afabb6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.4fef8bc1e.0","@material/base":"11.0.0-canary.4fef8bc1e.0","@material/shape":"11.0.0-canary.4fef8bc1e.0","@material/theme":"11.0.0-canary.4fef8bc1e.0","@material/floating-label":"11.0.0-canary.4fef8bc1e.0","@material/feature-targeting":"11.0.0-canary.4fef8bc1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.4fef8bc1e.0_1614813919069_0.15239383122900252","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/notched-outline","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef41ae0a7a20780c9bb6fd4002d0068444d3b05e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.afae3a3ec.0.tgz","fileCount":34,"integrity":"sha512-2WlSezq0vnh7FO9EiG5rFgl2WKsCstdpbjCeMI7009Ob+5AbRjO/34b1OpBwhm7rkWKsUoJlQ2mYd+I4UJsSpQ==","signatures":[{"sig":"MEQCIHy7W3sQsWX5QBiVMwDNrf/0lVDPuwLDsCuqSmCKm2kvAiBLi+yR1It+7Vb9wocSUfaie7BKirmLXQ9F/DtekzqFxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB8UCRA9TVsSAnZWagAApEkP/AyeYwjnXHcXMh7rC0po\nUBP6Vay5qBl6a6zMe4p5h7w7kxqrT12vxZ5C5onDVbqv4WE6HQUCN+5XDjTL\nkQ7xJxXoMdZIc0w7x1EkX1oiEOCid79fq1XpluoT9ZsXVptHRoVeHzNP/RoK\nXkTmsGuBOxLhUCBfHdE36iHCeyheCbIiJz8MgnfrKT7HfxscBDp+ilvjBjyo\nvCa3bFIqoc0T//B40PgIyUdtC82YMQGe8+K8WXuXmpVgjenw2Yel9dGbE83D\nCNmmgSX91AXlicsAuezBcRElNU7bJJqCTgIONOiCd1LmBbqFBzkuwympr0RG\nafYtY6H8hzlIltVI25f28Yc9KfSfUHMKGs/sAz41nsgul34AtvUxBUnHii25\nWfCqCUCf6Q02w30Q7UewdmVhj0OiZkXOl/e1XbVs3saQzFTFPODUcSeJT1PT\nt4R3l6Oten/arD9CcRNEWe3aHDltD+4rPcPlh4dvceZyweBx0vbjGt+UreZT\nHf/3GnymaNdVHBqxNF6+9ytCP10IGIQQfC3QyYQEUaZmeDXqxT5QDnukE7ki\n1bJHOkCWgaOoREzhiDnclJnc1FhJQE0JEgeUTsqG9zwQCn6LWKXoExuMWxmm\nNSB1cl6fagZvopLroBFOzJBcBuX1Tc9KDUtmu0XPQ8X1GpFErP6F1Ot0pNjt\nfIr5\r\n=ocES\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"054b07cc588568c82346f2cab8aa8948b77a80d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.afae3a3ec.0","@material/base":"11.0.0-canary.afae3a3ec.0","@material/shape":"11.0.0-canary.afae3a3ec.0","@material/theme":"11.0.0-canary.afae3a3ec.0","@material/floating-label":"11.0.0-canary.afae3a3ec.0","@material/feature-targeting":"11.0.0-canary.afae3a3ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.afae3a3ec.0_1614814996323_0.7238256496869637","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/notched-outline","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"233192ae6bfa447c7c2ef7048cc0da8fe4ab3b99","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.0a0b10f22.0.tgz","fileCount":34,"integrity":"sha512-SziSf6mRi+AAltDS8DuIFRdSfiOdksbs5TBvw7g7rZ2RvlVQBgVXNceQW/gqlsmMBssBtL+7BC01SZo9lFXtAQ==","signatures":[{"sig":"MEUCIQCaz/3AmpjWlPlqGxVhXlfZffm05K0HiTc1bq49CX4KWgIgR7XYTDfzfO+FtzS2AevwWEKB9mKFHlpO8xG/8G52kJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCOECRA9TVsSAnZWagAANMQP/RDXOzhOAmO1pJcHS3id\nNIG4qa++57vww1acGhrFEZNKBWon7s65Ix4j0L8dLyFzwQ+stiULrgHoIeUn\nq/OOfRGQy/KarXd3+rcGIJrqq95Log5droe2FOGhwrZDuHVy6s33dRukPrhR\nT+ujMoLmhswhAh/yfiYDcIc4BoyT0/uYm8IKeDzEaXGPvHBmax7c5IgfkGyv\nykfftnoF8U7lEpVY/akoC9pXGzCYAdE0AVjszk/nPVfIShBuz3yEI3Jo4rFF\n3nzNR4LjEcekGAC6EXKDNIf6H5rRR59xkHpcqb4iRzDvhpPAhUNW1owQtR1I\nZhk/kamdD3slrsahCqMX996Y/paTpBQ7wkFrdV76Uv6Xvedr+B8xBdL9fdo4\nla3Cmk7KqIfvTgbjUxamQ9eMmSZ6+jUOj+0Kyg18DFgm1NOP42NFTasGcMf8\nYwdWIga7qIisOBQ1io3Hs0Zv7k/iBs2J/8aA1UH+b7A5AbqHvnrYF/AhtVlZ\nJ++s2Tl8Ua6xgHmkqONgdeyx1PnG/gWy5up34xrjZTaXQN8N7RkUmrLZl7er\ne3AYmIo35Ii2JTiNnepymdDha8nw3soRh/1Vf/TamNXAV1O2Sw6R7bSjB2zM\nvPQnkRT1OO+e9+L7odb8mE+Itc6Jw0+y0RCA11y/10y9mESdEb9S/SpgQtg9\ngPiW\r\n=U3Lb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5b560f4bc4c4b50a124c9432e81b3287bd348abe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0a0b10f22.0","@material/base":"11.0.0-canary.0a0b10f22.0","@material/shape":"11.0.0-canary.0a0b10f22.0","@material/theme":"11.0.0-canary.0a0b10f22.0","@material/floating-label":"11.0.0-canary.0a0b10f22.0","@material/feature-targeting":"11.0.0-canary.0a0b10f22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.0a0b10f22.0_1614816131839_0.12869865753763654","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/notched-outline","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09b0e0d432e7b47652f189cf23028797ffdc2474","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.6f678a91a.0.tgz","fileCount":34,"integrity":"sha512-GhUtapkVgqrk/3yJ4QHTzmwvPw2Kn85yCdN+2/BpJtM+bpXz21JLUwsf8ytuHaYZMr4QwBBClgjWNUnqkIsvcw==","signatures":[{"sig":"MEYCIQDqQZWYdhS0Hv1RxjHp0EIrE961AvOocLFwA+ybNPqiHQIhAOP6ns9XhC8e6t6oPv12d45O13DRHB3wrCG3S6XOq+iL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSnLCRA9TVsSAnZWagAAMwwP/jOwnHU5pIMqcNp7Pj0h\nXCpnohu7DSCUmgIJ8fKNAMwo89YeXN63Uc9z7HpNrldEfLxfH0yosIIZgEPj\n0NYUZ2BS9HEc78nyhp5u+Wv8bU58TLdimdBRVsNAgm4tx7KYtncXoNwfJsIR\n2O7UU7osEZFYHbbtEh1QsKcQpA753dLkssinM5oFgsdxmsdEaUX8/VuZ68ka\n4mm0kFtXqqJbTThn059942V9Z55RVpuP9fvHL57rF2QeQ5mt7QpwD1YKawsK\nljD8LTFEWfIHtVjYUGkwIpE7833CdaR8RW20ZmkuY/+jhsI3yGg5AMZ2LHem\n0IkL8Bh704FKXtPS53QMBSF40jAXAchT9Uje7GQDCgTK0D2L7BkYQ/YoJ7DO\nfgxAPp1Rux/rFQUHfhHVAaIYdDX5YJYN44bmP6U/bq4JwbhU0Nxy6J2v0lvn\nJv4gZh5e0ZLK8BlD0XegPIZieLjmR+1/ydJ18WVy51C+DKojZNoKbA2ZI+f2\nBuZsBFDAwk/v+0uf3Yo/xWqmiVIkngY8IbGTA7HTh+omCEKPd5XrPkfAgksN\nyWxb2sOv65boDSYrujAWrt0YRXxUPUbvMYxpdEj1b6WGpL9xHgoYWo0NLLDq\nk5E3M4oaBswryDYI4+1qubVD5PqT+pwMNvy/7k6Xrao0jPtXCstt17cEcwy7\nCkGh\r\n=HXXn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"863e8a04081286602f8b0c9bf446655b9399e8c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.6f678a91a.0","@material/base":"11.0.0-canary.6f678a91a.0","@material/shape":"11.0.0-canary.6f678a91a.0","@material/theme":"11.0.0-canary.6f678a91a.0","@material/floating-label":"11.0.0-canary.6f678a91a.0","@material/feature-targeting":"11.0.0-canary.6f678a91a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.6f678a91a.0_1614883274728_0.39822555724051645","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/notched-outline","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26cdf4b412e434dea455a44ef63e5ac833473b4b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.f5f1b613c.0.tgz","fileCount":34,"integrity":"sha512-M4uPr1xO9dG2Ea7fulHB7U5sd7kTESD2opMA2L5XI5jgkj7wfJY3272aSMOplM0P9tREfmmLKxG/R7t+0BdVwg==","signatures":[{"sig":"MEUCIGZ+OsCyyI5f04bbGwZFNmo1XysT0yp3sp44UIK5tRppAiEA2rNEgHs0ef2PgWU9rvedSRv3s/wG9F8HpscMwOlQkDg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUgiCRA9TVsSAnZWagAAzRoQAIOu/mwJrGfhzVJw9tCN\nay8EaVXMRrBzYdHxyiUqjSdxvhYOhMf1qYxKpU4HkdFbG3wup7g4QaaVJ/WN\nZBCEfOUOZ36H4faiMEEGhYHJhL4g30SnLpk9zftsNV5yUEsJIxBuCy6Kb+pg\nMLRVFF4NYD9/+TGMhpg/0clmIacouU+vUFJBFF/pTe9/KmV68bNnarezCmyj\nMpfgZcYOsyoiG3T2P/4NEGLuHAlnIv1rFOjrXPAFa6Nkobn4VEk4Xwec/Soc\nsq6vs4cIqFlPCa4WtYVsXK05/CeOr5cZilbdLX+4Zu0nSNvTPi/SpZIc2iRc\nB6saU/nBx4YEQ70wop3n/XR2QvzWaqqmztomYZu4J/g1BmzCsT8AHzpumR+l\nRX5q51OiCIYBUagDQkhG9RhKQ0w+RhtFCxNrHClSKLm5s2rbMTqsURKjOYPK\n7RhishhALCORIf6583vR+leGAL+WSOKI3hY1w+dzdXibeyCpt0TCaFpnayq3\nnlFEO4lyiyRehSbIsMXjTME/OugwX3z0s430stBfjCqN6Wthas9/uxWi0oOT\nwh/GnmJOpf0eIPROL+B09O1zkPac6qZ3Tndd2D5rGZnVPFmFEB1Yp5k1IOs1\nRHBXeWXQV/2akHTYlB034MxJkja0b11I8eXfUP41wrA645AT0noBi9iT2mkg\n5gCk\r\n=OBEh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"20e2000d9ec732c7cdd0b5c15381f0a55f778036","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f5f1b613c.0","@material/base":"11.0.0-canary.f5f1b613c.0","@material/shape":"11.0.0-canary.f5f1b613c.0","@material/theme":"11.0.0-canary.f5f1b613c.0","@material/floating-label":"11.0.0-canary.f5f1b613c.0","@material/feature-targeting":"11.0.0-canary.f5f1b613c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.f5f1b613c.0_1614891041648_0.8016308659358908","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/notched-outline","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.606e767ef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b68ad9b46384fc611c0df887e091637d2ddb714","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.606e767ef.0.tgz","fileCount":34,"integrity":"sha512-DLC8MoGptnkf1LQBIVCtqdUJmHiABVIo+di1a0penMOdzwS8jPD10L6ZyotvZVnK8Wkivy1VO+9CK4r5RjNbDQ==","signatures":[{"sig":"MEUCIFmTieEGvuSk0HHUwuIDxG4zOJkMU5uDvEXTXOtCIvR/AiEAupi9Bo03C0i2+uw7DlVG+Vwok5N8JkQp0L/mBz94OrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVVMCRA9TVsSAnZWagAADUcP/i+sk6/lQoOuGomSRbYM\nYB6JSoC2BexBevGReVSzmR5Ek0V74lnpvs6Awh5g6f/qJyVs6G8DscEQEWUc\nqVyrRzfRZVVV3LnFrfc8Lps2YHx0SMlXP3W3CiQO5vXiQ612tZMmM/QZQ3xL\nHFwPZshxTRV7KhcXD/VLz+E9xD8ouuskzTVouMXV2BCKEDV4UhnthL3qm4EK\nTt5hc6u38GMoBMgr0z0ayUDsq2WyQ+YMI1vWgkSomckoZ/+u/igcFF5iD+fw\nGC6fAYJrecgFhaZQZSAcW4A1Mc2R2bo8BFhBR4TNz48d5SbspzOMq78K8rD1\nRS4CZKR5fT4vkO8qt4pEPUGArCeq3A2IdFhlpGB6oXUxa81njxZNbtu4rxbU\npE97ffuisJ+ihREwTFUHFCIYAjmxkaznEnNFz8bkozRc0LYnAVQmeD/etulE\n5kBRJGgGWbDujSpoiGY3HTF+KpYt8GcCdqh0svPkNx4NaXO+jZKACtcghC71\n3+T5/vHfmUzO9CdU1gVNuqkbUbWA3Ftw9yNeL0ec06fqr4DrKrYZGIydSXK3\nymfD+/mZLc5MaxOiXvyqoodnL3Jq+POzhJ47b7LZzBtiTB6L3+p5H10L0K/6\npA4kvUUzqejfqt2h409pMB+zOLRVQTuWPot9Wk0SbTIkCfw8OZImAF+TXIyW\nyGGx\r\n=RPlz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"34c41b3553e1ca4ee49c0c36a1685f3f462d33ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.606e767ef.0","@material/base":"11.0.0-canary.606e767ef.0","@material/shape":"11.0.0-canary.606e767ef.0","@material/theme":"11.0.0-canary.606e767ef.0","@material/floating-label":"11.0.0-canary.606e767ef.0","@material/feature-targeting":"11.0.0-canary.606e767ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.606e767ef.0_1614894411954_0.6266009573172486","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/notched-outline","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e1bbb6e5a6f1fe72e536d665817321962214ba1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":34,"integrity":"sha512-cOVVt34aNyi3VH3cBC3QgQp3TpUSJghZqKkL33RddCfbuMhvacOPen6fjnOZa7IqQGbss+FCTFtCfWeWF5iOSA==","signatures":[{"sig":"MEYCIQDUHdz+RrlBD1wtr46bJfa42pHzX4ghf+CLXuPlcv0xHgIhAOtaMUqiP1/v6ZgFKY++Qb8D3VsMoFBJJ0rknYQJQ6w1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwffCRA9TVsSAnZWagAAAsoQAKE99Rs3ErkOm5hD1Vxc\nPciFelDHniUj9XrELGVKqMu65IpihfQQPpDOaBL9ANinNHYY4PCZLHb5CaPz\nA3GOnSIOSyxoKwJI6LaljuWhtgRIhc6RwI0Ur1APIozaUiqK8CR1PENUqkVi\nXnoEY/hsKF/yWSkHvu0sp6aduLGvzIm6hEDHsEr9sdpJV/IUcC9bXM23Ak1/\nCTanfnBFVYLbURqqRD5tkx0kodx/jfZTicX3L9Pl63jdNciDJDOcjBO9IqSV\nr4NWUsU2rjbjfWSP35ZzGjVbtyifGWn4jB6sKt5BnzSTuTvFakhoV33yjMCF\nzQka+HCXeTWIrSMPc1pDd9Qe6qLRPgnwa2RmCbuzpGwQgrNZI7FRSf4KiggN\npLpRv3D6YfSWPyiwsA+SXXLUmf4xOJ04nZ5imhiildHtu6DqlK5igZRW8rim\nopKG6lZXryAE+vaD/5TLuA1VYmK5XpZ7lPKhWkQe/n0vCaj+UpvcdPmUWf5x\n2KFLC34kcDsF4FTRWV5bZx0S+sfjk5RjjqO5PgSfN6G+oQh+A1T+LQGY5FEB\n1kbjwmt8uOh3346RyVksvUnI/6zk0u46aWuHl36vCsjRFYT7IQcbf2Emw3vV\nmhAdyIx/zKfrm4fDOJ6EF/y6wdpIxTa6dd7JrcCQ5GaT6DxLv6agDaDp4pyg\n8T81\r\n=fL2Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9a729bc3e368dfd8685190e8460ffef16eac8947","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f77a4dd1a.0","@material/base":"11.0.0-canary.f77a4dd1a.0","@material/shape":"11.0.0-canary.f77a4dd1a.0","@material/theme":"11.0.0-canary.f77a4dd1a.0","@material/floating-label":"11.0.0-canary.f77a4dd1a.0","@material/feature-targeting":"11.0.0-canary.f77a4dd1a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.f77a4dd1a.0_1615005662665_0.9511108225025342","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/notched-outline","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45cc414ae4c3c5ddf87c30e2b4a3e320fe552e4c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":34,"integrity":"sha512-MTL3HXBma747qHw8r8irUTRJXAgzGCc6fVGvUof4YDD08McMYv+niGDp6+13XvqW/SwAN3u3mtC7WTJfy4V3RA==","signatures":[{"sig":"MEQCIFU+zA5gBVMRKANso7Z4xOwSlxDcfsdSnxmkQlgJiLgVAiBdybxQjmtp+1S4t+KR/DTskgXJDbRyqlu8b/TW16xKug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqj6CRA9TVsSAnZWagAA27oP+wVuOZ+sSQ3pNCiIXNCc\nplt5lIcswetDwj+gRtWvS6CfvDHRPQPTdASKWQk2+aZyelzOCr1Z4XY66OHi\nPmhYxMMC++CRYWawu11JyAVvmO7OwTAQ7QiD0gNs841QhU7N4ylfh+iLB3J+\nh8rNkQ9ApdkAPYNLu4ZdV/AoWBmGlvTDxNvSjpEOtvcca/qrvLVFMAe2Q8Em\nrMHa12QhrcsEBPftJ6kJevCX7tTw7fNVeHnNiHrVczt1tXIyB1Pg91ENjm1a\nxqRSh1seqlZRn2+asroFWsSBnT4c6El24lnzizhQVQwLWuxiMXme8tLOZvcU\nbchZQgAtszaw5H0fD1aVOwaGoRMm9jynI8XfIq8aI8afMS6pN+tTzdCFUJSz\nNMybDXktWCbr29VN7g70uvMKoQP/aNZj/22JkvH3KqQfWudVBoYYPTrOtMyA\ncldvzTxLZAu61T2BJaIUpk+tkgOQfzn52BTQ3s2eSAacvz8sE+VZ1oTG80gg\nCcA15PAOK8jId63hPuWbFPNT8AdHmwssHCjqExl4xUZZqiAwRiJZxkUIcJ9Q\nQ2vE/Aw3gjOKYdBHPVheCe+YhsCW9WcNFRrspEoLfm3IzxKbaYKi50SxIMAe\npeGYZCro91DtZ4dDK2D4IYtbLUTQJW8ego0YbKvwvEr1r+oOSMKp7IssuCTA\n/Xiq\r\n=Cijp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a0b889753d981e10bf70b9bcaead70c1549cf865","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.2d6ba2c23.0","@material/base":"11.0.0-canary.2d6ba2c23.0","@material/shape":"11.0.0-canary.2d6ba2c23.0","@material/theme":"11.0.0-canary.2d6ba2c23.0","@material/floating-label":"11.0.0-canary.2d6ba2c23.0","@material/feature-targeting":"11.0.0-canary.2d6ba2c23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.2d6ba2c23.0_1615243514065_0.9333037196058571","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/notched-outline","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bb15aab6b876e12ecdf75acb488a530b9adabcb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.7522dcaca.0.tgz","fileCount":34,"integrity":"sha512-QKlpk4Msdgdtx4vw+h1uh1gTpSJaM4SCy4AySkjXd/5H/Jp5fsUAJx7DeX9pkFn89BGZJ8VDSl4h/GTtV6XhZg==","signatures":[{"sig":"MEQCICSDMoVnolgJt/BIJxd97GgPOAbsFDc5Cqfo7ECiotIiAiBvPScH7WUfKBJAykZEnrQoA7+xgxl48TYbQ8LE0289hA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsE2CRA9TVsSAnZWagAAlVcP/0SIeVsOv89ga7xnVonO\nD5T5Ed5zblA9hnJ3AvpwIL5jSk5yakaZCnZax1w0o7oeoUcfKH49d3Oz/RXE\n5t14AUSNcpM63aa0ym33qnBwzWmuBnXAou/aXLwSoMYqIgNCgDzj3wUIe2eZ\nRklmo+XOKg0vyf94pc4ZV3Z4hIYQMenF3nChXtnqzDjeil+QUpfBsEO5qeLO\nTQ82cW5MMQ6XBwe6cBRYfilqHg0NjiYwsc4HIg+Y0YAB51l1LdM49j8BUslr\ns8J1hSIk5fetqAk/qiCOE7r52NWMxJhdxzjgJj97wuOKy5EkRaaI9c+qmbuW\nFaCLS5m1gIcSYy7a5plxo5u6ASyMT7sJ3cL1F/hn2omuvn25FqBjMmp59oXB\nMi45rg6qfgDU9PrRJ+hLtUDERnDlsITEP5QPH/dMfeMzmnbfNxEdRxiptuWY\nNMbLz0i13u/X48/H0F96apMJ6al6qYUCHL86taFSCWOr0UkSRcl2Hxfk6koo\nbjVyvN1/1603AESqZnXqfzM0HBIgpOBSEGp0ZRiqDWeOpBUvDCqJ2vYIlQTt\nBle6cqLbICchW7DxVcKlSl/NPzd4IOAgRplbh5hOuYjZhqiNNjAXX1ovqaBA\nK6lJfBKL5xdjs8ltg6jIfsRBVbVkxkIKEw/z0pL8Pqhs5wdCtXIW64H2nWP1\n2zT5\r\n=UF+S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6e73ae404aecb0602a5da37f40b650181ac48062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.7522dcaca.0","@material/base":"11.0.0-canary.7522dcaca.0","@material/shape":"11.0.0-canary.7522dcaca.0","@material/theme":"11.0.0-canary.7522dcaca.0","@material/floating-label":"11.0.0-canary.7522dcaca.0","@material/feature-targeting":"11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.7522dcaca.0_1615249717709_0.483095835075942","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/notched-outline","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0a8716936d95648ee3c351c5a5fdbef7d72c3bb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.5c0ab7401.0.tgz","fileCount":34,"integrity":"sha512-NaAUOsM034zgnqQ53UrWOt0xJvGr4l2BXTcL3NE3GiAEglc6w97pHSYFR3H8ibp2Acqu9Z+c/Zd/ghi4SrsSig==","signatures":[{"sig":"MEQCIGLkQNikv9QaO/R/pNthmEvHqiO14pHWEgQL3Hn3CtIIAiApJrt5AJeWz0kVVtQ4ODMO0Rqd4KceMyozWfu7Edv6Zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/xpCRA9TVsSAnZWagAAQxYP/1qyqc9inWuF67TmoJHf\nD5UnQUtCVeEB1AQse8B8vth3lJi2VAF/cZHND0CkKj0eKv9gpWlCJeqqv/H6\n5ze5cnBYpIIklLnYJ+3LRkdE0jM6Nji0AfFCjPYVJDzuyXPRaOfmATOdfOnP\noGcE+h2vKJ0cRVKJJD/6m2x5jAKY5swTwGss95qC9Qhk+Tit+RUfF0SThQSe\nxs3a4kmdExIeXh9K/3UvP/7WZO2P0kR3D5ZPV/Zz13KdFgVzmRLiKOC0Jj+7\nBjdochj94rHCqhGe9Rb0LakSguFFzDY7h6MLZPKD3bOxfif6LRrAtbba6kX/\nzuOFh9vFDaAhpSs8Lpr5gAQ336BfUVCwtk2cupOTN95Fer/3SkLXaWYAuWjO\n/dN8fVyFlCaYeUX+XEjaEzGsUZKYOP2TDWsUJypzvRDlMc4xp6SQbyMJSvTM\nPxMpyYswE79L0fZvf95nMTjG12FT3MCAOyAcILfZyhfdWQS4DpzgSG78ICaf\nKvGyGJI89DCBWE9/h5XZaGwnoITINVlFc7aYl3+0mQiVu17ROq2s+s3wxHXy\n42+L1v0vVv0ZQ2+hSO0csghB40O4f9+LfgqwcmtDZnh69Lq7KxM26/281J5j\neTNG7h1FLa6KKoR9pbM7KiTkc2HAadgZwpohSOCmKRdKBUoewqNAK7vXhN9I\nONdZ\r\n=oR4M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"95ff5a1121ca15128776896b8e4759594ec51246","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.5c0ab7401.0","@material/base":"11.0.0-canary.5c0ab7401.0","@material/shape":"11.0.0-canary.5c0ab7401.0","@material/theme":"11.0.0-canary.5c0ab7401.0","@material/floating-label":"11.0.0-canary.5c0ab7401.0","@material/feature-targeting":"11.0.0-canary.5c0ab7401.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.5c0ab7401.0_1615330408486_0.8665145676095352","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/notched-outline","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a03919716af8f95096af290da2b350950282c70f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.59010b6dc.0.tgz","fileCount":34,"integrity":"sha512-W99ZjgGVBOmYvXOHKhrfzejuAqhIBNXdMfmjcpA3r1mLg2vVtCq+AHzx50aiVtoHMkaJJ5bfpeDAf8FP5fotOg==","signatures":[{"sig":"MEYCIQDxYVF5F217W0CY17hmXxP3WAOlzPbe9IslHrgT5FNNVQIhAOMLwPqD3OBi/OxBEFjg+H4iChy7EXs82HAqvGL8RHLa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPq5CRA9TVsSAnZWagAAppQQAI0EKIDCYrCvJbQvD/eB\nAMiSCqbF+rhRL96oglw6nBpg9sYtvcHSzQJXS5MgnB4WjLTilt528k9nnp/y\nbYOGZA9MWmUzySER12584ASI/0sa3CvRySN+CUW4Z1KD5H44Bk7AtmsYGVqM\nwNCzi9r7nVbkDLEtbcUV61Yr1qQGqTEfkM5Lo+Uebc+066pqQ+NhmB+/W7P0\nnargo4kkrjCM9ef/M5dSgml15t0VYRfhBnJDKAxvsapBrdm8oMOHlr21mq5g\ngj/tLjYdLxBMvZ0N+ozlv1FoLIpaTfYfGCksvTDltS3iwU+K8FsYFpgOrCs4\n6SjiC1pCDPfzXBRrW8HC8e00RUCCP5B8dylTiWtI41iqCewhoNZNgQYe2xTX\nwQDfWmf9qmcNjx+jXu5bDB0eeGBt0CP8jdaDY77CKfIoAhewUj4RUe3Esw5e\nLh/Q8d8FYJ9s3ah78ZsN7DVJfZSgKKhJ+iteY2I5wnNKyUSh3PQ8vFA9KZoG\nZ3v2ZmKlggNy9MVzbG67/YIzWatQD2Rbcpjh9YAuA/VGmvIOWCDlydWXyWmB\n3VDgiuko7jwZIb41LthiGLAwK9iUOWpil9RmsTmxdBHgY1o8SgKtnZ8fD0CA\nkR9LJnXALGh4GSBk9a4Z7KMQEUcd7/o98EEaRDR5xIC2Ec1g4CA2yOCunzQT\nz7Rz\r\n=17MX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e697574285a5102f4c1e5002a85ae33a3bf2210b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.59010b6dc.0","@material/base":"11.0.0-canary.59010b6dc.0","@material/shape":"11.0.0-canary.59010b6dc.0","@material/theme":"11.0.0-canary.59010b6dc.0","@material/floating-label":"11.0.0-canary.59010b6dc.0","@material/feature-targeting":"11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.59010b6dc.0_1615395513390_0.17605265246954338","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/notched-outline","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69140a61115095e0ab3bba2008b6794d602f1c5e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.9e52f5544.0.tgz","fileCount":34,"integrity":"sha512-Rg/u+BDZEDZpClyDtJrGEIvS5k1W6+0aGXG7M0e5iu3ggad+6c7jiVYmHQ7HquOm7gsUfQO5SZFF4fnrCZZ1tA==","signatures":[{"sig":"MEUCIQDLVM24OrArSV7mxEYqhUV51IrBee0YHNLRFVlQSQfLQAIgR6patNSNaNjW61/SGpSEuJ0YsrAU6IN2BE/3/F9ORlQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVWTCRA9TVsSAnZWagAANYQP/jj/EGnhtBw+xhx2omRx\nsGzJZe+9iT1mWf5WYxYVFTiQyBWTDJiCpzTcRQRqPLZsBDRu5b98jUM/pQdW\nhDbgIzUaqYavI71gdmoKjxcW7iGAEhH/In6SDq0c9LFEMdmvDKBr1VtjJW60\nmcXv+v+MhC21YYtKmJIN1Y23SF1TmuZjRi9PEfwVgHlpeDVQPrFONrv8A03m\n7NpBAW/6Af/+iSNmPzGekNWp6Jc8gz7eRreR6caUbNknb5kYZMrKqzIGH9BV\n8yg0tKkbAg4MX1Z9B3fphdTVS+qd7ac5Zux7isl2bl/jJln029HFA1iUaEC3\nSQr7Y/2LPYpRDOqeaqA85rq3yanJ9HnFRsmxJQm2wLO+CDgMn82mfmyA1LVD\n+etAzx0C15PCx+mQcelXpuQrTfU13tatFetdGfnSC0R+3kDbQWI1SoeWxije\nat9dCXsUpVWHTXuWcUB+c6QSqi6lZb4hkZY4c6JZqztztOz6OFEH6DTLVrwN\nPFtD8S+kgzw0e4VhlR3f55DyXvIsHxTItYMX8Zpuj/HxaaDEyHFeItSEVopO\nNMJ8vHR5Enn8jNOV2fnFCo3hottJpbP1ZqPfKhlDSTJeqlwjE10OaPJQqs/e\ne/bqcdA/FcCEHnr2olepMPlPJqBk4WMiYiNm5xA6im0s7NpYRexHHkcJmd48\n43D2\r\n=VzFY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4763f125770ec8e3a6ea4d8f1f5f607371847e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.9e52f5544.0","@material/base":"11.0.0-canary.9e52f5544.0","@material/shape":"11.0.0-canary.9e52f5544.0","@material/theme":"11.0.0-canary.9e52f5544.0","@material/floating-label":"11.0.0-canary.9e52f5544.0","@material/feature-targeting":"11.0.0-canary.9e52f5544.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.9e52f5544.0_1615418770738_0.7984819594491241","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/notched-outline","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.a678806f5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0dca23792a6c6d5ee000835eaf318d9822ce573","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.a678806f5.0.tgz","fileCount":34,"integrity":"sha512-n+s33bVk40+Exn7pXGu1JjAH/3bnJ8FRICg4O5qfF8deZ4kc8uqH5nPPjYe+AYOILH2tAmw2pBP50+10yp9eMA==","signatures":[{"sig":"MEYCIQCJmh3SQnJcUivO2b7EtwEhc3mDcbPfO7ZNIdzoF/k0mgIhAIcoW7pHIoNLZsnpt9jXAp355iG1QdgU1KnzlWsSy+G8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXeDCRA9TVsSAnZWagAAlXoP/2u0x21ebPPUkRLwmA0B\nhb868XNo5QiTSHvI/3R9c9uBJGC6NsHP/H8Typu73UNFt8fOtO2l894MGF1K\nghPosvy2jlhjaJ7m9P1MCATMWPyTNxWdM/FYIWi+onyTV2lhfhNz8PbOQRvY\nz4Uaie8mlm3fB7P6knobraPYYfgHXyjm8P+ntWP096w4khJNHzk62Q/lVqo4\nYNYHffaaXp51/Z0C3ceUNuMOmMgjxbqFVyCl1NVbe/CTGisASknqXUZJRFy+\ndywdqCr+ul/MVSx2iCl6afZneNw1aR2XCjcvNB4f8QDkOgR7l+ONfo0oTQnZ\nNHZE3OH7pymTVFubkdML+N5PzMQ1VZ+6w0M8ml40i+rXC/g/N1yP8UU6ELbr\nTsHFHnqH60wIpbcPmC9ezQO+LET9HBI0eVaxK5C5KE/n58G6rzG+vHSMPztH\nef7WN/0mlo1p1Kpsj/h9NDz0FEtrYDO1he/voIqw346nJoMyy/zkztfAG55U\nP0NHWus9UFY0D5xdU41pg8hFgwdmAJfB6mt/0x5REWTKEdInIATPFb3NOwhA\nWypBMeTL7pPhlIg2MSz4futJAVl5dFkutLZISuhG/w/W6dghrk+xzRUUpcUT\nCO2hsEZ/enlHHBXFweiLCk6Sb3SlhoFZIy+34pa0pliCq/8E5N1JJi/9Pqdd\nno0W\r\n=53YL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a724ed1e64d54989ee4c27c71935f90fd5614f3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.a678806f5.0","@material/base":"11.0.0-canary.a678806f5.0","@material/shape":"11.0.0-canary.a678806f5.0","@material/theme":"11.0.0-canary.a678806f5.0","@material/floating-label":"11.0.0-canary.a678806f5.0","@material/feature-targeting":"11.0.0-canary.a678806f5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.a678806f5.0_1615427458648_0.9286283827156081","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/notched-outline","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7937c2770e6c251bb307acd010a6934222df4a85","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.b2d22df5b.0.tgz","fileCount":34,"integrity":"sha512-doTFe3FF+vlMIUZt+j/BBUPzncgZ0BnxhlK6KyFhPyEGQNtDjknM3NCiX5Bdq0zwDqcyRoiBWU0p+bI30E0N1Q==","signatures":[{"sig":"MEQCIHa8k8LB8U/RlGFGRDA6nU/Kh1oMlCyGXfOJKNpgZ2+oAiAvamZfsDpqyHgLVpqnHbqpUCERnKTvXETBu77ysd++Mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk2FCRA9TVsSAnZWagAAgh0P/1K3JdFdVrsAbz4zIehS\n3tEhmF/jCjeNdUehZlXTAa2WWy4++nxT0eBsfHSfTka5dLiLcC1mzodegH4a\n4hmNsHzBVEDrCH0suV9O1aA7T+KlJLuZATeg9FuiyZrcyhZ2scPGBvRBxgdJ\nEhisA6aOLL2w5hgtx8yXGNRpL71X7maaBPnZbxzsGXQ6x+JX/Wvz8nAJhYlG\nxc/B9PjnHWbIhNouo7hCa1KSI/CbKhD5vJTLKy+3DMPDYw/17OZwU5Uv7Y6Z\ngUIn6kxKU1G/Ao1z66PNdKOiwr458Ord/0YdcGYtovnMSImaEhwGsVoxcTQv\nLxLDZS3g2f69/4uqOr01d+blrydEgUs7gPjmVELQJtCVGdtCwQ5lAi+ZvUNu\nyJZlsrs0k+L9BPwNeuQKY9x/AB8FNIYk5I7q5ZQQ7dsHJRTs9qirquoff8yl\nUc2P+kTrLmf5vm+AMU987EzkKvaXYT/+L58qR32eC1BjoakyS53kTmjylwEn\nJCNa6g/SHfcj+Rhuo5jjW3l6qNADsDdokULkMITh89TsZYw70yXlFiveJWqB\n0etP9mp65VCebTWN7mmGhtGI07tgtNB58SfhHeUHGTn61UcO+u3Bz7wosjLC\n7Y01vFx4wnsbnK2tXM/BB6MSsol+S1CfLnGMNtg4bwquZjfsOixzu0MJrbz0\nNVW1\r\n=5+WO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5c38fa8d841f5b293e55e4a22202bc6ea8220874","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.b2d22df5b.0","@material/base":"11.0.0-canary.b2d22df5b.0","@material/shape":"11.0.0-canary.b2d22df5b.0","@material/theme":"11.0.0-canary.b2d22df5b.0","@material/floating-label":"11.0.0-canary.b2d22df5b.0","@material/feature-targeting":"11.0.0-canary.b2d22df5b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.b2d22df5b.0_1615482245472_0.3939354848504033","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/notched-outline","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.81911b707.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6671e69edda748a947ccea33c9f5cb71785a0a8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.81911b707.0.tgz","fileCount":34,"integrity":"sha512-rxs10MS+ohNjXAc6yC8L8s2HUbIfU7inZXJlbtzLG8xPqrYBlRBOXdffySlUOVZLyTZGy4XFxLjXKXbCT8QzcQ==","signatures":[{"sig":"MEUCIDRmsWl4sDA6w//QNRI48dK6h/MVJsyryopHqyTLyp1HAiEA/booj3ry4JzSJlqzwVftG/dgbJobW18UsfiALq8Cw5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmBYCRA9TVsSAnZWagAACNoP/2uSe1wzZ8SeEWgKJcg+\naU9uLgHPxC/MfOFz9aHWHrgsvAv9tR+UgY9M1xvknZ6kVkXj8K0ga+gMmZET\n8Kg3DkqKhRqyHCAN+YXZhs5mVfJAo7fLX5hoB6f4TJPtZ7oEZE3PUXyvdT0b\nEcTpmzHD4FMOcusb4Jz8QY3lQkrBddXmz6IAMYJ+nlwv8pNWMTxOZgWbVjgd\npZULswt5jTazHX32Qmg/CSBBRlbzFv7HTjwmb9mvpUOhD11yD4JlVnwRBPBU\nL4R5+HKWx1hehmjrhgv95y/WZQ3rBTmb29aFvG18pjWJdskdKpSGoxNZ5Tet\nq9F2l66/G3jvXrVTClfO+L/k/R6341McJ6gXz+9aGCHrkDEnCXpP/XTqBe4n\nC81xfpAcQ7Ms/gb5+OUlyXe9VOoNr6/dQ6wBHOU/+6UbTq+l3jniSCjFWXpg\nXRGMSUwgvCvV/uk9kFpguBocGp8Z4n6zj7bbCU0JILoMkdkrhqZRxvlYM6Z3\nrdHVdbRd6vZ5U2QH4kkqCXH4IxtOhbHxUWusS1olVvGNeTlzoozZ+QcD7muQ\nE2e5hQ7aO5Mcsmnfal2viI4fVowSLlFMgouiygu1r59RokSSK9NEnPXCtQ8n\n4RyUxTW+mkfjVP5h/elWvlbOmiRa/b/ZhIOFzoqt/VpBDgbSRWyi/OOpwN7e\ncOG6\r\n=Y0Lf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3c1bd5b1d6d6453c4f616633e1d16b1fe0812814","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.81911b707.0","@material/base":"11.0.0-canary.81911b707.0","@material/shape":"11.0.0-canary.81911b707.0","@material/theme":"11.0.0-canary.81911b707.0","@material/floating-label":"11.0.0-canary.81911b707.0","@material/feature-targeting":"11.0.0-canary.81911b707.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.81911b707.0_1615487063989_0.4223504382308121","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/notched-outline","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"377f617d2c02d3feb7e02a56b97d1a80b543d84c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.9eeb35c38.0.tgz","fileCount":34,"integrity":"sha512-1eq0pYHfKQ7f6pU3DMXi/AF0YlTQ0igrQubjDDh/bh97OBS3vm66R3HuZxif8mPqSJ0QYImnaaWi9YtHCTdzAg==","signatures":[{"sig":"MEYCIQCsUcQhQjWX9XCifvQtdLtUewLvuYse6texVvfAtWMpmgIhAO9ME4WatWYj1CzmtzmAQBUoxl+EfA/pLpabGzlBxBpE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnGUCRA9TVsSAnZWagAA+aEP/17SpQjQ7uaWMOgw7LIF\nUCbnhsKHtFzt8sYVPjyqZ52n2hOkBfuzrtpe2bqu7iggFC/9cu6YTsdqiwIh\nWN+e+1NAx0KDVthu4cEBHHfSgjUQEGFf3hFG5pV61xcFLN2mIZKpP/mymyxU\nG3QHJnpImo4V/L9vq9TuNIWVmSz1OtzAXo091KcbBPaeaVz6+CsAClRr80G1\nV/XPW1+e+bVcs9s2v5RwCppxNGOhfwbdebABlc1wr6uHmjXQB6gx5t7N0gFz\nMCeZXMqCLzDKZXgU6zLe1+a+ljH4KUbQpmPzeAYEGOnXFZ30zv5yMQ2OPt4n\nDsIb3nUPEFYM/MxN5ofHgWV09Jny9tADF862eDa0Si0EaShAfa361iL6VjzI\nr+yQCuwYU0lorQ2P+mH1F1APzlL5g19zL+fvzqh60QSwP1YJijtDoq2Sy7ps\nhvmwzI13R4TkGYEj5mycnJVNTIOy4ysjRBWfLMAYkYWHpILmZcXBTznpr6OC\nsLbOpFGHIISa/Xw8bbiL4ciIKaP9oP5i/swYsYQyru0dvsmQzkD2hnUEarbj\nDvL1lYOOj1uJ/BChgtPlh1QJzPg9TtSCygHlxzQDKVFXTHM1VmoqP+ZYRwqn\n/3n8Ea+1U95MGPdxudzuFFJMhRAUmc6+Ly0dyLl/sK8rogwmeL0iY0UyI9B+\n6tgx\r\n=xDVq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"147a2a556e5155bedce0b0f267f64c26cf87d0bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.9eeb35c38.0","@material/base":"11.0.0-canary.9eeb35c38.0","@material/shape":"11.0.0-canary.9eeb35c38.0","@material/theme":"11.0.0-canary.9eeb35c38.0","@material/floating-label":"11.0.0-canary.9eeb35c38.0","@material/feature-targeting":"11.0.0-canary.9eeb35c38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.9eeb35c38.0_1615491474750_0.8775386752172769","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/notched-outline","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56a37766ef4a296a1daa13e22fae7468cde9bc00","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.12be3e95a.0.tgz","fileCount":34,"integrity":"sha512-yKEZiSiKHSwPQ5rdH9GFeOBVx+JCxWDdUccIvz28A+HpodISAIOjCJRrXQsVZjllEyl9V1y0iSoLtCipDmz+/Q==","signatures":[{"sig":"MEUCIQDeKGpOn0pk6H86yrMMbWzh4Y16B7GP9yDvU3GZnrPeeAIgLW21jsg2KMqfxgiLdGUUNLhfmIewAxBSdi1yOgLa8VY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSndbCRA9TVsSAnZWagAA67MP/1jxoIVGcVgRLXVzyEdb\nE6jHOv/55GC+EsjrsqlMNZ0eq5Rd0RNqydxBjETegb2Y9B59G8olb76WofQZ\nYg3YphoO+gReDoe6yAMxsVjFTPEAJ8pwu3Vff5how8V6nVs5bSxnbO7qJ0XS\nSjR+2gjxaeWYe/vGabnR4R6BSMxcfYpgSLHpF4MX6UoVHE9k3M/MjtYTHoI5\nEp+1KXLeYdhE7vDZf+DoaSOnIy2fvJQyA37/IicArrM9IXlSJbSRHSUy244C\n0hRSM2bht4pnjIE+9PjzRl44eUG2HvCkzkhom6HcTWBDOOF7BGRp4iNw1Ne1\nA9Sy+Lfx6ExCKxcoL+L1B62EnB2npPcV0llVCk/QMBixahTFLTpZqHG73pBj\n2VPtBZaQlRLCBO/IuJY+HQ6rN9N4fgwM0HTDNOn7W0No7FtAI0vtfcBPZJek\nqlnu/U8pot2rBjMOtM3o3HULvH0SHD92IYTYFNXe9zL6tmGBTS59KEcgjIVz\nvNjCPJwHVajiwH2kQlqy0UZCTsa+w3hTHlheKKbsLga/6OxnzxqiU3OmEGYV\nAaSMWTaI7B6TmeivgCie8OVfYi/80yHw4scPn0Z1KyCaiNaZhd6VJ/thEZuY\nDP4Q7f/c7vJOjIwGR72wiYKqocwYqMYUK+7mULcVa00Il2ANxGaPddUvwyg/\n9DX/\r\n=V63o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"883077446617b632d698e09818dc9d5903a7586e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.12be3e95a.0","@material/base":"11.0.0-canary.12be3e95a.0","@material/shape":"11.0.0-canary.12be3e95a.0","@material/theme":"11.0.0-canary.12be3e95a.0","@material/floating-label":"11.0.0-canary.12be3e95a.0","@material/feature-targeting":"11.0.0-canary.12be3e95a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.12be3e95a.0_1615492955384_0.013077041111860366","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/notched-outline","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe4931641a1cf5e3aff5f641f2c6d0ed10a436ca","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.e683bdf4a.0.tgz","fileCount":34,"integrity":"sha512-ojCXkfYbvYSKy31k/5aPEQDgUqaNT3NDTMl8Xbx1LPu7OoCAktqzFsfbx1V038TiStMnrLL+cvux7R/XQ0nwMQ==","signatures":[{"sig":"MEUCIQCyUlNpZoVO4WFtKBu3pxJPN70uZ1Kc9hN7gBEuYhQD9wIgEZcL0Ik7SYhMDZcbWtLNBFzuL2S0zmmgx3s9M75i6QA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnkhCRA9TVsSAnZWagAAq98P/3zgKzNqWOr7sx34Tero\njmZ3MXmTLU+fHAqjJV1nnKdkY4jxntAvB19UtWVPTPpSegvQCxU7+UAnSszA\nucBmzEizIOERvCl2xXNiZCoBiK+KxVgW5OJqoCeKSa48h2LnWB/GKsv7m0/A\nXT1PIo3dgiAKYSHXTIphi5hn7SNQcYgWx43uVdjcFjVXSgyBOaQLzEMErQP5\nJgk5Zi3mIQ/O1ciOXMrZy69Mh3dfV6t4riSpaL6cgQvmg49Iy3tYQjM4YrXi\njj7Ue8hyIDIFxQotBw+VrrHd6eEjotznGvldmTHsSAKqn/pxQR1FXGHtDcEV\n3DEfVxCWcN4E37h31mNNvLRVi3rRyFrA7yAYqnTOlCeF2nlvCajPBQpM0Ecr\nAT+AVvLWDmOZ9NmPW07kX39aDOmsiWY1BLO5PnWm7+YzjrEwz5NLvmtAnshs\ncq7KMfgHoFtgTlQmvA0gg9xrMmfVG51ZXP6oNo7ic4tr4U1qP4s8DTe8gHQE\nvbBmaHbrQKgPB8QyoUAp+uJIs+KFsZefQjwG0KaWjwQkbpM/QfSITG1VdmSQ\nzN8tbXkC3p7ECg9ZHf6wm6SZoUaAvetcHrFnW/ZVomDGGSBc7pMvUL6fQTv/\ny00kHIanSYW4YCzez/KCX+QuDhns/QfFTUklGrZaQgOQljbYrCzki8XblsTt\nGDVz\r\n=rXwi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0323fd7f39f825f8717fba8542628d111777ae35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.e683bdf4a.0","@material/base":"11.0.0-canary.e683bdf4a.0","@material/shape":"11.0.0-canary.e683bdf4a.0","@material/theme":"11.0.0-canary.e683bdf4a.0","@material/floating-label":"11.0.0-canary.e683bdf4a.0","@material/feature-targeting":"11.0.0-canary.e683bdf4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.e683bdf4a.0_1615493409121_0.5541670537418184","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/notched-outline","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4fe7176f4d46efbb11efb1a8aac5daeb19053fc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.a07b6d486.0.tgz","fileCount":34,"integrity":"sha512-/L88Mn6zM2SsfoiBB+N3bKZwpDalFqN9CIiqxpwtFjgn5onEasSUBLvhZ5lIAtcdom7OQ8fM4jusTte3pLNAWQ==","signatures":[{"sig":"MEYCIQDYTUPucLUBe7O4W3DRtTFzc0v6p9DEUd7M92iVigDx5gIhAN+R3Iqm/jaJupiQ+8o0S8Z8All8jnZvrx/bKo4yfTTu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn7SCRA9TVsSAnZWagAAdM4P/A0NB1rBa5temf1ThCHf\nzOrmNSBy5emEZ66F7f5zCN3EI09vkWnt0EDUC+n2doNbBZIWyyBi3sfA2/BU\nbPHK5L2C2cloLtwKebmyi26GbRB+TV2Va5Mg3oDnm/eS7tzIgsfZ3UyKNghr\n5sNsrZL0DeTlJVUEGovNM8mVrVP9sEIJpQUHIR4ES7YgVSuCT8EgA6VKnLIL\nWX/OTTiNiT0U2MFyrCpNZmHAh0+snzET6E8mlDtSsGzyCFRyImZBPLqRYrza\nKfnqjfSGqNiMCzBDNin1bEldnwytqiRPLxJLsTBUWWE9LNPxt337yJg4wMGM\nYCOwdcalcmP6ltxTPmeFADE7eV3fo/V1qgtXyuusTQRy4fN5lhs6OkNEZZCO\nMHXunicgaR98jvqwtU5IpRey96EYPhMFXMkn/gLU1Vn46QOKWxQ7ibJibLPH\n2JPqrvsNU39sBi5olfFIH+M0k8k026tzSKeWXJTyZTLdrrXR5xGycqEaw0Wv\nFbefyJjEKlyQXSAQHnqTsW6Nz4T3UwG5eKijA7PouDtQ7VDWcRX42NoHE9DQ\nDdlN2zYidNc0Ogyhn90KutJhfOImr2VK/jC3wyusazsSZc0OJnTQt9ufT5nb\nIjsMk058nvgnEOK0riNSlXw10U1vCu6kXGWBT11ToAhzpllhdy3h4Gm5pRpM\ns03X\r\n=Y10t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"425bbecac77849f8786f0a32de18a168e1874c9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.a07b6d486.0","@material/base":"11.0.0-canary.a07b6d486.0","@material/shape":"11.0.0-canary.a07b6d486.0","@material/theme":"11.0.0-canary.a07b6d486.0","@material/floating-label":"11.0.0-canary.a07b6d486.0","@material/feature-targeting":"11.0.0-canary.a07b6d486.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.a07b6d486.0_1615494866357_0.1981896037295212","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/notched-outline","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.1e0653477.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bc91ebdf18a2629e3545b3065e8a8e74cbc6731","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.1e0653477.0.tgz","fileCount":34,"integrity":"sha512-S0nIqpEz+zm9JS7wbPasdHdmLeGdJDsgLHa+CAh95rWzWNo7XZoJNdfELEjPWJyVvKB8HLOwrwsUBBzvkzA+rg==","signatures":[{"sig":"MEUCIQC2Cv/4WXOXOLm88OxoxSOfB+c/2GA9nF1sBjZi7FF9RQIgeNjPDQAjLt1rejphxQbupVHiWukKkOoKMPoa32Ho7FE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoCECRA9TVsSAnZWagAAgN0P/1am+bpPvFAu/9qFT5MH\n07zxA1l6IcrplGZYjy6D1qmPamyh3yJ1nGgribh5epAAg9efo0G4l5cmGA/s\nTULAMS8JhLVnlxVSZN4IyDDaJcsD7esLit6e+P8z3DlgEs8ShMH9XkfgaMQ8\nYXy55Ke4CIjFzdHbeJagGSmnLjOFfl50cYGLBM9rJ5uBDfJTej+L+lEEA/Cc\nzIKLdxFEeADnUGK1osVDkkSdiYD2d4k2igXf5ToUjaccHoEj1dB3RH3xa3XC\n4hgrYQ03AaFQ/NkHWl5b6jO1MfJnaz8OeL95pUO0bJSyrneuW4+qFDRq+Hrw\nDmyz5gfTtbphl2Z6Ke6ikdPs3FnU8PPj+nEduuTW0V+rU3jysGJOKbthwu3z\nbnLFgXRYIoSNkcJH/e0Qz6JtgZEMi57Dqgts3Yjnm35GhikdWZRehVNhAixp\n5TASaQBpXa5YmvhK0HdU2XRyxJUPN9o5WK01nv7zuMJ79jpyKKiWngG47ceu\nukY9dnCgy/r5XoOwGBZVbqHikML1JU4v0sBInNlULlIm5INM5W6fYyv8GaPf\nXk7NOA7d6s9KBudgLd7YvunLQA9ok+fpENAWO6qk9cl2imEogVWu0j5p24DO\nXFMxyto4le9iw6EiV0wEic3ZdhlTVF3pw48N0CjsB/KuyNGgi5e7ESX0n8rn\nGf+H\r\n=/fz1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6130e0fb82d7c39da4ae1e02df8f0851da419fba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.1e0653477.0","@material/base":"11.0.0-canary.1e0653477.0","@material/shape":"11.0.0-canary.1e0653477.0","@material/theme":"11.0.0-canary.1e0653477.0","@material/floating-label":"11.0.0-canary.1e0653477.0","@material/feature-targeting":"11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.1e0653477.0_1615495299689_0.809573431487538","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/notched-outline","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3034c69c8d212b8a6403508bcaa32cd87392b008","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.148e8cfcc.0.tgz","fileCount":34,"integrity":"sha512-+j14Y5SV8ExoGEEvyAHMr+2atmVy0k+cT09vbBnCyAZ8Q4aOho2UBtZR/yeoIF0GjajNfXnDwQCvqlhxWqcYOw==","signatures":[{"sig":"MEUCIQC2dRwICIc6yI1YqoL3EIUWEeLR66PYJUhd6XTostMdrwIgF9yt8K6/OCeBL9cS3zAxKlAI4c8WJ9PnODfdyCEoYCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp2DCRA9TVsSAnZWagAAD70QAI91bqpM9kG+YZbNLgUp\nfndHlTRwjEJYev9/86Qw3rMQOoeegJKnVMa2diqd4FKSqvjvGs5rU7qPsDyk\nyw1st1e9Vf3Y6kcDMedunufzy88AeeyKCcui8jkEycUc/XK2XJg/UbQMMLOB\nFk+CR+SUKWkwumilwFnRWP3uwY5ZiYWaKcmGFuaJK1sJSMSz149juuT6f7Tk\nYisLeOAUdoPJcdPbwdjhCM2yYo1L1lyMcOzvzTJ8EqxwXmvwJVRrl5eRMKxY\nyB93VmdiFtoi46I3bf1L4lov1kTlyfRiV5H//hqYFP2Blv/GAQ0a89OyLcLm\n+uciC/ygHB7Zl8YzOW/MBowljndhtDpd6tdgnIxqBxo5WIDyZZyoGCAAlJvr\nFe3rPpnyozxI/vmVL6GzZEypruFiDH2ka54ouXNMvlT2i95j9Lr+ZdJYYWTQ\n/GFL5XLWqAFgyuLUjlB3r33aR0P87Rq3dyJxYopFwPvUyM1pCEL1JEaN/CHi\nIqnoVkydMJr4/NtDxp+L/TQRuFo+r0Hw9VbFE0BvQstFStrBAiYK4gtzEDv4\ns5/jrynFvjXwV4sHnIOpNh6zHMww61Mu1sUBl5NIaGPlKSeW3S77ju54N/7R\nNeYH5B0aKyQ32+S9pA57rDsCVpcytGvHsIiZceFuLRu+dY2u4jjQRAZ0h7IG\nPSXx\r\n=Gp6b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2e686ac2d72b7a249bc4deb8b09742bba99ce581","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.148e8cfcc.0","@material/base":"11.0.0-canary.148e8cfcc.0","@material/shape":"11.0.0-canary.148e8cfcc.0","@material/theme":"11.0.0-canary.148e8cfcc.0","@material/floating-label":"11.0.0-canary.148e8cfcc.0","@material/feature-targeting":"11.0.0-canary.148e8cfcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.148e8cfcc.0_1615502722833_0.057234819883352106","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/notched-outline","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.73a227194.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf056f6aa33c16d140e2ca2c16eb97188948f944","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.73a227194.0.tgz","fileCount":34,"integrity":"sha512-nASwhZiUAnZ/i9o4K0t1jXd8UAb6mE5v5cCVMH2IX2eMBDQ6Y2qfIz4fBnwPMOZDjNJD9WhqsB/Av8JLkjuJlg==","signatures":[{"sig":"MEUCIQD975Up2nieJRyXLEgTKTTaIO/Z6mhtcdktgp7aCYjnywIgIF0n6MoiTLl8DppeDG94yY7/FtLn/6hPSjdXyGdMmvs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrTqCRA9TVsSAnZWagAAmogP+wZyISpmKD51y46hWcc/\nbGcmjDdRdHCk/q5B1WpogVBC4WGxNuzXi+mo4Bu8+rXzYCHodyydnJ2Uqzcw\n4VqI/WrDkqx8qGLxl0bP7/GxJDkNtvf8Z7vnCPW6mXlYen+/nsUU+fwSJU7f\nCIN4TemPoYsguNUiS2GvoyLym9snMbjpO2FYrOwlrx2HgwXCElv2LJWctpMZ\n7UnVeXov+plm92LmzwquDSyLDcoBmovYVrs1JanatAklmD8lPzcKJbrBAOXg\n3FChl9ge+ua9NsHhpJIiFY2ys3TfPBPtwPlm9zQ9RqfnbGVIMjC0WFyxrISt\n9rJuLfBmkZjwbzB3fkCcU5vVMw7FKZwbZwkCUHHRYE1RE61Cd8/wjheP4Yrr\noou5q9yloFcolazB6WfJj6S/5gadjrwXlX0p1gXcSYCMb898geo24lU4Y14U\n1CmpybjcTAxj5D0+5bnpJlaT0cKqCg7E2GORPRUxEd4pgvgZLrEOH1l32wMr\nP/MuEsAvGDbSPd5E54fsGipVe56G068ycsY9RfYQyIvmjbz/PPaFclOjFL1q\nJvYgm7XWxKid2XtTVTmjjV6gYIWDOsnQoHocsEgTswS+qsc9yC0HmEScBlKx\nl1UD/kOJ8FSNsEP/EHDISkB2y42pXwETWwdB+4wDVBlLI9tcKDiN5IoXMe6c\nv107\r\n=G64T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3bb5344393057d23abf5414ff61402a5091ac74b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.73a227194.0","@material/base":"11.0.0-canary.73a227194.0","@material/shape":"11.0.0-canary.73a227194.0","@material/theme":"11.0.0-canary.73a227194.0","@material/floating-label":"11.0.0-canary.73a227194.0","@material/feature-targeting":"11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.73a227194.0_1615508714522_0.5784274821810407","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/notched-outline","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea60ea24c462ccf11b9f64e5b8efac6db4e90aad","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.f8579b7ea.0.tgz","fileCount":34,"integrity":"sha512-eXjdnFmwsGQkbsmgDfFqGHPKToCAMaer78HBfIuAQEtv2JZpuhgxe8m/qDBRkDrqOz2dhlPgKnkryTcEjTpNlA==","signatures":[{"sig":"MEYCIQDrVi4EXTjZejrygE3p0iy6+JQwxWalE5kpzBJNTfWA7gIhANvNRUWkjiZkSK4XVSCpMtK3LJsPfd2CMjYvFnVA0to1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB2dCRA9TVsSAnZWagAA6EQQAJPJaFgfzsEDJHpXypka\now4wV23RqDAO2Qi1AzURjPXOSwUUVWhhsemqtOL1xRPaGetHyl7VPiBuFdhp\n+vOH/6vzr821XUF+WkLeF7kPfySq2gowHt4Agjwy1M0HiFL59jaxyEEI5IKt\nf4WNVXMzk00OJXsFTfUgRO2T7AdtEuQuNsCBuZDfKijfCakUT4MrI6LetKkf\nlIG+xIDZcQLXBhrnnayR8x3AyQaM5W8895Cn8IlhWL61Tw9JCWkvMcv8fBsh\nefGEw5HLEvk7J6NNyk59AMdHr4Tm8kOobFVdfOOq2naox9te4hUyigrulW1b\nv9+rXAkSAgeJDHIuib8bVNri81aN5wacboitBwFM2ecHabrrW0vCe2tm6K5d\n9SdeEjt3LGiUdFr+/ZpaNePEH6S9542/bDMpZqmjJRHSSmPilkwuw2lWLH4u\nB7QXlz4/bPc0CMKTtKaXykyxCC6HkE63N74R/E6cNQIBFrCbpOIyDoX9D3sJ\n4b4U0+YxNSMpkHuUzZHF8DYZNt36OQpmfuuDiC+H4bdCFZOES97yC81ousJw\nxRaEWHnt+cq6iOuqJ/rmJFV/HwUfiCtgeTsile7dcap86yr1RhGoiGmyEHOc\nvb74tHh2BkxTRq8CIkiop/cAca2Hf1nty9KFi+2voR1OKli4W6d3BFQP8l0+\nqMTk\r\n=Vwxs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8b1a0816c0d3a68a851c5e6a199c4a9ff75cce07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f8579b7ea.0","@material/base":"11.0.0-canary.f8579b7ea.0","@material/shape":"11.0.0-canary.f8579b7ea.0","@material/theme":"11.0.0-canary.f8579b7ea.0","@material/floating-label":"11.0.0-canary.f8579b7ea.0","@material/feature-targeting":"11.0.0-canary.f8579b7ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.f8579b7ea.0_1615601053221_0.8835998348663381","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/notched-outline","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"363f551d19c8ba31737682eed0e565280a1cb9ef","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.d2a39d300.0.tgz","fileCount":34,"integrity":"sha512-q/Do2S/2U51I2Ug+9gTF9T02+vNJHcbBPeLB0YwA4LucFvsrk+ODIwLrPWuIs8RA/7FK/kmEHpnLQLAsllfyJA==","signatures":[{"sig":"MEUCIBfwvwBlPv+lCnJwOj9D7YGRwXxQ6GOrB+lrDjM2iLlfAiEA0+c9VqWFgPc19k3dfkHbukv5x8TBnwNnOcqtd0zE8aw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/14CRA9TVsSAnZWagAA88MP/1S1k4oWh7qLJLyRopMV\nc3vUzkvuyuJX/HuDRHZzpzqDuOUNj/gAAaBDWfI+KrYYV9eNJU+FsnyTzJL4\nxlRi5udbu3h1IkkyPkM3uQNF2doB8aChYLEkcUa9rYa194HJBks0xtROJWvb\nhJ9pvHm6/j05MnuPGIlQ70Bfr+vNvT4LdgRcYkM/QXW2KMd+LSkIYgoeIYvY\n6e0GxkKKV5vv3dCess6Y94SHrxJ+bXJyyBA7rDOGtm6dNCQi0/9gUUsgc+Jr\ndowOR8nn95X+Q2ZOgIUzo8FVviDfwybD2CD9dBbYxdoKEDR6XCD5yGQFrsHb\nIkGimIOLezWhBu2pMuzZSnV1Xq/71LRfRssokXhJm1pHvhkOP2WBVE/cMAZj\nGkjh1xzK0UuzZhgYr3Y0UewOKc8is7GlKklkKnPcnitCuFUr1p/LWTyGJNfK\nIuYTyidOQueH7a1ZjUbbOoFnapMKg/GdVODKpMF6hXXNot3cq61e2FN3TPkk\nKKCKsXpELNN6efweXmX/9RGIPc/6K0P5kC5K77HgB4tifXKYYq8Ezcw4S7li\nexd93ziJjbMlZMSroEYOSotUMH6eV53kh6I1Ez/W9JjvAkhDbIwbGOHqRRS9\nFO8lQWWac39Z7PAQFQ8reBV/TBofN8XXCKCf+aWyri7+tqCWydPX8JUxluAm\nM7/V\r\n=27pv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4e928ba6e35dc70b34314c7509f647a6fbc4be00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.d2a39d300.0","@material/base":"11.0.0-canary.d2a39d300.0","@material/shape":"11.0.0-canary.d2a39d300.0","@material/theme":"11.0.0-canary.d2a39d300.0","@material/floating-label":"11.0.0-canary.d2a39d300.0","@material/feature-targeting":"11.0.0-canary.d2a39d300.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.d2a39d300.0_1615854967553_0.9374239336507777","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/notched-outline","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bb4059ee6b92ea203dd30fe106fe5a4be1bbd41","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.7cf67823e.0.tgz","fileCount":34,"integrity":"sha512-+j5/WwzCvzFJhr6CqblwlFhM+PJv4ekiDVJrQvabr6Nb58ugzROzD70hYMOMjuimCttCeUsi36/TEn/csT0b9Q==","signatures":[{"sig":"MEUCIQC//bGUManCG4TT1JFSO9Qt+faag2BkJRtTjrXLAaFvtQIgRjI98PAalC7eVVt/GXw1QJu5y/R7mW0VXseD1RlaTGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPcaCRA9TVsSAnZWagAAT44P/A32ZyNRNI9fuUIB30K1\ngDPtqD2NrRTtq+AgrXqSqXFTcvLQo4zNiyD0q7igD1VJUc4K5YVCKl4VayBb\nMXUfwH1wqxj2UEWWNoXTGP2E6RSE1hGC4SBezJocYfsCrMHH1vkRa/cVp9Z0\neDnh2s931tRidrr8zapOIwFuI+KADqcEaLVPTuNVZ+bQ076FSQU1jtq1lg7B\n0+VBDbccpvUccjGksr3nEqvVkWFq9QPrl9RO5jjkPIyAqnxQGF3hsUVy/3Gj\nF26CXfzeHJT2uWxI1qUPZ1tlWdzzQgQl7UaIcJmrv47MOdXmBipl2dnIxc6k\n/wk7HTyi6u+vOEtZlRX5e0uGUVYAz13O9vjFhzZDuqAyA9ZlYjbUnrD5iFWl\n7XYPjIAR3oQNhU2iGAEwV21iAfiSmX2OkruQjG+JsWDGV2xyShIZzt29iB37\nse9XRXMg9qFLzbY1WlGKw/bx2Ld9oUAKPfj1ArJk2GwaN1zKLESp8m/OU7Ih\nJqzUGziaR3X2Z7nLD/7RlX6ZD3ufsec0oHUfQKaiZFfJw9QQWi1Yia91e+PW\nGInS7o77XTRYuhFY06AgWSKSBwH4IHfF041TDq+Db1IHUk5XabdnG4zaNFFB\njNz1QGr1KNYOUZ8peWHIQxXVpwOymiTR8zSbHyYgOvPEbrXk77/84cDQNdiN\n352U\r\n=m2tV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"afabf42a48ec8775fa133ab10e023c1b5d2ab802","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.7cf67823e.0","@material/base":"11.0.0-canary.7cf67823e.0","@material/shape":"11.0.0-canary.7cf67823e.0","@material/theme":"11.0.0-canary.7cf67823e.0","@material/floating-label":"11.0.0-canary.7cf67823e.0","@material/feature-targeting":"11.0.0-canary.7cf67823e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.7cf67823e.0_1615918873573_0.11857573037199498","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/notched-outline","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.67d780c79.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d37f11650e30b103254f9cc494dce179492dfcfb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.67d780c79.0.tgz","fileCount":34,"integrity":"sha512-PIND8EJlyWqJUNIiduTABCw9YLdVrrwPOAUqQxmshpegIoTwg6K46fprawfU0G92dZVoV8+aNbdBz/7p4dHsnw==","signatures":[{"sig":"MEQCIE0ENtkxKUUtwtDkD5QksjOjOJQQDL3xWPxMvtCn9L3XAiBNRX+w+IJc2YnHAySw6UpuR2i4HqZISH9FXWarRs8lWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQurCRA9TVsSAnZWagAA9tAP/A9LwTY9Wa0jWUbra7tA\n/fvwl4KjWa9YBzFBXZoh2T8cNfTY7eHiWLHifWbohnC3HC0UYS/JsNgICn+8\nLnFM53Zmw5RCaYpQb3xFKaoCGJ8UPJkczbk8VUhGXe8CZsYng0vyZSTuTJt6\n4Nl1Jh5QGJm285Pp/XUXLTI9uZOjEi7fpTDnn56Mx/A483+P5Jt7etEfza6R\nSRK/8HuNz65IdVrBjgFAcXjCxRSYzyQG76gngbJsnbS4RTY/s2RDaS9QPx5U\nR9jM/CZlB55ydNN9uLPfm3cPTtpapmx1HDFZ0SUqlqskZVxkuIAGSUOuSvB5\ndvYFPZ/esG031Xoj2iwXWxy5OEwKLZOTaooawAwvVHrh4ESfnwFSPNfqbdAO\nZiEC8xA2mPf4r2lZ49XlSEGjArFxtRVyDL6eu9wx0p57OxoBzLghtovgOkFw\nm4JAhUGvKr7i/zKZL2IacWVeYdGKZtiw6mftEUo7jTnAEX03gdtJpJlD/vPK\nShfQSr8YgV7j0Lfl7YI5fTDV34BGRbwXmiZm+sfPDyASfKefVIlQ9LBGxrEv\nNkJHrd1H/SrnGEX/yt5x5Ig7/Nmv2UWa6ahlhyzQBjUgne/nOLGmbnRgJ/UV\nBEDtVxMfEOhFdHn1OHuPlx0BInMyxbrrrJHU+6rmlntl9f0QfAh4g8QmrB9b\n4EB5\r\n=uPNd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"05a76ad8cd6b15550e685799fb6b9b5643d7e0e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.67d780c79.0","@material/base":"11.0.0-canary.67d780c79.0","@material/shape":"11.0.0-canary.67d780c79.0","@material/theme":"11.0.0-canary.67d780c79.0","@material/floating-label":"11.0.0-canary.67d780c79.0","@material/feature-targeting":"11.0.0-canary.67d780c79.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.67d780c79.0_1615924138556_0.3864771693965121","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/notched-outline","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dd5b62909634059154079ce38fbd0edbd29ef93","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.0f358ddae.0.tgz","fileCount":34,"integrity":"sha512-c77j7s5RcjJShGJdER2r8j7JCnpXjY2SXMRbjJN6IiRsL+xpSU1dhiwbPrjGbAC3e5yLQfIbjrqe2/XButZiPg==","signatures":[{"sig":"MEUCIDlkzMqdCe8bLBRtzwH+OSap8JLLBn3kkMpCioUinhgWAiEAkrURAFHpYyEI3t58YRy2KOdi3KUs2BLOC3/IpjOo5PQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS2MCRA9TVsSAnZWagAA27IP/1jx5yNMDppM4pOjHFev\nkBzjSiaGtZlNgXxniRaDtn7E22mCf9JuuHJptMTUOUbdG5Sp+OhkBvSTu0p0\nXgXkXno/qQetdGAutoEti+i5lUCt9lSLjYdeKfcUkvmO3RMoW0DUdcXy4/Fc\nTyGwdtRvF32rpEJEoXqPrEiMzgCJDPMON4rXwgmRv7SW8wdvt907ZjQzNXb6\nQypci+s6m5X3bYfdGPzZdHi3ONCzlAAHco53W681CpvFiVtSi0CPEqiq+naU\n1oUdgyBVimypqX/0XjEQoQpJmXWTOb0oFZ/KIaKBswy6REGqmUKtHYKBtksM\n8yxRek/dToAsIDAJaPV8m+3WGyRI1kUfWuV+YnB/74B7PFWVTPRaKKKHxgbu\nK8wvOgtuoQSzRweHqX5XTRDNefkOJMtV7LCJS7p1sgNCO6n863HFR2Q1rOJF\nEs1MRAX/9ncJAVR3u0CNG6CSFOAQDpkvDgF3+dU4dIdyD6cLCtCj1+GqrIjF\nC0/Nve1Vc9vCIZZpnclMTYniQopE5cniiu+yCM2k/9vud6f9khE5zUz2F3f7\nwk5foDd6caxCJXNnUNY18MU10hWUvtneo2dQ9DeXXG6ckJeyTqNyn5rSEcbu\nDRduXNCLv2qBjYfKjqA5+KhC8KKzQkLJscbbHlBJPZ8Gywkkx7QF3hNt5eWf\nZlT0\r\n=Jf3p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6acdc7677f01b6502d0b491a9816d6600ea9cbd7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0f358ddae.0","@material/base":"11.0.0-canary.0f358ddae.0","@material/shape":"11.0.0-canary.0f358ddae.0","@material/theme":"11.0.0-canary.0f358ddae.0","@material/floating-label":"11.0.0-canary.0f358ddae.0","@material/feature-targeting":"11.0.0-canary.0f358ddae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.0f358ddae.0_1615932811658_0.8566396599401866","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/notched-outline","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f357a55b5fcb3199ccc902b3b738fe32d116fdb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.67eb0df80.0.tgz","fileCount":34,"integrity":"sha512-9PdQyozVF6KPo0X2wrPv3SDkAjYjn3c5+O3k9SNZOAGbKLKyCN1ojOkGq29cLxRaIDVN6sxMobCxbd+0T5O3JQ==","signatures":[{"sig":"MEUCICLcY7UeLP1AyozLdMDkgC1/BfFnltqLX7ZbBSM0zkEdAiEAmXkItCz7dnSLnppyp2cLtFYZgW1PMSAN1iuPNaLGo+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTPtCRA9TVsSAnZWagAAYPcP/19l7goQzSPDMqiweFri\nVDeBZA6EL1LXKDy9ek5K5iWmhFsEItue9DYUFhRWwtxlr3LeTKnMlvrtymV1\nYesWGA79LxfOqeDAjEiSbT7+slgAbOWWIbq16T6IpxKOJrjTZjlNlvEhqbwF\nPHPO5IGSLhnWlpaSBcAkLq2T7PEYc8Hj8sd2kA6fWc8KgXln6epbNZzZDvE5\nInXljpjwFKwMisnVZDz4N6B9InZd+Y4qWNUmu5FdzgAyLs9YfHvZzyWS6AO+\nsd4Fl6K47SYfKge4uY24ixO+q0mZaBP/zl3KPm04h6TKNrHt+aKVBH3eIe5G\n6IY6p+nqeoykCcRCJAZJK5tHrbUa3W9fJiO85HAwIncf5dztiMddGHZve+x5\nirH1Fjei2epP4rLQAAI2Ar+fB/KqhP2zIv0U73ZHw7mkd80Kb3SQ9bp/kCA2\nxH+pBcMNb2OskWu0abMIdmudcQ6b1EaoHw6j7wQFrNBnqCTbWyPFnR4lVswy\nN3WIKv4jnDz+xDohktfAPS94bJ2tXMlZfEna/Uy6GuL2U40yJaTcFWw8HtDZ\nRCx/guCHSYV4TrSTlawGBImdDUd5aOZNzhoZ2RxA4zTB7qvQs9XOXB0NA1Cc\n67PdaOE5uoL2saru5MiZnDa4U/YyM1ZQa4dJ6ehCikC76WtBVoneiZANHTcx\niDoL\r\n=dv3C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5f5e9d259d95bf3abf565622edf7345e62993020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.67eb0df80.0","@material/base":"11.0.0-canary.67eb0df80.0","@material/shape":"11.0.0-canary.67eb0df80.0","@material/theme":"11.0.0-canary.67eb0df80.0","@material/floating-label":"11.0.0-canary.67eb0df80.0","@material/feature-targeting":"11.0.0-canary.67eb0df80.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.67eb0df80.0_1615934444535_0.8893927654040539","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/notched-outline","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a36a10f9cd2712ff327666eca0d298aea1e2aed","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.941ca3b3c.0.tgz","fileCount":34,"integrity":"sha512-7iWPiMZsZGZTEJuy/hHsifWsD5iMonajEy/8s4vfC/TnmiFlW9n+cAz6v3qr+W9NjJIdyflQCeXS/OrcmsaIcg==","signatures":[{"sig":"MEQCIA/gY0B7w0xQR4IMRF89wpBLNX+VlKT0rzPJc5m5Nzt2AiAcmQ6YA4Sv+EHlrALUXwnE2i13WfWsA/cRvMiS5no14w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTRSCRA9TVsSAnZWagAAdXEP+QBgCCYr9aAFM51zlvUL\n+MPYlzOAk3MaLwCdQBqow5FbJN+rMf8ZN9BDyBg5XuC3FtxCpCMCj/3UMTSD\naN+ySgCggtzUVEJ8dCs3tDD77pWdkYMVlRSEtbXG6q7mYD+vjL4d5pAVTm6u\nwYxoYnl+Dp3XjCsESpzP7Y9/bLIjY24ZzyCaPNFiiBm/ToXB4gH/gGLxl5qV\nCTeDWKaCIO1hsGEymApJn/UZZ7zJD+mkw52CEAEmcDrbWxgz61CUHURNq1Gn\nvYhMthlbkItPtFCvMTsXwRFsob6K9B/GAHaHvmGUkyy4KcOKiNZ3rOPtA2EX\nEHpBFA4IoTJ6VGg1ALYpn630eXj0uWA+Xo3dHiz4Ik4WIqiAktXf3vxdMb1K\nmPEXuyeDVJzLHB9fg7LcdX5z5cN840QaN+Dy9erHkaRyarkPA6nuUCkt4EF/\nL0dmqnYQPA/RozT2WImisXUQitBJj+cJgTH0FJzngxunvO5OloZYKWX8bGPr\nBzOYx31j34Qqtv0gKYSG15oBjfSGtaxNaAnPPAxAehEuXhSJj5Zyq11bji5R\nhV97GQz2+AF87FR7VwX9Clq7rYjSeIrsWFOs2TN5FNAB+rAKRY0B3+Pqxa0h\nPoBEdSIS2i9qF5nMC1pyNgxELgkfNAqz9Efv2eUhsX6CdqkpPb6kRr3d0zI2\n84q5\r\n=GyUB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"27181e4c2c90af170c9149616613beb6599ff94a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.941ca3b3c.0","@material/base":"11.0.0-canary.941ca3b3c.0","@material/shape":"11.0.0-canary.941ca3b3c.0","@material/theme":"11.0.0-canary.941ca3b3c.0","@material/floating-label":"11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.941ca3b3c.0_1615934546250_0.3540434797516787","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/notched-outline","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ebde7b3f4f618c36f143143de9d17f23668e889","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.3344d12ad.0.tgz","fileCount":34,"integrity":"sha512-GQ5Yc3zodMRKwslDgjM8uXzgAMhS7NAUjzdlKbFvvgYDzTpGm0VAXcFO8qDa6heQZXWXTc8V9xi/nGez8oLGqw==","signatures":[{"sig":"MEQCIEyKnZsdvrgI4Mg081pEwi7g8gpODty72XA8yKLEBsumAiAYj7EBDJPoRGGQtHl8XYElWEgIFVSr6YpcrVPA0jWokQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdPICRA9TVsSAnZWagAADpAP/1HfN240SbK78aC36fz5\naT/J/6rvxtk92HIv7ivjJ1f7xo4NFVwJtpKJfQb1N/IEypFjSIkeBc/DVkdf\njMS+ZiqaQ++/7lxSP5Z1/lXFOoj35esMkW87h2p89XinxTghlV9rwY4mHxzE\ndeBJwXRSSQbZY+OXuY7TyNgUcd8SNeLJpc9c4ktUlEjHZo1zMrSiXZfy1xwB\nLlMex0nKvFJkt2AhnvGnJBmo0PNVLSwgF46GR9PopScFeBMxUwsNulqrEZ7k\njHxWa+/CztscRa3zRyAdsxyDrAieBgG1kmE9Ydpbw10ORfDDtL7yQ6vjBaWd\ncKsQfO1bpfuSWN36fpPLt90AUXuU6wcQN+ArAxyimghUsm0fWg3TDGbR4/R1\n1QspKPX52hXnrcYa65g9IhHdKH26ZZf5nJ+8dace0ulAh3B21v5fWoaQYov1\nR9pwqb10oi3bwd3XI8oiZ+y8M6rYjytVbF6giSD0IGh2R2kYXJqYFOi21PY2\nwx7w0tbnTDtEAqJoBIhalTJO9CcH/kzT6mnB8zpqeaWj1xrIxdPbbx8xXu14\nTnbAJyCPZIH4jRusWJ3s9kPFtCuG4aDYRQG++moU1+6VojLLWLZeImhf7PBA\nRUFrVKT3tIcioIWBIJR3tfqf4SYOmekBo3Q9UTy7ycaDpRWnlVT77vxD905+\nIV/W\r\n=arrJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fc17c547b4aa66b6412c0b0b56b75978332702cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.3344d12ad.0","@material/base":"11.0.0-canary.3344d12ad.0","@material/shape":"11.0.0-canary.3344d12ad.0","@material/theme":"11.0.0-canary.3344d12ad.0","@material/floating-label":"11.0.0-canary.3344d12ad.0","@material/feature-targeting":"11.0.0-canary.3344d12ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.3344d12ad.0_1615975368321_0.42338778739462435","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/notched-outline","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.6072ed604.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79b264295cb0414796e22ad18952d21e9b13a42a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.6072ed604.0.tgz","fileCount":34,"integrity":"sha512-J0vuSHzAOzVIDdu9tBBrrTuPfwbXt3ko3Kd44cwweQz4IExx//0DDy5+Ab8y5SV9NO6EdHP6eIp1izYhHKl1qA==","signatures":[{"sig":"MEYCIQDYSetzW0cT4yV+pfgZPp1CrnIRRQJd4ARqEPn5B3RH9AIhAMjWQTc1Cs2ZnpZtWzJ+wYm9fJu0V8IabMq94AkK6qoT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUooOCRA9TVsSAnZWagAAAqYP/1iAzuw3QFsOt88idrQS\nng6127Cpg3Y8bDGjPd84m76e3r3Fpe4KiBmgkKN4mtyT5P01ql84SWxMT/F5\nup9bnaoAjH50D/NGncRym595lrmd+EfCk7Mf/LV0N65VWoh5J19yS/Gj6ceo\nNDtqMpSednMEC718G6T7fkDtg/6myWJSbUgk999GusZ7X/Fco/ufTR02MUte\n5UqTEBNRb+aMW5RCfVBuN7AbJs1gi5m917RhUYvaKLCzmjKLMcvZiMgmWyDq\nUXByoyeWDvuoK9lsXlU0Lp3z/O5QClheyTei3wQ1r5Z2427CfilC/W1SD3Ik\n+YF4+eiL7SpdTBqi7GDjd9j643OkSNNtiFe1YhUn1dpOzSeP4IcYhHfbRhx4\ngUGG19E+viwSF0yViyBVtZlmC7HV9lSl0tQW7sIObr8/EF+FFc907/T2FDDc\nULwRc9XHIkXNIvRL06c/qt7jQ+yfv3KfpxVbhZ6Gw8m+l2wQ9xmRKufU16S1\nhZt2r552MjubamkX2jkICe5nVjjvS4wzI1nfoX5j1M1Uo8i6pSQXQbVMckDG\nyc198BJA2AgiOqQ/Tly8VpzA6qbXwARxhTp+SMZOTVkaS5I2vlJQqT5v1fp9\nLcEfiviGuG9kwOBXMA8lAPjI9CQXMh3DHNXDJR5kAU9addDWuljshKs77B2A\nAKHr\r\n=8o2n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"219b085de7ee97c7b75e5f25dc757e7b5240916b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.6072ed604.0","@material/base":"11.0.0-canary.6072ed604.0","@material/shape":"11.0.0-canary.6072ed604.0","@material/theme":"11.0.0-canary.6072ed604.0","@material/floating-label":"11.0.0-canary.6072ed604.0","@material/feature-targeting":"11.0.0-canary.6072ed604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.6072ed604.0_1616022030446_0.32349059775580424","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/notched-outline","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0de2e3cb860782830d4dbe4ee76a11b7abca2251","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.d3a6862af.0.tgz","fileCount":34,"integrity":"sha512-7nkxt6GwhZK30CPmBnv2FKVco3iJjRJy0XGSzQcZQaocqDGxt0xYzuMiJ6C+xA2Ei5KEQl6mFChIn68WsEoNpA==","signatures":[{"sig":"MEUCIQCG0BvztZxuYs0MlfvIum3zhDbTPdh3t3RVtQjPeg+AZwIgAd/UFwy3iQnTZbFlAixmfHJnt82BOGj3SOwdU9U20xs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU335CRA9TVsSAnZWagAA2Z0P/jWo2E1+zjVjEaZzXMC1\npYWdkWb9UAPjf2KJZ4uZ4WlbOebwipZ/GCdUVBwivKVcWhanfuMDghZ51Iel\n7xGaItTBy39UQos1MrnodwzTLIpubcbx9vvk1J8B4xYzXlB+G8M0AIJ2i8Az\n0J24bCsnawD/ZWrWKo/XmaYfR7cCwaRN4fx1/j+3TQUHerKgqW6HbIsao9s+\n9AqE/xWlyi4C47D7C8eLVJJK7wvKwjII+Lg1GEeaHHjqlp5BAsoWKUKjcmph\n0x0rqp6h9TgRE1SzlTWo2pFB+r7sewkdbRwkTRD7yja++IlZ0fM7tOyeJ3Xu\nOzgwF8tqkuW6hymKszTtlshfwfk4iZUAZNHnAAXBx6r+nD6KXzADVReXAPSy\nMbGiWLvckLZOZKTMoZysWggi7BJVA0l3cQdvTRBz67AiErpuZq7AsHepommG\nAg8HiC5g1kuqkm3hyD4lK3Msof7JQD5BZswkRHBhoSZezgAVUwQYWfvOEZhO\njv3d6vDPu7B1B9VaRRiN7krQR7yCVqtra+e6C0fNFi14sPN9b6yq2Wx0csgI\nQu+KiHUD8zrM8+gLWoVxj3X2poaza/HvSjFf6QikYUu07uNRcElF5RA2TRkT\n2TA45jkhlwWvSgk4V+TWWoQSyM1dYXmzSbNa855BCo7zRPMe+G0ZbNCoIzxz\nA75Z\r\n=+UXQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ab10f53a050cbeb103a3ee070a9134ff428deae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.d3a6862af.0","@material/base":"11.0.0-canary.d3a6862af.0","@material/shape":"11.0.0-canary.d3a6862af.0","@material/theme":"11.0.0-canary.d3a6862af.0","@material/floating-label":"11.0.0-canary.d3a6862af.0","@material/feature-targeting":"11.0.0-canary.d3a6862af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.d3a6862af.0_1616084473060_0.08409439883737657","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/notched-outline","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee9d0b275ca89c89d296c14dcf0c9718dbf7109c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.40dd242d5.0.tgz","fileCount":34,"integrity":"sha512-24F2m7bC8jPu7e5lov0oHDkubUO9O5WOSXn2GCr6LWNRTmEHzgCUugsMLgjXxaZOxzEUFwG3BXp7erYuHwT5ag==","signatures":[{"sig":"MEYCIQD7wc7V8b9SEpNZACxKFPOJ4R6CTqTo6fgF9Djzyk8nDgIhAOeWTghqrvAv/2q2guaPstHJtSLgw1e8enUFOHT8rrTv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8OfCRA9TVsSAnZWagAAV48P/jiOnrhJbqwiW0Wb1FhL\n4LeVTip/ETLizCMd2+leMXRtLYIeFksw7qwGktfXzUc7ddLOnZ59KjEG58PM\nFhqU5BOVUla8vXQal2wCVdiI2/4bjSDuLLsHSqPg9B5L/mFXb1qGHIpuIgOj\nEWAktOHAStISsEERj13vOabBffEblVxuYI3gW1oQXoJHJ+CHtBq/qxElG+5V\nIYfRLVV0qtoheC9OF/MjbYsYIFlOH8LSYTgacaGSnL7pXK71LGM9hVc27eer\n3fkj95NFvAboiC+YDCF73U9DGsU+YRhnz99G9OU+7Jiku4W7+K9i8qMOBVu/\nc5NUEorwduq71lIRRaTZuNeXL5P4kaDSjEiV8h4FrDcrLXvjSRxwPE7si3gK\nMkfXIoWOHmybAw58sFihnOdRDHX6JPBlE9vSZc1b4HhYKWVNoAuQhJ+IVY+g\naozO1BK27gFKPRhpVh91uz8PBZArR1sANzmJXm1oWT1ol14vy5mxC78EW9gy\nCDWIF1YdggSPSrTSXDlqTC/C+T6SIn+UODhqCQUsozdZU5x6X2Pb6LYEigO6\n9fbX1dpvgVdGStzdmdOtkZ68OWv4SCzyrj8clnivElErt+CzAqc4JD78+IpQ\nsnbjpSxefBaFxIH1SvfUrjyJ3FLwydhmjh+N92F3BAjjdRUWcAbNsYVhk9sZ\nxMBO\r\n=ghm9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"07de383ae306cbdee42be69fa0a06884d97ec259","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.40dd242d5.0","@material/base":"11.0.0-canary.40dd242d5.0","@material/shape":"11.0.0-canary.40dd242d5.0","@material/theme":"11.0.0-canary.40dd242d5.0","@material/floating-label":"11.0.0-canary.40dd242d5.0","@material/feature-targeting":"11.0.0-canary.40dd242d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.40dd242d5.0_1616102302471_0.7686837034551341","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/notched-outline","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8c6620aa7b38c13a53e9bc7909ed08a965a2d61","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.ec8f8465f.0.tgz","fileCount":34,"integrity":"sha512-XhurcRJFGKyO/btrvjSzcTrHw0MqH6dkYXWbdwY4/n55BHYAFFVAOC2OCd0eT8Co/4CHQBn70m6DhES8ky7mXA==","signatures":[{"sig":"MEUCIFCD8MoS3tRS6TVbbDV40EsJLRQLwl5uTNuj8GuJ3XoJAiEA4FmpAJJ19ZqSNnyW8RfGXpxVXJdSgfmkE9bwNaJRVLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8nqCRA9TVsSAnZWagAA5vAQAIjTdbHiwDCWkPfW+4i3\n2xF0nryBKFdzUlwhSoPf6j3NCuEHQYPqt0sl71CEYP4aJ3FDpP72D3OmYQIY\ngqa2U2tw4hvb+VZh0OyEX/T9+qiW6kSwtEw5wosL+HUltk62VEcs7lyXXHZc\n/Rv6hq5VyoMjqS17qmxeEFPjhwNwyoZsfVMQtL4Cf77G/gfCwYquHdKNh9Bi\nt6fOZvSZTfNjAxggWUwe4Ezu6DYMrJRtFnE4aPz6B5vJej9ztkl9C799YwVp\nIoQDHXL+Uoqb1Tmtj4jOhzmYaLNa+ZaqOjV10bwN5BSBw2JSS5cGeqDk5Uk+\n9xa3L9zVB5RPgyn4bc0PTHTfagk1a8cCjDortBceJ/iI33SN6LSckPHhVax3\ne/44m8nbDFXn9SwxNuXWoPs8JkYbUQk2RoFxX/mckgLARxTidurz2AHKOJYy\nJ7uV/MH1v1Bb3d3zHlhqWrBghkjWlQSHHDqfpVuIIdqPCzGbjQNs8Z2b8p8d\n5figb7a9GslZ2cC6tds/QD2ZEoCG0SSu5iRhc7H5gRsTHXP27U8UJkg2Hvan\neVpIGFwFJDNkt65iK4VPnL0EqnfK0uEMqPQCwaMZy9J5CTd4jUe5BI+wI7Uy\nh8sXbzsvXEY1ZvqJxV+Rz8cR8KXVspvE8F+6P8hAKSaMi6JKfPSDDBs1UbDU\nkILj\r\n=bH4k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"896f8e45effbe3c44209b4542bcd3d10a7f8421b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.ec8f8465f.0","@material/base":"11.0.0-canary.ec8f8465f.0","@material/shape":"11.0.0-canary.ec8f8465f.0","@material/theme":"11.0.0-canary.ec8f8465f.0","@material/floating-label":"11.0.0-canary.ec8f8465f.0","@material/feature-targeting":"11.0.0-canary.ec8f8465f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.ec8f8465f.0_1616103913646_0.4404825983333891","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/notched-outline","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.da38969ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b91682ebc656492134ca0b8f4e2ed016a74aab06","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.da38969ec.0.tgz","fileCount":34,"integrity":"sha512-RD7YIV5G04+whLY87NMfSvF+VqXdMTnpXhEKk2ce17SZWQKBG4HZK9PWMReI0IdnWaYkToHMCQW0/m0ObYPebg==","signatures":[{"sig":"MEUCIQCqdMMfqo4tMnddlB0Hp9uctVNdGbKMLgntPaceeXUKHwIgRU11TGbZp/KxhIL2qpaWvV6yJ4CiQvxgF7cSGbfu9jg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9HSCRA9TVsSAnZWagAAhKIQAIGt7vMge7DFS28Q017s\nf05fbai++rI3h+U/eDXvvvNLbE1RbcNSWg3iGfUIDgYFr25l5HMJwjJjJNC1\nipc7Z2HFMikbFfmvdAf3mdRbG2UaN6YLxrdVDDuemVLYef2uuIhhQyyuiQhF\n1ApGm0r/XlbpX4PqB6JHIN2nANJRD5uFS7Zpc+9l8aAvTZP9CyxkzFleeTYO\nf7V75ZT3L7DKHJUNh6qU2y2oOraTRFEUz+shLrYPVfc9djLs7wFPvIXQGxgi\ntPlaiPr0v2T5OScWi8r1eZNzA4ZAlakdCE5GCB7y0U9W3s7NIsiW6GfUtZpY\nrNR62KNe/xT/unE9tVk1+xosoo+VO6CkhK/HcIJQzCz03GO6aA8yGdb7ysU3\nr1Cofli/MOpmLtzn5Hsaa5GKVNxVM1bf2k/xBrD2wT/n49qYEhkKFonTPHzn\ne4iBICy9mj20kkf9VJvD1fsCbZy+U9LM7PlVWFnGENip6H6mbjxVLo3J1AAL\nNXD7Vwnm8Ank10yIrKpj5rsscjSMBze0taenxULGtV008B0fP9IJ1BxHd+1I\n9a/J/MW/2GYekl6n2R8oreOCBfExJnZoRW9Y+gIYrDp0uP2a2Mqha0eQ+HbL\nWBHymjWxKWbGU4Dsxpnohv7BFceh5qZ37wvscJ4B4sVItiZvawhsJi1ehdVm\nhAZl\r\n=uWDV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b43d112facdf74c62e02576a918d522587133fa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.da38969ec.0","@material/base":"11.0.0-canary.da38969ec.0","@material/shape":"11.0.0-canary.da38969ec.0","@material/theme":"11.0.0-canary.da38969ec.0","@material/floating-label":"11.0.0-canary.da38969ec.0","@material/feature-targeting":"11.0.0-canary.da38969ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.da38969ec.0_1616105938335_0.22095391107993767","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/notched-outline","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.f5246264d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51a6ff9bcb97fc95c69e1a5820a5108ff7094dec","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.f5246264d.0.tgz","fileCount":34,"integrity":"sha512-wzlmyMNK3gYmbCb3bJ8HKKR4vqyk9SnzYQWXQmg7Diw5sOYL1HFCGZbMSmXowBwUoScko6Br9YNtaB/N36WkcA==","signatures":[{"sig":"MEUCIAkCDvCwdfj7BIZ3mpdJWZwEJB8F71BsgUn+wgBpsNWzAiEAra151+huPftFt9kbMSCp3UEQE0tgNA2Aw94iHlMWwzA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/LMCRA9TVsSAnZWagAAJw4P/2uIxs/Bk8Fjwp+4ElLq\nu7Ws8okPPAcg9TCMzUIu4CBBAfiT09o7umiJ07rwe20WxJ+Ia6EZAva6Y/WH\nvnE5QIu6Ddn/3JJyImrocUBYxsE1fc5pfUpSf2YlDIKT8Kk7/rJC1naZ3GvF\ndkXE4yae4XthYUpQoiTi5vHvSENj5PFq6ZEwDJ1mlhu0OaFY8vKymfgAgSih\nDdziI9cGMLDMlGwVi3vtOwmct6pvQFb3WCEaUcCXPyv64vlkGJnAE2t+Yy7F\n7HM1ZTuphWt7NwcozMGYEud4i36AAUmxWBPwpbnQtbbUWfVcNPvAO2w/b8tl\n2UDfu36rII2hNPVmYwF3gwoLUCOdipMgI39FHBkywUPOKRMJ9y87GUjCjyHk\nXQVjeWC4A98m7uKrm18m+GluoXNyhN+ukI+EHg9DrWS52bdZ5yvxdRrMzayJ\nuKH8sE6hGMgqizLVwcGkIBCwuV41C3DWoyQmRbyY8HjyejGITf5PIlHYGbgo\nf/cmk0LOl/y7/EF7Oub+IYlHQgwrVHvEyqHBtgZYKwOLSy3O1ZcO6fzqPlmV\nCoWpHKElDxfTzcg0GXfmSvxUi4DxxEStjv6y6wxyH+kh4Wg/F65rsmVpFlhz\n1h9oPEPpshF3Yt3LiV7UmGPEyTnNbxBF4/hto3x/owkFrmHcIE0pJBlAGSls\nZidv\r\n=CgwY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e5bc1717405750210bb9d7e3572f0cd36c9bc0cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f5246264d.0","@material/base":"11.0.0-canary.f5246264d.0","@material/shape":"11.0.0-canary.f5246264d.0","@material/theme":"11.0.0-canary.f5246264d.0","@material/floating-label":"11.0.0-canary.f5246264d.0","@material/feature-targeting":"11.0.0-canary.f5246264d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.f5246264d.0_1616114380164_0.5794286045207548","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/notched-outline","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56835e9e2d6f88cc962e8bfcd97bdaa8f785f450","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.03d34bbad.0.tgz","fileCount":34,"integrity":"sha512-bZQTU7P6NLy1jemQC5ca2WqORemFQ9fYw4jWiK1GhF/wv9f6ee4JEoouuZWTJapu2rVtC2x4PwlgA/aNGrYrJg==","signatures":[{"sig":"MEQCIE1Mlo6IxAAE3ldrR8Duh79Gj+MAUjwsyt0nfJvQT2WdAiBPhcT2mop5+iP7U6Y0MNAgtn/d5bq3bjoC0LHVAXn2tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/XOCRA9TVsSAnZWagAAOkkQAJiuzvWxbcfJrXkhfCC2\nPAlKYpa4oH/b+W5+hCKadKgzR+uBZTkKSlSYTaDy4yUxPg45P7dZRRdYb7wR\nfrSitMVW8Rc4BLgCN5t1Tuw1pyDPttvVCix3McDtGJx3E54cdbIhwSDb/rEO\nXMQB4dEl84dDoI5w2fzal9NZBizDOzmEeVJXdIuAhJS8uP/hElTIJmuFOqTO\nKBbgMZ/Gal1avBMbR2p13exMpioJPvI8QlGaBVmi/AeoxgzJ0huQyYcyOI/+\nnrmleA60MasEE8gSXkIEQEEFf86Q7kufLdGsHzU2R+rG+SnC6J1CUdh7zkf8\nxPJDNe9JcIPcDNU11Upsz0eS7w5aLcHz71T77/TYoeq4LA/10jrWkIATUKfb\nzuXONRLJfXYIFVsKg4y9In/c5aCV3ZBcH1I0QrlY7wJDiH2wlzyAcWFX7gpM\ny7b4ClH8oBY4C9KxPu1k8TrXxmFMa05GGjkaox0M4aj2rcIKuOL8m53CBcgM\nbImUeIuUjQJikc2KAqgsh7GhSjHklR7X3HZnofLRl7FETT3RjzOWkEiKTJcl\nAkgS8md0rsMXzdEwh2a22BtcXl3nKk0IOe3VfQadskWzbHIgAWEbL2Z6Fvf+\nySu0e6Bkqni2DSRQ06aoIDMIbdaZs8rQebH2uBAu0amPSJ/fEwqTzZy3HWJ1\nD82h\r\n=5UVP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"650c89999524e7131f5808d28c8ea2fa15db0c86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.03d34bbad.0","@material/base":"11.0.0-canary.03d34bbad.0","@material/shape":"11.0.0-canary.03d34bbad.0","@material/theme":"11.0.0-canary.03d34bbad.0","@material/floating-label":"11.0.0-canary.03d34bbad.0","@material/feature-targeting":"11.0.0-canary.03d34bbad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.03d34bbad.0_1616115149766_0.7716959638208021","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/notched-outline","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3b0b12fbd25eafa015aa5cacfdfe4772a91c2f2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.cbc57c600.0.tgz","fileCount":34,"integrity":"sha512-wuCtf3DQHscUEqH3Ai1uinNBc0r9fiYlvfin6376HMCx+OSJSYVeh8XwB5jJK4dev/bhJgZlmYtS97lg4mCSpA==","signatures":[{"sig":"MEYCIQC4jaZoTfqsJY6Wf3w8HkpMzmn8p2nLYe490OM79UiRVQIhAIE+k3CxNQgccPgtLA8wnaKmlxO1VyddnWjtZK9khVP2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/e8CRA9TVsSAnZWagAASu8P/0oyOcK0z9x4XQLzVNqM\nNsR/pWFg7+4exP//29osZytZA3OI7lpgWnEvN0DWXZq4ckGVw1W1lmJ81HIM\na5EFgqyZEEX0eqp1pSVcoYqMYu6dXqT5BK8UkoBtnHMByiOrUk2QbiNGII+n\nzPpYFodY0dJDOzxFH/ffszqLfYKry7zIjNu/N7eQCPQaFGmkpmMLGycE1zFe\niasmLN5HlgshVXJqWn572uZeYMJqGAXhnMdsWq54VtaLVnmVA5HBCPazWvKO\nxcj+NdkaWtCUlEy9PIZGL1WFg678W+hx/zN+RarAGEjHk41raHmK4/f95EE6\nTlhktnJ0XNOzYAG3Ded1U//IcCoBDaFAciAyXVW3eZgynSNW2BdhKGLQznsU\nwWxv3cTGV5uqqlRLF12RAvB8UDb9zfx0h7zrJ2KBMg43cPa8HxB1RRd4uX2I\nAnlNJspkuawt1Wc2edvivxsZrFzPg/jigGcCbVmt6cD73ZSa7XezvK2dG3fV\nyM5LoYzmKpK5QAH1eb95FnRB3PCiWL78JwcheGCgGldOwVZ8T2o9za7ooRXw\nI2t3w6sQ4g4ZCaUvboJAPwh4e+Znz45XJxDhdFetoZYRc54ltoNSQlUZ0N2M\nD64E5/s74CUhxHp/1DDoj8+8A4uaNHm4vu+18u7YXXgmtLpBuw30dCkaTLqT\n0YkN\r\n=zHck\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c16ee9654e2ac3913ee3140dbc31e34bbc443c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.cbc57c600.0","@material/base":"11.0.0-canary.cbc57c600.0","@material/shape":"11.0.0-canary.cbc57c600.0","@material/theme":"11.0.0-canary.cbc57c600.0","@material/floating-label":"11.0.0-canary.cbc57c600.0","@material/feature-targeting":"11.0.0-canary.cbc57c600.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.cbc57c600.0_1616115643901_0.9055333569904644","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/notched-outline","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ea4f3ad90e9f6dd40a29e4a896832dfe7a39ce2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":34,"integrity":"sha512-WArVZorQz57pIP6Nz4SiNN2klLvYAidybm+PcUqmazWZklfBDw1/pCBRgyc3vm2igufNVaQfhYd3WC75CUgPig==","signatures":[{"sig":"MEUCIFxBg4f+XcqTBSIN/G7mt1Po12PcmKzNinLJ2PuMPvivAiEAuQHMaXitZE+9lDY1mOOEH0JTUGVCt4XL7jv2lA5fTuE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/rICRA9TVsSAnZWagAAHgEP/38Gnoh/JIpZ2UyiS/+Y\nzHpcM7DvBkaJY5w2fwZJ0q0WH505XmJEwBOJ8Nzb57rKUJx5+uMxtImv2gDI\nstvn+gAetdFhu1OUHVQP1/6TthQRWUUoc6+1wxvJylDbJ2PCkGuUcdNZVB5T\nBjmvvuDOtdlTPAnpKFb6Il0N3W8nsR3eaq3q1tAt/NGqEUPVsAtrsrFDfdJk\nKz9rXPRYnZg9lEvS39Rccm81O04Ur/6lMmgjIUXTNPZHlQfRdplmYXYL0WC1\nQewSm1swhPqfUfE/+IaEKLUFmLa3oypOoq0ktp0WoTQp0ex602+gV1/6JW33\niEwUGNQCJzX7yjtMd6zQQU4cgaERkKm1/n/Px1QulnxEyTo0wNkHFt4zJbQI\nN5YWz1SVtcwrpH3wC3VURY9xM3bk4uLdHV0A0VA8aQcnbRGlf6dstmkbbdi2\nvwcigetF2ORlg6Zv/QhSCaGQ/0ZvZIwWHjq6nVxwUNuCmoYP3sXP8X2hfuda\nV4HU5SJEaDQrZPPrFofFX66q1SRpn2AUt6g+ma+/HOD0fdCR5Y/aXR88lq84\nP8YP+I5rpfe+3verI30Hmyt5zMJKgHZaGeEnDbLw1TwtHgfpB6VmmbvX6or/\nOv1IUKmSjCBrraUcC99PexQncgFlHDxrMYrMdpc7n7wMgbMS+4L3IwbWZ2mm\nI1UN\r\n=gEdE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7ed31c18c565964157fdadec7c7876ba58c6dfff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.d6c5bcf37.0","@material/base":"11.0.0-canary.d6c5bcf37.0","@material/shape":"11.0.0-canary.d6c5bcf37.0","@material/theme":"11.0.0-canary.d6c5bcf37.0","@material/floating-label":"11.0.0-canary.d6c5bcf37.0","@material/feature-targeting":"11.0.0-canary.d6c5bcf37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.d6c5bcf37.0_1616116424100_0.5416148189949745","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/notched-outline","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c3b97bde37d02cfc0c60dad431d5f02df8efcf2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.fefc668d7.0.tgz","fileCount":34,"integrity":"sha512-B0pE4pkKgBAVtxT47qAQw4Krruy/9rOHkl+8Wif/MddXW8FOL7jUwYaQ4wiGIC4/QRcXcDYRqnM4MqoIFxuaVA==","signatures":[{"sig":"MEUCIQDI9kfntwAJuXOisTAfCzlZjACbE/FrK29NTUsDq68UuwIgRPoDtovkIqm0RzIEIPJJqv47bCak4nfd1F9BOo27kJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU//DCRA9TVsSAnZWagAATVUP/2mYXURWA7qzyg/eZQQx\n7spDBwKfwHbnmVgOrRYOvEu2+aqyoYYbo60CQ60WDmCjXHmCZoH8PFAcowXr\nY3v5HHjKyZS75iLJTH5AVRJbAYfbnOdK+VypWhZ7K062f1DOwG8n9gDATgOL\nvbyvPo707tX/XIRsk6smaOF+nB7zJ2io+5qiElpIXImflXdBncFA/8xTdTVJ\nu48R8ADg352jA0te/PY86us7NtMgG1UhsqIyslQHZU7Bxn4EaqQtwgLwZro+\nmC7NMd5R9ZLwYx+2km3b0zGtHiHOXbsFBRtSKNHaUJ146KfUW0pMepulmjzt\nJ7ZTPTvKW5MaXPfDR+HBsSWCinadtWgfUnIux6kb0tLyMz8q7Jo+DbVCBII6\ncrG/beDnW+3dK7FC0SsqaKdoZF3T4dN9eUbVI1eKc/c8YdnY4CzIjil4FYi0\nlGiaJb/Bkyy6chuU1RntKoVMTCkRXXlLmxjqdIn0bLzq8X4By+4vCyBxCSg7\nbg53hUwfGM9CfkwveBFFnOGKAkSJhljbE+xNKhWQ8UnqCtNVawMrWL4RkK3l\nbNMR/YIOp9G69v80IFJQdw3joxu1HxGqdBniwHtSFGFNhWtBPH7JMeFQmrhT\nfKVeAU9CFCGLvihddA1iFdHLWBhWZclW7eU+rZ2hFW17QKozF6iEtUIAcY+r\nRuTj\r\n=kybD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7c976c590b16e8f3a000dcf5cf2b4daf6269aa21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.fefc668d7.0","@material/base":"11.0.0-canary.fefc668d7.0","@material/shape":"11.0.0-canary.fefc668d7.0","@material/theme":"11.0.0-canary.fefc668d7.0","@material/floating-label":"11.0.0-canary.fefc668d7.0","@material/feature-targeting":"11.0.0-canary.fefc668d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.fefc668d7.0_1616117699073_0.08663533001485657","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/notched-outline","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea1fbcb247ddc861117d3ad3257274caa14c3282","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.faa7d3226.0.tgz","fileCount":34,"integrity":"sha512-hNSmeD4ZdIekGGTxntRQjQfr2fpkCMtXrYWvzTSZWgoIoeC1JdSh37HmZj9JHorzNjhi7rmdxUJPyE/CQ2L9kg==","signatures":[{"sig":"MEUCIQDhk66icBq1qX5EM9hsbxajtSDX5gh0NE59PYfP1ruTsQIgdpIuCwBY9c7k7WBQbW0vGQGnzNIKwRuyz30qJSk2Wb4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOMsCRA9TVsSAnZWagAAN9kQAJP19QO/IxKC0l5pSp7B\n3XXs0xw3Ody5+jmAOVYOG4iYnyA5PrGtcgYZHVYUYVo4/6sREt4RTkXW9Kv+\n/CsKjXf1aOfwOVuaymVklk6Bph2kmxBBSZ22XreCpBOqT/4O9tnha4WFLODX\n1ZEtJKaES2UXpUfKjFcvuHqUxHoGaNSp/3JxlLNchImip3WQEB3AnBw+r3vc\norVT4IPi6m4Da/RmJ7V/bnPe8lnBZWDY8WdRLzvVTY15Fc56wb2yZ9CyExs9\nFMyNRQuhDt245ctplTz8aechfO71CGEyJu4HeIxM9JxJpZGyygWZball66Y1\nHFUUBBk+WhyrEEieTm/CvfJCsoA0rUxvZS+cFRXIxp+9vjvBVFB4wbMNLuKE\neSVCtzOran1F9PsislMMfvDCBI0vN8QuhT0zgJly5eoLHLWvU01Lr5/QUXNd\nwDS1jbMhllUg9721MLlrhGEAXbLZKy8quFsMoNz3KMIatjcn7QoAZumCB7TA\nEWROZDojVdNJhFvRlUMaSxAJp1RkqHYT0ihbCVjO8YtxLFt/B1C6MNCjP4Gv\nZ3NZAbCB4Eg8eGJH8f4TUZNpnRy7yNbHA1DUS1kb15OtwGsZ6s5qf+1EVXTE\nVq9YYT8F60A5FfRSPAkwdOGVfdupaCl97ZT1ASWWAnlyZQfCVAnnPctgkU1i\nEwIb\r\n=GEjB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c6038c8b2af85b70f2434939a69416e1593d5a36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.faa7d3226.0","@material/base":"11.0.0-canary.faa7d3226.0","@material/shape":"11.0.0-canary.faa7d3226.0","@material/theme":"11.0.0-canary.faa7d3226.0","@material/floating-label":"11.0.0-canary.faa7d3226.0","@material/feature-targeting":"11.0.0-canary.faa7d3226.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.faa7d3226.0_1616175916075_0.8919940065955521","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/notched-outline","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3ba43528c5b600d7f090a6945ca0eb9778fbda1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.c60449bc8.0.tgz","fileCount":34,"integrity":"sha512-bC1tHQH9jNvyQv035+LM/AE+Gk2k6m4k2YDXI4yqPhTP2curncjY0/jPqtBScrOh9yIDEWVohD2vUqxJFmD5cg==","signatures":[{"sig":"MEQCIDliENxSMbMKBKpL4VsEWr9fcpA2fAryanVp5W9gmXrcAiA9F3v6J4zex2COyu7wwh73GXJoTzdBZo0LUABo3iUJMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOgTCRA9TVsSAnZWagAAmFIP/3jSGobWszv+ZFCunsHl\n2FUPLbyOtuL98fcQQaIQwtDAY3C06tsdMieanHoIDOWzhq8sVBR5hG6TTC/6\nHUWBIPBP7HN/L9i9GDeecJVPBg2wx8Bhv9qRV6NF1sMLpwevhd4bDOO1TKId\nOm3L8BUm/xpzMlIFXQAdETKlnE686azJ7TobIKL72iYhXVBYg81OcMKS+X/n\nrNqWGk/yt1cD6Ej0Yu39gVHqaunp879qe8QwYgWEY9PVxPnaXJkuwlz5sP4j\nkqAlJEHJNTbPyeu+B8eITtZi3Tt/KnieRgCAuOJl7RPjsar3Ao2Z4B3gxaxc\nqMu7Op3ocJTmWYJXUNdvvTdjU32frfspFjQ4edeWEfo817WkpH6hj9nFly5F\nnB+V//KdDv9G03L3DACgPPHWeYI+u78x/kgfA1E/LgOq2gF6xelqcvG+OJa1\nxxuBD+rtT5EgW8U124nNdkV9e0BFyJQyVAtme4IkiraiHrAs+qTGvXyksrEA\nEP06owQE0GWopj3wPFnTEznAhiksscy3MHCaXW/CXhTMmH7M+RtqdpuelLy7\nKue36XJi71LA9gKH+RkaJoACGXBEOcMB6l+z9fUOjgQFDTbwUe8sELQKQRAI\nuGxOqZZSxmmnHR69lAbAJWQltILpllJwn8gAr5zbOTcPNwLydHp8cOQodDta\ngsee\r\n=NpyD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"874083f8b4dbf457158a7eaf9924ce1143ef6fa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.c60449bc8.0","@material/base":"11.0.0-canary.c60449bc8.0","@material/shape":"11.0.0-canary.c60449bc8.0","@material/theme":"11.0.0-canary.c60449bc8.0","@material/floating-label":"11.0.0-canary.c60449bc8.0","@material/feature-targeting":"11.0.0-canary.c60449bc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.c60449bc8.0_1616177170911_0.6323981385878503","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/notched-outline","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10c23f554cef2c75da00dc3902797bfcf992e744","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.5f0fc444a.0.tgz","fileCount":34,"integrity":"sha512-MNuc93xCnKPcJwgEbvPsF3bkKfdMFZg6zszTEwRh44cpCsFD2f2pYkdr1VkDB/lI0b1rN2AOeGu53Jo1XwhTBQ==","signatures":[{"sig":"MEUCIQCJTIzbFkibAp7efJZY329OzqpbIMeRgrdEZ8hdqkvRuQIgB8lwK6y+cwM7VOC9CKYbOoYmM0brNOkOhvnlneg0lb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO+yCRA9TVsSAnZWagAAaQ8P/RYAebpEhPujYJLsNSmM\n+zShNVqRXT1yEBoKiZJX/mmCLOEwSDoK9x9Y6P3W+CSwf4bcO/5R0tFSQyFu\nJzvjAc/pnnY7qgOSMvKFIPb5kI8dVnheGm8CN+/WL1AiS89u9/5mr7AMVqjr\n54NopL/XdvaZ43+sMEkRVHKbT6ViGwLqEIz5H2pfPufOMjROVAZDIpat+t9j\n9thJIOhqXfk3DpR/b8LowBdhbOBV5MOTtNR2UEnsiWaS81rad3UI+3r2+V/3\nAAXb4O2b7vzW2tsc1kJdHUAT+OQnuAYMwecwaejp9tzh2ek22qlbGxEkFUv1\nQg6DZ75Sy89CnuBqyhnYyiq2MoZ2ooOPm+CPfZuNiddvCMA4UPYq1ZKK+aml\nWReZcTNlKX4/UHDHp5d6kvC7ZwbMXQh7Y/iz18M0WawDotLNSD3DX/5/wE6M\n/bD2e2w+WfpBQD/DL0I0OXZly6wTnb+SBFfr4zZLKiy+N81z4ICB1BU7haOB\nycIcI0CsfH7k25SSRsi1RL2BdkbgRISAqeYobNgEQ/aqEF707++B/MKG4FI3\nQ2CiKY4yYN8UlLIxiGk6diL3diaw8vUgJQP0SvI6/PHOD2QbgyaWqCubOoNF\nitCEIxYQYZU+GI60kjY4HpyPVb3VeqHHsaS4Q5b4l3J/JsviPkoeIn00Z+yZ\nz5AR\r\n=m+xz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"122f31622300f5877c850a516d74f7c692d0718e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.5f0fc444a.0","@material/base":"11.0.0-canary.5f0fc444a.0","@material/shape":"11.0.0-canary.5f0fc444a.0","@material/theme":"11.0.0-canary.5f0fc444a.0","@material/floating-label":"11.0.0-canary.5f0fc444a.0","@material/feature-targeting":"11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.5f0fc444a.0_1616179121616_0.4820818562294442","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/notched-outline","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.4567a750d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9db1ada90e75d96f2faec23112f8761d18263be","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.4567a750d.0.tgz","fileCount":34,"integrity":"sha512-yy6ScoG99HdhQLu3EQE6ONnDjW7vQ7Hq5hSBaoBuFMu9IkQhmRn5Mzs7cbHqxaMSklbPH+jQHJwKZ3pDGtyEJg==","signatures":[{"sig":"MEYCIQDQMq8G/jRVwvGIygOnKXkL7fh7jxkW+yBIyTTyaSi78gIhAM6uOYO/a1MBQTxlM9s/dwAHSqhbvIzZnb/Gclb3/gMK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVk6CRA9TVsSAnZWagAA5UoQAIRwvGxXwSL8Dj8ayQrM\nKcj5gRaSa8nUCSchGugutV8pe4DMpXbZfq+H88kmIVoKWALL415SSMI8nQJV\nUJI22HCOlyyNOndIJPrbpJr9XBGt1EwjDnxXdfwVnKHbKk2Mg6juLkL4gh4S\nfrnv7DJx3hLvIBhW0pqQKknD/moNzKP3ZFqTJKljUyLnOPNaVMWa638/3Q+e\nQFmJPlPPTyXDQoGPfQSmt8J4KuGL9mdjU/3wFqLK6R/P6ZZOqHdsB7TAOULJ\nUaEvEOKrsFVf9v1pMcuSKPDGiJ900w4694hoFmQ9kXXr8hnrAqB2LqxC5D5+\nr866I95VwsCOdzq2HcuYYKwjqW/rx7VoZepvY/AjztjbXAFt1B+Xo2z7RqyM\nOas2hRVVGYjPjdmj/qXtlZy9FjTeR2YKQQrs/lc1dqGmEV09CQroKDmcuyoF\negDfP36MCLPtVd5hbY7QYZ14dwSG/r95A+VFyj6fvFD5gGjrB9ox8z96UpN5\nLGoPf6jwWwA8yCJ1bTGRAUG4/6mQmuTlVmKdFO2IFIv7kuN0kN5heYLqEgYn\nYE/iFssMF9MB7vyqEDVFoDYJD2GM8nFbDgqv6E7sG7YPzjZ1UWwoKXJkNcgM\nxm2Q4YWPqdBm15o8DojXGkREq9ZNNlAI+y30O58kAwezPxQ3iZbgGzYjHCHa\nQl0z\r\n=6f5G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e165b3e1af02e963deb71d6f39a7df6962710c30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.4567a750d.0","@material/base":"11.0.0-canary.4567a750d.0","@material/shape":"11.0.0-canary.4567a750d.0","@material/theme":"11.0.0-canary.4567a750d.0","@material/floating-label":"11.0.0-canary.4567a750d.0","@material/feature-targeting":"11.0.0-canary.4567a750d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.4567a750d.0_1616206138284_0.32296987582096226","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/notched-outline","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b34e1896e9daaec7066732fcd0b04d610a46f1c9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.0cde52f5a.0.tgz","fileCount":34,"integrity":"sha512-HReYLKC07zPOgFC6Qe1lxe2YOau3RNe9QQDCNLP+VVy2pUG/BBQZW2nOKW23XdNZp6d/9wwGobjmwnhbuulUfg==","signatures":[{"sig":"MEYCIQCAUhz6+5dy0LIB570BQ3TKgaXANHERbSqhf6bQZ7+sQAIhAOXk2JXj91KRCarrCkI/BsihOKRDfqE7HDDvEeT4lL/d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTBrCRA9TVsSAnZWagAAynsP/RAM++4zN0MAXFwGF3Pf\nXY5Rt50txHffSQgP2PUoAnpV6D9UxVHPg9XZI2rWf/01GbV6lIXAKwCkc2rv\nyE5021KsjhlQSxgHPKw85XkVa9z7MPz9CMMIpZVoBAW+fGvEBY4CuddpA++W\nas57qFmDg7GhPkVILPPSJyj8VCkH7JTw54UJB4eYEzX4sc+sjNtVatbSZbro\nnRiZKeHBJd7bJjdUKKS7g5KI6urz3p+EyyZen2V8gxAiJoRUDynJgg7teDr+\n2AIKGRSRBlOQpSApKUNNhB53jwIhxHWOKndDH5eBaGY4zGjhcwL52BQOS6YB\nkadsYiDm7HnT5dZOiRoPrEaJ2CCEi9Pg/6dymVdT2Kx21j4Tf2XkxOM4EYob\npfthvxy+mNCF6jaRXYpPLqgYKBLNSZbAsk02mc1rcyxip/Z9WwORq2fmqFYa\nrVwEA7SVT49M09i2T1ZDMrdJaZqJUHIV8byUnC3hDxpYDVsGNx0v73QklSz9\nc66o1Tw7A4uv57gz4wvyA9JEOJxlqXmFH+7gg50BLPyEOQveXMKij40UiACY\nweb0omcfTbpGghhO1kNw2MIPTF8c6vHz3W84oY6Bmtg4zY8gNSpbv+S3d4QH\nK98e+tdCayBeowDFVeJhNVZ2mj7v/5Mz4u4JiEgNbLuSpy01eDu7Gio+pndb\n3Rmv\r\n=walo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6f6719c5270f569fd2ab44620e89ccd53a31f98c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0cde52f5a.0","@material/base":"11.0.0-canary.0cde52f5a.0","@material/shape":"11.0.0-canary.0cde52f5a.0","@material/theme":"11.0.0-canary.0cde52f5a.0","@material/floating-label":"11.0.0-canary.0cde52f5a.0","@material/feature-targeting":"11.0.0-canary.0cde52f5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.0cde52f5a.0_1616457835166_0.44611510032601553","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/notched-outline","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdc230e03a8b6c378d4c2f4137856eecb4899f0a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.48f4b67fb.0.tgz","fileCount":34,"integrity":"sha512-Vlv2U3hDhHKdimL5owzOvvkOi7ZWwzV9xykZl4XTYDD60AsVnWO79TSA52l+Ht5n9dwCXmhuoKB+UqeZNnaE5w==","signatures":[{"sig":"MEQCIAPX23cdHBOUJARzFYDXHa8zeyM67PBVLKWR4RfRyeCbAiBcySnpQI8oYSUzMOR5X2KepzLljgAmqLneOnVM+w1smg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkevCRA9TVsSAnZWagAA2SoP/14xDGAIIW/pEdFs05Fs\nD7/qH641yh1R4DtrYmdn0fQWQfw7PlgIWM6kE2yXiMaIY8ush0ISHBXlqwTj\nCpgi3Dv5P1Ph4Bt2AxOd6JwHHVEem8XptgsMM0Q6bvp7wU7E5Ds+h9YrEch0\nqzaL5HeOfDwD4hS6G3IdtTWMdguKq8xZnG99/wvFPPMzVaSKEpMl6lmBX+Jf\nUlJqbsZ8RGRHvlbOU1mx4P4hxCl3OXWwp4Jtudv9x/cy2NF4ZIUY0sj00+7Y\nR5VVQKO84p/G5wbaBvuM9Oxb8V5d+SlKEjveytOuD4JOmGTfkGuoBtJ/zulB\nhErcvK1O1GMDwjc+WC2di4DrAR1+rqYJ5eaDsTo2d0RrpnnBRdhmrVxg+kuR\nhAOIXE6w5Xe4wvlcl8EFg8yAGlF1c2Rz8fbgPk7p/0f2Kqc/2lI0LSCdAKqB\njo7vrmgzLFPS8kO2DLwfkxl24HmwNOY4cq+2xj7SdBKubKWsWPXN2n209Zfr\n4a3bfS4+6z+1OarWj7EgWAobWYecyCKQbFMwan6wgWoG/jChtk7ARlvwmfBg\nuZAvYZlxID3RL/33QkD8gFSWW3z6Dso3PE9kS8cHddmH5fyHwkAYk9WxuCkW\nMjFsyMbqrb/7k/Vk2IDwlZa8jEfWToA7cbMHuY3bvwF8VnDH8eGA102aP04f\n4lzI\r\n=a9kM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f83669b240feaba73206d330f10c80a9aa31c1f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.48f4b67fb.0","@material/base":"11.0.0-canary.48f4b67fb.0","@material/shape":"11.0.0-canary.48f4b67fb.0","@material/theme":"11.0.0-canary.48f4b67fb.0","@material/floating-label":"11.0.0-canary.48f4b67fb.0","@material/feature-targeting":"11.0.0-canary.48f4b67fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.48f4b67fb.0_1616529327507_0.31840312965665096","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/notched-outline","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81694b45f561f41d5d16be1ebf5f1cf4ffa2f316","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.0b8cff734.0.tgz","fileCount":34,"integrity":"sha512-r+eNW/+y7Q8NhZlchZcNOvb72M7gXrwtHHV8cvVbD6bu5yNonpqf+qxetv+kww3Ty/Gnn91LuiG1elPQ7OF/Bw==","signatures":[{"sig":"MEUCICqxNlrAVl6vEq5R74/guv/dbpyz0gSECQXxm5wLMrCoAiEAo7oT2REEcRpflCJzl+MJGk+nEvpwsobGfnPQXs7Nzj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkoVCRA9TVsSAnZWagAA/XAP/3ThKHUOfuSgiRMqZohi\nSdzM4aStfxFWTOR1GfgFtRhUvU9Ou/DhDXTjhTYwkW1tbgmBwvoRZM5zhErs\nSGFhgyoGGXMK6N3U499vZNX7rnPM2hN7jFs4QlwJxCla7c42++S117H5Qx09\noA8svKGCb+9jp5912P0tAdetaMdkoJGd/H2lAGOZXKJHNAmHCOMGC+dikebl\ni9ydaFRbA/FBPZEPobMBu1mJssMJhN2erBeaNLAP9wnecd46t6PNtjnLh8ri\nNpldA13Fxmc9qq4vJeScioGjUhVwsPcnRkxum+f/Rlu2hZ59ICYPAI/aXCl3\n1cIgK3J4aizFdcqSNn2XC0NW3s9AU87vRoGJrU7r82UI7dHEaViok5H5Vzgp\nwfue0DI+QjWUvbTmIfwoU8wBm2CJE5RSX0nT++VkD+kP1bRuEg70WOuvC0Kx\nuwTLuC88a71UAWHAj+XSc1XXHcOpuWH+1YR3Rkkmq2V19GKyKrBoWh8sAN7e\n1h0EFdanhhJD3xatU5rC6Ws+753kirdc+RFUk4jITLkwjmVTIdLghPYnmxp7\n5ZZlxE3lKeTQeg7wayAFSTVKs04//NApCWRA8SqsZ9On84dyRJmrejssfwtC\ntfMYnlTqBiWuKvVzBUm98PUqe0UFTp9HAC5SU4/OMM8GmpishuzMLuvy9zkM\nRaNt\r\n=Fewc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0371cb1671557f9e1d8a3bee3ffce11bdea058d8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0b8cff734.0","@material/base":"11.0.0-canary.0b8cff734.0","@material/shape":"11.0.0-canary.0b8cff734.0","@material/theme":"11.0.0-canary.0b8cff734.0","@material/floating-label":"11.0.0-canary.0b8cff734.0","@material/feature-targeting":"11.0.0-canary.0b8cff734.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.0b8cff734.0_1616529940628_0.29059535070125686","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/notched-outline","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.8943b991f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b09414587acb72a737405cbb9dae7faa5ae93013","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.8943b991f.0.tgz","fileCount":34,"integrity":"sha512-FPQvYEqEdmzvRnCpOTA6w/+ZflPijMLdZcZMoOupu4zxaTUwH9365f0kfpYNOvIjqtEHulN/VlWlaQh+QdYWzg==","signatures":[{"sig":"MEQCIAa67UmNFCb6d/QZd/hJTNYMds6M3maCB3xzCbFXbw2QAiBoOJVPuiV+F8WxGbbOvTTdBMihtKAIMX0+ly1nLPwUMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk/zCRA9TVsSAnZWagAAuY8P/2BgUZvmx+j1crmN8Pfm\n+QRj3maehEn1yGIt05Hefhhxc3DYv/l3meMWqPYrtWt1KUkD4x5SXnPxMWj2\n0KXSFhMjZfXKd1H2x1N3KMecjoJdLUC7Qr1m3I9w58EMwoIjC4leuQQZihZ/\n2vgPRmhBw0h2moJUUq4is0ezSqDSa4XhAss60kfSfNy3YsGZPi1PpnFMlxzN\nC0PJZZ0CB1Ctk9SZXcG0Ih47cx8CP16zpGCLLeiW8vESzVY6tf6Q9NF7EB8V\nWmZhtXALqpagWNf51JS0EaTCEnd6qIhNrDoNjXuenVfn3ts69o7d3MRfC8iK\nBZFgcBgfD1hiYt+k0Nvvp9hA0PVCd6sBtpBj7/jX7WPXmlAmshAWSLgNJGNp\nfZZ+hYx9SyAl6tUfvDUMTRCT/gecfEdu5fE5kuVDVx88Gc1rZwoyiahju6kA\nnU89EczJrSAlOYF1K7OI/EM64fqg+f/QyNPpUnU9lMn05ziKElb1aZc9pEkJ\nPQGSM2CIWaJku4sjEHK+LFn1jxirlsioNYliIDxYs+k6UldZoFRbCsUyRJFc\nx4uHrb0wH+CmNtF+NssA8jKeQVDpkQrx/SklwEdvG5w3d7m3DY0gnwOE9h1f\nndyTi/DPUcCBpMLbx8/88ypqOC/7qngyzqo5lUh2vWIoLRp9WZIhBllqvDOo\n1L73\r\n=MoJb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"85cb2528143c5117974441e499367a5fc252b745","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.8943b991f.0","@material/base":"11.0.0-canary.8943b991f.0","@material/shape":"11.0.0-canary.8943b991f.0","@material/theme":"11.0.0-canary.8943b991f.0","@material/floating-label":"11.0.0-canary.8943b991f.0","@material/feature-targeting":"11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.8943b991f.0_1616531442848_0.8519050093082696","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/notched-outline","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c91926c17dbc88547ad898715073cfbe349aa0f4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.3955d8d3d.0.tgz","fileCount":34,"integrity":"sha512-fakDJXS85gDh4c8yy6QmFyjuIo953wQDLzs821JQ5UArM0/pHMgnm60jmiQUDNhadrDqvT1oxcIE7Id2L7eWRA==","signatures":[{"sig":"MEYCIQCp35XvbFMAywj3TaWmnkYl0HSitn7gKtFvoZE9JiVsTgIhALh0cDfymBg3cwxJuYWRqUFnORfqYv016dhMpnNAy/99","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW5BUCRA9TVsSAnZWagAAujQP/jx5DeHzrWVI3qIsjVAn\n3JRv/I4AijX+nYtFjxsnblLFm0uzbF56kwE4HuOHlObj5sYR+Qf79rnuPT/b\nSdfCYwR1uK0Rg18bAPUPLGMt9DfKK1CaEGeFob8p76myx/gQWpSlVM8yQ/zX\ncNdhV9hRq7XVL+occmfHSfbFuy1F3c+adHrewasYFU7A8kxqT9No33KrBARf\nQu79ylHDTUDkjU71M9hBO0xaG6R7/+b7CIPgfXJMKXUdycXCXJ9IlFExqAEe\n4jQ82j8Va2SwxyC/Esd7aDADCgTLaWEZxc3LDE9H4iLzsEnVUJitYcaxxuEQ\nFSSwmJjSKFrMfRp3WLqPpwTeXEgRrhguHY5aM5BHhvSQzBINUXJ6+eSeZFRI\n1jLDthcuia0aJm+WGvclHbC0vBn3OBE16JhfMgG6TkxfHmbBHsqFPX+ZCMNj\nuM4qco98HWpVtyAU9zPSNdZT5jaOVEA15YYDDjwPL0mZ8eAx9hcsDZ9amj8f\nrVh5W/rB4ymXX1TWwfSZEWofyH4TUPxIwGwTxqvW34C0JpZjGAyenhCmIv5h\n0UYz+yF/aBLiJL5rWvIGBroYxeli+yVhhM38OYC6ohu90rwM5ZqxcsBhSFXP\nhz9nqjcB9YWU1CKYYbbJ3VV4TAkIaBe1EU9Hqteue/vxijqy3jME1mtY6Gbi\niggv\r\n=pYGI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2679d736975b17823079a52aad1e329d8c2a3b71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.3955d8d3d.0","@material/base":"11.0.0-canary.3955d8d3d.0","@material/shape":"11.0.0-canary.3955d8d3d.0","@material/theme":"11.0.0-canary.3955d8d3d.0","@material/floating-label":"11.0.0-canary.3955d8d3d.0","@material/feature-targeting":"11.0.0-canary.3955d8d3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.3955d8d3d.0_1616613459591_0.8570379428427783","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/notched-outline","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23e90a3101161df4298dd72491f3fd972aab16a5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.23ea2d85e.0.tgz","fileCount":34,"integrity":"sha512-yH67kG2VV3BYDVgfm7Fhq2V49O/UgBz1hFLh/D5hJITdVjNfqpvLLk4h6FvYaowYUSmSlHBzFGrb5TjcLwkFcw==","signatures":[{"sig":"MEQCIDBS57XW8CyMJ2ZJ95/xqEZD/wm7AOLxyK/7OcBqf2PgAiAv5QLdlqhf8Fyj38KyCIMDnv8pdSR1MlN780tlnDIzog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMl/CRA9TVsSAnZWagAAmzkQAKQhxgjd7t0H6bXlqFPX\nYOPYNhKFV6TNUsZU03dO1sVpwTqIOJUFmUx8J5xN1BLsCPVJ7GZaDIHCAzJp\nQeCJRdLiPcrcxA8HdzqSGqqE7XM1vDZEBtGI1ONgA288kX4VQxq14LmkMPDc\nEDk8vi1CqH5IuBFIc2l6SsAMIp3JCrIUAsUNA0bBDlq+/LcOSiTk7cnEzMCR\nZX607sBJMTY69upxvPROfnzWTbfSP2tclolDpUrn7Zsu9JO9th4ykHk0A5Cv\nbJBIjjZE0U1gZu7Xg8AOJMZBIye6I1tKXn0mogB92WqyAPKgZ0JZkKI3p22T\nK3UTBx+USFx5dPD+L9zODQ8j4fCbHOILA9yOe8v2yF0Zbs0wLBCTrDYQ5Dt+\nFYTeZD380+zeSC7+UwnijyjIdEhCkVhcy3gr2gN5UA+970sBBxsAZlNwr3jB\nxwB80Q3ei0WWnWF7DjEeE1IQkQSdWpCjNZYEG0zDNLL+CSE6d+pGcCkVcW+X\nwWj4ipt+32cIBW/lu2qd26kaGtDqy/xnIBTSG4UMXY8Br3wzVmkvVgVD0bzR\n57ppk4zuYRmp4iUca7sWvIVXmLMw51WHIyDEIu1whVqDggbkUFD+IMxvuCCr\nJiehJHgLnBv3TGuNfLE1PGQg9PM6sLAK49pfRuN5CXyGbt1x/4VGe5EyXV9Y\nObZd\r\n=GJgE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"705a9cbab9462d9e300da18c26d7992aec452ff4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.23ea2d85e.0","@material/base":"11.0.0-canary.23ea2d85e.0","@material/shape":"11.0.0-canary.23ea2d85e.0","@material/theme":"11.0.0-canary.23ea2d85e.0","@material/floating-label":"11.0.0-canary.23ea2d85e.0","@material/feature-targeting":"11.0.0-canary.23ea2d85e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.23ea2d85e.0_1616693630714_0.48773215466267317","host":"s3://npm-registry-packages"}},"11.0.0-canary.e3ec22f45.0":{"name":"@material/notched-outline","version":"11.0.0-canary.e3ec22f45.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.e3ec22f45.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6edf14be8e05ddf6dfc9b26460053b7cf1332c4c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.e3ec22f45.0.tgz","fileCount":34,"integrity":"sha512-qz4qZ857YVGggp0ECMC6LbCWt1klspxGoWoI/Vo7ogmQQsmG6GA8ikbn7MBuQA5yTWesn0FDbqSF9+hL7q7xVw==","signatures":[{"sig":"MEUCIG4aaPfebZAa77R2xRDlqVcy9CNrb8n1JrhXvaDO+bISAiEAuzosKPASVwYI9zXFmpSZh52tnbt4GzWGc+WMSVLOjLE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXM9tCRA9TVsSAnZWagAApWUP/13AXtMq/pDh6OMTNEr4\nPwV6Nzl60ORVU4cQ3szdcX8EEkwIXcwosN4G4Bih2ajPfr9vRhHdZSKjBNQs\nOycPt51dFKuUFzjyos922O86Pxdr29iR7QivPVrxTWC7Zp9oAFctOlz+Q9wU\ntltYPYYFXMdyMPSHi+uyqoPHeqOr5Mtc5wHyks/5V/WJuNlH2lFs9LZ5PGU+\n/ipou1gVGI0PSH0MRKSpHLJu3Z/Bn5GguVV39VHimL/R0NCFHGIJVUBH0oJ1\n+b9+q7fuu8rmZG8yw9baiDl80b5c1kYt8VrKV2iroSmF/ppmNZeDQEhFcqDP\n25utJEFsucDBMi69QZx+vngiIPmIobRj9Fzru5sCOzt81IdwRCunSyzXxyUE\nAbRssWmYZkd/Wv6y8yXABKUSy8z6ZiDDgSiSSJye0jKOc9mtErIeluJSqhzL\nlr/8TGPKqqZx2nHlmarmR6stI6IlKsD8KP2q839ZBqnOJdey/AvVk6LhEU1j\nYlPj5NI5bdHLeOjP5fi0aDejfCpfbPU2sPgqtRnNSErnDzwFA7qt4pWC3oed\nKxdX6X5v0BOMcRqQ8gFWT9XgRljBNRAPinoRhR9Ye2XGENTu47gt3Yo6mMo3\niO4EZ6EIvs5li799Tpg1rVY9FNe/K9cUh7es664xmoH7PWDIxXcE0hAGTOnG\nLmKM\r\n=1ZkM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2827fdf50a2ab264554f8f307d61fddbab82c5cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.e3ec22f45.0","@material/base":"11.0.0-canary.e3ec22f45.0","@material/shape":"11.0.0-canary.e3ec22f45.0","@material/theme":"11.0.0-canary.e3ec22f45.0","@material/floating-label":"11.0.0-canary.e3ec22f45.0","@material/feature-targeting":"11.0.0-canary.e3ec22f45.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.e3ec22f45.0_1616695148931_0.3574996513375779","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/notched-outline","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99261980fba245124a4429137c9125cf196fe574","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.4ceb42220.0.tgz","fileCount":34,"integrity":"sha512-pI1u2MVfSkY4iTP8c0JmM8zK2GHQrF3D89EQr0crURi2mdWpyWgjs4mKO35lTIA0MB0u8X2DiKpU9EhDLI7NLQ==","signatures":[{"sig":"MEUCICQHLIjGh9z+MtdELzD4vjCAvuWfxYQ9xeeRzXBMTS3CAiEA3tyhTc27sgHqO5yVUmU6zVY1YTXpuNDqpeRInjGmxqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZQsCRA9TVsSAnZWagAATuQP/0ngKAs1EcBGf6CcPqOZ\nEzVabuUWxJ9iValMH++BA5cMBRg3ue6RR8XQCiPsrSZtcqvyYmU0CE2jjvc6\n98YwtDkSIX5be7wId/jaEQq61pqOeGr6q7josr/a0QQ+uPSPYEN7fBXJCnO/\nnw01v6Y6u3+NqOnKY1E4G1pjIJ4CDx3vHHI1Tx9mNA2nl9JXTh7hu5SpOjk0\nqOOb7QFVEWfmtIrMQj2VOuGo41r2QMNXTOK7lfFK7OnhX5H3+j3wX3gbIFs8\nMATvkZUkFHl/H2mnKc1L2s6LwRhGvNRpApOlLBlWNw8u8Rf68jGIO8LB9L0k\n3BM3EmigWja8+JNSAadFzC/v8oMXqCsrgxoVk4dWyTgmmpQ8QSfyvpmBFLXi\nfmoD6fZ+H1HyeSbCany7IPRPxerEEMPDDX6X81fB+2UHgwE06Wf567P8fWUj\nErKL8ov0DMqJDW9RIAS1fpSTQpfrtSvSYvAbi626qRw+ljEedMAm1FRp30Bj\nD6RIx/bg/BGpDTL3L46LUY7o8v1MzS8Xbe+pmdHkgxPYR16fXpA/XFizimiy\nnawyL1ktg7gpKL67CjDDawKWadJd15SoQSuxScelIjQGEWR8HdKC7gey4wQh\nZwZNaA5WduJQ5k0u6Jh7CuReS6MnxuqxZq0opVEbQq6RwXMXSZRO7Wf4pQrz\n/5kf\r\n=7uKl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"75fb611f33737c857d1b59245ff5a31676d7f3ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.4ceb42220.0","@material/base":"11.0.0-canary.4ceb42220.0","@material/shape":"11.0.0-canary.4ceb42220.0","@material/theme":"11.0.0-canary.4ceb42220.0","@material/floating-label":"11.0.0-canary.4ceb42220.0","@material/feature-targeting":"11.0.0-canary.4ceb42220.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.4ceb42220.0_1616745515610_0.05215789147676686","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/notched-outline","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6884593398cdba6692f67a6ae23ceeb2ffb8d8c6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.dc9c84023.0.tgz","fileCount":34,"integrity":"sha512-/IkNuytXf0s/LXkpVBk7kEib7bDqtLtg9YJnGFR1CE2NQDHXMiijNaiFNY56DYQE+iMNUVI7n2UFaYugpXDhoA==","signatures":[{"sig":"MEUCIBytggKjVjO8+WBOBGM/IuitH5ku2UAZ4FW+jzNuqak4AiEAt5CPXv65zpwJpNZmbrnsoh1pNoQi1D4xr+oDv0GYMqI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2SsCRA9TVsSAnZWagAAMzkP/3H2biPCwR8FSvpOgOJu\nI0Vm+HuBUf6bwKgTwODonDrOCeNBuumOPUDFd3WegdQ4e3hC9E7H0a9tmZ/0\nrxoPT2xwj9ETbGtXmURrzSVCRudrOLunjJ7B11GQ/ud0zRdX8oHI9V9dWkry\nEwxCWmMJyu4QyC3sbxusXb7W4zkPe8RBHodQzhPFVd0Wm5fBZxLn6muDs8u3\nkUpp9vlS6+/s96RkOzJlk5e9u3N1AwA1WnhPM89ZbwZ2QAFbl+EeoqYn2xMB\nPL+Q3yRufgUxqM9vMUtFGHhlymftEGXazZ/nEdvF5yiKUyClQnoax/mZhPEK\nNY5Uhh2DjYsnNtsTP17L/m5akEXs/bg4pxj1huhmiTOeILzsU6KcRLjwc2pQ\nkfsbTh00kG2+PHHf18jF4l2Ier/En2maLpRkeu7GdtxI7tR6fN0vq6emQ0UX\nt5IXDRAWO+IFINnW9kubM25EuBqEDxPsWLOP6TtJ5cVfD6cPgDjBCK9Dx1kO\nfOxAG1nyzkzyznP9FzCMP/HUdHlCpl5Smjq6paFGMg5szbCBcb644CZ0tPhG\nfYKeCyP6j2zTtJ7ruijeAakWSk9d90eKJ4VeV+fRfQSRoEbZbYPLM0GeJLmo\nzbmMN2HaM14Hw5IjlUIJ65qQALtHLJrTNRRf3QIM1GdLnK6twPfxtRdgnpYS\nOXxV\r\n=iIua\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d7f7ddbc4309b6a8ce5cca3772255dcc6acdc701","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.dc9c84023.0","@material/base":"11.0.0-canary.dc9c84023.0","@material/shape":"11.0.0-canary.dc9c84023.0","@material/theme":"11.0.0-canary.dc9c84023.0","@material/floating-label":"11.0.0-canary.dc9c84023.0","@material/feature-targeting":"11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.dc9c84023.0_1617126572056_0.08402311334640333","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/notched-outline","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.56fc26962.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6112cb2cc9b019f5dd1d0714d141c2b532f078d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.56fc26962.0.tgz","fileCount":34,"integrity":"sha512-BNIsjvW6yrWvSCa9zTUCSTTPc66H3L6vfAH7j9qzttckw54QXQMWyyZXCPHXpvwK8ItQweMvulpcWas0oZo/Xw==","signatures":[{"sig":"MEUCIQDJJPoLNrTHfzpHyssMGet07NXOE+oVVPdtjvGVj1BaMwIgIB6vA5LSwlZa7HIBd+RdPHSEgD0W884ssmyIPON3ufU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8CXCRA9TVsSAnZWagAAFT8P/jEj8JJb6Hboj6/vmE6o\nxgx0MsNtLAavE/jSVZLCX7PMZp3WMmqJ9oZtf+MNj6wY3YCdHZHfR2lnlDp4\np+D7OP9nnn+HZ1PPuKs5IBNDKV8/kY+M6A3Vbwkj08Jtcm47bQIOhBTe6P7i\nUh4DgiMuFuFSYJ0hegqsmXhGvp5MAQgFOLQ4LMNi7GkHKuXs5kW7KShKgBzf\n7WQDiBtEMb+9aOFTYqzxlAL2Hl8FlV8jyZY71UAzzkfffjDKM3qFq3ghXxbB\n7tUTSlWIbI0VUm/fwF20gJBSWrB4NAOxG7dxgU6xfBoV0PJh20kei2BMQusf\nRDpdEBZxX4G1to4xE0LwF9KkIJfmpGgSii7BKE1ZHDpl9Dj+HJxoHCip8Mcc\nseTDRmJPkhXx5LTYWlvS/gtdc8cSDv5X1E9ive04NEPOg9aD59xzy0blodDF\nuwC8alm/TP34DZF5Ti9Odzg6JBmPI/ZGBR/xgG/rHWuotv76XGhGQKMzNHFL\na8hUJ+zNqTp1eiRTrc3wVOHqgRCa/l36Obe+F2YZ3SHnPPuz5+WX3X6/lgbF\ncg2par0RIq3EBwP/kuH/uGgh/ihaVmE04sETF5o232iDM6k6gMzyEpPOkRMT\nhlvUyo31xYdfFyJLFTyv6Dj01KQ2Y4Jq3bVrpb5oHI1l6HThuwX2tCk+uqSR\ne1r+\r\n=gvc6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dfdb8792d4ee8bddc61386ac6a8e7e216c1681a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.56fc26962.0","@material/base":"11.0.0-canary.56fc26962.0","@material/shape":"11.0.0-canary.56fc26962.0","@material/theme":"11.0.0-canary.56fc26962.0","@material/floating-label":"11.0.0-canary.56fc26962.0","@material/feature-targeting":"11.0.0-canary.56fc26962.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.56fc26962.0_1617150102629_0.8013371094606923","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/notched-outline","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.bc318250e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0eb948e6c1136490cfbe7660baa8d5aecfe3a69d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.bc318250e.0.tgz","fileCount":34,"integrity":"sha512-hpYYdFH1tiyh3uJxp08imsXWQIyx9Ey0vIc5X+ZlRWPKXK1wHi/TI+Nc9JN5BegT3dQ/ihfRF1QHtQbkuMGH3g==","signatures":[{"sig":"MEYCIQC1NUGm7pZejtzGA1cNz3PL7X8hB+Oz8gP4ogLapzQczAIhAPeBF53VcgzGKkUNvJ9FTGb7GlTJ8ekf4AAgX1hoD9iZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9GwCRA9TVsSAnZWagAAhJYP/j8DXF429IpdAqpMjIYm\nej/Cv2WpoY8i4eKFcRzrh7Spn5Um9txLsVzwqyKtIrSODvH7viBhiKCyUnvI\ntDwX3PUHQh/35PoLDhJe/Wh0qVUSSmUSZcspQjQ779BxAN3AEfL/cUla2REL\nteEfXj9FK/LzvJ7NkEpynSdBzGm4o4q3sZMmzS+hXasIlzS9LrIUZSTi6F5o\naDFEszLm2yfWFqtZHKMegxnLy7TsEjJE1vB6EnNXMTRD3npwhi79NjdboSQL\nggCakuY6sr8xYp+x+suGeNWkmX81lM+R6w22ADcgg15UVoy+sQfwFRQdyJtx\nuTuJ7wQVwJPnPX+RPyixc4ZawlG/w00hV4ppXKzOkdJ+JNfuWrxmPq6YIRsv\nFWsy3MxVUazw5uwX7sqmdUXQussfl3zuYVY4kyFPsLYOuEcEN3414zDn34SJ\n1UmiR77uzYiDxMCHP0j1erFd9K6RlqUqkEuA3kJ/BCRnsHbcU07ySNMe0tXg\nSCfY41N03+O5MwEUJuRNv3tm+X9pbM1jgAWI+b9/x2fQImwBXz2DNpyVdS4A\noOOSR+MM0T+vqwIKlKW4ALGm6jAK+1QyhQ1s0XzKAVhWNI4Gfsb3pSFFz0/I\nLNanAdf0y0qS3JKPOjPs7ruj0w7Vfdr1KR7aSeNqI68Hnl/ZMMuePGRoEmkz\nCtMw\r\n=tPJ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1de1daa9e4e0ee7a779d524a027b9e7566841b56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.bc318250e.0","@material/base":"11.0.0-canary.bc318250e.0","@material/shape":"11.0.0-canary.bc318250e.0","@material/theme":"11.0.0-canary.bc318250e.0","@material/floating-label":"11.0.0-canary.bc318250e.0","@material/feature-targeting":"11.0.0-canary.bc318250e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.bc318250e.0_1617154479467_0.9786780014248002","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/notched-outline","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"274f571918974af8d58f1502d2140bd3bfc53d06","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.edaee19aa.0.tgz","fileCount":34,"integrity":"sha512-rMD94Hf2shCA0mdR0kG+JkuO8LZZcd7U4Z4WviKvA4Ek+RRvGZKG8a3eY3IWtXzVWRhBdUZ9IppTCEabE9tJWw==","signatures":[{"sig":"MEUCIESjVq+vzYCiP1TD6tiypMddMyDPo4oqNuQeH15YdLzcAiEAm3CYN0JAnXWfc7LUOISL6ob2PId0qJM0MToXLyjDETE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9qXCRA9TVsSAnZWagAA23YP/1mxQ4GO/uvRaZPzkPYU\nu58uY/qLdySR5DVkGJ4BcL2YbzNM74uTvSBIs7I2+maG92bAkfFP0opvdY7a\nWDoSc1JztE8b3m50986kUPBtDuSUxPXfcAT+0YnYDMqZpEKNEhDc4TeWgy4m\nVXBWhQO0ypgr05IB8mkh4KX89g1fIRYM4LC/LnFZXZCYp+sk6LrP2hbDyNzi\nTb6onMjBaUsl49x3HGDus3I0hO5FsMDk/xDIy46uU6XqyXfIDNmqg8rzgOf8\nerCCcqQoxtk/r2KaXGRR72zw0c3HBIAejtZhkvhsC4iF7YYROYGB2OqVQLsd\nYjzvQ7yoxJj5f/WvdJvaWA8w7SSpIxkGKm/piNNDb78deUZ8j4Ac+QjHUYHF\nS/w2baKZm0ATGm00G/fmhHzvDIReWXABBfPVaN3OmR//5uP4dghhTizbx5ts\nD5N5MPwNaffn5akAArBMAoRhH8+vIm7T7uXrKH06ZwPWL4ZJ+d1qSlfHmzjT\nGlg5gNtwd0EQ3vkxsmCFw604m/S9elQbH11r2Af5ji5meeQSKHpsfdNm5UH4\n7v1G34K1ZrHrrCiA2600jIMfJ566hu/I9kUalq1KLm0cqcYMesFDAzYW/B/R\nVRDmSYU49p9HgC2eqGemKq/NMwWtlZbUP084GkwA8h1LvVKcIFIwQizLVKXf\naCPL\r\n=pcu6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e2249b4be4cc5bba6887f28ddb9a3b9cc8ee09de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.edaee19aa.0","@material/base":"11.0.0-canary.edaee19aa.0","@material/shape":"11.0.0-canary.edaee19aa.0","@material/theme":"11.0.0-canary.edaee19aa.0","@material/floating-label":"11.0.0-canary.edaee19aa.0","@material/feature-targeting":"11.0.0-canary.edaee19aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.edaee19aa.0_1617156759359_0.1335821372565429","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/notched-outline","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.24609b822.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10eb36aa8716d167c3046facc58014859c634582","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.24609b822.0.tgz","fileCount":34,"integrity":"sha512-4g4DnQGuBmYDEHHAFf/SMtIu0D49xReH4+AO+dFQdFwjKUbV82M8nIgItsZskkthnYbAEfPKXqX8ROHCJ96G/w==","signatures":[{"sig":"MEUCIBKsH81nPz7g5jKzlwvWEqKWGlaurs7zRSNGyKYT7rhHAiEAyZk/B+5MS38pCyKe8+mx0VJw5NGrnPC9wx/nVWU9EPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOJYCRA9TVsSAnZWagAAldkP/RzWTan86AVNj5Lwt6Dc\n1rtsicJUaPNp3xkIKKxbfQEOENHcm+45XZXlNBTsylvMc2X4o6btppLPFogv\n/eMFPk13/QVjpNuEbYDfML8SrIlwlE/ZBSduHCryCGnyBVg1UGojB/9AuWKX\nUUn+LO7M7vpkFk7LaJ33Nzx9qx2z1vxnEk/7kWwpQUxOmodIbL6N/D5goRyJ\n7BxVkwWau8vi2+U2k93LXnIAalKkwZ3V2e5ITpawYy1+pXFkyX9W7igDoG0D\nbujeLPnFbo7M0+dLCfS9YpcCk8y9YwbVPj4R6GPob7xS3fFfYs7siVdZf7cQ\n+xiIFxnPd3wLNwfVRUdfBNRp8SOZoBytTluj5XCF7UyAoX1htjhJrDWWanlM\n188aTZj8xnLUDnS5un99nGO772C/syEl75aZM3Gmw79d4chUgUYzSnpJ1TWp\npso+Dv9Gad03AA9CaMb1NkxSZwuzFUjn98aOdI+VdRQNKrOKaTR6tiMtrivn\n2Zcleqx0obNehO2WBNGjs5Yj4XDYnVR2HEL7goLc/MXLInLOJ1nIunarNxAH\nYDbm6wKFE3zmh7I3SmyMZ49V98QUEdS8axvnA78VPJrI6VM1GfKKz5CG51or\nlpQy3aVy3M9MH1h/mnf2moLqACjAz7plVT04F2hXrfEIas+a6YqaPaEaBUvU\nfgt1\r\n=VJv3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"50b495134dae6937c2262389aba694d7664f78c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.24609b822.0","@material/base":"11.0.0-canary.24609b822.0","@material/shape":"11.0.0-canary.24609b822.0","@material/theme":"11.0.0-canary.24609b822.0","@material/floating-label":"11.0.0-canary.24609b822.0","@material/feature-targeting":"11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.24609b822.0_1617224279894_0.8764956078815327","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/notched-outline","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae0423624f384c6fc941ee1bafd6a917fdf7b3ec","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":34,"integrity":"sha512-ww9DxYbhBna7SmwqaS9FgSrkLhCnQqvPdLjQjSIQgQlABNuzOyDDsKQ3rfJeb3r1UFgvcb+RoZTtOi1p9JkgwQ==","signatures":[{"sig":"MEUCIQCo3QyVofmnQBjRdag9eUNRvLUJecdJaNWQaJhClNH9cAIgH1HEKr8K+GaZWPbdomqWfiZWy6dNxAz825b79ZqCOGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeFuCRA9TVsSAnZWagAATR4QAJr4o9Xg6ck+pcR9vcW4\nbbvXD/5sHME0ZBUd1vbjaYXVbmXRsCU2tAyA1AO62KlyP1Tced8gj8yD0+/1\nrLI1fnY93/K9lo6WYfOarCBWCWEh500BVHtqwx78gEFrVmXhqegtw6tYN5hq\n5vUd4UOGp2OqAr7FVQeCmnQZ1lfHt8zEXNHhqzrJM/4H4yIyJbKdrgeySfuW\ncLz4GEGnr0DD0OqU666xfXlfHJBC3Sd61/d9xPt9oaBI2ew1ntlL8blGmj1i\nbYK/3AKygVy7wKo2dl5G33X5vMd5Fh9Od7R5d4JLbH3SBvSCIHbCWXIgUwV2\nazYr6T++MmvTbqQgrnvmnm491j6xvM1cbMr8Pg+UBqzcRpR5DEa8GNwRCTpQ\ns6H2lauY9nyQZwma52cytcMv+B32iYl7bup48QCHYvK7rfoKdszFdViUsZFU\njLhZd1baZqROn0ONwhWLGL/ZM27aMh4/Su0E6NeWm+foZrPTb1Iq9pbnsmA8\n0mVHab3bgt9a9wVP2vi/vYSeNptEq4HzuRAyyZgsbeAKeND9Ln6TEvh5o8WI\nHYZew9aKUgCAYiEH3fj+cdUyHdhh3pizNprhWwf9NVHR+i1Ep/9crRrxLlRP\ntIZPU9ktaSHaGGuEVm3CAx18nxr46aJexY0LCkP0wxTvfVyEpTLH+d+BnVqz\ngRe3\r\n=TOvn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dbd92fa1a28a9b31a1e4eb476b15f4cff38986b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.b6cddc2b7.0","@material/base":"11.0.0-canary.b6cddc2b7.0","@material/shape":"11.0.0-canary.b6cddc2b7.0","@material/theme":"11.0.0-canary.b6cddc2b7.0","@material/floating-label":"11.0.0-canary.b6cddc2b7.0","@material/feature-targeting":"11.0.0-canary.b6cddc2b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.b6cddc2b7.0_1617289581454_0.6009422122944399","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/notched-outline","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.94937c78c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fda864aaa046a69551d3ae8db1930420558857c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.94937c78c.0.tgz","fileCount":34,"integrity":"sha512-cp5TYgboLUmk9BuZwgH7Az/eIBauFT2X27G+a+2SFMvAe82JlG8QLg8oyntFCKxUBRdbaBq6uiDzyXYUlhdU8w==","signatures":[{"sig":"MEUCIDii7Mz0eZaY7fLBlNFoMBCGjaabGuO7XIYQWJT6r2t9AiEAiZS66Ur0VVKgGHxMMQhmOq6qOHHDEDlkIBk0XfEgEaY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjTDCRA9TVsSAnZWagAAVFYP/REL4wCCWxbxBB+ah5j1\nhWzoY8rWdTgLk/5mX0oAySAe/6iY42An9eFlSqjaPH4cPKT1fdyJDk+Q/E2W\nlMafq8XOsgn4n4N5Q/lsL9udzmUcTgUUyqK3yVONDyRh95xlp1AX15ZGmyEY\nt8fYoDb8skNF9lO/TSwv6UYHgnRNh+lGagggk3fw1q+nbnXfP8IuMI+RKNe3\nRxxyoj/icJboCa7A/xGPPMngVp7Xw9qHg0qC/iP85l3Kn6hqiNxzAuhVWFFu\n/FAoJkz+fToAMPYR0uydJwEuexGGnIJpojUrv9Ml/bLVocGIote39ZAZOQMl\noda2PL668A8O59X7V/r0kycNuGai7kohsGUjDetINTG6lmz8oNOxz8kxc4GQ\nBKQdl3qB/2NwdXsYbY9CLufWgM2eITAbZEqpq47cLfZYDPn3CpsTsEVJbQyC\nOY4ZtikSOGT/tsTsuQdyZbc2H7OHEr7B+4lSCvm7Ec56wtjiXU+2zqnqR7Bz\ncOJ+bOT6i22uXn7m9E/90/Loc8EoSJisne3Me8P1XyxjlW6AQtTMqwK67YTz\nPE9ygM3XZHqX2QPR1VleoDyMA9sMw2HGh8BTlPzdk/Y9WQxEHSb5GoJgsVMS\nGxj89MKBD4fJvaAC0lq8Mmb8dF6vshnapQcXqbqnBIjslByW+Y8arNTD2kPj\nX4J3\r\n=5gkL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ada608c773d2657680fffa3be444debd83967f00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.94937c78c.0","@material/base":"11.0.0-canary.94937c78c.0","@material/shape":"11.0.0-canary.94937c78c.0","@material/theme":"11.0.0-canary.94937c78c.0","@material/floating-label":"11.0.0-canary.94937c78c.0","@material/feature-targeting":"11.0.0-canary.94937c78c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.94937c78c.0_1617310914877_0.3140624163508585","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/notched-outline","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"534ea76674e5e523cbb282a7c8dc99d8d36ea98d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.e7202cb57.0.tgz","fileCount":34,"integrity":"sha512-DxplaY5hhfG2K1mg0KJnU7e37yVFWI9hSNhbG2WnHuMBDyyacDAfLTVxdnAz5guXNFSrbSjcDk4u3xY65+vcvQ==","signatures":[{"sig":"MEQCIGxXPQCxMUZxm8RF1BKhXFp5qu0l34uYEqnE9vvLRtmzAiAhtTxmBAK/TzTx6IXOWmc5mtZWO001k6CaF0h97ZHBgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk2tCRA9TVsSAnZWagAA6u8P+gJEiXP/XcVnWydxz3qT\nBjgabrX5QPPvbSh4EhvgW2wNmNm1nAe6lV433FztW4s5gGtKZ0yaptEm0j1H\nrUN9N79R/EJBEnteF6xDAVwnK042JC5uFQbSRkA3KSI1M8uVv85ulRE9goVw\n5z9Ce6qbbpvKpEMl8wzSFbEFzQxUtN7a/RzfR/wwMYK7TyWZJXNvI6XrONw8\n+Paj2TXOwfuC/2GKPsmyQByco8O9RhIlggQGpu18VsNr/tVqt18Ft6L8LyBR\neSX6rh07YgCiByTHvoHR3VXSXOcXJWjohSdCuEQQMPNeUxCcti1P0y9E76M1\nYRipSfuutJ0+ED2ntqpS+52BNfJjPXrGjZy5Jx+xLCRe1uPF6Ig4Lv4LMJsY\ngzbGu2czq0rhNgGHGCWKKFxwsHjk06Fh47Tl4T+BtdhZkdMrji1/KK5tUgpt\nx2AiiORH1vIQl0umSxjt9G3Xz93PhN7dEeJZarABungbX8SUw2lByS8YedbX\ntLKzkIxlmUo1K2SEHtpruf3oCnhVj1gEEuRYqlDN+vVZ1O+r2aDuc0ZGnfMU\nhheBVaH+hQgi7i7XvJkQHxMXvw29/repk1cy3/WJa5m2pIvCrfOb7zo2ceFk\nQXOpesgEbasj/+7LAFLc7yR+uIeMskmourdX5Dr7uLv/PXMDYiFSKIi8HLEx\nuEje\r\n=wPqx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"113d79c2879cb1503ff12c8064eeb38ada16b472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.e7202cb57.0","@material/base":"11.0.0-canary.e7202cb57.0","@material/shape":"11.0.0-canary.e7202cb57.0","@material/theme":"11.0.0-canary.e7202cb57.0","@material/floating-label":"11.0.0-canary.e7202cb57.0","@material/feature-targeting":"11.0.0-canary.e7202cb57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.e7202cb57.0_1617317293409_0.4509385505306098","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/notched-outline","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.1f636b205.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f581442cd2123b42451612f254cbe1846fa6cf6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.1f636b205.0.tgz","fileCount":34,"integrity":"sha512-/2nlEZmfPZl1PEmxmEZN6mhJuNp1zXMAq/UE28SpcY+6aRr5D21jNoGNrgEFBlJo97k+XngdWe+u96Z+tWu1Rw==","signatures":[{"sig":"MEQCIFNjCxc2BW1ntc/eshl6vkjoTu2d648cazbjRDIYBk4vAiAaSyP7VQHKR6M7CZnAt+uCLJkq42mFdU60+0ICKxoYGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5nDCRA9TVsSAnZWagAAisgP/0jUSL1UAgSsO2KWAZfD\nLAlSE9hByOpbOJkT18C4haoMdzF9hzKY7exuE7+3K8veJL6hyC9whX5zVW2i\ncyWuAJeQyDJIeTv7q5uoZQGggM0JZkSCQw8+7OU3MQPeQeadRd14MudFsy1H\nhPmSHv4mPb/dlOP3g074fZTHQxD6lIlNcVx3vMD5ql1BTkOIxgE7dr20rhvc\nX7LCpcR0NfDjviaRaotNk2nW4SZOxCbQHF0AidocNwVf0L9KPo8zwuYzzXEB\nmYbI7D9xYXz5RIWZtCMSSA6KF4bXHWPlE3D+uCVmxVmMsSU95YHBHMQOapJ0\nlblwzkYGekJ+aXN7Gr0puWuPGmgy7mfcS9LlFFnGitJTqUX+kiDUZl2uaMkc\ns//p5pPX76rPxqBjq7eArwQd2WHUvPJUm3J4+9URgs0Ffwo/xjTsJvd6sZ/c\nUNvWEJCtrN9UzeJzwKVDM+lqkA0LE9GZ4POQwAw/0jWXoOBvRUvb/qSUCdJF\nXU8xBIoRGISBkdkpWu1P2m0K1GGux2anDCu25JljvTVTcHRNUhf9FVIA6ADK\n1zzP8t+TcDwgQxMPMEnR9JNiJpJqb3xa8SLQzQRASxHMjOzz20MYrMh7knsv\nvQ/LHlJyGT2TSZbcPrzJtC/puqvKmHH9tFCUGi4oY6mdQ+PyxrJ/OkZKx3Jw\n65gl\r\n=tMKX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a523c6467be13e8aeead7e4e2e5f20c418871bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.1f636b205.0","@material/base":"11.0.0-canary.1f636b205.0","@material/shape":"11.0.0-canary.1f636b205.0","@material/theme":"11.0.0-canary.1f636b205.0","@material/floating-label":"11.0.0-canary.1f636b205.0","@material/feature-targeting":"11.0.0-canary.1f636b205.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.1f636b205.0_1617402306808_0.9268608852425146","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/notched-outline","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.94f50b260.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53f5e12f53d997333c52db0d0a86de852bd943f0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.94f50b260.0.tgz","fileCount":34,"integrity":"sha512-pX0YLPiZaZJHwuHBzZc8kzTWRZQXlha9KwjmOwGQkOcy3/21QTHInsGzmDV8uqzyqzE9aB3tD9nZQf9bxyr87w==","signatures":[{"sig":"MEUCIAwbkKgL4RdNnlhKM95ZqzeDj+/XCElxNuCFScFW6qwLAiEA6Hdc3yiLZQ/95Ckym8ztW1nuDoRPSzMLh2SSOmgLZEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaydjCRA9TVsSAnZWagAAD70QAKUCwrFwk3hE5bPdCYzc\nVf0hdRvTgLr09NlKyZvmSzYJYAVap31TloUT3O8h/HiVWl1Vg/+mWqV/9/VC\n6Y0NODIrxn2VxxEN9f6RYs4jvIbt7qot6U36IRcSeLlhEP6YiXphoHyNvjnp\n3g5Hp/hfeFdJs3iWq/GnuoVph7l1yjXaJ6yuu04iEdMTTu27GYqrHnKBkboH\nQ8kCUxy6jgR45L0gNTbDr7ERpWHPI8IOEs31cu5vOJubjEzZoGF0fzJuSqDS\nkZznCxK4AoQ6/r9nKY+OyNNcibrNFlp60XHb7vVWeEOha1F5pPB2lStibFGq\nRg7OSVPkJN+uFGywlzDft8FjrcFYNtav3c9WnfUBme7I6oSsNS+IHRb8ftDF\nyui50qzu7cteV3TIi7bK8ErgyB4Lmgca3jV87lwpYDsBHgHGEHCLMw4P26g4\nzZCwg87YcVp4jjW2/Ii7yM3BKyAbVh077rsJ6pInswaeIkPjwfDiDW6twbfG\n/WSgoypEQ5YqTluFbOibj9LsV8g0rqcDgw6BXgxet5F3EJKZw/OMjmZE5qE6\nwb7Me5fYxrCJhecw24nOE0CYl2iqWIImUn3AjzFbvvmkRGcnFiqj1eUcmqA7\n5N1OE9IvuwMAEsYtAYYkM2dSuX4IeOqdTA44S65ujwWkugZ2HG1R9PHimByu\nwka9\r\n=fnh2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b5f84c677cd669d6958748a69435b56ebb640bc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.94f50b260.0","@material/base":"11.0.0-canary.94f50b260.0","@material/shape":"11.0.0-canary.94f50b260.0","@material/theme":"11.0.0-canary.94f50b260.0","@material/floating-label":"11.0.0-canary.94f50b260.0","@material/feature-targeting":"11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.94f50b260.0_1617635170852_0.8943483952999141","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/notched-outline","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31ab690d35ab07657034b78233a0388ad08314c4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.a4009b80a.0.tgz","fileCount":34,"integrity":"sha512-Lat9sC8qg2cPy01nkXwMq1vNLU/eiVDTzTdkcmE28rY2/adq0AN+rmhS4NmKsw0rq6aZCIeD/SicN9z8u9+gHQ==","signatures":[{"sig":"MEYCIQDcEoSujxXPeoXx++MTHQvY8RH1a2QFylMl3038ZXenswIhAIHuPZsseHbrWHziEts/N8CdQHlSXrmmOpPAvHZXp5uP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4i8CRA9TVsSAnZWagAAvR4QAJYzeU/ZGJtcA3QQy3mk\n7vdcPVaMGdUkhnNE8Scyb+ksvhiRaLFT1SDHzoxuOZAa9GqJdeubIZD+DmXj\nzRu9UHFQBIG1IrnitLN9sfjUMQqkiUdy7Tt5HN83t6R3FrFb+D6/sIT4uQZl\njyNnD9jSYXbBcb/Q2UEVvvkLJLvQX3Onw1awzF35+F6o5cM8CmvaCjXiELRk\nkT+OYXZlifDOxeYaQz4IerPVYsDx+3dOJjqtUJjBExusyG1+P85W4kACRm8/\nECZLgRs1U5NcCvcKx3gQO0Bnq3xM29OoTkZJa6ZQZhD2y7PzOCzIKq9q39vZ\n5zNPbXeURWUlWr54DJZuvvAMx+Xl/txXVHCtRJXyoK9KJ3RU4KfpkK9AvqnA\nlbuedFPELEKPARdAdBQjYXiLyBBCxMu5X8LtC6+ASU2wCyAnA+GTk7A+HkRl\ndxUFwAFV05Xa2z8YGnOQhGQuBQNE5ZPfGIeLG5yKLMpDSf83r1M9Pr1b1qjV\ncgU4V00KL4rj/f/untWDnxiyHy4PpAMpzcl59leM5JAfSLTbDip5yZ+20HMJ\nVFRq5t6A5KKB20+n/67GBcE4jz6qMMIywySPBVMShplDIrbeYIlzduGrxXwL\nMj8tIEu5YVvQvHKA1pN4VYU6axIrPT4si0xQZFcDz1zzkS0RXU4XVi/MDfr6\n7GPZ\r\n=qkCM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"35eef76af32a43b61b6a0fb725dbb83cfa5d3421","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.a4009b80a.0","@material/base":"11.0.0-canary.a4009b80a.0","@material/shape":"11.0.0-canary.a4009b80a.0","@material/theme":"11.0.0-canary.a4009b80a.0","@material/floating-label":"11.0.0-canary.a4009b80a.0","@material/feature-targeting":"11.0.0-canary.a4009b80a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.a4009b80a.0_1617660091740_0.2558232543163572","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/notched-outline","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"583ec39371c6b9906ec55bf9f0175c68650addcd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.15604bd0d.0.tgz","fileCount":34,"integrity":"sha512-Hca7HF9bwziq4PPS2yoQouodO0m4/K0CjAasi3bo5uSfYJ8vb19T+hBqa+X8Pj79X05WXXEY6RHpShwQx1cXOQ==","signatures":[{"sig":"MEYCIQDAT6WL/CZalEPmBGNTh3/jOlDe7SNOSk2diHXOGSdwoAIhAIIH9V2HB4WS5LqUkDty2nSEJBIZYI6qE058GYtMTk2u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5J+CRA9TVsSAnZWagAAflAP/RCKzNk96lsJ0/s5GWom\n0iDwCdIoQhAuDtpXv0f1/k77ffhozlzBIwJvGIuQH+54fs96W0NzXqJh0W/z\nQ0GHhFV6vSuwSKmFimjKzwayawRQDv/t08dqxjNwOL5l/fna7YTQRbi1RHwG\nwytOXwb5CJhlXuoGNpeZLCe1s5IpgjwUaJ7A76XEo117c21/aevHzKqno/j1\n6l9MWEA6C24PHiSS8y3CoAVinh1aZ2bODHr6ffvzDTE9dINTH5Bumehijlak\nnfqDFcr36bWtn9ChBotFIZt4CXoedhcPQUyMCzxhgFjeBThWXWgXlfe0r1O3\nZfBqShjeTosqIoK4wFMiGSDoJHZrKqZSZPSj5Ah3GZ5pkzsooc6k4z1TZ5SF\nHSI4VM8wKm/62CwQ/AVFOWuOVtX1O/ymZDVyfpxmBkJXcLXF4aE6UAGtn4La\n+xyZd2r/Wao7NPtnrNdrxrrqL1p011hP1u46ztqJDQVjjC6du7bTUsaAXzbh\nD5ySKHpF8TFGkwbaDp2ZV8PjwSOzo4tKobyaJ6jDTwKY7S5IzK//fB7xG2Jp\nh6lpxGHZEH4wC3OsIO4XxYOizNYA9JGe7dEEmwisbe29q1XNiJNLH/1eveXj\njaiMjIjsTtLEjTP4AAL6dHbU9fbsagrfbaVRtRfLE2Vb9aF+2X4ZZAg2kUsl\nXTB/\r\n=pKi7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ea3949c02ab8da1a812a2127f1fbc7e7a3c98532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.15604bd0d.0","@material/base":"11.0.0-canary.15604bd0d.0","@material/shape":"11.0.0-canary.15604bd0d.0","@material/theme":"11.0.0-canary.15604bd0d.0","@material/floating-label":"11.0.0-canary.15604bd0d.0","@material/feature-targeting":"11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.15604bd0d.0_1617662590490_0.7861139726355748","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/notched-outline","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.76da7876c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dc0a84dff7bc4e6acae07603ad50e34830bcd9c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.76da7876c.0.tgz","fileCount":34,"integrity":"sha512-P5la9pc9SQ9qMuNAGbff5mTDF0C1n+wN0vEWwyvrae7O/fzLm9FYQ/I5ZOdK7lSM+mqapwZhBPFAdNZX8vx++Q==","signatures":[{"sig":"MEUCIDbl5J0eh1UEPc0C/tqb5FkDgTgOE5M87Tornb7xgiJvAiEAxIZ+N/d806FQco1Z8QGfX0nDqQzTuPHdl9BjWMeuUP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ7LCRA9TVsSAnZWagAApJ8P/jHL2lxrB563P9FVKzlk\nvXsVVlqqYGZfRCkmnJz6tWz5UnEGtSZpAQYtoij77b3N6cVo4wMwmWuU5Aed\n2lhHFlTh5xXts6sGB1slF5aFfG8L2LZvtESpYQOJNEND2AVSvnDEaKSl+fiA\nAtfxAIw3hGZOKpIgyWq0OQSKFFtkJALGsbOWXh5vUJKmPVBv3QwYIncsCcEl\n7i4tzpfSqfQVskUusIkP88yAkFy5DwhgROwHG2NGUAtwSInZgheYJbnxy4Ap\nrGI0LeVdEMuNdIyZb/2aT92Sv9SmZvobk4kFIrJ6Usuuy4WmbJsuZo4HjHTm\nPsyJG94bR57Xx1fnUH3Kpudmwvzyfpey97K9MQFsYvk22Ku5byCewGL7/YsE\nqV1rxhzPVhr1MYaU0dFjvSedc/wYqP1ZwHs3FMLgXdaERVreW6fgw5nRJaU5\nGWa0UitPor/1LjoeyaGujyAGB1U27iolAlUGg0ACe4caza+1zlSRaRY5Md1U\nTAjwqJIZR4K2Wl4+0Jp6j84QxMlJiRrIY/wNwhauunU+UD/wgK4bxita0zN6\nj2ZQECTgzsuWA1jVtS1cDrUv5EDH3fvHOWygebhornXeVXU6PRl6gcIxr8iB\nH6KXh/cWRe3uFI7HwNGevDNRJwaadMzrmXo0aPGB9XtKiuMDpVHjhLlzXmCj\nlOkh\r\n=2N2o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4bace63831a45c0c9e6f786768b2aad0d79087f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.76da7876c.0","@material/base":"11.0.0-canary.76da7876c.0","@material/shape":"11.0.0-canary.76da7876c.0","@material/theme":"11.0.0-canary.76da7876c.0","@material/floating-label":"11.0.0-canary.76da7876c.0","@material/feature-targeting":"11.0.0-canary.76da7876c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.76da7876c.0_1617759946714_0.6221316147523563","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/notched-outline","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9980ef0a87a001035e4afe8602056abacc23cf5d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":34,"integrity":"sha512-mk/qLeAztAgaP7X0pLpyki796v+T1iN/Av8wmkXoocLIoIbnNoRNMRlUuUfc8bY/NvlsLU59Sbe72cmr/Au13w==","signatures":[{"sig":"MEYCIQDg5gZPB/ZCGoUJ/8G/ouBBtwEMDUDimYT3p0bR4v274wIhAMRRbqq0KCEZ4PIgU2nhDMifttU9zAJ6c7fDwjh6/f6g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf/7CRA9TVsSAnZWagAA2pUP/3soYoBOpm272LIdm1pU\nFlbBZ2fXknclcSYwuzoHrNdQJSTnG5aXpDbx2JGzk4Jea+gR9ZA6w4OirQ6X\nto7Ak8AybGv+5cN/IEJuIvElmEwOQuEtY3KDwmJM1Erm1Xgb5nYpl0pbhob4\nlrDLB8z/9pHevFNYch4OJBgQ24MuI/uol0+JxuQugLD1kifybIqRvtHeScrl\nTMcBx7EP1Xk/jn2TXJy2zZqwVHSpFkcDRn5/+uA4eyubKTAa0/rnVzI+YpkW\nDjKfp43tW5vvF7hTqjIWdKob7HZvRRgsfAsHJJCL6A7tlFBdZN2UG2MLxpvg\nzHhNNHFoIJNfgGaFYfyQObvQUUSKmR4Q2fO0NNBADH8z5WW4ltgz7EP5qnDl\n5AiZe1FXF7h7ZTfnrv0xqx3ss8cSjtNJj8pMM7YG3/xOMF8fkWHua2SF5KJj\nLiIjWJ///6QZkAdZhUB4iEH5dc8BcUtrea7ZDc31fkIGfyyihQtzELf3mXQH\nJjz082P2nGLsadFhXwhT1VKQyfIJJDSuThMkQcwtOjIO+k2FYAGfLrra5hkx\nkEFqhZtNFxPFe7mkX+63CyyLQsZ4WgzZE4zDXLf4cg9mbhr9DK0HZqfAgWxn\nX6hOJc7fpNnrFxA0bzmCxF6IO7n9aOn9F7+BPQ0cYhPx6I2y9U5BkwT5pmuv\n951Y\r\n=/Auu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f3ec57093899a7f082bd51cae05b398c31619392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.6bcb6cbd2.0","@material/base":"11.0.0-canary.6bcb6cbd2.0","@material/shape":"11.0.0-canary.6bcb6cbd2.0","@material/theme":"11.0.0-canary.6bcb6cbd2.0","@material/floating-label":"11.0.0-canary.6bcb6cbd2.0","@material/feature-targeting":"11.0.0-canary.6bcb6cbd2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.6bcb6cbd2.0_1617821690852_0.7203771991616135","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/notched-outline","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"983b99db7ed409b9eb2797a38925884da097edab","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.c91e8d141.0.tgz","fileCount":34,"integrity":"sha512-FGNbe4J2q9oACRqjyhUiN4ySI9Ru5ZRn4GCq6PcpO69cxL9YBkkv1F/RjaytMzGZXoidzXjCpSAOBQTR7ihpgw==","signatures":[{"sig":"MEUCIQCsG/JziBQRoQXK0LdqqLKsj1KrlRqSPTIPHgVBj5SLeQIgO0NrC+fdymx74ddnlbtVkCe6fOKT9gnxpeebBBM6bxw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgDpCRA9TVsSAnZWagAAWagQAJzpQHwYjVndrvT6U6Yf\n59R5O5qeJNUu37f6Iz68/q3OjmW0jalaOemDFZr58UX/S90shrFPMjCiYZMt\nqoT4rdOnC0AhnwZcinmFoX4ZsJ8i9k/C9TnsxeHj08fpgITs7eSRKAZFY9fK\nYfoDXndXYTJSpkiEVa0k9+/dczHVGw8rA4kWJuKSkEcOohOWiAsqrLvJcxy+\nttL+DKJvMK2KHkcpXqnfv/lBFKy90UGJerdGVU03pvJJlT18LE8iSjQwA7Ce\noDm/mVa9r3DBx+n2od4gYdM0gpyZbRn0l3AA1UzeCbe4HRwTxQDQXiUsUJZh\nSqlQA/Sw/vY9jMBxjVPo6d3PfjYskkAHn1B1Uvc8dFJvehMoiOaiQnoQrVuP\nxcgocZzqICKhrON/RySq95sjT2m6wHL6qxh+iNiuQYs/+fxAKp9xiQLDs5mi\nta58WZnW6Y1DWy5OyOlr8Asc8/qSrszi3poktdq8yF/X3l7Z76rBCn93d9hw\nYwaDOb1w3IP7Gk6vyBUMijaPacJH3iNw6YlR/tvL83v4cDjUwEO7wsvjj5LU\nKACsgK7v8BFy8t/YEaytbvDlJgnqx/XGY+py9z/xnyEPWgK/K5DWLguTMaDn\n2/04ZVTo/tEEoLqLRp7zDd9X2z2D5KDlpNkik8EooN61KZcEilfQshuBI7wq\nrMO2\r\n=tLDe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b13009a2b12843e6eefaa0c3ae66fc519af7bb29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.c91e8d141.0","@material/base":"11.0.0-canary.c91e8d141.0","@material/shape":"11.0.0-canary.c91e8d141.0","@material/theme":"11.0.0-canary.c91e8d141.0","@material/floating-label":"11.0.0-canary.c91e8d141.0","@material/feature-targeting":"11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.c91e8d141.0_1617821929385_0.3226379707446019","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/notched-outline","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.f77c50860.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fa8626f6b33cc9578433506791c67a736c6ec2f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.f77c50860.0.tgz","fileCount":34,"integrity":"sha512-zHYoaX4K22loJdsssl9m6W/n+TfNCzOIQUMHXth8dHTH5eUFgXKnhW0HcGnAOm/oK9OQx1CRVaoTmVmTsT3qEg==","signatures":[{"sig":"MEYCIQD9fmKyr7xs/DYmhVbYG7LFy4twBDit0Op7uHGvDIRJ7wIhAP2IAEclz+mpZNwqxOgJlkztDaI04+WkN6iZwwxpFWQp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyMOCRA9TVsSAnZWagAALkUP/03hCaKs+m4D7y/Ahvcc\nsnNBtUDXG4USAqKsTDaVgXo6BQhVrY+scLRhaUNVIad3d6BQycbxr7z6pjgk\nLBDePn2louHyW0HukuYk4HeYCHoWYBY4OPwyhQl4xHWZEHC+o3s9K84ZAQi0\nJ3rW0UtN6nWP3K5y3sSzDDsjRFkgw8MztHMMooaKAOgL7Yafo5mqSANXkrqH\nir5joDv8w6CQHBIUsB1tQcvAWC6VeI0smarZRKzKuVIuKYIo0WeQ7ULqocef\nTZsMy40iBDJacsKpc2LFixycBILnHHPr3XSOSn3VfHGHCqPz3a1cD/S/I2o5\nub1FkTVvaOwAumKzON2j3nkTxHRt/jARuYYD0YxzdnwwBUFCT6/lbatUwopv\n2+5Mc2vEyOZCP77OuJl5e0JXuBXpOVvnlkGB46o0qEGtp5kRBkq9QJhnx/sV\neIX026e2RePNxHTTdTDemkIuUPBOgDM7WmA+n7+FgUYN7IxQrw6mKnyKJWfN\n8CVpuyqSgRqIyzqZN3R9Hxkg177H5j0pVT2uToP88DYtwHu+Bkw88eexDdC0\noB8GcZnheW8xlT7bOnJyUxOrXOgchuMFrxlevoY9wyW4SrLMKBdeKXlGYv+7\nwmizJnU557rIGwBl4thTrVXFWxNOEJP9S0pC9tDjxEa+6v8eL0yiK1eZfG/A\nTvzl\r\n=+oHP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d35db9665d4a8a4f385b134c9c1a23bda8668fa2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f77c50860.0","@material/base":"11.0.0-canary.f77c50860.0","@material/shape":"11.0.0-canary.f77c50860.0","@material/theme":"11.0.0-canary.f77c50860.0","@material/floating-label":"11.0.0-canary.f77c50860.0","@material/feature-targeting":"11.0.0-canary.f77c50860.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.f77c50860.0_1617896206453_0.8894368387314764","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/notched-outline","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6502b3ff99fafbdae8138c04ab782b4332857d7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.367d88bdb.0.tgz","fileCount":34,"integrity":"sha512-3cFk9fpnXabmqKUd2IGyvyL9cgWrOInTfHPs4ZhK0m26s/W8bKdbFmh0qlAOeCFggIbWKH8CarpFbSUChsF9Lw==","signatures":[{"sig":"MEUCIHL6vXgxnur8/tmIMpUhS5n/zFeVGMGLzp8Hc13lffigAiEA8AYhSwgBYDGrvnkSrvPdBsTKNPk5Z906mRg+h6XBOsA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzHLCRA9TVsSAnZWagAANBMP/04riahTu+jel6xBUHBx\nMl/8bfPGdz6ZY6Z2rJHvqy8C2eK8QE60APSiv9aZEFtBBR23yXOdu2LuPLtu\ngDQY+n/qlhvl3hLjBRikATk6gQWsUvQa8GQrH/8WBJxJ9PbQCXX+AUTJjEoy\nZjo570wN82T0MBtcbsOjQQevwXZwD8EVq1clCPYN0Kgc6mDnRsPyMTHZwHHn\ncqSFZuulj/dLqYOMN/ohM7RJuhxYNxq0A2BCH6N+YB+5wfDBDk9rGTfUrLrC\nk1vyyxLXQpCqitaK8QYC98Ds6wtodIrgTIOnuyuTzcq6Av4Qaj1oykxVi34T\nCeQsYkyuElVUQivOuGAFyNFNAo/Mx73Bk/ATY5K5eo1Zbe21CXVswAW5hPGB\nM9vhThZkbsGN5JYZqitAci3MHKjXTmzh3Xg/BrL2xi6R6FnnCOwusE0Mptv/\n8R5G5+TiOooqHc4+D/znb44BRi9qZqAPKqAB3XGHdkTJqDxfLxqY+M6VoqaZ\n2daqAV4lxD1Q8PsU9iesfgMG3wajk6k+nLOKij3CeOx/q6PSkbRxb7nLaZTF\nABWJpSK1eRI7XugzXUhQ/9foeTNvUbSIyzrGpcja71gmVqKjOq4uYv3Tn3Hm\ngQAMlHm80Tl+J4VEzh8dsXHgJcc9ASLwBcgJcl57h6RIyoccs2iCTAlOI7gv\n5go7\r\n=EnOG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ba9cee87fe351c7e76ccb32f2572bf3ca91e88d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.367d88bdb.0","@material/base":"11.0.0-canary.367d88bdb.0","@material/shape":"11.0.0-canary.367d88bdb.0","@material/theme":"11.0.0-canary.367d88bdb.0","@material/floating-label":"11.0.0-canary.367d88bdb.0","@material/feature-targeting":"11.0.0-canary.367d88bdb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.367d88bdb.0_1617899978685_0.5693048187392691","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/notched-outline","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a12d438c164363ea9d5ebd3c6a1cb145062968c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.0ec437d3b.0.tgz","fileCount":34,"integrity":"sha512-ucOD0wUjo4xZtcnOw0JiZgnd2Zz0cpv/Y3Pw6Y5OoUu5xxqRIEUu/cA5xTCT+MPCqgNZaZn337JA0e0TvU25iQ==","signatures":[{"sig":"MEUCIFyOA3qMofOEFu/wtwXA2Qa4HPh12OfWgN69SY+euCueAiEAnmid7fksgmM3U7G7NV5U3zYhFZxjgvAjO8+P9KBGk9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1s0CRA9TVsSAnZWagAAZVcP/jnOZSogthatni1/vBkc\n4qOoeVCWWqNBRBPzjrX88ViEVuESrbc/qmdt3CPj44wCrgAhUXTjOvgK5Fji\ncedL1ReCNUVrhEzy5hqMdMcbW7DIxe78HWdHAAMPIrTYJYVGiDNOGX4eWRqc\n+7FvkOy7MZLFL/jFpMNTcYianF/6PGvYLXlio4dy9GourxDyvLMFVBJjUsEw\nN20AP2WJ8m0qjg+HS3JAnqpPZUZra+/FMhbjmYGK50qseEzw6bMbPpWjnHHn\nx6QRUyppT5T6NfpL+eCbx4mjLpTpZc/wPeP4DIuptVK9+UO+myWiuvwlwNYw\nkzalIGYOakCxsnvn9seTC58zhstQMxKmv4x+eZ4IN4CIXTwfBRMvKrePOju6\nsz7GjD6qSCMyMPffwKSVCyVpID965pisLlPrVhIyVudfhgX5dVXY86rMZZnB\nIZPz+cNt281LmU08NUYFHNUGLxoRYWQ3KTwygi9raD+ukZ3jQ0Zr9o2NRFt3\nBbzcECHtbO8Ke82+KQ7TFVEtcTVZF2P2qZhIZ7EgyPwQ+8PADAiqiVSF6+8x\ny2WCUWFbmd6oX/jNyQ8YzWAh9LPwOTIqB6E64fnMzj9yyhUH/CTgq88zSQqB\nlbsrUxe0IJrIjGOyhH1w8NYPUfWX3HPOozLWODimmjDnix9PinOsSYHyZleD\nHEJW\r\n=vI2R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"50ed2429a570432fef9747a954d7c31d2dd11f0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0ec437d3b.0","@material/base":"11.0.0-canary.0ec437d3b.0","@material/shape":"11.0.0-canary.0ec437d3b.0","@material/theme":"11.0.0-canary.0ec437d3b.0","@material/floating-label":"11.0.0-canary.0ec437d3b.0","@material/feature-targeting":"11.0.0-canary.0ec437d3b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.0ec437d3b.0_1617910579798_0.8414377972695042","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/notched-outline","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19793a5953f159e9977be06c7aae4e16f15d4d1c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.b2fa996a1.0.tgz","fileCount":34,"integrity":"sha512-ismWQRW9V9IsdH2n5r2D4rqEY5/lBxl77zUbiaWxj3cmePEd6UreY6pJZE3xMzqZHbqODSmrNn0x7bF+MwLz+A==","signatures":[{"sig":"MEUCIQCIeqLE+IaRBZi79wO631LwyGeepgUJrQUZ2R7vEkGDYgIgWU+oSWBuKMOmEdbwpExcZFv/+tlxX76yZEOvnYe8kSU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG7HCRA9TVsSAnZWagAAHa4P/iTnZeH58N0wYJbQyqPK\nJ2rK4KfGY0crlkm/I3HnifF/PSgU6v+aUoB/Ukqu26FI8rraWU8jcmAr9SM4\ntP+E5wpUg18Z8CwCouIN7j4ND4RHRr5K7FuIW/ML3MnSMP0SENbWAByFI+wy\nDBmfJgtNN/bdfMUNnzxB+7CoIpuqCyRDjsxnDi57X7D/oJ940iEOzVL2oHJy\nvC/sLfjIZb7ldYTgTeUacbzr11G2QO1V2fdcfm1x4fWjxe70sh2pV/0e5s8m\nFNRLrc87PuhaqiUVdVh5oXBSFkv42hPO6p7JVu9bvT0FvF44QybSeAU1pnOq\nhQfQ1nPagw2Ds7MiY8VaFIftZPfnl9Yz24FGv8iJtdv3Y9mMZ5U6vYtyMrkF\ng4OlVKHspqn2L7SHs70K3tUOIUQtLpT1dxCuBtSx/1siTBkORKSi166hRZ3y\nRHcKyi49fx2lGMakTtzZdOjcn+FumRKmS+oLpmHiQo1xRH9SK2f7Kv2INc9j\nZHo05LKSaEQf+RgNeXt9EDMvoh1Uke9q+DAoUPf37Pc+Nsp7GxhY+i2nU8hX\nCWzKppBnoGGSG6AIcC8idEmNwfPW/+qVbGEnzZlIIIWQJPAJT7EXciYW5NbJ\nsvhmfX/c3swFQ6EMQzXznY3zoGy9WQ+m7BTqFNCXfyJzCqaGf+kL6iuffXQ2\n7nno\r\n=0N2T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0b4eb5b2d30d6d9a7b20f57164a2beba3c20d65e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.b2fa996a1.0","@material/base":"11.0.0-canary.b2fa996a1.0","@material/shape":"11.0.0-canary.b2fa996a1.0","@material/theme":"11.0.0-canary.b2fa996a1.0","@material/floating-label":"11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.b2fa996a1.0_1617981127470_0.46919823755701473","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/notched-outline","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.24255c408.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ff1b8b26fb3a1d2f802b0bd12786f2362276699","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.24255c408.0.tgz","fileCount":34,"integrity":"sha512-InB5kPtEaKXEXk/1z+NsJkCw7p8ruajrk4EykZvkK4X7S+hsvkzq67uVK9RzsriOzM66IwyWCzke7JdrGCfGoQ==","signatures":[{"sig":"MEUCIAzmvc9cI9TUhttNmE+S1Nn92mlaD6frJXPEwkfq/b1JAiEAr5KyGTSjMqN/wzCv2gupr30vrLRG19Q6rtBT4qu55h0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLVsCRA9TVsSAnZWagAAvqwP/1i6jMwEG+2OavWfkFuz\nY0vgZEqapdzbmzQRlr9zeLt/0GyZnBKQC/6QAUTboUom97dEkU+R2lNAGQ0j\n1+MNR/4qMhlytxQcZjLf91fkZco6JrPvBhnM3pFEesHn1/k2fFh9ZfsObnX/\nx36Eq47ubzcIftOnI9zoZCsdL/BNqT8jO1BEXPqYGt7R2v7p49o+l7XJu+ga\n9qJVze965yafA+qQZ8omNaK5Btysym2/cFg1U5+tsvJaum314rkLpqMUKg/S\nakelQCEOQQv3EdKmOVodzOb3Pgcs4fhfmKqyJCRunZLODhTqK2garUblbdbJ\n117ostoyvQOTe4Csn1rMfN7FoYj4c0IcEFT+LqihpgrzTQsy00GY7IhIeefb\nAD2ezEkYbu2pzEuyiWeenKcBHAqAxTwfigHMXoXGnnquMEcLda+isFALCXiP\nmIN2eH0jzx61ZL9aaLMJBTF3WuKb3sGJSoNTvs76rsMxN971TxucWRe5D1rH\nMZUKAJRHZJJqh8t+CC7yEAc1DggZStX9Ah/Pfp3xD7VKWKoDPTs7gnaNmO36\nXwJNdBzYOOYBXkG98eD4lKLiJnuUKmLRPQXS1mWDrA2x8x2nnfr3I4lMbsSC\nD31JyEMLqFh8qgG0fNoK8/6uQUp5wlShWh/fKqDqNGtoB3VoYkSjZScuZp7K\nSMUi\r\n=Qpqo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5cc224c5482fd736af03872db458f031901bb693","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.24255c408.0","@material/base":"11.0.0-canary.24255c408.0","@material/shape":"11.0.0-canary.24255c408.0","@material/theme":"11.0.0-canary.24255c408.0","@material/floating-label":"11.0.0-canary.24255c408.0","@material/feature-targeting":"11.0.0-canary.24255c408.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.24255c408.0_1617999211512_0.27417698930159107","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/notched-outline","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31ec286b2768632b3536401c7ecd6efaf23a4d2b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":34,"integrity":"sha512-RX7dVqq7QQmTLtlkcwcD3MrLnhz+P8+BYGfsiMZ/R7kG4rcVIsJKjzaf6uH09aq9XvVWQ2z9DAejNmqv5Z8brw==","signatures":[{"sig":"MEUCIQD5MJbx4ePSvYSwsg7hxpiMohx/0SKp67BHgHjWNQv3UQIgV0eNpLSFk9EnyGnECiJZnpADdVsPHGGO9qQ+L0cY4H4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNsoCRA9TVsSAnZWagAAnKQP/iGM4TPCT+6p9/me7Qzg\n3zLbzxMENXzC0wQgIyxzCnXQr/QoHOHMuDGJktbIK1dgd2opr+V41w0FbDEI\nAFvcMEtnbjGWtCQcpG2MeXVVWMufzRWS1g7Q4YXVfmTXhPADxq6Cqmx4zCXc\ny25EiMQjeCZDQuHJyZVzJDvH+mof4pEx5KEHq0EbjPRcKqgNAA9YroVWGj6j\nn6hZr7SRRGl5evEP/oGqXwEgzxEbZCNA0GqeL5mPd2vpOVdexjOw9YJP4oVJ\nk7lyUzs2li2IPwSXIYePXc7Zsh7iIUPD7N5qCqPBZo75lAj/d2nQ1P/Cpqa7\ngeIDq68Th+qGscZ2oRvRa3jLXvcdpWIPHXx2GQ/+Ngl7jsEAH/61NNlZFV8A\n72KKoE7lExLlOAEjQ0fVraAy3qTlnoRhKChapw4FK4NhgUbq2nKmsar4zmk5\nb1UA9IsxaSOJAPLIPdvK1CXs58phtqFYDsrhuLcRS5TFGz1qURYAJ9vJStBn\nJrcrzp8Az7nLRzQoi9+62OWaj7N1Vn9mChW4A6FKLJtfwAMEyPwwStP+IVvv\nQsF2T/+Qg0vVXtOfZHjOFQcufeMf7sIPSQyD++1pJEjxA5spK4GCo3vX/dcT\n4HREe/hsUeXhBJB7dtlNuacf9U8SYuNqNSA2D+mIUdygZTFuzUgP29LD7/Wp\nNFic\r\n=bA98\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1e1f0ea898fe101863062b7a760600cfb1b095e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.7d6a4bb72.0","@material/base":"11.0.0-canary.7d6a4bb72.0","@material/shape":"11.0.0-canary.7d6a4bb72.0","@material/theme":"11.0.0-canary.7d6a4bb72.0","@material/floating-label":"11.0.0-canary.7d6a4bb72.0","@material/feature-targeting":"11.0.0-canary.7d6a4bb72.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.7d6a4bb72.0_1618008871898_0.8053169025673161","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/notched-outline","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.352b295c1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64d2f09a9626ad0109368dcc6f13218271a98788","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.352b295c1.0.tgz","fileCount":34,"integrity":"sha512-Qi7fLxFKgFCZJMFkKpu5c75PPye2TE5JQ3w3SFtDGSSLnoDt7j4XWOV8sUMPbRATYwze5f1X8S5tXonHpIt/2w==","signatures":[{"sig":"MEUCIQDTQGHnP1RmqjHnvy94C2Z8bAz0ipX79MnPrTe8sO+zcQIgFvcL1NMS7OMThIurQ1PPvZPY/xVEFv4Ff392u+EOLkw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI6DCRA9TVsSAnZWagAAbDkP/iyDkGNqyEW2Dzs82Yus\nWsnip5vALLe95m6Tc9qpkLMV4jsHQlG3IZQngZ4CcPEn+dPUblulcpdY/qc3\nY76t0ftfYGeZf9pDfHPZL9m6XtykFHLtcRCHv8qldu4zNZJlCMVGDuNVeDSp\nYNKsXRCcif2rjGKCMd8aw+mY6i+HKEA/WriOJK0l7aAsOyleMrtlt0egMIad\neG5npePPP6b2H8Nb/IINQPV5hzZE9s9O5+huoLNE6PD9zpMe6g4sWRy2Uu/q\nLoEE9cSyebZ2MuVn9IpGL494mPPCo11ZSu6397eE0tp6I8eiOIwigDdhz6at\nJKVkgxege5CY/M06HK/eb9a4JoFRPj1/aMKv0Qs3excNFGSgyJsq5VxBf/MH\ndZ20bNBiP0bktHJhPoPsq8pGLLS99DnH/1FHFfs25JKGPw/3IQcseNhxmNIG\nbeCInCZSD0j58poGfl8zqaogkhFX0nI2+YcbPMQ7rJbzWNV1vlD8U9e11zQq\n4unteDRkG2ikeAI38u8P/HVzRwaDbY+0dyJcpJFp2eBXMdXvyBijuu/Y3+tR\nfa1YcpYCliCAhgxRuwOsoWnUJL22SrKW0yb5+0NuCJX6VAgA+hwJE2UrTNEr\nssEKJMEOc7GunMb6nzInb/AuKSOM07NaQjxEV6n5Yo9TmFxvkbNYdT19O2mj\n0PXv\r\n=FOj3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"472a00ecb08e85ff1b602e3bec15d38f2a028f69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.352b295c1.0","@material/base":"11.0.0-canary.352b295c1.0","@material/shape":"11.0.0-canary.352b295c1.0","@material/theme":"11.0.0-canary.352b295c1.0","@material/floating-label":"11.0.0-canary.352b295c1.0","@material/feature-targeting":"11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.352b295c1.0_1618251395223_0.3005954753700464","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/notched-outline","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e472407cbdd7e47bafa91c8a0d3116798a9c79da","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.ab99b8064.0.tgz","fileCount":34,"integrity":"sha512-dmSYYRFHDfnjMUZN8x09NZpx8kQPPM/4kOgTn2ST6bKPqacaRc797qm3qMUwOE8mvqNBEHJyfBsa75+tNoGkUA==","signatures":[{"sig":"MEUCIEHPq/55xwHlqR7Y1rejuHxIecj51+4HIJkwZY3ePWuIAiEAwyp0wS/EvbC02c5nkOEQnla+rl5uIxwOyxt/jEl6q9Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda5JCRA9TVsSAnZWagAAxJoQAKONX0cwmAO3xTNM6eyY\ntPc+8hhmEpQTrqrvyoPeoyJpg7+jN9lzV4gFzTQS2Di6sC9rv0WDTRffvT7p\nU+pxqxo/R3l8i2JcBt2laYaUA0GXAQsjurcFB6UPrKGLaVKLh+FytFaKNF+h\nBWAXc88QyIo0kw2w6aNJUG174LENcj46yg/WZWtWHYfRhlyvf4qRdHCGLkWN\nDQ/lDPDZivqmAGC+0yL2Y91xZ9Q7voFCmT94+DEemjRbR7Eh0Im3su/EXm34\ntvTIks+xeUgHIX6WY5J0CAoMn7HcfmzfV/7iqwhIzlzpAGvAuNTJPwM5Jb9u\n3aX+1VWladHXHSAAe0mTSNsthdqyQiCPwfAC6hLEAm+8Hs2r96+bAoAO7l7q\ndNrjGya1TMPdnjbjuO3LAjoHSykYYKgFACuTRPvJNlw8y+6qOqHEGs5ZncDy\nB13oIKsCD8f+ZfpBXW9DTjypaSAnrk7/zwdtoib+friw2GV2J/x8Ju9Ihr6H\nSN8dya6SZBF4zvEh+7sttdLnpYg3kOiaYsukgvGBEkPzgWFqY0J4kXQINjuM\nU+wR2WRMQ71uSD2dipdNNv9r9lI6O44DJeo1Dny1kLu4d4j8DYrvW6kEDi+p\ngXcmfPOWO3ZRohHa4FPrYEUEq7z6QzSmNYFXfi8y1EFgAkHnsLYD1lJuMMXO\nzaLI\r\n=sivO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7a67c09690e367ad8ebdba2d551f6432c20ccccd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.ab99b8064.0","@material/base":"11.0.0-canary.ab99b8064.0","@material/shape":"11.0.0-canary.ab99b8064.0","@material/theme":"11.0.0-canary.ab99b8064.0","@material/floating-label":"11.0.0-canary.ab99b8064.0","@material/feature-targeting":"11.0.0-canary.ab99b8064.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.ab99b8064.0_1618325064717_0.16438735993648113","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/notched-outline","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8871004ae19d1ff4cbefb9c7cf21f6774175b342","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.8f0a11e32.0.tgz","fileCount":34,"integrity":"sha512-sdj1BUcRyiDe2W3QMLZcWrGf/OeRtvmI8xDbJH7/zxyQsyX2tpRSejBiY//Q7f7IUtboVJK6DyN+7KBdF077lg==","signatures":[{"sig":"MEUCIBQsxF053SY1Q8Gl9Ntox+SphjrAFL2N/fySkhSpXsLbAiEAp6nxAzLKuI/2cC9lucAxkcTWNhmCCe4ZqrD6TzGZ6G0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0quCRA9TVsSAnZWagAAWygP/0/Q3yCNvGZBiVT+Zwmb\nMOcSPkj3d4ZZlUWKTxTV+dXJXi6S9BCtSlA9IJg1j0JE8YlyGBDlaaz1gUDE\nclwL61TI+QtHn4Yp430KiV6JOw2Gs4iQ09aT1FcODQ6CpcYPfVkkpRAZi2YK\nFftGXyt8rVJyoIAWJAGdpJoSB9nxJZcNDctJoWdRBZkLCktv7iVCYy5ucvrr\n6ufFxglo+BZ4i5ZcddlSvhoc668OITdMnFXyeOxbjHdVR56GZIy601tqorC8\nlnd1ET+w4OJAOVpTBFf+0NHljtwYQZ/06QTIQcbPAixRRtPwszDMh6Mj2HdW\ndbeEoAUVXVH50iU8JdkW4B1ULq/t5WLzWY3pPPbSpNabJ07d+LsPWl5zDK9D\nGnOIfq+ZumT5oYYI00Nohl13MzUSgXgY/Pj+8tJMruvw9XfbRIm1pJ1G3pJS\nljMQ9DAF2ZKU/4JcnxHSj4QHNtMXDug9SghzID6BpvTXQHhmX0r+zha1sOpl\nqb28H9i+UUnTaqegGKM7ihaOWhfDdorKI6Gv9K2cnPp+2+94q5ZZpjPCtrZ5\n8yFi5LjAH4uqg8fZJcBYo0+Gk/m7tlFjupLkRJ5oM4/7irLu4PD1//bpsYMK\nyd9/lD2JCCDRh17Dc2UtG3zokux+PHIdYz/ZW18YVi/ufN61BZjEJ9JcBxi9\n3Cpp\r\n=F6Uq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f09b2c0c350e2f684e84766c95eed5c92b5afb0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.8f0a11e32.0","@material/base":"11.0.0-canary.8f0a11e32.0","@material/shape":"11.0.0-canary.8f0a11e32.0","@material/theme":"11.0.0-canary.8f0a11e32.0","@material/floating-label":"11.0.0-canary.8f0a11e32.0","@material/feature-targeting":"11.0.0-canary.8f0a11e32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.8f0a11e32.0_1618430638565_0.15876946232008926","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/notched-outline","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c6f8755f03e10f47f8f7b68ac58dd810b31b902","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":34,"integrity":"sha512-bSTUjcGdReekpQkQdHtvPdjfsK+EpxXJwysAPXm5EIrVYEIErB6bIzVbea6w7f3DiTm2eamUfP85vF53wFLUSw==","signatures":[{"sig":"MEUCIHrj9R8nFgHCp3alNTrivcGA+IPArwcQtKIid4zKZaHFAiEA11Ax//ZSfiDb7va0P6fjE3o+7mZ+3VvjDIv2WanSm5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIBTCRA9TVsSAnZWagAAQOQP/jXPlRkyxg1loSYiVoI2\nrZsjlEGv0lJIN94cqZG6hSKqXsnB4P9ELRqyZT3DdyHTE6cQC7N/nXFP53GN\nLP3+MPe7Fs6axdupKov3Y3pPED3Nb0fZerSHjSDh+YHcZxcnKkWMfWnpTAHO\n/ZinqIjaOyN+TF68oM/FqhxwXHvoYEWI85banldRY2OQc8+WvqShmnYj+Urt\n7nyW37VgV37Y9swVyDDR+SAvsnWYsczdjcl0ZEBxL2xxmNXmbHIGjTG3oZH8\nWBC/K/YcTyk6c1Yxa0rHwvyDP+S6JwnqJTocnrRF8K6FHaT9vIps50l5mSQB\n3yNKe8xYRnexoLlc3UfDWvaDuN6EUwtgjycijnmvXNEnTFEB6YfrXucPSyeV\nmkel8rhxprWPXsnRPo4AbOI2ltBaia021p9C5pNSYiqD619CLCGQeNrynsdt\nhzZ2wDNFSHfNXeFqip+VDbpp4CHCo+zKapeKRwXvO3RzTUNMzYt8zURZUN8Y\nktItDbsi3jO5qrDdZPDIrB+nTZE7YT7Qb1YYYgvph3B0VC3HDX8kedmHZDZk\nLxumeP9eAJVe0NOS71RvgPofTFGfyofxyqYFIimh8vkGlpvDh0UmIhWH860L\nkJz0gSC3201p7QYHNrVRJ5QRd7/LmqJIu7LbleN3WSvBa3u7UYmLDVi+QKre\npAzf\r\n=2eHf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"eddcbd64f4309f4bf5faecb13428405a28774f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f5c6db8fc.0","@material/base":"11.0.0-canary.f5c6db8fc.0","@material/shape":"11.0.0-canary.f5c6db8fc.0","@material/theme":"11.0.0-canary.f5c6db8fc.0","@material/floating-label":"11.0.0-canary.f5c6db8fc.0","@material/feature-targeting":"11.0.0-canary.f5c6db8fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.f5c6db8fc.0_1618509907100_0.7012374997423978","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/notched-outline","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.3793a3143.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"deb2ae631762110eda2daa1d14bed26e94a82a03","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.3793a3143.0.tgz","fileCount":34,"integrity":"sha512-967dB/2djdKmfWiIHoJh9lV6XoQPvbFY6ulSV0yOY1sGnQ9qQbsX+Zm2PFO+HT5kWjLrODdhzMpkHNi/wRS+mg==","signatures":[{"sig":"MEYCIQCzr8ews1Y4EFPrYmjSjths+ebqQZ6sRdBnMbSI4LdQagIhAOFgKeG8j3qByGpe8BZSxxAMIttLclE0e2NfROY63cUb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIa8CRA9TVsSAnZWagAA+AsP/3hSTcL7RDxQ/0CDYZ50\nan74ElqyQ4w0XzHQIDjDBD2FQi7Pj+kqGiSPUpCCx+5sCfX1AayRVjo12y5g\naa+4CwimrjeGq6Kv4OtdX0ksZ6B3BmEmcLIjVQoCPQG+ATYVxxOQ/B1Fg2FY\nH7jNtxZsp0rpSAEOE+vaqmgJ9V1J48P4I56EiJtS/84cYh/leV6fqSI6tNsC\nLM4lY5Oop9HEOl199FKXLZRnp6WF/TA5j0W1lvx0MD6h6SClL6Qs4HKdmBxl\n6jjC4hkYHVsLGO9omTZF2ERdOWmEPgy//OxTU+oMyE8niiweNdB6qKxWyBSi\nwgcdWjqRYloH3PtE/QK+YvT843/Y5W7+gTWGYc7Lve2ouYGiwi1s+Vvpt3ap\nmB8jggQHMIxhdxD1+3Dg5v1v0jGpM2fj2iYd3QAQgCnERM7uLsTL1ovO9YBy\nkiB0cP6XdZPPofDPrR09mODa3CpSD9ZSMI6boOVMxOXpAvtISVWnb6+llFtx\nX0leRhghEKGh/tKAIIJqfejRqMcw0sXT9JsAyZfx5hxppdsFe2G21W0k3mqF\n5bG4oKpmtSmqeUYOriXZKFpzRcI+me68Ag+SNQNQQbbPzjGAanBEXoDcZ5XT\nd8EvyIL7L/DQWrISGbBpilCQ7BfJMtxsz5QjBEA4l8v+gb9mV5IpJn/yr0Jw\nR2GA\r\n=fCuB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3cfbed34975d8f2990425af21414290a96e2240b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.3793a3143.0","@material/base":"11.0.0-canary.3793a3143.0","@material/shape":"11.0.0-canary.3793a3143.0","@material/theme":"11.0.0-canary.3793a3143.0","@material/floating-label":"11.0.0-canary.3793a3143.0","@material/feature-targeting":"11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.3793a3143.0_1618511548141_0.5503544193347445","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/notched-outline","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0879c2109b75505a3e32fee5574a5e48dd7d1a7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0-canary.bc104bae7.0.tgz","fileCount":34,"integrity":"sha512-y0A06s9gHV4cAxp3ldEblqsJ28w3scSmfQxtk/kNNoG3BPT4MU49hYlZXmX4zDN/1yvzsy+ozna6FIXfKxcojw==","signatures":[{"sig":"MEUCIBpKqVMJwn+CWqTp/FO4EEKRJ6QgaAxqqKg9yWE87ZFiAiEA058ei04Ui1kxDjM4lLvUesQ6r+pr176yYs4wI2wpTOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJhACRA9TVsSAnZWagAAKKwP/0lPCQhVgM7+itsRjRMv\nHuSxLFsv2KW43XUr/wdQPxKIfhe2cFk1QVNO8Uvo81VeekOmfFEs7Fn5zz/u\nRFcPF2/JPSVG4+SvmelDrslgEi5B1YxTLOW9mMi5K8udla5Bu4Bu2zWEpI8O\nBgNc/8eUH4g2J8DYMG7kigcVH7hGy/5N4+paNDEvuWOJI4DWXNplEXql69kV\nGKhnrhmIOqOgrAx9ApPPRRKSGYG5O2sLw8+0HjmLqwe94v8A5v8GOeDUEZ3V\nJtj562znJqHBQDwDUiq3lVt+JogBLkg4KrXAk1l4qEhV4XCYdqL+q3BS3RZz\npTfXBBjB9zZntrS+Yrnn26via1GyLbXkX20z5D/aaM/yiianf1l9KGRj+lym\nzNE8XaADOAUM6lzRu5qWLxsloS+gNH2CFIF5kXVjv9h7gQQIcwLnJFbX7ABI\nAUUHXCWnOA29QIc86IctRx74lTIyZpnUeO4XgcPnKB15tSfypSUNuWsmcD2n\nNPDte8+97RrEcyhM86O6vD8tO4WMozNsh7yXp1A/LaF2f/imkGWJKws8FF/v\nC9heClblvbFWnZwk+fvpIY+7Sd1O3aUiW1IHCltQaoLxviId9vT28bL6V8Al\n4YVltTCjzlNCnmeea+rYs0KL/k95DIWckoZQq4C50oIocOElrnCA4TeisdfI\nxS0H\r\n=73Fc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fefd0309d7bea91a430a20913f05f501364f2ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.bc104bae7.0","@material/base":"11.0.0-canary.bc104bae7.0","@material/shape":"11.0.0-canary.bc104bae7.0","@material/theme":"11.0.0-canary.bc104bae7.0","@material/floating-label":"11.0.0-canary.bc104bae7.0","@material/feature-targeting":"11.0.0-canary.bc104bae7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0-canary.bc104bae7.0_1618516032111_0.4007796080695021","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/notched-outline","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40f135097cf8adc4adb40604cd67ba08a17a7ca1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.3f342c3f4.0.tgz","fileCount":34,"integrity":"sha512-K01aRtBe1m/J/+isTQxMl7DkydK1ZCFTQzu9JxjC5fW9xMhZTv3SY3cXTcCMLifnmkVVOxmxb1QPRgnDVYPgHA==","signatures":[{"sig":"MEYCIQCjclDc8mkgqHb6Z8NGrKXBsXOGcyDKHI/aC1GNdYkQhQIhAMt+4k3nePWvjta7VH5B4FAk0SeurcV9j5n2PHLqtJ6X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMRUCRA9TVsSAnZWagAAcN0QAJo17WRAe9PVWQSS/FWf\nx6ZxzwESkPqlQxAPodyLtEI2kYivv0B6CqFUM1+xmQUwyCxLITpbJ5kWmsY+\nEXjI49la89YD+d4M8aBNaXqZJw+qu8IP8CzWuL1+iR4pMtcepsiHkd9hEsHL\nulNI/5VX5kCodgo0QCHMf5JQAOvV1OTsCZH1K5CJfQZpJm7gNyWi1ot5QDhH\n4jDZsRhAv0rE7X0e05cL5TmtPpZVPcfkX4VER7f2C6lVslljoFIFLDmK3c/r\npvWWClQWQBq2pLCpJKJ+O83NV6lQQvjCPJB2v992+I0O1ionmvJIHVFU0RA5\nwnNcUhwkX1y2f/bMdpqHMPc3y3I2wdfFoeuZ2c1ltiWR3NUm58a/50txQ9EI\nD4GQiHYnibt1hii/5QXagAK0Btf6jTwwSvqEJYI34uALYnAmTZyiV/lmebDr\n+WNH7HzZCREnA7LJnHPO9GaIEdwIjypH8eYohC8mtkzEXEJZd5ur6ev+NAro\n29ew0Ftao2qr1VbiBPTOSWFOi8pnaxhabCn3hTjqFZFgQQlTi93X28bRkRmY\nJw1l3t3B1YsqX/Rnvifnz3B2Slo8d4YMFqpDdsx8LC7R5iMbX5I20xk8RaVH\nNwu9DAnwo8c3kU04mc8vNtQfR8gOpi2sSL4+tq1eXamNWoH6x4XZRGy4mxOH\nl8Qd\r\n=lMjQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d82c002d3f314f99c3413389c77960016a48bfa7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3f342c3f4.0","@material/base":"12.0.0-canary.3f342c3f4.0","@material/shape":"12.0.0-canary.3f342c3f4.0","@material/theme":"12.0.0-canary.3f342c3f4.0","@material/floating-label":"12.0.0-canary.3f342c3f4.0","@material/feature-targeting":"12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.3f342c3f4.0_1618527315808_0.9481188218757939","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/notched-outline","version":"11.0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@11.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ea1c23203a4247d68e6588a3c80b88665860e2d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0.tgz","fileCount":33,"integrity":"sha512-GwYFIRA6raFljNARmEpIcIjHztjKD8wcDf+6xl1WezsprGd/Qdzq59/VX76y1et8ZkkL0+fE+4dEaVpCHq/e8A==","signatures":[{"sig":"MEUCIFq6EcMaPWbswrlD67y3gsHn888t3T7pP3k6pKVCbOdNAiEA2nTB+BP/cXOt1vliN9gAeqPEgSxdkfm2aFtvroyGHUo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMVHCRA9TVsSAnZWagAAugAQAKLdSxHcsynOganpviy6\ntXXVzdGJnpv/bKA3yJZHtozkL3SKlXIIJBLj9i4d1F3w0rmfGwqQSsR1nVRQ\nYx4BW3UahuWI8bW88G2ObxA4C/W9zEI2pJzuGsGOKza5kilk9/mGBzjldtmV\nP8cpyQHSnrE57hxNdy5nMm0AqUFiJA5p/wW/c2sPNEYBTrCSywpo7c/l4Hns\n6b19FSvAWwjrVppDLzWp9EfvFCNOC8PaAfl4/ttM9WQb7W2tWDmUCziRJwD3\n2UAqMOJHoJkNnLKA9L/fuEGt7gsgwmV31smATWt2iGcGdJwySpo196U01m6l\nRyD3vVemlvWZLpOQrBA2Dw8+/B9q/yjMce3p0uaQG3iUHyulhPAPYb6WLqOz\nkWJ2hPDR8vr1TTFAdaKYrA1KLdoTqin0OMBa9dwHrB4fkABIE/ttH0M99Cj3\nz1OYPU206PZ3qO67L9xG5hjv2dvz/pVH8bif92F1juZXiWAJpIyyAAHsHWkM\nvb6F/YFYXo6NXRm50byjRCvai71EO/HX+3EsHNNv7K86CE/Sn+DkyE4664Sp\nbyCMvdP7hh4dGPMK0R66HuQ6Tk4J9s4Ir8SCUXI3gI3OXpnBC88RxJSHjufP\nv/ykIP5zLdfGl37DKSgH/FIcsvIo4VF4ehOTUU20SL3vGBMGbjC8+3oRZ0Xw\nHc18\r\n=4ROl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","gitHead":"3f342c3f4715fd3587f327ce4ea6b5dd314c5c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"^11.0.0","@material/base":"^11.0.0","@material/shape":"^11.0.0","@material/theme":"^11.0.0","@material/floating-label":"^11.0.0","@material/feature-targeting":"^11.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_11.0.0_1618527558980_0.8227996665791133","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/notched-outline","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dc3bd94b055d0dae0d8ab4eb8e8b22cc37f31c9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.2ebfc5374.0.tgz","fileCount":34,"integrity":"sha512-rEx7QE3GjsedsK67G0hEKjzMlEOML84AsPNDlpds1b5dcDyROCeUk1d/+CjW7RtMO9I269ac648R1ab3HRmM8g==","signatures":[{"sig":"MEUCIGW0rYzHJOwkThU8ZcfYxTARasDtLIHkr/ghuKaaESMFAiEAxoC2mr1t8gN8sZVN6Zfj7o2ALA5eUWOpMT/hG0ffA9k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefeOCRA9TVsSAnZWagAAXpoQAJPtvtpSqbygWlT4nRfL\nNYBA/90Je5w8AmIhQ8/ZEv4Z8LKFGSZTu5ECskZJhe/qdKcFvL3Y86Bv9cJm\ngW/Hs6DhcH5T4TJBY449QR2RXjggmuCUrzt4gUzBF6lwLRLLpCkpwb/kG5RG\nW0olXfz7gvcP1fVGoJeqjH4qMc2SPlzdWhECjKVQ6Jo2ke/A8R5dK0fzaOeD\n5PJuSPGuFFx9B3oGRndyGrUFv3Xm2JyZ92elqirf59vbJK6iBEsTuMZ2UAvR\nnH2GxM025OcucEy3n1JB2MFizkFH7lGgpbQXkh5ieHSsql1qJ9YG6rqu5DO2\ncxZQiFJ8cvQFKRWux/JEKHurBIhN6STuFc2o4tMaQSbU3GpigCRJkZbaM5T8\nU4MJjS/znMOH83zIcP226muyKJ6oiHjXvVSp+Y3mdGBDnPj/GsI+nCWxm/JC\nvJoYS6VDTELAdSlw7Vxf5K+YxYGPAscMumvztriyRNkC1p2SVHGFjSpx4nRw\nQ7hnr5m6siYTD/BsYtqCT5xWM/28VBt25jO5mT853Z7EpX/jzgKbhrcywSg5\nG3iOLs+323aq+sBclvioWP4qFXysZy9R/jyH4hvYmxPvqlsPt0hyaQT6qTsP\nzvc311UbkfIYlE4nwH6rIb2aeYfk30HZVHVqOQ7Y47Q4rWBjXB9eVBlXwFnF\neF85\r\n=BJp7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"603bba9493212a7e1b6350d2f12e7488ae1d9594","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2ebfc5374.0","@material/base":"12.0.0-canary.2ebfc5374.0","@material/shape":"12.0.0-canary.2ebfc5374.0","@material/theme":"12.0.0-canary.2ebfc5374.0","@material/floating-label":"12.0.0-canary.2ebfc5374.0","@material/feature-targeting":"12.0.0-canary.2ebfc5374.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.2ebfc5374.0_1618605965547_0.4654811489330175","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/notched-outline","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.5631828e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9ece05b431425fc961c00a140c24c614ef3ffe0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.5631828e1.0.tgz","fileCount":34,"integrity":"sha512-J368w+1mQkM04NzRN2EP7qcvZcdFUiPjdpkAvzp779DU9ys2j4+2At1LrfiuKCwVX8nHk4FriiwgKli3jkrx0w==","signatures":[{"sig":"MEUCIQDY05kGiAmVXw5rKceFBVC9SB6CriN/veAc1WuCNQKPuQIgOTUV+/LK4BrwYsWmP14Ow+wF/iyKNuaDJKIV2A5eUoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepKnCRA9TVsSAnZWagAAaFUP/2JKUqt1oKma5b6Phr/Q\noHV2FyHGrH4SdjlzxpiZs3skMZYCERZ46lWNofGFFZEasVtWX35sJ4ZcrpEp\nxyagVjcjMNXsov7irUnX0FYMnSwkYBqgqn0ppGusMkGeHO6W5ObE0wMsfmG5\nb3035Rm+ACNrOa0zJoMDGgSJ5BJKLfc5uQEhDXQA+Az++/oP+goBEnJBwpEZ\nAIpGpNlIv9mLOR7r2K0d8ZIU1Y7q7NHgnfTLuqoQKRRrSRUecN8+RpnZcngE\nMku8wnOAsN80jW6bm4bnGSKUQZbYWLY5wtLDiMO8E6thkgMuCmgNYPnb+0Ur\na1wse+/IjBOsN3BImZ3VLo8BQXUcndeW6vUONZgPtH8RE/ounSv5LNWc28J2\n7xGfZrK7UK9qzvADRbwYqwOYb6TcOeJshYWR8APl5FjvmwMNiA2lQ9PauqMo\nkTqu52I2vX4jI8ySvEN5fCRyEF0M4OxqZsyuCYnExF1LtZTmCmBM2oATwfnL\nQiiSG6FowL+OJtQQWTAFibxnjyludY3s2+PRlpyagvxSpps5rKOaZVBbKyVN\nmooaVWRudp7v5D4Sjb/WGpEyvnZpXkOiV6QLyp62e8yaE+Dt+AmAo3Rm+JX7\nEha9O0Qu0JnvHSnilmaSX5H3S/2+GLcQ/yx8sovgnyHSGSYKCjAMSB7y+Yk/\nfJT+\r\n=rzKi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"497e1a2527ce0368b4038766ea4893675ced3523","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5631828e1.0","@material/base":"12.0.0-canary.5631828e1.0","@material/shape":"12.0.0-canary.5631828e1.0","@material/theme":"12.0.0-canary.5631828e1.0","@material/floating-label":"12.0.0-canary.5631828e1.0","@material/feature-targeting":"12.0.0-canary.5631828e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.5631828e1.0_1618645671434_0.7972905153507275","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/notched-outline","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.bd685395b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16cc1953ed557e74f22f65281924f436a10805ca","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.bd685395b.0.tgz","fileCount":34,"integrity":"sha512-FlHO2rUJLeINqGgNu1YPSMShK1wV7nOTZDeGthF73YkRbjcPgdZHZXCoJAsbdedjqSCIN/u0Mk952/vU5ZEAPA==","signatures":[{"sig":"MEUCIQC0PPOomN6Y3RH5im0BC+RWB70YkksDy3zURY72dKZ5vwIgIFB7oRJ3gmq+MNUi0g6j3w7INccX5F2wxBngSX6gNHo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc8FCRA9TVsSAnZWagAA5AoP/2sqR6ZUmCkjhp0UhaPw\nqJzi/1MeOlkqd4DW33jFrGBxSIG6pVcxzAt2N2VQ7knZYqSpMg8ifqnSH9l/\nsgL2M6L134rDd1fSEZiZWP5OlXCVvhHYB/PRKb098O5yexcznVLJUaMync4R\ngNx3NVKOnmlaxeo8umFRkzj1gDh25k84V4uQqqvzNYBr6oBuitpDkSOManNp\ntds5ql9AthL3VkMLtXSoRNWwevtcBI0EYiTnvlujJwkC4mlKj/kUAjeq1/lv\n68yhSJiVB1IIu/nTmU1pXToYl5uqXTntg6qpQxByNhhrtrdBR1AqUFNWj0IJ\nh5ar2/AOvpN04QQYPmohs2e9EJJQRUOiuTwUMWYFwm7PNbiXwK4RoUZgZunF\n6YArLEO7EZwRe15+fuaQqfVJx5DpDfhqFS2Jt79CZ6/7OV0i0dxWd99FO7Qx\na11hWnGfWOHEr1TYz8hntnKOzpLhFX88FOzxg3xO02IW2lX1XtFBqx18JcNn\nOu0EEVAT8d/M1S5LRSoQF4Oh2lVy6DJNNbdzfy6YDMTkhDviZbTQi5Thfcwk\nonpdTbqhpf6drkUMnVL7PqUJitsfaVis616ZKMDSBqXki2sw2CpSTp7lvF89\nqrrZRuzFbCLYM1Z+sLw9NhBwROFQeJt7jyUFTxZOMZV1Yk0V2g27CvW544ju\nQd7K\r\n=Jj8J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"69c7d9ec7c5de65144c3b2a9b283b6baf7af107a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.bd685395b.0","@material/base":"12.0.0-canary.bd685395b.0","@material/shape":"12.0.0-canary.bd685395b.0","@material/theme":"12.0.0-canary.bd685395b.0","@material/floating-label":"12.0.0-canary.bd685395b.0","@material/feature-targeting":"12.0.0-canary.bd685395b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.bd685395b.0_1618857733370_0.9077128422797462","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/notched-outline","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.b52196498.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea97d8099d6e83ef88c669fa44dc71731b197ca9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.b52196498.0.tgz","fileCount":34,"integrity":"sha512-p1SPSzn08vjhEmWeMu+26RdZbOfM5m6xorkDT/POnS1ylhMqVbNcYsLAl1IIXtlSQvBt0IXvZhbmtC08YBqn9g==","signatures":[{"sig":"MEUCIAgpLkoGXvmPmuYLeMiQTS74wjFdLa2Oil2hd2lAYvS/AiEAgwVt4s4UPP3OX/0pH/ZH5644NEC00njUnaDiOc4X9tE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeD3CRA9TVsSAnZWagAAXtMQAInlvrgdQxmwbZH8q1vH\nfHwVDWUD1+2hbSmuKgeZH2G6TDkh150YFIyKpBcxGPQKU+/S0R2BRCFsfi1a\ngu8BpjS0irVdbih/i7V+T8Rq7RbMIVQ9fprdmdZA2zTn2jM2ozWn7rdxQzO3\nf9e9ieNJQ0vxh4rrx9i6TG5C4hbBEkZoYTDBfiw625iD6hVOJfqekHQA/kej\nDrEWAY9YP60OKPQ8KbtAwxa45RYtdI2co95DWpWzjFZtnoHW+PSbRmjgfD9K\nc7kH/Ua/Fg+81jpUb9fFJVJQKsG18Ai43mhIcz9bMBGChSESsg6j5GKTEFIl\nqHaaF21sFHzlEdMoEE7DGGfUj9ZRD3krbEPulm/oIlp3qJgqQGF/SA2D3ctu\np2NHzrlgpSnSSqLZNBOWsGGMkCTCLPagmbXfSzmkvLWLrLGOOsrIsbGjZ1Ba\n1L7Elh6hCnp12CK9TYK6glcdgyDD7WUYgpqyLh4VJZgTP5CU2Hpir3iYWALr\nbZlVv4qrSLmISgX7DPVD8ypLP/rQGwt8aU/kvWsz04AAZHZYFLb7+Pgw+SoG\nYTjycn31FKI15ShzRA/+BBsLQf1cPFrNkCIg/IEyozqha2HydJG5gNiTHfr4\nB/FEhiIvjqLB+L3uepRKiWABKC2igwITxhMoQ+hCamuDtNn+PfZmS76F3V4b\nrbJf\r\n=aGcs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"953cfdd3bde4c66a4b6b90171d4ee702958ae1c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b52196498.0","@material/base":"12.0.0-canary.b52196498.0","@material/shape":"12.0.0-canary.b52196498.0","@material/theme":"12.0.0-canary.b52196498.0","@material/floating-label":"12.0.0-canary.b52196498.0","@material/feature-targeting":"12.0.0-canary.b52196498.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.b52196498.0_1618862326632_0.4488785272869351","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/notched-outline","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"946c12c081c7badee983bc091d16cd2607e22ad9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.8ba3e298c.0.tgz","fileCount":34,"integrity":"sha512-slCNKQySzZqjoZiIh545BmMx5Bee3q6aK9Dtk1tGUZ37IcfL8ThcF/SiLPcq6L9oINgRnDrVHGrObCjLOecc6Q==","signatures":[{"sig":"MEUCIArtiaQyjlr6JPs2To0L5d2QZFGoiMMFnGdEbx/SwtS4AiEA3nV0dd9BOfGvKq4redB6kOQr5IQu1m0/U3X+yUixVLA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDIkCRA9TVsSAnZWagAAI5AP/RCdrDzl/A1xc3vhzVe7\nl/TRUz/iR1VL6Sg/WoYl1cqjcfP5ZvpMhGJhXSYfM7oh6e8b2NnrfeATkgbC\n5LCEmUH5p4d++9nHsepUZH9IDJGfJmfdLwG8CE9YHQxWJE9vEAIBFeUkdA9X\n3H2ia3jLqxNmngUFTLrGGU/G1lCwoQueuZkv2zI+8+gq7Toep1oWp5Z6USfD\nDZfAHgQ1TSDMJPrTbphpiunt5qXQHPJYny3sP8ApAHOjdFjO0ND1dkR0v7gj\nFISGvEwvo7rbG3xbbpjrDz8RWi2j6OA8HHJT58a5yuFYBBVM3HTccJe67X2b\nrlf0C02KRa79SJaoHhzv+XRnHlK7m7zVxUzlAD8WXQ+ySU1Xpbb6yH82oNgv\nfjad+4OgrLl9LbPvSen2B8PGlJq/bRWitliC8Z+8KTRnOZxiq34Mdp+v7zN6\nQe6bTqCq+k1123O8yAdkwRvdZlrU4SdLp8lQprhWp6COBZPp/54XdK+L1WqJ\nY9eWsQ0OZK9vBt/Bma+HozoKdB/DFGXMkoowWdCDRsKufqVU1Tb1iJ5nviBz\nN4BNiGYAudNIMFmaGkUZuFiQVJq8+Z1Zn+BnHvAE+QBELsSOZfOrRYA+fg0b\nhlGU8+RvFY8kE2oYGNO5V3odMgK9Q0ZEV3zWH09Pn6e/UsnHxKxMf12lVMxE\nfDEn\r\n=kE6z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"206fcb6cb686d5de97867cb4e4005926e2a94501","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8ba3e298c.0","@material/base":"12.0.0-canary.8ba3e298c.0","@material/shape":"12.0.0-canary.8ba3e298c.0","@material/theme":"12.0.0-canary.8ba3e298c.0","@material/floating-label":"12.0.0-canary.8ba3e298c.0","@material/feature-targeting":"12.0.0-canary.8ba3e298c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.8ba3e298c.0_1619014180021_0.6101141219466901","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/notched-outline","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.c629eab71.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83ad6c26b30f5daf6e608fb63959d024ba91c0ea","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.c629eab71.0.tgz","fileCount":34,"integrity":"sha512-d7YCSpWiQlaD0s3/aQ0wxY0RctS+xbPQiPeWQmp2yWet1ff9G6/0efbJtseAtUvB/RPa43AUXQVALPIpdHD4kQ==","signatures":[{"sig":"MEUCIFOysZlOhPEp6ojKAahFwUFkzJXlf5XAJbMyMNMpx3NPAiEAqaBmdAAY4KdUZAqdpH+mk8q4YnKYaE/UJmFV5C8wwcI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIPXCRA9TVsSAnZWagAAQ+IQAJ5RPo587RJfisoX77k/\nQ1wTCN2jQJ2nx8D7OvuSnBAroDA5BiiUp2PALr4Kxj+MtpSXslAJHUEOhKbz\n9JO8FYppO58tMNNXiLZR+VrzTHyhjYA+BxH95jXHgxdri5ewGZoSNg+x/nQM\nAwrqR4RoSjN6I9D0b3MJttsHGRNC133H1+DHnOapKU71b9lmvqXiBKA/kHEQ\nLCVM85IegS7xTbP9eG7izPzCKWrqpGCqcHR/Y22/v6TNmwwhM7SLzBHsrV1R\n1s69Mi6ZLC2Qs+kaMXsDctKuXSEoU0fm8gE2Z5CwDNYBIskJyhC0Q8OeHct2\n1wNvA0zKuplrwn2xGq0Nd6RbPKf5aFEPMxodeZe4tLiWcGSVeGeWc80WK86b\ndCOq8QzR+GYy2fwKtNJt9eUpBj5y2MUTN+EIP4XHaXjLc25sJ5UNM4+ZYPGt\nSNfyk+Dyd2QJcycZEicfClNpb9GBqy9HUdxZNeRu7WZT4/LO+SrADwf5Ksxh\newVly01SZ7o9e0Ba1w23sNSQ1mNdTTWFXhdlOeKKOzpBSFXg8wV1EeO3l9yU\nEvHaIwUsfss1D1NreAnA05WpzkIvwDzPfNFVCYmht4iPR2ZUZHwgTiWDjn+P\nLwwuXR0VtslF47FzPgQUW/n5prXKu4BWgpU9yx6u3iDSLOuhfyq+0iCQ0pl/\nAJ4n\r\n=HC4X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"13ae4a821cd20abff4520de3f38c689af7cd0edc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c629eab71.0","@material/base":"12.0.0-canary.c629eab71.0","@material/shape":"12.0.0-canary.c629eab71.0","@material/theme":"12.0.0-canary.c629eab71.0","@material/floating-label":"12.0.0-canary.c629eab71.0","@material/feature-targeting":"12.0.0-canary.c629eab71.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.c629eab71.0_1619035094849_0.6145815483933672","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/notched-outline","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61facca7c1592e929b529ba789e869f675367ad2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.8ace3b810.0.tgz","fileCount":34,"integrity":"sha512-GNlu1JAU9HcaEzJePN+xwR89f9c5HNpRu54dL3AnDzkJvghc6RW0+J7EogKM6ecvq/K7eLbieHQ2ErKSzdHezQ==","signatures":[{"sig":"MEQCIGsSk5DwdKpVdK9cpXct+FipA+Qq0hsHxW67dEr2fXN1AiBcAaIMqqfLVGhjd8Y7gEy+K69Tv79vPLcMbX1y0e6puw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI1cCRA9TVsSAnZWagAApHoQAIrASQGYZTZ6mz97rDHp\nrBZEShSlr2stn8mQ7x4SKSFbKcGSllbF7w2ggHWVF9sH+CyzLjaS2u4mwhMx\n563DN0ZVT3NAfffETWcHZVuUAVxO/ZLKhvZRueMXwISiHMr37ZUIUK4ywlCM\nMzh0bvfExdJ4DGpnK+1GT5mC3QNNdUomWNbEcu6nuqp04oe8XudKagYyJfP1\nGdIGkDdK7MznJqDNmvZb4An573Cq+5p0AULKAQSa9/N2v9M5BaI+Vkd7MeTv\nabl93K67IsRvP4Hu4Q9VK04HGd96P5PXi2Ralq9SwGp+nsICudtLtNfeVsb8\n4mY9sX8pZghvgH4x8kV6WNXr981ppEonHjwyb6TuYKOe+z0fwwQ0yRapPX8q\npJteiKY2sOaIGOcx2ietxcJ8V9JuJzR1j+wJzVWy61KnaRdXlRLg7iERhmdt\nx7y8FXAQaYoLn9Ii7LVmYzburqkTHayjY6LzXm5/mFonrzckevLGMxJObcDq\nLyIl8FfHzpgCahPQgcApex+Ob8d0CB4WBE3H5skRKNV9X4pdVMcvLTeLJYC2\n6FuxS3CwuS8ddfP6hVGwCxOjVVFBJI/nzgfOjVDDdn9AlC+xLrAbMMIhTGeY\nM8BEloKuNqosiA1espej+5GoUbwSldPfNUJuIoXv97YB+NqYw+qsYb7gipHQ\ncX9O\r\n=PTnF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"622173e8e2308a6104e06bf943b6423381a17e5e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8ace3b810.0","@material/base":"12.0.0-canary.8ace3b810.0","@material/shape":"12.0.0-canary.8ace3b810.0","@material/theme":"12.0.0-canary.8ace3b810.0","@material/floating-label":"12.0.0-canary.8ace3b810.0","@material/feature-targeting":"12.0.0-canary.8ace3b810.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.8ace3b810.0_1619037532060_0.49696675981020744","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/notched-outline","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db4c39f64a4cbf7fcf03248d19bca69864c1567a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.70beaf42d.0.tgz","fileCount":34,"integrity":"sha512-gbnMcCPMgfC1aemjKVuwe+B00/XtGNM5AWwB0we1YFRxkSLraG0GcXiMbw8cuMDLGljsN6k02Z10DeIyr75LPw==","signatures":[{"sig":"MEUCIQDUtfOowToansuNaEAvZE5UOG7CRhg3J3GLh5Eh4tqVGQIgbl+SxziVvSOn9pVh1JkHeNfHHHeFcJTqsoVRY/RVyo4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggJAQCRA9TVsSAnZWagAArD4QAJBZy2UEIX/YJ2qlWji3\nwKzjA8T9sGyGvaT4jpcTeAGgD2UzOZPg/gHSWscXUAbwBUw1PiuryTyLc1ZJ\nSKJMEN2eBWbyWe1XWPE9S2uOgVLQCsZ+OPQBL7UuFwTjaqvn4GMzCdM7A9MM\nbRlKO467wEC4D1lXOfXWyVqgOX3op/ilxy7KxzBHbKt91JMqlVKmUBdSi1Gd\npmhYZ0Yx4gRI+RsK5C+fGjPawkRb38a1E/f3RECU9Py4Ebo38qKX31gE3P3j\n37sI+9kt6pz9XN/gI+uQ2da+vpDucp/mz4bJNDqgYqwvZeRgkp/ZZhyivNsS\nZ0vd/Pp85eIplkrdVDqjV8Yu0sPc7ffn1VeZ6R0MOZ8w2jqXl6+BcZJdED56\nM4bVwPg96bf96xnLFHxgM1PM+0WWENRCJnfmVP0NFnOXsbYUHcF6LwgR4FO2\nhZ+8a5QZQHV8Q0X12fY55YPLAGTCzTgGzxM9Hanx8P1tqm6A7l8F1HokRl2K\nITCDzA2n7GVABvL0H0AbJZiMa6LVyDqre4giiBfeGyctPWB0x08gpz0QW8/w\n7LzCCT2cGULQ1xcQLxmqKYcwab32+qJH5ixdBG5POpAxfRh4leeKP6OQy7hS\nnkHkWyPswHSpI/82BUTG+/HKTyn3ktqinKO9h5pZrOfntp+IPbdZnzbs29vl\nmHJV\r\n=MTKC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c5b29092fb8fcd0102b908417d8ed3d61c3448f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.70beaf42d.0","@material/base":"12.0.0-canary.70beaf42d.0","@material/shape":"12.0.0-canary.70beaf42d.0","@material/theme":"12.0.0-canary.70beaf42d.0","@material/floating-label":"12.0.0-canary.70beaf42d.0","@material/feature-targeting":"12.0.0-canary.70beaf42d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.70beaf42d.0_1619038224503_0.9411823149316922","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/notched-outline","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.cad489689.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d66876c5f4ff5148e873c7836e00e48a549c1602","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.cad489689.0.tgz","fileCount":34,"integrity":"sha512-MDabfE9Aysd+Jm9VrmEppAtvlTAu6KZhnmoXpN6YRf+aWLz91RT8qdAIYHbFiqGeVOi0r0wEOE7R0J7GgZl26A==","signatures":[{"sig":"MEUCIQCoxUeIu44Dni7lHnxC8QrCJErvBPS3quSGv865/MOfmAIgHsF5uLvRilDcZabGhVlGswNnpkqcxJBkYfTu2PUwW04=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggaldCRA9TVsSAnZWagAAs2gP/3oKx+QYAw+9zij/VYLi\nL42pPq/E17xuwhA5brQeum8ym1rL24ac+i5l8BdCqA1oJ81SAmDNd/Ca5vFR\nGpFvGuRI0tvKlp7qdQQ3w94YqIJy/RU6/RLGqrwL8VhOxFw19pXmUBonaXV1\nxIX+3MK9HiaTeZ15Gp6Qz1DYg003OeRxzMmadtBj2W1hnpNJLQnEeMu03nrQ\nyfsOKkFOTQ9Qsh8ZyhhiovUQcwSG1Z6L447BJ3MbZCf+AEsgh6fJrPEV5amO\n+63A//CpVSfbhDOkg97tI6dAZiE1Gn2MXGxBA5JgQkB2EdKkTBpniMZOFmJD\n5Fuwa9YzAjLUAftdpmNeUR0aV2cicVfIytBhub06tgWm1CAoUd0e8+QQ4TP/\nrrB5ZgmQbxsGdPp+e8Q1JvLJ3pwlKDt4ws3MieRsjOAu9wN+KBNj0fVhRAv9\nADQCwEF5E5spjuMQupPi6XDhusqYe2BVN1zify0R5bF2HGoN4e7Y4M6ccwFA\nuSIgA82p6dJ4Bz+wQRoWL1cHZlmp6pxEjyZgivAG5thsAfj2GhxdRYY+Q/SR\nBP5Bcr+NBZbPyLyR236spT49eH2+wY0tK5TB1h7OPNUWoB0QKCj2VXjiXjNo\nIicaYdk5HTybt/ZPXCxTOxr+EgDZU77BgCh0HQ/IOduYF838pyWFGFbXdfq3\nmOju\r\n=mbY6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3e5c20e059b33965b63d0073bed7e300c57d5781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cad489689.0","@material/base":"12.0.0-canary.cad489689.0","@material/shape":"12.0.0-canary.cad489689.0","@material/theme":"12.0.0-canary.cad489689.0","@material/floating-label":"12.0.0-canary.cad489689.0","@material/feature-targeting":"12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.cad489689.0_1619110237252_0.5140044465340259","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/notched-outline","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.d928692b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc5865daec1abc45dc635215da0dc9964417d601","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.d928692b5.0.tgz","fileCount":34,"integrity":"sha512-1dWnuTo6/35xuzOUCns0ZWMcq5b2aIh7y8bEJ2Co7HTgUDxnbBbSH8vHmsuqK8o/Hmo197bbKzeODNeD8GaqEA==","signatures":[{"sig":"MEUCIQCPNav7ssznl08YkM54b8juUSeNywhDM380GmE4N6ww1gIgetQsYXUe0TgjbGcMJRcy7EOqpaAvKQVIQPIrThx9TUA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwVmCRA9TVsSAnZWagAA0+sP/ij4JiT53XgGgJPkvK77\nlPZ3eT2D8kC4LBBcjkW1YtqlgBNynlvj/eLbNKwObBuHdKvcCi9uZG6KPp2b\nNZczbMVomYWtsrt3HjbBk1IVFRA9/djhb7spP6bP31b3f60o3UASnOhObz9l\n4WDZKdFSl0h/ht0jtUChhnHuxIwCMYjSpVHoxOQaMK+ar37QTb6g2o8S2B7G\nXbRHWVr3WDMMLz0w1pPcbaGibi2f5ZkqtHG6X5LGRnbMGHvXHgAqj3iWd0y3\nT9EsyTsbJQVMXEmJcrMixdPF8lIG6mqahqQ/GDDmEpvD5PwkCkSl5AwVdkfi\n4kCF8yFm1ZCqX0HY/xyVIPuoB01l+SSCuWpUw3JcmLanfMJZ8IJYw/AopCgN\nuPHDoY7Dm271QCtQNeWPd8AiexpSSVjqgnNSHuC6tNk7jPV2ATzdig20CVGa\n7I/hprg/GSfjWyGXOKTq72dUjaOcfKExeRc9sOQkAJGfJtAvMDgWepQRsygp\ntqQdfp8pE1jQyVKsA7qGPFBwVW6La/7IeqYVr2qfzDYiyKXfL4/dtVab1Y7Y\nhR2cYH+PEluqlvtDL+dhhYHZ63bdm54m2EDxTon8hDd2MvNh+pikQLAGUjNT\n3/tlo3Ak5qyDfmypBXM6399yGTFy0B9AdeNMKYDuDGptnijg5zzQqjUtsuFh\natNG\r\n=h3VJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ced6a0237d36ed84c4d277fc25a11d9453108e12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d928692b5.0","@material/base":"12.0.0-canary.d928692b5.0","@material/shape":"12.0.0-canary.d928692b5.0","@material/theme":"12.0.0-canary.d928692b5.0","@material/floating-label":"12.0.0-canary.d928692b5.0","@material/feature-targeting":"12.0.0-canary.d928692b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.d928692b5.0_1619199333865_0.17711535334241035","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/notched-outline","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad25beaa5fd881af3731361ea4c01e0a7e54d7b6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.8f68de8f3.0.tgz","fileCount":34,"integrity":"sha512-LnyWDh2Xi40BfpvSaderUenHR7Mu2pa9SfPMPLpUw75MrWoDqiv8Uua1fjC6PLbQPPfGCvmQ6E5eQveMrzQKSg==","signatures":[{"sig":"MEQCIFQyOIS35S/6xiLIrOWw2OO6eW3CrodoLvp952UDz6oNAiAT4yfNQrWSC7x6hgMyzjVNpBft941tZuF7O/j5pOeumA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw51CRA9TVsSAnZWagAA9cMP/1aFp5j3BWQeAW3tycm8\nhEMO/VzG+ij92Ssb0Rz8xC5zosvNT7x83IsrCvwPvx76xVOxiRWH+oewARdf\nxJb4SlrPl6xmkl41/crXA9Xqiy6jZ4x2lW9l6tmExJX4wo4zUfPS0RcVZBh0\n/RyoeqRZVLLv1us7EFCQfCkm2azRT4C1hla8UOVKqU3049XSDsp086qNFj2Q\nZqdrLdL1MTXJdJjmnUI8ugmqY9jXY+753DYVzdh/km0BwKAVX192Ih4lAKh6\nzCOtfXvApr+RUGujuKMzZE+Gznd0DUQtSQaBPXNQLgPOEzCKsPuvVjppgiL4\n7EseLCBXNjlVCTno6VCKMljsm16CnBDU0JIbSV9qaGLK4XnePyve7ApPcZEN\nPK4KfIW4zj+RbHq/m2nFOg5ML9m2itwlnu1lSBB4KAKj8vnQEQmxz8yoxUB8\n+NrQFH6TWDtgT66mO78VEjXgNlTp870br94i5+2OHxTvyQz5teA+fjmU4fn/\nSI0MY20bUhbztixfokVtjXGsAmpZoxSF99J7pW7QvkAqKr1ye32/wAMiCtaQ\nXR5p+22vt0+1hWBBFQHWNaMyUlHMcokqdSGdMsnrzaNJUsGLJl3R/dVJPYdM\nYzDQHAVfZlKMjae8cGpnkpmMR8PSOyJgHtIP9dhxWwO9mvDkI7iaQzSEAOer\nlEw7\r\n=uqKi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5bf06e910f57a544c428d7559d72d5fc2a5f30e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8f68de8f3.0","@material/base":"12.0.0-canary.8f68de8f3.0","@material/shape":"12.0.0-canary.8f68de8f3.0","@material/theme":"12.0.0-canary.8f68de8f3.0","@material/floating-label":"12.0.0-canary.8f68de8f3.0","@material/feature-targeting":"12.0.0-canary.8f68de8f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.8f68de8f3.0_1619201653172_0.4896080208939748","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/notched-outline","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.05753cf77.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cde3bf22ffbef6cdc0ee6cbec2177dd3ead59032","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.05753cf77.0.tgz","fileCount":34,"integrity":"sha512-7dlzSMRF74i5OZuijhqcuHiNEP076bZ2OEoZTzzGKZ8s83bAYoB9tIs7BJMIXh3Zxbo1Nz083khoTbX2WcxzpQ==","signatures":[{"sig":"MEUCIQCyDYd37lsUxrfiDj6KhvY/YP34TkT1tmydnu+tw8kE6AIgKW1ZRpK26MzJ1qGZMGxpIrvURXtQN7Njc6CbcCn1phU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1vHCRA9TVsSAnZWagAA6S8P/2/nemmPVNwLDwqC/qJi\n7rD5Wl2KrcHwcwK4z4/IZdjF3NdoQlRzbBSYlKmO3zWa3xKxuk0IbSXF7Xcs\nHWLsEQASomwEuMC9uN6fEyQlzrIUQ0q96u1QbmF8EUUQl9wZQg2uuCdEBSG0\nout3vY0p4vE6GV5Stuww0QXtlcN5AjyHsVb6qowUlooLS4ctS+AcqC1TObM9\nVKRh+1S5adSq9cg4pK2HmEYfd14Ibrt/nPiwxjsRXF291gC6Fu2sWb4q/3SH\ntpLF1OTMDw8ZEZuLcrCqQfFeqbWgD5Ugo6UCKeNrPQ+USsSuPail9bODK+1X\n2gSiMzTNVBZGHgMauVRh5MswLbHzXmXknt6WaxFR/jHtB0H8tRY7oo1KK7O1\nj311+/OZnUFR+22kI3QKRJTj4HH4Z3oJqWLvA6QpLOzS/JqJzZplY1wUbk+5\npUNJ3CUMqa716alNeEhYsRJ12M8/d9SbaYMa8VUaJAyJvd3Et6OYYVHgIz4J\nAPjZHPRPrpK5UhweW9oG6EJMrLC5PlAousVobuuG1mkcD6ruWY4paeOi5BL2\nvQnvAwVJz/FOrtXR7sfCBVXOG5TgoixgnhraTTTelMDThVX3smO72Kd4W2NS\nLJek/5oDWdnPAtaufjTps/ftdsNU5RVjSNeGaV9v/qlTSjxHZ5qAO9/0y5gx\nq+F5\r\n=gGj6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3557c74d7c4f9400f0a8d2c88bc2610c1d600199","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.05753cf77.0","@material/base":"12.0.0-canary.05753cf77.0","@material/shape":"12.0.0-canary.05753cf77.0","@material/theme":"12.0.0-canary.05753cf77.0","@material/floating-label":"12.0.0-canary.05753cf77.0","@material/feature-targeting":"12.0.0-canary.05753cf77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.05753cf77.0_1619221447307_0.9919774794263347","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/notched-outline","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d1c6f6e2d3657673c0644964400d89dae624922","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.ef43e6d96.0.tgz","fileCount":34,"integrity":"sha512-Cq/uyOUVLHMDgJ5opkuDmrZFfT1dSMgWeOvBPnFJUgiz3XuKfGn8OgS95boR4tydWvqi2z1AuWRXH3gYFUKhiQ==","signatures":[{"sig":"MEUCIBUsuofhVRy/0zXDW/tfPMfAp9bu73iX922/4CyPCC5QAiEAnDcdo1CxiEH6X0MPvggGoeBhnqFRGW1XE+//yLNAem8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg11ECRA9TVsSAnZWagAAS0gQAISXFep88F5OG5OZrwcX\nvtDkSZRwUMQGvnVDthupzMapXZbvmBIohw6lrB2kq+ILw4y6S6sZZzfn5Xae\nRy/+VPww8KEGipmvNdpmrWUEsX24o5Du8vCACHntTC6Iovn6S1KFqH9dGmHA\ngUmEkoZeXXbQlYWzeVVe67vj6GxTSZJy6d+M7PbuoRPwMEX5eirEtBOZ/rad\n4JBVUdkJ00PBV0HkQLgpxR1NSnHJW/8cKV2nyBeEA4KwDsAbjJ5bw6OmcWJz\no0c5+oKxGlwz3IoZJL9LgjFZJVOq/cd/m63EGtZOGYktDDaHpzXY47REkC9V\nZXRr9MP1dkk6sm/oGJ9DrugqQIouAGAdmrn48s+sLZwDXQqSj/yZ9gidtPZA\nomNziRRxjQWyjKgvdy6bGtWRzgm2Ip33bB8v6Z9PgUDedO3r0B/JjbG0tp+T\ntQJv57njMIWzV46Qn+uOquABdHMstkb/IZ1RZm15sySin1gWga/LIb1AZB5Z\nUPuYg+5G0E/lAkRwIYg9K/yIxaptPOWIny5iPrh2mnt1QHu+RA4SVwx07+CQ\nGiGj8RbuSCbc1qXE7P37gLllpPEgIIUmahgCUTuqrBsGF92SqykSq76wn0WV\n8LCPAYPZ+PI56rDX4V2IGq4nOJW15N8ozyhCDlJBXHvk+MnaflCgl4WZIE36\nqCNv\r\n=Nw2T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bf61e37f943b49cb1c3287501ad6fc31f8c88687","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ef43e6d96.0","@material/base":"12.0.0-canary.ef43e6d96.0","@material/shape":"12.0.0-canary.ef43e6d96.0","@material/theme":"12.0.0-canary.ef43e6d96.0","@material/floating-label":"12.0.0-canary.ef43e6d96.0","@material/feature-targeting":"12.0.0-canary.ef43e6d96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.ef43e6d96.0_1619221827689_0.79721191324127","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/notched-outline","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2292652107fbbe806234172ee419028d96805fe","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.197f64fa2.0.tgz","fileCount":34,"integrity":"sha512-umiCYiFLksDctAqPNYPSfl80opaohZNZxdkjZZrYAS4h31lhDhMiZDLe1bB3jXr9xGPZnT4WiB5wAr18h4OHRg==","signatures":[{"sig":"MEYCIQDpvxgMLWHcqyYF2Z7A5at6JSSNyiTKbT9lfU/RIzSSugIhAILnfKhHYdp7rS1WFqV/Uzp0G0VRZY5mGdcoIaVQZpFO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvQfCRA9TVsSAnZWagAAs00P/0mtlR+yw4fZgSeyE8H/\n1OPVfrWSpcSWa8GfcDLosDNPKWM4s1AVYRKIrNDScKXJzhn7RxdUDIGQe8xY\nNn1fzYFjFC9wx/gBlbLjDPeUXi5P6RhRUweHIeWVoLPWXjZsF1jae2bdSwLZ\n9nD0CJNdDibj4WzXJOZrMu2bYcP4S4qRLvQ86j/G9WiH7psHIbEr1aKsic1j\nkZjl6bJ4UC2Ut3pVaZ3LTruCWrHFcNMDzNaBL21MKcqErreuGUeuh90bd4J2\nMA52Rs8KazO77hQTrLLLSrQZ3OWjKMa+adhJgIdM5uq09h4dJpykfh529x2A\nsDUo9uuMYsI1PIMxD4PmzUkBPtbbJSeggh/cX49AKJb7Pxbxsx5rff5viPyC\nMUio28VIcUoB8VuK0F3Xz2muG4jlep1NXjZ6zsc7HEARaAPiPKL1zqF8NPP+\njY+DkE/Fgov7Ns2+jzInsmHNfD8GfrJAdzOihzDJ2x5xTL05gxyuQ7qnACEq\nSrrL7a/ONNJNtG+uoAkBhgZMWfXixLF7L8ORgMYcMwHJJCVmd5vkJSoXNGsl\nelXp/jcHkuQGH3+Kb8dc8PItK1Mz8S9DmomySJXcV93/igHMnryNvkkRI5zV\nsiLCAQuGNyOWJuCLVeJwntKSofndgsNz2nqdjhzXrBqtRhFap6r5LjjiyRmN\n3W3J\r\n=9zgc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8ddcd6186c353b0d99439cebca29eb95eebc705d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.197f64fa2.0","@material/base":"12.0.0-canary.197f64fa2.0","@material/shape":"12.0.0-canary.197f64fa2.0","@material/theme":"12.0.0-canary.197f64fa2.0","@material/floating-label":"12.0.0-canary.197f64fa2.0","@material/feature-targeting":"12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.197f64fa2.0_1619457055114_0.6833360279712837","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/notched-outline","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a33ca15e40ba46fdbc9c7f7b5a0636913899954a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":34,"integrity":"sha512-V8H1ZqtmUuNb/scYfBWtOcwIQ5dkCOYfILAlw5zQWydg7GECDWKDdCv8fvEI5scpkxDT4rReQfzt/H5MjfXJ8Q==","signatures":[{"sig":"MEUCIQCvP4kCMbwPlcr+5s3Qz4eCSiPlFl+2Rp6yuV/fYGsY/AIgKjIaW/tGFOhx+3ygcuA7BOewdsp1YkTWK00ssfqyOhE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2b2CRA9TVsSAnZWagAA/kMP/i8CSGROiFp1IUDiR6YY\nYojCp9ow/7svNnKoVd/uTgjRHheYygpVPEk9nqQg60TFQaFId4TgBpY8hvmj\nkVykHBso6YFL3xLsLJMPhiP1gxqIWhbz/wWE1f7CGMo1cvPfKwVqC2EmjP1p\n2wHQv6pX4+ERPJwOgb8f9crcDJbB96OXfn1wvW25ODg0H002JvJBTins+v7n\nTY2lJ4WhgY06mXEzMuO0FV4bB9+5h8oDtf1fn2ipTfub4T+urx3ATQLSjieX\niGX0Vrva9c40kdHu3z7PeywrJs0fe/sDsS1ASpXo7L6eOzrN5PQN/+iSUamE\ncWjBlVMYiYHQ8hkQlaXfwy/+6Le3im+Q9KCH9VeGjqwFtfHc/tHgR9fOumQG\n6YJA8FHAbJq2BOloIB3FWywFG2C1FJv2ORcWc1iFR4dOkHfyCpFM4L9abg4Q\nW9o7B0YP6Tb7SIV/RKCIkgsXofN7j0Iaa54vKn1NyaDzqWHDa097sTAdhoi+\nW3n43Ik54ouYWUlSlzzbufy7LmF6E2EA9pNC3M2PGa1rcuKSbaLJwr1DU44u\nnzHKp7mQzzEp6ODkP2flhqdQFtVwSakueA9sAbNIL12Zz94cLmeSdlsw+/li\nWqnqGFZcgEWkQ+NlYv9hhZLGRk01Jsw/7iZjfn+utGbdIKbUyDms2CywAeBJ\nrXS+\r\n=6gWa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ed8a5f8b1756d56e3973815a51d6fc7e51c366ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.55ad2d7d8.0","@material/base":"12.0.0-canary.55ad2d7d8.0","@material/shape":"12.0.0-canary.55ad2d7d8.0","@material/theme":"12.0.0-canary.55ad2d7d8.0","@material/floating-label":"12.0.0-canary.55ad2d7d8.0","@material/feature-targeting":"12.0.0-canary.55ad2d7d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.55ad2d7d8.0_1619486454026_0.8265928689298101","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/notched-outline","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bb369e4235332f8029e7b00a0fef309d19f0af3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.ec4ac5234.0.tgz","fileCount":34,"integrity":"sha512-9lSH7+o8iy0aT10azBPfW16FCxf944ARCRPBInBm1bceRNQZRCxV252GXEmfOINDbVa73aZzi8KKhS0kmBjJ7g==","signatures":[{"sig":"MEQCIE0kTACmtIYnyujaCHIjs5C9rJVMOSY0d9cTu3tExd74AiAAk31AosJDzn+7M9Oclj2z8dvHY2g2Gk6gXVLbzELdCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8RqCRA9TVsSAnZWagAA3LEP/3jiPXzMUcyJHgwj8Cud\nH4ITrCVK2EGPK7n0ZWyvthgjlmWvzly8PM736ss+OZGj03RZ2BtpWA1KIgCp\nSuc0nhYC6D6tatahYfuiKGbRv6UKhOBCU3h1wT21Wk6E98EJnZcCkdG3EPkL\nG722tQ5VKCHF6ASL4Ddvedu2aPgVQDYPwWH1MVfBxlLVV75Fpop7wjfHcNAR\nDBBPutpid9IFuGGq/KFf7H3AecoDUp+QAg5lvWSz6t4wm6VFISw6LMajR9zu\n3mqTMtZ94bwGYi+OpErwTrqy3rQZIK9z/VRPDwK+++wlpBRYRxyEBayuVJhJ\n+YZLs1pbT7y0FaO0Mnn9LW/53amdAHuD3gXZ0E4EMpR7ufmjgS18uJ5HFzge\nVPKyqoT8tRMwe0q+1oB6725cABQGwoJ0yTUprI90ZFXm3uOGv4PxyH0gI1LO\nsxRtNyARz4KHfJKF3f6xAuef+aOh4xMPPKHIEtbFc3vCHEruyZyoJqW7Ze7N\nLLvwKM925LbLfDVZukq+aA8pKJMFSFgFN+Kt0B9a5HnfD5xkWoph5s7OaTmp\n6QGpmlI2KPlQeS7/2QrxXPrkCopDxj2rtdHLfKziFfs7UeXkVwGZ3bbfTpg4\nzICR103ZGnvI4vykVDs6njtb1ZbiR8v8yDCdSu3ZlxIdv2G0u8/F3CryLPAm\nL3ap\r\n=vOay\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b189e0be8deb45b4e94790f21c377c3884f551b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ec4ac5234.0","@material/base":"12.0.0-canary.ec4ac5234.0","@material/shape":"12.0.0-canary.ec4ac5234.0","@material/theme":"12.0.0-canary.ec4ac5234.0","@material/floating-label":"12.0.0-canary.ec4ac5234.0","@material/feature-targeting":"12.0.0-canary.ec4ac5234.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.ec4ac5234.0_1619510377991_0.23704959223827804","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/notched-outline","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28cb571ba0acb3b3264d74c79cd1fc5802b85347","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.b0579acdb.0.tgz","fileCount":34,"integrity":"sha512-XjFf8lJtSX6mf8SlXB2+3GSWt1W1m/ZxoZVsq0cSi1LE9C0iSlS5TtHGc9o+fpcHvaBgK6xakLFcl8278/Qh3g==","signatures":[{"sig":"MEUCIQCdURraZfxUIWA6ZN8irSARSXK6y637REmhowSb5R/reQIgN7RfVyQ6h7z/pxfUpB8ufk9miqS9sEccV+bwzJnBHUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh81LCRA9TVsSAnZWagAAJkgP/2Mt2jewtr32+GhQsVeF\n8PNzqWHiSPeHPwBQ8e3aUEglyhaCffTEDTYvXnEmQbCWQWwSXLDL5FFi/2b6\nikPY+Ggf4pc47700J4V9Bav5QSs+1pXeial/ehf9NY+wjg5rPdNOYHG9IDqr\n2J1ST1yZDzFfkwMFNu9KbuNIZNGxurU9x09cOp4rNzD8lICn/mx2DwTEMtVX\nCkelr9X3Mtdvlg3AKuQXwQqNhGQtAWZTgaZtTBl4sjF5bi924btXkLRnZE12\nRDyoO93p8nGLwOMmROXU9932ISBN3Kj3AlhvJYysJFT1VD0DO2hQ0YF/gigh\naTYmdFyw2I0ybxiLWJlr4vwSvmGnEBnP+hD/FgHCxON0wApwHOBfeKkFRoQq\n5jGGAog6XFW4ObID8otVBMnX8zz5CH2wvrAFDMRIXpZrM5EFfjxmaAHNEOKa\nMq3QIu5IVN+zyI2GdAjvZIL88gkaNDztqvaDEZmri+vfB/GEBGsi+DQbaT0h\nkgVag0xQGOcVQBunfzbTRonUbo6zhQT7bNEuImci00isiZTS089hdyHki8mY\nJYYVjFmQ4l2YC2QX9vrhhP7sPX+JOsi5bquYPA4haDGgSQ4eZK1mxrnTQSRb\nfC3ZuPX1XIQspwqrJdy2Sg0aml64u8ho2A6kvYh9TRSVLLiXwXJwJVBIP5eh\nHgcl\r\n=gmCl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d1f704610766e7d0c46b8a40beb1848121809a41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b0579acdb.0","@material/base":"12.0.0-canary.b0579acdb.0","@material/shape":"12.0.0-canary.b0579acdb.0","@material/theme":"12.0.0-canary.b0579acdb.0","@material/floating-label":"12.0.0-canary.b0579acdb.0","@material/feature-targeting":"12.0.0-canary.b0579acdb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.b0579acdb.0_1619512651451_0.8220419174512843","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/notched-outline","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0223b2627f49fe7aaf0980cb73c0461125d706f0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":34,"integrity":"sha512-k4HsBaH07scJ9w1UmvGCM1dLRxca8zCWEFyiv1OETnUcKDSQYu2MMsY5tv36N8JNigOxlMeShpguzY3WP5/Jaw==","signatures":[{"sig":"MEUCIDUcWmCV0ZMfISDcHFRhrNqaE2IPEa7W3oUQiJEBmmGlAiEAgt8u7leZCykpb9nUHAXrws5StKv6UrgZR6JXb1iY/OQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHsNCRA9TVsSAnZWagAAas0P/2dbHf56rVNWkEMvX96X\n6R8MLbS/XqMFWbrUQyljUc5NL2ZSMYhiyH0f4yTrWoiCU/Pa0Tc190XnI1ii\nV82hbDIo0ej+Y6jFcX3f5AtcqfGE5DUEy3ASBFfvcksb/BXzC266r57j7xuL\njc3/ct/9W8YOztYALotjKC5en3L2ouucfn9gHvnbSr8FlAP0MC/k2UwAATTs\nNpOddW4HjuYByj2SgTc9p48ytrpBeDEtde2sS/N28+6X8tArV2jJd9L8uvP3\nJdp/WCmTl3inOapiBAhY7t7GbwFRlCDSnPHKb2eLyujYmhgnsquv2JOfgXNz\n+PIJrT4eGzY0lK43h8Dq4XbVV311o5OS/qm1Yk4fkirDmjwCj/9w0SA3Eulo\nJkIj1l8yHWSbSY8pzVBbs8eYpN2G1luSwT00HjdKNrEA8+vtRE4oK6/0Wvpa\nJJe2GvmfeecNORLJMPYEbtukYsP8ZOMxg5NCz3DCPun3EOmnDWuTPJAGGhEv\nYbuzNJwShnlEjuISpZReRChIaGowr97u4wq1bYuPZ7Ax5gVbKKgDmQmqR04M\nBwYF1ilqEpg0KBl1QKL2UI1iGVzyTnKp0sPJgNPuoNiHAt4W0v6ArG455fWp\nqULgwHAi5t2xc8XcJhSpD2FLFxjl1Gy0FLOCz/809WzZUtKdc2yYpGLy7+Rw\nvY9o\r\n=TmAU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f55512ab74610e3f3cd0db70822ad9b52b9cfefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.81e2d4ff3.0","@material/base":"12.0.0-canary.81e2d4ff3.0","@material/shape":"12.0.0-canary.81e2d4ff3.0","@material/theme":"12.0.0-canary.81e2d4ff3.0","@material/floating-label":"12.0.0-canary.81e2d4ff3.0","@material/feature-targeting":"12.0.0-canary.81e2d4ff3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.81e2d4ff3.0_1619557133009_0.7643589649952791","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/notched-outline","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3183bb605f4393c502bcb7520824bac3901795e6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.c8edee52c.0.tgz","fileCount":34,"integrity":"sha512-SpkTXOmZMwL4iXzaFaFP2jTd3NFCdbmEREhJ20LiE2NjHyG+A230GDvIwgJGavKWTas3sMqAK4URfw8dCWFX9g==","signatures":[{"sig":"MEQCIG8ZMrJ+bicHQAeHtlh1MHpJhkWn7bewLBfXYlJWqoumAiAOLnl3bmUYw261hfLZ6jtDtvVtufgqYuH95ub6st/ZLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIZhCRA9TVsSAnZWagAA8QQP/2nG9LipqhTrPX46SNWu\nk76MguCTEZMBbgK9lIynS55n43UCPJDpFwe8Os5bBzE//zlhfeukh+iqKHkw\njk++Kz8BG637oHHrNc/Je6tJjdvrExnmStLWH7z1MI7dpnyLk0FUlm9WvMck\n4bkAW1rFQ6zQfnQ/nST4Xcb9ZYZN7ev3K+750WTZ1E9E2A3mE7C3yDpHQ4nh\nGoYWIO9AlsRL09KNzajkhIiw0bjlWhGvUVSp/TEdscvmVyDBwqK/fDuR+U/f\nsfP6hT1tzWFe+IYIWTMdpMFXcYfrXtGsQCbq/kpIjJ7wFev4c/DlRsFIXy3K\nQy84rvY/st8oF2gn+YD9y+JtPajQu1BW7krMiHvmtuWf8Z1EeNqv0REuZmnQ\n53F/pF10FgQB72ymmIainbPST9SNuu39srWNuBkJHhLANHr60HTFKj8HdK5Q\nuGaCSkdKrUaYkMYbpKBvl8SeWdZNNTykACnCDa3zHi8Ia2LCuPUeUMrcIa1u\nv6uAgTm+ryd8Emem8kG49+EKsrgCN29XubPFH8oUSd+T+OXqPJ6j5JXM5F6h\nE9HN/CtHdGDFqfi2HEzASqG4W+m4P5RfG9JF5pF7Y2BtsXWDSvGtfToHSAao\niLBHvOa3evN393fTEO8MNYqyYbiVWEEQ9gzFOijZzpM0vo3+O5iUzRc68OGN\nbhO/\r\n=FhM9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e8c7902721c81225e1c8b750094cbe6ac4666a0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c8edee52c.0","@material/base":"12.0.0-canary.c8edee52c.0","@material/shape":"12.0.0-canary.c8edee52c.0","@material/theme":"12.0.0-canary.c8edee52c.0","@material/floating-label":"12.0.0-canary.c8edee52c.0","@material/feature-targeting":"12.0.0-canary.c8edee52c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.c8edee52c.0_1619560033228_0.6648046794871227","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/notched-outline","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"726c3235e1f5056020c78e67613f4b4cfe5f843e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.f5b6110d6.0.tgz","fileCount":34,"integrity":"sha512-jDIENrQW2IlgtrD+Gre0szr5/3EMeTm2ouzDBrraTq1LBVf19u4s00dSDmh92OQdWVlA6nn9kiUg5cyOufO+Hg==","signatures":[{"sig":"MEUCIC1UXUtoLRvmCeVuUQAy+CLBo7wvK2rRZ+8Dj+raWAx1AiEAi/ZEfcoPeqP3MfCZkm1Ao8WWPfKFJePKa/L3Dw4TrFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiItdCRA9TVsSAnZWagAAaVEQAInqDsA21mJ1wkLJcx+Y\nQtrONzx6mUE5eEybl+MrvCAjSNSlv2muQxdc//+VudyyyJZj40ShQ1RGeZ6U\naS2UIhtXOvJPg4v+q0BrBqXyS0pK804PetChkVvSKwjL7X8G0SFFPrq/6kWB\n4idFmNGYOYp4w7zLiHvflPFyxb9BqaXjoKyIjt0M+xaJoa08G34xf3Se6qur\nggBVOmeqwO1FGJ+SwLfDtHckTsVOgARh+BSdnlXxM0Mzu/YCRaTgDwx3bwm6\nCzEgL4SVvLGpxgXzyWDduetJzdiLZ2X4A/zrfQHyIPQWSjb2pFWxNOJriWYw\n71Nxp6ONsAwd8zPbMHHZRebkVcXyuOJ9YRlMPjAegL0dW+yLPwiQ/8vtzQwz\nhz/j1q/ezurNEjoeoUebUnJAzKGt81lCSATSr0UkNkg35UpIPzPuhYGjD9lT\nW4B997l2fSI8ljFMhfldAZZO6666Ao8oIYZAN7ixIj8xkrFcF9WGO3PUAQwc\nwGazKPh0U78O1GnIH19pYNcXgPJnxRlSg4VMFiWXY5IEjg+ESVqR1wZFzSXH\n2Tlj1E7w2+5ORrpbln2hIXvzRP039Y/o1w48C4zLfNJ98OE9Ut2FwIbo0THC\noh0QPX7KTtyMzFCdfABXYLIe618CkePVuHPwXOT59v+rz/JGX2F/zTOX9Hcp\nRPhC\r\n=kipT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c7be6486c9ad6826105a70187add5afee2a6b50a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f5b6110d6.0","@material/base":"12.0.0-canary.f5b6110d6.0","@material/shape":"12.0.0-canary.f5b6110d6.0","@material/theme":"12.0.0-canary.f5b6110d6.0","@material/floating-label":"12.0.0-canary.f5b6110d6.0","@material/feature-targeting":"12.0.0-canary.f5b6110d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.f5b6110d6.0_1619561309454_0.6738536468197913","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/notched-outline","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3100ef4b86242d758b182348b73ccf5c1468cb70","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.cee9b9e22.0.tgz","fileCount":34,"integrity":"sha512-QGvDJEGoFH1smyslNFXPne6rN+5ZKAOJ91QfY23ieZcEkYacmG5rfRRPxn96YMKMvdqdjoWidOdFM84wFAVSlg==","signatures":[{"sig":"MEQCIBrlu9sR4Uj4B/LJAjLc8m07E+6+N4dgYxDo0wXLxYaUAiBI0xq8SJyTggi7wU0lhY3Tsj+uUH2+NenyCSv19MeBxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKjICRA9TVsSAnZWagAAME8QAKBuhsd4ziPJDnVOfQAN\ndSTXHij+muyyi2A2Jg+MV0NNfi9oXjebS646UsNSIEiHSynYpfHexWZLRcOc\nwezNn8DO6+wRTsVyntJmTed/Y8usb+nxjmtMLj3BZekYO970hWsuUZj7hSRI\naRzPm2+FgqqQFSUYl4sBKWMK66Nxz/Zf758v2eVEhY+sdmdAL0J//siW7LRY\nd1nERgvrzS8JunQvYk8aRi1/kzCn7gP3tNa6tkcBTFLbhUWKEaRk5tT8f7fN\nkn/P7TMH5OtKbNSGaHAGYNHX4SJDHHaBhZMzep5d5eW2pi9fRER9iUn0qamL\nLg6AoKR6q9b/8Sz7agItJ/iHeG/Dlfngm9ySbtXk+h06vo8bT/j4ugaMOXcM\n0oe3G9YCicTqRfsP4S0C020DccvBZm+qPzVj+ZDKG+TGpWYJ6N98m+Vtof4M\nb25yq3udPOOqLvg2yKaGHI42ohAn3LxDisHHh7DoA2dwb6Nr3pbz1BHABbpk\nDIrbGOBVunU2ikYZyQ0+a1NrQ4oeT+qDbTr3Cgr6vcda8xQLxXwR4e+hZEU+\nG8xeAvQV983clztHTQpybAxbfpWiabBE9bkJqi6b89ViqvQUe2Ucx7V40y4f\nABXCQgnIiJU2nih5+Jd2I9b4/X20wNkmoqS25SxXt43lSNsjtH0EiX+DkVsp\nGmj7\r\n=K0j0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b0c779970f0809be4565910c1abadeed4dab0377","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cee9b9e22.0","@material/base":"12.0.0-canary.cee9b9e22.0","@material/shape":"12.0.0-canary.cee9b9e22.0","@material/theme":"12.0.0-canary.cee9b9e22.0","@material/floating-label":"12.0.0-canary.cee9b9e22.0","@material/feature-targeting":"12.0.0-canary.cee9b9e22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.cee9b9e22.0_1619568840047_0.2932812830470657","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/notched-outline","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4eed0bbe635185468eece320b0cb584e6fb6946e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.96e83fca7.0.tgz","fileCount":34,"integrity":"sha512-l8hIIcw7FsDRqMLe8WMEsHspC4tYkV3cGnkzn+6Uz+SDGe35M44ak7jECC0OH/xNIA53DBJIG9bf4jLmw6Q4RQ==","signatures":[{"sig":"MEQCIExSX8oIuKRX9Gwcl0QrxM6lYGd/uQL74Z9uv/lVj/9QAiAxf28I/bfx9gH2cGEmLAyt2t0VVtzQ9QMwD+3Zcwvdfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiM0ZCRA9TVsSAnZWagAACNYP/0I5j7yf4RM+Vspm8YqH\niGlAhpDjJ0v+P+NHqlXPMrdZuUzQOSGLp8OGrREQiZ6GBSKcAEG3yCl+opdR\nhCBOBWkx/x9/wior+CZlKi+n9q8elTY+ECu8tRPZbyJ/L9sGZOG10bPQpsMP\nb2CoqXe7fY0ZyCgVqTLAmir7zwTGnh/QCJFDi++WaSFKhXb3dijKtnjjTz4O\ncdQ/EoozMs+SA/wyUEwZ+fKPLcQot4ZtbFa1Ttum4IXL8AjmVIYs+503d7kg\nm2F7tNxdrlOV4CnMNZo18uiQDGEIrjBshlR5l95FM//j+Y3nCmu6kKWGkFJ5\nNy+3NbZPRUW5QIlGoJIM/W0LHxBGwI85UnD0r5Swany+C+kdDt8FG8j4+5vw\npEkO/rq6eyFhuZ0PQzlyPcTRZnMXcYgaMJF+jBBuJS3wZOjCK/1xPClYOYmz\nXHsZiV41waauJ/RzX52doZBYA/vyuhEqp+w/TFQFgTVR+AKGbyNWbl0b/ghp\nS2k4AhiqfbtYI9peV+GnQkddp+FR09/g8XscMqRGZmLKh4oWnI/QH/f3ufEO\nMsv9nQYu5+sIJoToQUz+IJnqtWkXQFB54Fqc0jiygRPIlV7QteZIuAF6gtSh\njBWaaGy1QGCEe6re7F0vG2BRXtvgGOSkQ17IpRTrhcDx79MJE+kuCymBhgqr\nZvM4\r\n=aNXZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"377f0025088676d544c1393884e5f27e96143f16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.96e83fca7.0","@material/base":"12.0.0-canary.96e83fca7.0","@material/shape":"12.0.0-canary.96e83fca7.0","@material/theme":"12.0.0-canary.96e83fca7.0","@material/floating-label":"12.0.0-canary.96e83fca7.0","@material/feature-targeting":"12.0.0-canary.96e83fca7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.96e83fca7.0_1619578136448_0.28999115990765256","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/notched-outline","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2da33dda1754abaa8f56124928d4c803a40b7af","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.4c497bd19.0.tgz","fileCount":34,"integrity":"sha512-DsJCYkFs+GyLkkNhIMdehIw0/xivyoDZPWFhukn7CFmNQz6PQedI8V1cUGpt+z/nAJ07axq62YkIg6O3qFwiZQ==","signatures":[{"sig":"MEUCIQCva3g1W9+KMVvGsNc1Dcm3kUTOhFMlRS64LygZyi00pwIgVCjxRY+T5IgJRgxCMvgnlTDYYnXBoDUZLpZQpNPvLuU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaFjCRA9TVsSAnZWagAAT5QP/AmpZucisjkZRo7Veh7m\nYk9usVH3HYZRkJDg7GntTjdAV6RxpscGRPBTFkcgkDUxIayM9peUvGV+S83R\nW6/FYf6Lx1Y0x5i6psB2YXAVYYOyxdI44n0S/iJgk3iNnoDy1Hsd322/OOSk\nMZuYlcIZ+zUMcgQd9qeRJpNMsZqai3F64s7g0ZRwRhT84JiI0UfUaLd1EFyT\nKBU0JSRZ/2OIGvXprv72eSfTNp7SJDKiE0ScRdvgp/9NSgIb6eIyYGvYLQ1m\nWybE63I9/J4y6eYbtalTB+2AubsirI3mK9f5KoY6sPCJJw8queszSHLlj+ds\n5WCKqpHF6UXNZqxOXGFhcTXVRqe36FWOOs7AMs+ekeBXIOail1i4UQ8W+uiB\nZjXp3tuiwJkC+xeuoKyGBzfHhsTJn5VJofdWSppyVcPi/ue/f5uO3WHqR4ec\n9rbLLxju866rvUcvpTld3nIf6EsJFOHdSODYv4/EY8Yrac/4Ir89GkoY9zpt\n7ZungwO8VXg1Roq0lAMQHymjrzLRYRXAFKvkh3OXpFByGNz+Cd5QJyZ9Idj1\nPEgOj8W79vyLY3mo3ZGtuL2/EfBsBomqVsAv2Awaa3p0K6xuPKLHjK0LXt6W\ntfGR+GOgpT1RcGDjZfpikaqWyB7qOCaQ1ZhDDoerv1g2Jh8dYgYuoRPVi6zF\nZiUV\r\n=VJm9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"beb4a14c8f43815a21024c26a96e3c53851a9b41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4c497bd19.0","@material/base":"12.0.0-canary.4c497bd19.0","@material/shape":"12.0.0-canary.4c497bd19.0","@material/theme":"12.0.0-canary.4c497bd19.0","@material/floating-label":"12.0.0-canary.4c497bd19.0","@material/feature-targeting":"12.0.0-canary.4c497bd19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.4c497bd19.0_1619632482714_0.8608803397261184","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/notched-outline","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.105b15b96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b0c4c074d03a99e640ce991f5bb6bc6f755e5f4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.105b15b96.0.tgz","fileCount":34,"integrity":"sha512-MmUVUr2fFyjCQkLucL5B/HKmyLQoRBre4NU6luO2x/xRMZwL4qJujrTwhm54GMnBvzg+XkyWuTLIXoPTvWhNyg==","signatures":[{"sig":"MEYCIQCVYvcSTEqjdGYRXfNWcCOE1rDl8Xhhm8CbjYuULYaRygIhALSNr537qz0qVQXz3p+dW+gCWQtL0T9duKt1lJEuYOAB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgideQCRA9TVsSAnZWagAAnLEQAIpu8uu4j1goSYdIupT1\nYSvktDEYBS37I7uGY00UidSYUyvFNoI8KUyaSbuFuKv1i3boc0WiIy1N5YI4\ntLZmJ1XwFkRCr0uLHmj4PD5+gMiMNbJVeT0v4enOhvatyopFytuj5VmNadsk\nb62AFoEi/W5CsXO7TgwE0mOEAQS3wwVEPjSfJHIfTZTDU6GTGmutOnvXbSQO\n6kGO4lCF2ihqJl9vjhxJvDAjheXWb5PwiX3cYvjGWHPaxWQAAkm4Ki8Hiwxn\nqrBHtKCLiK9s82LVgA11ZX5OZ/RCWhDpb+z5G9M6RFsrNDPJy2qQcfbiSr5m\nahmFKzVnHtgxZjOAw7KrG7k56XbDPzeu4ydg0o9yfYZyQP9rVx8ZrhURM4t2\nte3iXtaDkhpPlAZ5V3VV3KQS73WVowKceJocPI6y0W6RXhPmkpL4vivSDs+B\nEjSUszQGQXhasuvwPP70WkrYSc7Pqo92pH9bG6ejH//wBObWs52P/JEDgZkY\ntedPPoceNyfFnsdubtA2qOUnNJZGmtIFYreDAQZquOnnDaIAR7LERSmSZhVS\ncBXKYKStw/FETXi3/01+RdVmHWUFj4y/HhmfoW2sVScMKv6mYiP7Aaxbic5k\niu3aPAkdwj2W773RSpRYHKgB3qqXMIROXl8fpcGW4cm4zc6G5zJhWjKIlam+\nljlt\r\n=VWqS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"762e9351a26c1968c772104d6d64f7874c81528b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.105b15b96.0","@material/base":"12.0.0-canary.105b15b96.0","@material/shape":"12.0.0-canary.105b15b96.0","@material/theme":"12.0.0-canary.105b15b96.0","@material/floating-label":"12.0.0-canary.105b15b96.0","@material/feature-targeting":"12.0.0-canary.105b15b96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.105b15b96.0_1619646351547_0.008565993766860514","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/notched-outline","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2f93181f6b1166bd3cbc371fe38fed01677a950","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.6e20259e3.0.tgz","fileCount":34,"integrity":"sha512-etT4XINmW7lZ+K7L3s+ObMHGE+e4oxKTHSM02Nu9w7Oj2XpHk0jGcTxDR5z0Zs93VlF23B6QZl7wEt+edaFIdA==","signatures":[{"sig":"MEYCIQCQfz1Lszl/P9eTw9VUflFhGFRn2+jym9NvWjMqzQY6TgIhAP3Da00owaOxc5uvffA2/W9qkD1LUj+CoNZeiAlrh/5I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidiZCRA9TVsSAnZWagAA9tEP/1xKi3yoBtWSQjvyiKG/\nTQn6NhbOfMehQYlRJ9lx2ONwMKQ7Y7WdEQQ4XW7QMH0RtdUscEKtetrJXFEX\n+QQZVwwWeXa4vLHwUGSiKT7IL9q7zFZuEkj4WG7W4o5OnJe5tZEcGtxKXdn1\neGyaRjFrBUC+xlxpn5U9XAGZ0CFvJwufI5tQfgflLd7s6EDSPyNNQkx7RnIo\nbP10uaic8ll2LhZXXXmsSqaKch09QiHnXwA4BSXy/fhLkuI6lLN1NW7HW4N9\npZIZ1QJW13j73hJ1OY3PmlPnIjKWF0mqHy44kWH9P7X4p3v2LRX3XZO1r575\nOScjMtaa6egQA+rcIzWR5lm8asdXmPxlByNzixJlchaksdEcWnfboVWxjp93\n5fUTLAp08GtCfm6MedKcL59ItqIQExWe5p+XdxwlocyaiocX8Vbk3l8fgDOC\nUWBWUkez14y5vrcaUd/4V5/9evJ5ft9tQisodxdmeNzoigEGlMOvmXopf26Q\n2VpaXHbi9Kns3N+2Z9wqWEfo2nbjftMmPNSGk494mbViCQlja0wveJ4Ir5yQ\nGlrGWfSb+jZhVPHSJDT62MEnRt3AfBCLP1ZZCvUXXYYUYERYKmIsjJ2OrEF2\nBbf7oAZYRLWYd/qEiofGXfThApZ7A0Djf2pVowl3MuxTWe8sIerPX+rqFquE\n3kgE\r\n=T5is\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8e07864b42f463f977fbd0f9264b8930da72711f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.6e20259e3.0","@material/base":"12.0.0-canary.6e20259e3.0","@material/shape":"12.0.0-canary.6e20259e3.0","@material/theme":"12.0.0-canary.6e20259e3.0","@material/floating-label":"12.0.0-canary.6e20259e3.0","@material/feature-targeting":"12.0.0-canary.6e20259e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.6e20259e3.0_1619646616726_0.8549863362494028","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/notched-outline","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e015a9f4ec6ab700844ad8a3899c4944c847f21","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.0f79a5d74.0.tgz","fileCount":34,"integrity":"sha512-+s8B7LSMa6kYS54x4HQbi4ioYs3trH/RYuXiXpM/a32b2flXebhdAyPxL7kEgEjILMm0HEyrF8g30eYtunVUJw==","signatures":[{"sig":"MEUCIQDSVzetKHO98h4Ud6UB6jOcfb15Ga7Qw+PrKzzEdo9hmAIgYRXfln556jBGDOk/NpkxVauHO7o3aL1iQ5C7zE7iabc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieU4CRA9TVsSAnZWagAAny4P/3hgG0UVQr94AS62Gpq0\nklgCktrPUpw392NmBoAgBFptKzq5EtFUbW8zs+TO0I763FUjuXeTjuYQ3dX0\n3+K9atU9p6c8+bvS3QKar30rzlz9Ig8hA/IAME3aRzowHDwifwwIi7kh/v9W\noj+1MAv7OaOTlaJxHaryrNjEcoekn/f6RMszSu4mBowEYRDEF/ANsmq+YD7s\n/0VyisBkAp6M2w89ceH5PGflDmW3WV5pL6JKzWmBObSHBAH0zw/KyWf5js6s\nx3axVBSz7Oomn/b6gpxISmhmR7PQeM3IxBuNzHDWSczDu6Mx5NSXJ9jj1/WN\nAgZHcJFmgD73Xnf8b2nrVXQ4U6KmIfZDEUHI04OfR4ZRuX7cpVikqpN1y80z\nk7yco7nWSvsNY9z3ZPMvMtNt9Lv4W3S+gThfBUqhdKaNYJRqAnc7f/KmC582\n12ROgrV2Tb0eieACr6njgv1b4QPS1/psMbi3Lr3Q0wAketYeG/4ARuQaJUfc\nD499hkP07ZKtKnqlTwdsvOqLxS6U5oE6V6Ia0n09JBdsTnaKKoPGuSlf4xac\nT8QqcfiBUvdc0mleZAwihYUDDm6z6kBNox0S7Sg/mZhMQInHHltKrzUscFER\n8SIHT1XtHDHxQ84fZOTcnV5yMM19oLYUun07J4+Q0y5ySCwiOHSyVrzfs7a4\nernE\r\n=wXtf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2fcb990c07fcc62dc025eb258f87a8f04f08fee5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.0f79a5d74.0","@material/base":"12.0.0-canary.0f79a5d74.0","@material/shape":"12.0.0-canary.0f79a5d74.0","@material/theme":"12.0.0-canary.0f79a5d74.0","@material/floating-label":"12.0.0-canary.0f79a5d74.0","@material/feature-targeting":"12.0.0-canary.0f79a5d74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.0f79a5d74.0_1619649848001_0.29270885607210384","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/notched-outline","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adcc8f253d6625c89cabeacf1ae717a9d248a45d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.84f3db9ed.0.tgz","fileCount":34,"integrity":"sha512-MqmS4sCAkVNou4tUzQDKXMPtGT2sO3CrJo3o2OtwkaAmGGIF58FDu0C8KFXe9EM9bj80pTV4hbK3WYz2jrFKgw==","signatures":[{"sig":"MEYCIQDd/42q0DbjDt88kFx1Hon2VC8WlCFcHN8OrSrq2rY8DAIhAPRibrh4kNTx9FagehRuNjiaS+qz1lYZUCTPZOSuft/8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisBaCRA9TVsSAnZWagAAs4YP/iwWGZOQDgg8ja8JT6v2\nhT31arTtXQlPufOIumjSZJQOxAOF3+P5RvQpMxuOB6QLu/qL44p8Rd1615mw\nC8RbN60dZDsQdc5V69LD/l3OzUUSYC4+N3Yqlb/E9dEXB0OjEN0mWEiMdN6N\nvSz7dquypkBRI2LT0+vYQ5uzED1KyRn6OpMk/ManmcjqnGVRbnyYrDy0ezve\nJxnS9v5ik3hwmaTvVrMgW0HOhRge+vxYc/9PvAJWly7v0hDsho0FjSNKGBnM\nMscGJ2eno2gkop37JAYGCfGA3zXLlMKg1sA2AVW9ETSk1nFYUiyJzzW6nbNa\nCk+/ZaCfgLhQwmT+JNa7XmGDCQKuZMHzF2TELfDrF5LDQHWehS3XKkHG4A6e\n8AGEbaThECuxF+hhG0AMS8r3fQ1UixVULAHvkmto8PGzAjGqTBgW4WzWGo85\nff0w5Ebiiyhxp4QriBXkiYm1c/FGTkQ3pGf2jx0vEyTe4rQzhcKqY6YZojcx\nYLe2J2pic9/0gfibe36ddXaBLAQjHxyyxYzecSe2VqGpBI9gB5nF7JWCVT4n\nJrQmYzEE1d1fiVDp8J885Q2HGpNo2k0jhWLHKDqCr3LtEXIF3NWtLuedZQmf\nCxlcHyQubyUNP0yFIsEyUN1zLpieRvUqudP8KnUAbpe13FUjcq8l0jktkaYh\nJtBq\r\n=d8zq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7c4b7e41edc7737412479194451432cfd33839b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.84f3db9ed.0","@material/base":"12.0.0-canary.84f3db9ed.0","@material/shape":"12.0.0-canary.84f3db9ed.0","@material/theme":"12.0.0-canary.84f3db9ed.0","@material/floating-label":"12.0.0-canary.84f3db9ed.0","@material/feature-targeting":"12.0.0-canary.84f3db9ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.84f3db9ed.0_1619705946414_0.1334504215634933","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/notched-outline","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27d0b96e4b9454935bd221426d7752b6c0c06762","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.8fc29273c.0.tgz","fileCount":34,"integrity":"sha512-+fmQCh3OD4mZLggvYBy8NwxbDN+QBn/u/dKPnWDgnmgdmQJEaTY7OyyuJiTzJXqat0E6MXG7w11POKq02V4LoQ==","signatures":[{"sig":"MEQCIG4CcryfYsKaKxIJ4zImmaH7aydiAiV0+PfupxLh9pOeAiBjEGXeQEk6VPlv1mYvyWa2H8K+hHyhCxa7bBYtDxmjMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyQjCRA9TVsSAnZWagAAjSoQAIrKSG0dOMnpelr0el0l\nQX1LRNLsEyLpmYrvxrqz+yxxQPRI+KqcAng3W6Se/E7E6FA3W+EmJgwWZ3/P\nO9h5htP+PKRZ3C9G4jV9cxhmj3oPhydSWVX3LNCkalVkrknT+pfQCz83DtLa\n5Y9M4TbwlWRYT4Xvzte8v8UHrgMx9OWI/gpR68ZVOpldbxrTRH2F6UeETy7o\nouGRTgqC8bPWyfovwKc7FBlAaplbLUnQQ/i5c6n+CDnfr6oFADv9wdTmGO7T\nlApd4P+Zn9fVcpaPf46coAuWpiNiGB2tqaU3CzCGeoLFmRn5NMGghfHdeM9A\nPXNEMJ4JOrPjaSEbnPwATTRUhSbyVSz+xWouMNoTUxX195vxR7NIMZXQjPzV\nDsFv380cVZp7nzol03hYpNZw02CbVzba/dETAAeDsCCJd/RhEcOuVD5mS4+E\nQsvr5OB74ME2+AXzQcirkD99ESrX/8sLExn992w+7Q8zbViJDAT/DZCWECIs\njYZ30A2E2I4i7KzEOqpknqpcdd7oxFmi6Ee7y7L0jGXs44eNl8xyIJ3qjOI7\nC/Bp1ajbJ5mDLUQhDGJavKD5jTeubf0dlcea4DBOzHG4OAxYhnUb+dp0hvQY\nidbn8EyGmCH8le2rc70c6x7SE/vzbWh9a89RvcnwSbcXbew41Ado6scirTR/\nG3Kd\r\n=go/F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fd877c3e50788fb95663fb8213bcd66f347cdd0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8fc29273c.0","@material/base":"12.0.0-canary.8fc29273c.0","@material/shape":"12.0.0-canary.8fc29273c.0","@material/theme":"12.0.0-canary.8fc29273c.0","@material/floating-label":"12.0.0-canary.8fc29273c.0","@material/feature-targeting":"12.0.0-canary.8fc29273c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.8fc29273c.0_1619731491397_0.216414278581748","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/notched-outline","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eaad48aeec6e0d3b19be5155b0870db8de76d9cf","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.c50d20bab.0.tgz","fileCount":34,"integrity":"sha512-sBEwqHKU4BmYiyj8MngC+8uqP8Pl6n3Vq1OOGgIlZpKvt+KOkFWjVrwmuty5+KVXoy0+nVp6caeul+o6F86t8A==","signatures":[{"sig":"MEUCIQDqkyfKr5iR2Ln2XqVJ/1qwzIMEPM/whs8TdhQHcBZgGgIgDsTg0d5nW+eQ7Pg3A9Xk9k0tkF57BOhdevLk+Y0H79w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215727,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizssCRA9TVsSAnZWagAACAgP/07auYxTjWm7hVtNq+aA\nBOtgfYnS/RjWVJQVV1/ik+8zyOrZGesXEq+68DUZ2BjFj6nLE3X+oZD1DHle\n+eFkvH0Y0NjhpHsdGM+D2IjOZdUmBFIAvGn4RAACH3MfIaONNYFwPJZkwysQ\nB6pxG76V/8DpoJGab4kRu0IIJCq26OEIKCdfbzolyBHi8Ft3HmeHY0ytonWa\nTfSrzbhpsSdHDYq4UlCUCH6Q/twsy2lHNkYs3pJOBgj5OkowhxbjfPYo+1w8\nB4AcIvDGOyubsoaazuz7OjsXDX5aKHlcQ7qS4fMi1UjmWis/lxQO1Eax9F2e\nLAzB8/BM5tM1KHdVZkcPT7CWnF4OISnQsT3nRL5ftcJ6M63WZDoKvR6O0CDP\n7f9c7LIaeC/QVbBdtJP3tlcITqxcaoaH/opcOp2GXbjUlJGzvf7tQUDcangI\n7qKl5jnkF54Mun+LbKuulvtLnToNefJzwEYCZyA4SdRTeE1xSooLygtkWXIk\n732gB0PnqPHTgeBncTFCuQDFlFD5sB2TvsZlddbMetr/2y8EO46olnvSMa8E\n+3dJqcVCM99uUWlu2YmPHTQlGNtJASGf/b7CbuXfiFJjrign594mTS/uoep2\nP5Ec0OwlH1PyWCAg9qIFF3rhQNj6QU3XWhKZ7IUtyXs//TVA36JzgLKm7lw3\nyHJH\r\n=pbmd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2aee1fe5eaed5267b0e67f1610c29dd399d323c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c50d20bab.0","@material/base":"12.0.0-canary.c50d20bab.0","@material/shape":"12.0.0-canary.c50d20bab.0","@material/theme":"12.0.0-canary.c50d20bab.0","@material/floating-label":"12.0.0-canary.c50d20bab.0","@material/feature-targeting":"12.0.0-canary.c50d20bab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.c50d20bab.0_1619737387878_0.6740011158490744","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/notched-outline","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.474836ad0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb383a8cc91806e26f5065fa2a5f246d93cc189d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.474836ad0.0.tgz","fileCount":34,"integrity":"sha512-/4/EXnEM/CjIaBWR8F69ON/bOWuZ/WHuEiz1JmsrdRTlD151/IbWeU9MPBLnys54RQxnHMhYzsVFmIpDDezISg==","signatures":[{"sig":"MEUCIGWShH0nppVX41FHeP6aDIp5a59ZznxGvkkAOArcHtgGAiEAvtt/neV9poUZ5uRi3vHoU4iw7nkaPVK13Z6aI8rj6H0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215727,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjM1FCRA9TVsSAnZWagAA8hwP/Rj+3E+GvNuEuZIE1QG4\nborMvVuzv9Sr1+AVAlbmned4GswIB6B42XGNQxs7BXgzT05UaWmETDffdlH6\nJp9HhE3WQ8wbLjbQL7N6F13GbeCfj+wROWUHMQgbo9i1r6GtYBzpfGrPDlIA\nj+33ByP+TUOinGxV4vqneSy8hY+lyP4K3dUyoWjpVaBxn5sHONrIE2/V3vBi\nOPPC6qpILcDfipoee96mG04eMrMe0gAtTm3G5UO1pJvjSN8wKJjtDdg73pCu\nnqye6YggpXvC+2rvPkFXZsuDOLEjk1gUGUy8b9iRHzzlhG7dp0iGad6U9HhV\njNYQWg/N1WpTaDowdxLnQ+etDRT44imH9tXF3YZcXszCV4cOGGv+gDEZsuQl\npQ4N2DP6cvjpzZ71eHuMKqIBMp8NWHdECaOpMcDqC48GUApsYr537m4fgP5A\nNrmRCRUZJk6DMWzMXRNyYIT9t9wy9AwhE0Sj0NsitJ65oS5ItDVTjBw4GKLY\n8igAbLJ8G9KiUki807FtebR6Q4u1LDR0wI3X/4O2DRW35ep79mOrbTv+W/hy\nSU8IwRub5LwMXfo2AqDVXNN8H6z1c1ymQ16ZJOx9A6Nwh6uNMWl7FcyIymyx\n76ctm5I52QjgOpoz0tmbHjT0jB5GDvgfaQm62lRzgalHYJvwG12/paxbtReF\njF2V\r\n=u2aP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c9a6db3013566afb165bda88b05607f2ee398718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.474836ad0.0","@material/base":"12.0.0-canary.474836ad0.0","@material/shape":"12.0.0-canary.474836ad0.0","@material/theme":"12.0.0-canary.474836ad0.0","@material/floating-label":"12.0.0-canary.474836ad0.0","@material/feature-targeting":"12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.474836ad0.0_1619840324624_0.6518735599133518","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/notched-outline","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d3aec5ee3f4898cbc4fcdf3b0c09de4b26f74ef","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.f5ad92287.0.tgz","fileCount":34,"integrity":"sha512-1zgSnIZYZwXbYJZ0OTnqU8N64/n7R4DcteIQ1m3nGxRIgDovUJrzqaGq9p8PKavnpveaKuPDhFisTWXVRZ6Sdw==","signatures":[{"sig":"MEQCIDBeNwrzBCMWrTGnOUhWcCULep6T9IfKslrUMDpUQi7sAiAE/auK/+2KMmUJAfXRJogei4EJPnsNEs3iXc8kioB+0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD+bCRA9TVsSAnZWagAAsBMP/3YebJCmChyzNWPKhqcC\nb/Md4UdZriBatvzanFDZSYGUZF7rgW1mscywdqIqRtKVfYVU8oQEKfazHZD+\njjXZMpC2lZlGVxAtPVvT586Tk1JkBOmIkeaN/odJegx/P22HgEMjYXdY+DgM\nTfZ5/fsmY/O4Y6aoDKRpbztwtMVRuFN30r/akmIry2ekvvvoxodyKj20zyJk\nXLcO0t5gUG3OfqKLnxCs9gHKBZIJu6nGOiRoyqGXiU4Ge2ju6jrkkuAkAW3S\nmXf5KaQysuDoN9GMUU2eZ//yn3p5eyH6c/XaFOcc8Fhm2Oy/d29boJ/QAr4+\np3ijHb3bx6Aw+1WMKi8/8FLEPcMgCac0N+vqMGwjI/+k7PDyYT7UOYgjvqdK\nnuetp2nT46VJgIPh7x8aQRWcHmPDFelaLg4SkYKaFcFXgulaQR62RMNlC1Yl\n8DLITVihAkrgenf20E+c/lIsSnQolJWtok5n76zZGRG1W8kkct/AUNVTEPDL\nDn/p/quYU/Eg+9MLIBDnno9RJDvCk3pd4NJJI+alJSxSjfLyixXovHC/7B38\nJmFyKDOk+r591gSxkuVHyyIOIktkaRalHC9g2DEvxGUG2rl48qSFb/eMlTSB\nE7+gEDhoWC37noLv6QSKChql9yx0YQWlLxmSIbgeTJPSoOQDde4TyWSqzhO2\nmtU8\r\n=/Q/y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"493c206bef4cedd10981093c61731e1c1547227e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f5ad92287.0","@material/base":"12.0.0-canary.f5ad92287.0","@material/shape":"12.0.0-canary.f5ad92287.0","@material/theme":"12.0.0-canary.f5ad92287.0","@material/floating-label":"12.0.0-canary.f5ad92287.0","@material/feature-targeting":"12.0.0-canary.f5ad92287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.f5ad92287.0_1620066202892_0.7758961081888149","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/notched-outline","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.af453daf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4ae5ac053af2060a43a2eba47043e73a34e9057","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.af453daf8.0.tgz","fileCount":34,"integrity":"sha512-3pg90BBktQo9xW7H+QZm4G05ep6betPj6UaK0nnSyrvxDYvgdt0q2ZyzgUqX7oJ5g8aB3Um3PjgB3QZlq9kPvA==","signatures":[{"sig":"MEYCIQDoLwgKZoIBQy52webFEYBQnqg3kSOjK1RZsntsZC00XQIhAMAPSK8qMHUFs9XStFFWH+fpP9WZiTp/tzz/WqgWLFPo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEbvCRA9TVsSAnZWagAAHRIP+QCsPaM+b9HgKkcqPswq\nK6Ae6bfiebRnsBd8GwLOUQoeH7hub3q8FEs4P0I61nnUW5ffFzk2AspV+wbA\np880jzozdYJicrsBJlxm4Wkuk/MDsEOv+ELPBC/AtC1QBUH+A8+SOJvxN6Iu\ns210I/B7OGI6bHaE+ZhiOH27AVGaRVpkEWXqjM2Bwos0v17Vu26W0V1pWvT1\ntSRqKMJHMLItnRLFirEH6uwzlqcD9rPOQ3AGnbF/9ePHYo0pv2h72/Thed79\nUeC403tC8etndb3He7H1uyn8dHup47wiq524KB0VdPS2o0T60OLUj8/nMShw\nkufmJXGMDm8GCJI5bpw5HvfgpXI6zZ8V+4Y6k2nfT3c4ZjE8yWT+0EOli5FB\nui87OCGEnMfIGCXzSFdgBXYaEuCp+7Fyfa/1cq/H/0rrJeGmwhW1niTLse8y\n+H8zCrpvf7aSSTmVKUoF+sN0JfEwBScRXrvHt+CrpgbO7aJzFHlBn6dAk6Va\na1OLBuF9/Xg2D26YDTFwQwmXl9wxqqZ0h3Y0griKe4b0eXl06ZnUJnsAuHRJ\n9ghmWU6wTK93aN9+Tr4/aUxYCX6vzSPf8epOFJ+LyT+AnUIWrl0DuNPx3gQN\nCkIfEtaSJpw0pd0FRhPye3ocsfyAnk76k4X7SwQpYlSiEOzlVrxdx6Hi6Pa8\n89sx\r\n=okJA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d55347cda19a4d9469eff68955185d9d5e235a16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.af453daf8.0","@material/base":"12.0.0-canary.af453daf8.0","@material/shape":"12.0.0-canary.af453daf8.0","@material/theme":"12.0.0-canary.af453daf8.0","@material/floating-label":"12.0.0-canary.af453daf8.0","@material/feature-targeting":"12.0.0-canary.af453daf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.af453daf8.0_1620068079571_0.9765119771869104","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/notched-outline","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c5252fb60813a1d71ac3548a1487bf076780ddf","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.1f1918c24.0.tgz","fileCount":34,"integrity":"sha512-bcmsSwbkm1vl+UpOCKv8Q4hHNHjvh3BTYJfCz4zHf387bhc1osLx5BdnF1LAzbHysPBzTfdjwdwvn74L7ca/uA==","signatures":[{"sig":"MEQCIErcfPM+An1vNvZfmAkxCzacjRhuDTGoTB0HvfjI40EjAiBmX39fZm2ryIT4hwMIrKWKcv0eytCDcng0X2yyN7uBCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE3DCRA9TVsSAnZWagAA3EkQAJsfrWavaQuyPqempeX6\nvG02PtwnL2XH0JDbi8OxcguiMXirJT5bx6rlmqWV4I8WJe2kAqpgKgjzOVgU\nSYaXM71tM4Co3PfLy/aFA3YkimJvAVHyKbh0ZeSCYpUdFW5+8jqedAKuu3Y9\ndb7O9sEbTInLdwX4bCNafJvK1OzOItfVjTZ+UyM3u5fjJPLOJ25b6DMTE+j/\n5rbJBpfDsNr31XT7lErStBJHqc+eQwWgG70Wsr9y96Dvx4vDjMd9Fg5fK+Ms\n/XG85vzSZwlPZrcx9LMdJd64ejqOnQnyuQc3QyaxAq/aBoEtv4ZfZyVvEBVf\nceqI8V9AliXE8IWVpkGQnmjsJ3T62WoKQeh/H5zEu3MPBIQwmnkmnLPnDpLV\nCkKKnhOUWTkTW7oUWBXl5qCV4/0L1VZosVUg/tFvPnSBlyVtkYM4JeifEGM8\nfFBFgZ7Ee2uil5xCa9tYKx7eNAxSAxQsJmWalI7U2qWMx+nEcx9JAQVR4PQv\nTMoNLExlPksFReg8zmPK9Q43h3BNBGOgosfoBHF21J01Ixfpk1x1V/cQIBdo\n2WpvMZEQ/PZ1i8uYxmcA/qBQOTm4JJ8RJ7HqcLylAKWzynTmmL8i46QvoSj+\nfpK3Uyx3G0owTNBrOS4avIYBp2kGSw1WR9eC4XPeYEaxcE0vEDNjXn8d9W3A\nduYJ\r\n=COJ1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cda2e786bcb73ac46385a1c6459a8ab7bd9ef6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.1f1918c24.0","@material/base":"12.0.0-canary.1f1918c24.0","@material/shape":"12.0.0-canary.1f1918c24.0","@material/theme":"12.0.0-canary.1f1918c24.0","@material/floating-label":"12.0.0-canary.1f1918c24.0","@material/feature-targeting":"12.0.0-canary.1f1918c24.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.1f1918c24.0_1620069826593_0.9782812610638676","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/notched-outline","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.33148231f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da096c6687b156fc45e1fcc4900969073cbaa4b2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.33148231f.0.tgz","fileCount":34,"integrity":"sha512-4PiK1YeILEjJG76waaGKhIBpazyQc+ET7Ed2+0MfIlvAiOefDMoqEdeZm2kZ8a8gVbprqXVhSwm/0HT7C6EuQQ==","signatures":[{"sig":"MEUCIQDKRHwejYVeEADWMMv1xkkmuBK3R2Q7piiZHwCVrYPb+gIgLxndRb6Krqt79a5Q5Pug5BAHzmW/yef+8YFFbL+OGrc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFGICRA9TVsSAnZWagAAbJYQAIs8qFOcMaCzIUoaaPfn\n7BVR/bLauACh5NeF9I9NDui8wMB8XwMdlGZXfzQTD9e3f9oYWR4hRBfsBVLY\n5XL7TctrYXzHn0rlvSF03PVxGD9VqxCwkYYA2VV/oCjCYkbzYN9Sa70P4ZDs\nWjxYDYfrRVURUpghLmjFEdL9e4pwHrhlJ0rLd2rDVC/tcOK1gS5AM6lHCsRc\nSbdjTaILPEnFJNcQGH2i99wvwBmb3Qw9TQmPZAXt3OZpP3ik2VATYeOtQmjL\nYq9IVCWNrymxwqBzFx2IrzoHbiLdvCZgs/x5n/AeRMOGStw+c8qPnS95vi41\nt77tWPhTAV91F0ZCZSpp9MkkHH674OqZYwprGdUj6QHa/HF2igafBddaSOpz\ngqXCaDY6rusTln4mgNeesrH+o/E/AKzsVJ2Wp83Igjw/ByTsBnnf1uHnspoe\nNZzWmKCrySIKpz6KR3bzQfFpNQjuoPbevp6exrpFkpcXZfiQ63vwVJGj9R58\n9A4CTtHyNLJZAMkW1PP/gyY3lAbYT4p18ebjjWwYKSY+DCdzJrMh9GfHPkSE\nUVoD/6b6FhDH++IzqgOIdiNVqpTVssiHmgIj+6FnMsX2HFGZmAaHpXEp6pck\nu85SWNe7boWZjVqOeFQM6TNeuRFWh2TAASaGCF8L7HhIg9Wk2GPVP1OgJbfG\nrho7\r\n=vwLV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bb5a14b15a74fcef265050ad96f737d0acf36987","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33148231f.0","@material/base":"12.0.0-canary.33148231f.0","@material/shape":"12.0.0-canary.33148231f.0","@material/theme":"12.0.0-canary.33148231f.0","@material/floating-label":"12.0.0-canary.33148231f.0","@material/feature-targeting":"12.0.0-canary.33148231f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.33148231f.0_1620070791594_0.8514063398708249","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/notched-outline","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44210cc6d03926d56df7ce8fbbc60ef8468a1061","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.06b76fa74.0.tgz","fileCount":34,"integrity":"sha512-gRUfiLzgwwdOwpk1y9iFQRhZcz8/Wt20hS5F2AZjTpvUrrTjonI5qzclxOvhHP9PBtIIfPSJXkfqxBUqucMe8g==","signatures":[{"sig":"MEYCIQCJoPMYEYo2mEiMUGXLANc3hskvQ8pc9zN1HwKMiTncqwIhAK4yDpWNl+v/G6rQj+m6B1fdTnGb8jF0/VRF9ZgVbiTp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFMsCRA9TVsSAnZWagAAVrQP+gMPDsmftdC/urm1vuZd\nwew2y7pf6q3luOhmbm5wo+7+GdD8QLplZh20Z9kTPKX8GthSuaaEib8ZP7Pe\nv8JKiPkZB2n6Zrr9sKFp/ctfLQfpBVjv0Ekd8rQFlg5AUva65J1why2ZrNgI\nOgG3+PuUmf6rlSA69vgCiMzOcQkyDxunStQvMNNzGbDqjAmcfd39dqXUk3KI\n6QeL1ptuxtcN7kTeCEfuetUTwZZn0b+29fA6gyit4Kw+9KR60oddHVDDc/RD\nU50W6X7pSELFUPY467AsW2NmIpqZxmmw3MKIecXDBkTfHyUN6MGpM4NjvqaC\ng8s4LM5Wrrqu14CIPgZd11D0q/LvghpKI67JQLtkc6C2O/zSzoEiskhtXmJw\nsMA5GBLvOu5V0AGs6W6dV77Jge+el+UsEXfDIg0e0DTWR/cdjx7rhBqS7N0f\nDts65GGxgjHv5OtM126VDTC2EoQnXOtT66v6ook7PWOlTD7e751r+yVxDfmQ\nX8sNEtA2P6u2emfWyaxZyK2SglhHblQ6Aux4T73nFEYJ6VIPxxLLapx1xmVe\n2UqCSeC4VDBxWgR0dYJs41CSY9VqBQVZKyb+AuURWn3qDJvXgDRRA55/4ZPj\nLpLIFZpjM5JpcHjJUYJZ7HxBzjZ9aKkaHlPKf1zvL0IlgJODwcu+ziTUplK9\n8wEv\r\n=lhiC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6a6a73c9687e196677329640dc1ed025d13b44a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.06b76fa74.0","@material/base":"12.0.0-canary.06b76fa74.0","@material/shape":"12.0.0-canary.06b76fa74.0","@material/theme":"12.0.0-canary.06b76fa74.0","@material/floating-label":"12.0.0-canary.06b76fa74.0","@material/feature-targeting":"12.0.0-canary.06b76fa74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.06b76fa74.0_1620071212372_0.9868323332532478","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/notched-outline","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.7c5000473.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e599c5dd9e4cd15423f91273070afb44c7364a6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.7c5000473.0.tgz","fileCount":34,"integrity":"sha512-8SpqGAz55VTZFQbviXl2qBKYuMup+vFDMXduyAne79RWEjB9rgJbdIZRE12e06CI+0A2K+o2d1vKKtbhVrMC6g==","signatures":[{"sig":"MEQCIGDoFh65FWmaOeZlPj9L/pUO7R+wBK/MNUDINshjaV0tAiBW+M7qZcOzRLdf3co1Tpc6FSaLrB1H9LLX7hxy5DxPLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHxqCRA9TVsSAnZWagAAU/MP/2F6hGFV//rcwF6D07w6\nmDukJo6eb8x6enecNi8D/SnG1g6Otv9gk00AqKWNpHLQwdT9K2fDuFfnKVud\nxZuCDEggYSiRAxiWmgQ/ra4RCzI5HSH6hhlcWky2JTdeQioYkdtOqDAD7tyG\n3LxrGkC0z+y/6iBQgOcGNtTc1dIucbW1Fn7SW4syIaNzxVcIaGqStUUod4u8\naTccx16frFJ1Wh2N3xTpMaD8UPGLreXULi+2siXgLPBXIYw8tK3QBA4NnH37\nZm7tRu8ibggf7GJl8cdONjawYU3AtSlRtsJ7LH+I1gKV1ejmKXEUOdZIwEp9\nA9bOzODLqo1TNIjHUVp6W8yb6cA5r5y1HPt0d9bCSNa93LruFWj1t1QJVPk7\nHlTnaLSJqUgHjHK+iXTt6G6/dD1j48KGNdWaPGwU8880+UR+mx3jjT+G8GVP\nCUtlo50LWDhKf942mi2XiJbMC81Ft+NkU57aD5AbS2SJy+1glPDHA6r7yjNB\nDgmPn9/LmdCmpay9CMouxT9rAABQTmkS4RSPVJ2hGxsAsF+bt8tYSBrqonBq\nq7hd8rln7dJL9Wv57zemacloCbmM0eFr1KzvRc/iKjOPPNHfDHYr5DgO0xkE\nzf5s+mesyG1ih34EbrvZEhtklWFLy/4mSEE/igVH8Fe3YzdrVPYJrpGVVsTA\n4415\r\n=ghaw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d53e0032497f2efb6a42d541ce5cd2072711f86c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.7c5000473.0","@material/base":"12.0.0-canary.7c5000473.0","@material/shape":"12.0.0-canary.7c5000473.0","@material/theme":"12.0.0-canary.7c5000473.0","@material/floating-label":"12.0.0-canary.7c5000473.0","@material/feature-targeting":"12.0.0-canary.7c5000473.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.7c5000473.0_1620081770558_0.08492451506683363","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/notched-outline","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.de997644b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1905eb270c123faaa8f830c8255de0576a87a779","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.de997644b.0.tgz","fileCount":34,"integrity":"sha512-TXB51ZdjrbZ93r1zftNM1nPVqFqheKsUsj32hhJTekoJaYCITvbEV3zsd98aUowJyxvBFXOjAZrC53QERxswlA==","signatures":[{"sig":"MEUCIQCVd1RALkhF+adTOV4clUUv0hmUfI6kiCuyFIRGm3+vCgIgMrLEKDT5Avh2pLY+DgOIrxOruXj3onVikyHqg3LnrT8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYRwCRA9TVsSAnZWagAAnHQQAIDSRk5uCdnr66p8v6lG\nl9A0D97pRqkidlFEsKISdaL2jPv6xobmk975sDUXtW7UVvp5biLTyu2cp4dP\nWkfrD+7o0F6ClmY1JkBGgjcn6EzW8/SX7uzsnQp/gJFztjvSNO29Y65aFfH7\nfkJjSxZXK41eRgpFjqDPqX9kXfS8FfH2VRF2OVtSJLMnV6ufmnmvIaTBOlDN\nzCBAWn4HOl4WspHVpauvvaJeXOpDyObS6K474bIL099jZBXVls/u/d9BPfSN\nll03MRBpq5tt/syEqilzvg+wqwGSrq4FZe1/JcEmP47IRdPzIGbtEAYD4eI0\nx1uXOcW4j52ZpWCXwy1Yx6l0fgkGsZOUhjk5FNmxyzZVLniFXBwT/Yxn/jIl\njL1hBfL7orHgT9J8kxHBqWGk2c7c/urtx6he7NJ0s4LB8e015Q27ZLoZBING\nMJW24DX70lT9Ezg7V3AkgNtAutZZKGcnmQAaPM4xZmphzGPcesjhWL9Vtyff\n73DQaR5u+aHNeW1rzoCUjxrE7cW+ZNEIGJgtA7Vm00LY3wsCog/V5BXMEk3E\n2MpSDyj9AluJjaXrtsUEJYEx4dsTMnlXihGV2G/mz0YyJwqA5iWNRzj/Py9u\nhPJtA8BMGw/vblXuYelXAW0W6lwLgWO06JBYJQYw+RTetU4qkhQ+3fnVvcpz\n+7zA\r\n=H0Vx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"efb97e2ef70bfc07ed9b429041e4f201bb0d3a53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.de997644b.0","@material/base":"12.0.0-canary.de997644b.0","@material/shape":"12.0.0-canary.de997644b.0","@material/theme":"12.0.0-canary.de997644b.0","@material/floating-label":"12.0.0-canary.de997644b.0","@material/feature-targeting":"12.0.0-canary.de997644b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.de997644b.0_1620149359997_0.6166769245120911","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/notched-outline","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97f01607d20a94ff82288da8dc137a9d806d8a7d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":34,"integrity":"sha512-aWMghP3KIqAgiIrcbq7WDIJG8WECkLb2hIALNNNgB2JVMBWggnsIz1h2l2Op5deTkMm75+OzlBkh5SiT4TCGdg==","signatures":[{"sig":"MEUCIHoTs5l705gZ6ASqvNNp9EN0E1V2hEVofd0LMxq+X3GJAiEAjJ2Jc7EW18dPopBoYTVc50e1c+VjkHhLKNq9xFKEqPc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYq/CRA9TVsSAnZWagAA978P/icaUt1ALyum5w1G+xph\nhiGJMOFwsONGvwb7AbN0NEz7DBGN8GoYpLJ7g3to+pSxIMQrzuiz+BAZPKCx\njGhRluaJw/OYvoND1NpCQJRZna3KWGNKZiQdKweU76w/zOHe4v/C9eRcMYoC\n3iIRUy2alzpy0XDJ2EQPbEmM+tz8hAzhisuep+HcZUmqCW3/tkO2Zaqp3116\n4A8AAQQWN5ri3NmKxvkqEwD4V9ei1uDSDH6dICxxRkl5t4rOWcjXkGm52Lp4\nPz+gfaiiZBAojlO3tlq1uqznFLMWocYIEVRfXnkWWvtqy0bVjPCnd0Zl1xVL\nL5RQqVKU+f/cv74PFmxh6Dt22kckSVLLwqz5hteMTyqV2ZrB4oxkZeF/KIAl\na/bViUZHUIO/e7tN3/N/KbxvYZHtNq2SaOEvBEncOdXINWNOr09i+tSSRnxr\n9gdvgs09u9gyVvUfWIigtZUYFnBA4fPd2I1tpSC6eeYF/Za6DT9BA8iWROVJ\nZOaboCx4IdhU0v60eN6Db8Ctq666sD56hhG3Rxo7ocjH0HtuiTK53qMe9LMD\n1Smf7H7rxrGA12vZrtzzqzt6/TB1Bppi9EhEcjTsfZrgZVSbsBUME7WOtYKg\nOzb99oIumk4vZplq6WPjsS6oHXCYE1w2gG5hLoPmw1dLw80puetoFEkypIvT\nncml\r\n=6mR8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"473ac5e3a11b87616a0dcb004bd5a9411a271f6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d4d7f1cc2.0","@material/base":"12.0.0-canary.d4d7f1cc2.0","@material/shape":"12.0.0-canary.d4d7f1cc2.0","@material/theme":"12.0.0-canary.d4d7f1cc2.0","@material/floating-label":"12.0.0-canary.d4d7f1cc2.0","@material/feature-targeting":"12.0.0-canary.d4d7f1cc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.d4d7f1cc2.0_1620150974591_0.7648600917929238","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/notched-outline","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.be999eb08.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4db36ce4b9210c74ff1eef65601bb6b9aace1af","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.be999eb08.0.tgz","fileCount":34,"integrity":"sha512-lCBPA8QAH+dNGVosUL0mnoTisjkxm1EmKkwumROuuLsFFlpaqQ9rJ6h9e/KnRISUt+9p73VGWXzbrHS9ZcURCg==","signatures":[{"sig":"MEUCIQDQd+Z8k5vzMVdE+ykrPvt9ouSzdm8lObwCtSgHsRgoGwIgLCPdePTXwKkBYVXjKHDJN5APEHsaAnHHuEDSlpjq36o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYvzCRA9TVsSAnZWagAALM8P/A1XJznA6oCWI0A59nLD\nWcVlCWFtpiuEZM5yITBFoNSVkm/o3vsgDB0N9Yw2kUqFpBCSVJpYdb8Wob9x\nIfV81GC1K3KFXhqpLC6fn7uOQXN0wZuaxF9mTs+CAnQfudAOz/c1Wl2ditrg\nm4RdxK+Y/7wxZiP5VJMJsJj0ItjNGjicHnQJ8XO3AkDEjvTmb/ZzgDq4mpaC\nfqGy307FKNfabzlMFyV1CnoOxSsEO5wTGTNe5smw/dYduJ06A9DXlQOUrJfS\nHYHpgtwH7jKOLJXNtuUNLyunxvhtB9s2GWCLwrazUiB6ZEJKiUW8XpF1OHEC\nevV0ML6lwbIAc61i5/StNhxeELhye0uPU/FPPBHQ1/7R+EV2Hd7p/+kMw+AP\nTKwRM6tvAtvfS9vTOHjh+VLIEve4zGP27BoNiBbMFwiA7nVw0NE12PPbNq5A\noBLgPhTBYqM4qvKR0XUDw6o+SuXO++YVpkjj1H00kucmHR7lED/jIarx5MLk\nHpbuuwDj8MRTtU4FyY8G1rdfnl93tXv6VUQEDMEhxdZZYWtLike/16K0gLsL\n3HR9kF1RB3hs8OFUgAHI4MI/CxYNmw37B5hlQ4sVKCgNwIQ/Qt4sLs6SLTgE\ndYqFJecTfIsVV7SecJC6Z3QL77SYaXBt3mAGW9fKaeT7AL9bXM0Bf0k+8SVQ\nzDN+\r\n=ED+S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"78911f7ba4a7d68ed38f554357f8f224ec7a15fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.be999eb08.0","@material/base":"12.0.0-canary.be999eb08.0","@material/shape":"12.0.0-canary.be999eb08.0","@material/theme":"12.0.0-canary.be999eb08.0","@material/floating-label":"12.0.0-canary.be999eb08.0","@material/feature-targeting":"12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.be999eb08.0_1620151283150_0.23903613146367064","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/notched-outline","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"724662de0db6ff595ba5ef70f87c38337efc0cfb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.eda1705fc.0.tgz","fileCount":34,"integrity":"sha512-+LsD3jhv8YUURSIbWoENy4CuVLsbMaEkHS8S2Y/uitI0m2t9t/dL25zbxF9Qve3e22EMvx2YmWp+bS/QtoPV+A==","signatures":[{"sig":"MEUCIQDRC/0ehchJuT+LQ3BKzj5hqYTbWg6IDLUhRSvOfuxlewIge+mnTjmwJKnCzS1wRJsRMrnXMaJRK8lEyMmF7NlGFyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZxlCRA9TVsSAnZWagAAyuwQAIT2VPYqgfBw4Gu1M9gh\n2fB+CwgpqL6Lwzz2TrrL5NYRQJoFd/ealhqpFn3+ndEtdHVSrSySAXTHQ9Lb\ngo/TfUmGAYXMUBv2ryQIfpSvrGbMzYlMYAYz6B2+7l0X0dAAn4j/X3MoH74e\nXVWGtSkURmOHO2VJT3IDUN1+SUtJueqk4w+RtpZRMQAR9qU2Nm9YzxZydnEo\n1jyajkP4BDS+iCL5J1HVbo16KIf8x7qKGhsV2ZCNWh7eNV0EKExGSxT2l9ea\nqnhChJykyrGKfxVCT8sBq0DnkzF3FACaXpsGnPZLQ/ZhHk8uHXy/LtXAkIzm\nosnMMjyBJd5aif//vFW9Dj7E56vAessRD4VOyYzinTaXsRUj1UgpodMqrz7h\nwCx3TwjuAGSBEpbvObjVx1th3M/16j4R2RS5IKJN6NcbTVxgu90ttwOss7KN\nANRDarH13UvKRGd7c80MeAxEyoZJVPEqF2laBLaJbPCDvEAEQRfaUGfDa2Hg\nY4WPw32w7Kl5F2kWQ0a9LePKAAYfJUJM24NyzU7lpEyhY6EDzUvuLoWW9S+o\nahVOOZaqw1gI7YHwLIwUSImgWPVX9bkXvqhpHLT4duBazSFB/7mTFge5AIGi\n67h7zDzOJMi9yDtk3KaCWsV/khuhzXZNjVlw4Fc4YeD7sB4bKsJpqz8Bux0f\nXBJg\r\n=wlQS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a4c7f355f27d26cb39ac4876510254d165a5645d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.eda1705fc.0","@material/base":"12.0.0-canary.eda1705fc.0","@material/shape":"12.0.0-canary.eda1705fc.0","@material/theme":"12.0.0-canary.eda1705fc.0","@material/floating-label":"12.0.0-canary.eda1705fc.0","@material/feature-targeting":"12.0.0-canary.eda1705fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.eda1705fc.0_1620155492866_0.897128793071371","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/notched-outline","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.718c90178.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bce8b3caad991cf1c6c4125c1aab6d8ea47b405","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.718c90178.0.tgz","fileCount":34,"integrity":"sha512-hcURQ+Mq5e6MsuN1ETgJvcIc2WvFhljOIoVTVTKqdzUBrJcU3SQiMQGUrA5+K1KffbRsdJ3Z59oyqbm5cCb67Q==","signatures":[{"sig":"MEUCIFVMCN/NLbgVDLBi9dLsC+2KHCJOpt3hbfwjb6oaN6VwAiEA6Z4N6j5veA7ZovXqLIWbpSdJ7PMX8I7S8bi6rfNSRv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaBzCRA9TVsSAnZWagAAtGQQAJ+HHc4qejYLKIghMynY\nwzeavR2YEkSrrLNi3KRQ/t2RUmJJUFk9rlB3Vn/GLc94jr3z0l9sDmj+bcH/\nH6KGM6b9UplVQIteDtjdo+JbSLm1Kq/U/XN2F4Fg0m9Up5k3oZb2mp71XSuX\nk6n7pzKS3P4NqPzWWhhSB2bGYqc1nbeGxSE6ldieV6pHMdp33JgIiyfk9CdV\nkhEZ8GJPVjiQUgrD4+mmJQzjHnsQSKbui25Lr2utq2wcM0ALTyITkd8Ridjl\nDJ9icHPAgOef+P2wOiVaXetztJ8JS/gKnWpPlgOJitUeyOagvLKbUkHfl3CD\n8+o6Obg9mjqTzu/59zv9w/2cBU6FMnQpS/j7+gyNurdNpcwRz2bET55JvDTW\nnpUm4EuRLXBtKK950Xf/TY8iM+Ne+wBSDTkAhJhnVd7R1HDgwHDAoTXQ0N2h\n7/FbMFbHTLJQdlZ9i6DdFfrA5Tu3fuO1NPC4GfIHjXVvDoUDbufjYETuQJ/m\nUAOxmy/bbotnNmEwTOct3XqLXS9yUaXLpp+7BF8R3koIZli7cNrpgUQz66j4\n39tg+F2Ql5v+qEdwkRZml//s8ApJssw/vtm6fuBKrx4OUBAyQpn4TLVemjc+\n4LXas3GZwO5unjYus1Zx13HNTZ8xs//02+7T4zZX7jBP9B5lhF9Ygz6sMPK7\nXnyK\r\n=q3Tq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"38bd77e93e567329d390e9784d4f591d6dd41191","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.718c90178.0","@material/base":"12.0.0-canary.718c90178.0","@material/shape":"12.0.0-canary.718c90178.0","@material/theme":"12.0.0-canary.718c90178.0","@material/floating-label":"12.0.0-canary.718c90178.0","@material/feature-targeting":"12.0.0-canary.718c90178.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.718c90178.0_1620156531161_0.9753589753030565","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/notched-outline","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.0e3917299.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73fe9676d06e167b7aabd4c3ffcd9148e605b6fc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.0e3917299.0.tgz","fileCount":34,"integrity":"sha512-rNeN2WTeU3SpsdMr2xRIjWbtn5W0OIPSRAmmbvOSjZc608kxKAIzgNPahdJn+wSUrhK25H2pPVElo3a3cQuqQQ==","signatures":[{"sig":"MEYCIQC/yvxN0p+byfUmmZONiMYEsN+hboPI/zuQWyFMIFi1ZgIhAK3F4p7UzhyKXhGhh3wYkSDdcrBsnrcjVv2OH6+TBV/V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaEXCRA9TVsSAnZWagAArEYP/01NCg3v3sBDHwtRnDe0\nWfZZQ3/b5JoYGG/8819yTN5nFa6tlui7kDX23bBV4xfzsp7P9w0zbrW+4mXQ\nE6FMPzcdSIoTahXUkYbTLk3/rNBHCZ4w0sqaPHHxT9CrCNiMqNIQfDuT8bA4\ni8rFK9RBopEx8/CjG0TzH/dW3zlwnGw/PqVykxgsferQTorE0VjyF2AT45zI\naX7NuCQsA7eAd03CTo8MFHuzpBffuedwdoysTWQCkJOl8STz/nx+IbiKvNuW\nsWS63M6fVtVt1JuRewQyG4N+Hmr2ySQeNL3lVfdXYnPwJ3Q8CVXkTD8HrHIp\nNNgaL/dkb+g8OdRtmItxuF+Azg6CHD3aQmsQl5I2Nb0jioqB8b0P+4wVV6UT\nASEMmCAHFG2Fd7106e26nPykyF5vAoRXIo4w18QklfgJ+XRopedQ+riOOI+Q\ncaRA9JvcKWY6yWC7BNNqVucASH8ECKOAuqDYSVW87dgYPLQcFAdoHZkoS7RK\nKxqrRiHysW8Eu4VXfIhMu6wwEH1djMDCh/gb9tf9qdITB+wEOLceHNGiKuyV\ny87Pdko/3AkQYMjSz+64NOA4dohShpQuGDXqaBcZKWq+2328IxsjLrDV/8ZU\n5OqCXCkGlc3ymT5fLJ7b1Bg7J4sWMPXTWBWLbmFtc3rKJB67yznADKl6e5vY\nQess\r\n=Jxem\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b53d9d2ca98f518aa071c4933f2c0046916932d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.0e3917299.0","@material/base":"12.0.0-canary.0e3917299.0","@material/shape":"12.0.0-canary.0e3917299.0","@material/theme":"12.0.0-canary.0e3917299.0","@material/floating-label":"12.0.0-canary.0e3917299.0","@material/feature-targeting":"12.0.0-canary.0e3917299.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.0e3917299.0_1620156694928_0.9743967714388637","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/notched-outline","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0560a1663b34098041dcb2f26fceb451f3aeb8fe","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.836b3c7db.0.tgz","fileCount":34,"integrity":"sha512-PYF0QMRUUcYOWvcVFiHkiNap1oCw317GKzOrgTFjdUo20GLieAD+7Y8BS8hZyzI3o22IXOZrO7IUKbK9+pTv7Q==","signatures":[{"sig":"MEQCIBQbJwJDfN47PhyI/10YCD2yY/HPxqB5VdY1Sj+K01PlAiBJ2zNVIDcxeVLwvWPqY2XOrqSy5NdmvOP6C5mZAqN72Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka/0CRA9TVsSAnZWagAAo7kQAJUmgn1Qc1pwVujQcqin\ndXw+nORxyggV4xF5Ruhg1P1h79nOFhBuGxbGcar6N2RYamXGgcANvjoQMTKb\n2D6UHYROnzMcesuyTEkA7eTrr8AKnYy7jxGJf2zX1Q0Yfi4MxvtrGmQDBdzg\neW1t4j1LOdZUoyAsBR17wAiu8rFjVg9ONicTnrrhM3+m7dH4LvfGDIDSjohJ\nPgyhEZ+CrrT4i52vlx9XyIHJjb6/aZ5Is9w32QA4gelmcBdN7LnZgsWjd8l7\nYvu5SN3bvligwlNXrxiS+oJzSPQ/SHFmiu5K3obJQooPAsJu9ybF6MTJ6QhL\nZErbhcPBf28e6O123TyhKYI7ceaAAvbcMF+kLEk7JkwBjMVMfJVGBPviCr8w\nUHRlykMN7/P/9jz1+XvhyysYZo8s8PRyjS/ssBwX6TNlH1WB3nu6qpVJhaUL\nbef7mQyn35pBWoZFmMYWhwSEXhkuX4P4yqRuL+x2zZqeJcfLtMn8Hk/UmCGh\nEz6qvwZ3rr+yKyxhBaDBiUnrJE7947w/RpfV4tgB1YqQqVZtXBS2H1OGdeeu\nxheDLGf99Kv20ODqFWCC3RZ1o74QcRLRMQE3wrXuNIk1ONeBw+f7q9aJ+RmN\nc2S/Nw/u3Qshs1QzLn0kfGFmGrC5Dn4ffDjj25X3hXbdZz17kQFUxJX5SpYq\nwcV4\r\n=DD1g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b39ef8f7b55792965f33ce0e4907f1811ba2b17e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.836b3c7db.0","@material/base":"12.0.0-canary.836b3c7db.0","@material/shape":"12.0.0-canary.836b3c7db.0","@material/theme":"12.0.0-canary.836b3c7db.0","@material/floating-label":"12.0.0-canary.836b3c7db.0","@material/feature-targeting":"12.0.0-canary.836b3c7db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.836b3c7db.0_1620160499683_0.9364433302556712","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/notched-outline","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0348cf28ee5f0f26ea60cfc0c41300edc1a4a3a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.53d4e6d59.0.tgz","fileCount":34,"integrity":"sha512-h9eEH0Nh2HtpHm3TRIm0pkLrJLKA29ghdS1QF8EuwZIrXQ3/NAmx782HYfRflk1w8JMhytuHj9S2ASlDzE8DFg==","signatures":[{"sig":"MEUCIQCETJoM5rpH5EWr67WYR7LL95lOVjWrVwnyWMHnCHWrFgIgEeXY3+JTO4fuR3WFYAy15rU8717V0US8dqT27AxP/Bo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbOiCRA9TVsSAnZWagAAEqsQAJtoogZN7noKgCTr5ygn\nsEu83UkwN//DFrDzLRhvHwugl6kDAhzlgVO8oFfmeu4ToFOCq04ONZ0tlU8J\nopzO5/i3qM9cwkCNmBugfiiuc4EZyhqWXfFpxR3X7p0wdOe68jo5BS9AFGJp\n+/BH9BRXkNiVINo+pa2RSAkYFqfUFYThunIMK3S7tbZogxAr09IhamRxsKO/\n2aS8K5cYafXq2kjTQYV28MZirN/LZsmaIQJ4vn1/ok2rtHF3PtEZoLGSXoNf\nKCBHkZgqFqffeyDuA5D7n5GtF18Rytmd0yVwjkO93BhnXl0Fz0bNJ+Zq9/7i\n3OX5QmjNTaFTcSXYj6AR0m218ysDqL7f9PvinQzcGNL107N8BkOo9i+CJZ/Q\nn0BXT5ShxBCuVoGaML3yUhJqv4eR/Saz1K5h3vnzvYLbgy2JUXILU1SRLxk0\nEgTszpIVj4/CSqCxdgA6+KlsVhU27eVssyB9Ni6gatiRTJK2Hb/ef3w3r8Mi\nMpjdQqUnj7tJ39vZb6A/0kHj1xUJonPM4fR6XGu1VFqN67jR0540l7kPaRxk\nxBcoFApEkmtPfK0plCZ76cOaX/tgRD/ErHW/JynAoQaE4/1ksjjmDRXuq4Yx\nYYxxfmM7nTOMoKE/STX4GFT+tZuFtIEXcb+MsPokNtF+QuEJrh52uv9pI56W\noNtr\r\n=RwJl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a89a7c81034e7bfbeb469ddc1e1e463b018f7179","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.53d4e6d59.0","@material/base":"12.0.0-canary.53d4e6d59.0","@material/shape":"12.0.0-canary.53d4e6d59.0","@material/theme":"12.0.0-canary.53d4e6d59.0","@material/floating-label":"12.0.0-canary.53d4e6d59.0","@material/feature-targeting":"12.0.0-canary.53d4e6d59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.53d4e6d59.0_1620161442065_0.5966673975396037","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/notched-outline","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.18d147e27.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d89f0f21ea1dafa9b3d3c0f9b20342072338c8f8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.18d147e27.0.tgz","fileCount":34,"integrity":"sha512-2TJDHnY+VN/IEJArF1D9eBzhG7YMFsm28+Gw17l+LwVoPU2PILH+pqJlUsDEIG0GnqjSnaz/EkbjH+quziooDQ==","signatures":[{"sig":"MEYCIQC5ZrANobcIFulIxqiSg+YaPW0Y2JYnt+oWl2cp8aVWEQIhAO10DNT/kVzIMuwmm/q1Sb/QF9RzufLb1XKC1LrE1Usf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbWcCRA9TVsSAnZWagAANCAP/3Uu3veUZsZcuVG+eTsP\n2b17qg57lQ5JmeirnRNNB3GhZMKMb9g1v8+tDZJeZjkavZCw5y9R+bPxgs8J\n/5OOMwEagQjhMWEmJrqRNhN4zCqPgY3a6rFhYgYvzI9cn+ZJ0tf2tXcigSPT\nvHaNR+PnqOT1am1APjOOoqqMtStgM7BhGcdwlA7It6Y7IikH89SqPUjEGd5t\nBItugVk9chT7SHYGGI1xUVEw23CLXvBzfTpr83u0SG0Rm7Afpsh/q4mbw1bq\nwUJUJ9UCFh66zmqO8HiUqllJe9jv5HwAiCSju4id0EWmDgMvNzrWN/khlnSZ\n/Bj3tmO7DPpCX9+Zs0wfLot0BgCm1v4C1ChhsHRM8ysPrLoNB2s2U8kybisB\n0F4QdKIQI87zK+lzvrH9V7a+OfC4UssNbyQVFiVQsWuLwd0wXQXzYtkTkxhm\n3ZChF4XzvEdpcvLkJMTyh4zH8gIwQ0Nyt68SLVIFBLHHq0W5XAsbgNKyOgCg\njKRzNI1yF50bHxb8KLvHsNZE+Zpygy9M7mVHEZqV3vrO+QmhAF15wepQPde0\nI1ThLlJQkfUsWGTMMNovN/rs024IQuBzfRnLK8zU/qWevJKC7+yTHfiUpufu\nwCfHe3wbfcVXmYONdbsess5ecBOSzavt9ivPrgbmfsaZIJrlurDC5Y9ioa99\ncw29\r\n=B0DL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"02e686390dabbb1590eba968246da65476db162a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.18d147e27.0","@material/base":"12.0.0-canary.18d147e27.0","@material/shape":"12.0.0-canary.18d147e27.0","@material/theme":"12.0.0-canary.18d147e27.0","@material/floating-label":"12.0.0-canary.18d147e27.0","@material/feature-targeting":"12.0.0-canary.18d147e27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.18d147e27.0_1620161948229_0.29217510239610944","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/notched-outline","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.b9984794e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c6fd2a45cd681862ccf632b2f3d49e78ec4b7eb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.b9984794e.0.tgz","fileCount":34,"integrity":"sha512-5OSFHjqYewlNN5XB6a3/uOeK1GO/InXgFtWGZil/Pf64T2zIS7qwJKgGVzCu+AYjD/+HcN0w5rmNBH2ArnDUnA==","signatures":[{"sig":"MEYCIQCWc7DkZ5GLZtQE35AgTO3tqwVfDJMXeP9krheug5kcBwIhALtsWtjG51dQc+q/SJh4bo4OkH9hC3iDf1lNZWoqMqel","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdLtCRA9TVsSAnZWagAAHakQAIpMoAfK6M01UrAn8Mfq\nqQADZ+RuKD1KEWweTGMyZqvCoy81yBEiiHgVSm2IgnAu4Sfkol4uvDjz60JZ\nqR/bnfCzmW0YHdYKTh49rCHbAOdOJBmHTpxRlzgsYyWuMLiNpE20bKEiCjXA\nfCe8AtbMWpFLl5p7XXT/OxdQ1Vzt2nDsKQ5LDvG9tzna8BpR5XYb0ZtnVcoV\nK2BPiCifh71Zt7MhUtQqhXWr2lB5hb0mh8HRGdmcMnNlkBW7TMDAuVbkZtoL\npTl7ylRzjaNpa7HzK/XEYy/lagkENA20VoS5Qxjzgi6OqnVIWVZHwr2jOxb3\nTieQroCeebFuY4WPOGJgTrEFVnhLs2/tyqtcFom22JMYEIDQcmaQHzd0X/qv\nsFERf4o9SvC3isZ8kHw2HOWlGkisJ95WNppM+p0rVGK9+L8/MbCkY9X+S85I\nxhVtli3kQBLIDKg733zDb4WlPwgRLAN1FIl7scJ+Y89LJKjKW4RMly4UAbNm\n1rw6tdJ5V6uTohl1UpmNBm9YHcQXKJAeh2o8/hbHiMKELOp0dwON7a2t6QW/\nmKDAW7SaFwkgPqKhl/HO4a1KBvCVD6PWDsxZ0FGkthAkpB1FuQkksgu48Xvf\nthg8WgKMreqK+eOlzxUJE9+vRzb9jqw9KXT/u3Y1Q8xkOV1Jt5sNBHriJtQh\ntRQa\r\n=qugf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b9cb2c88737add4e6d3e04893ef4ca57b7848549","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b9984794e.0","@material/base":"12.0.0-canary.b9984794e.0","@material/shape":"12.0.0-canary.b9984794e.0","@material/theme":"12.0.0-canary.b9984794e.0","@material/floating-label":"12.0.0-canary.b9984794e.0","@material/feature-targeting":"12.0.0-canary.b9984794e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.b9984794e.0_1620169453400_0.6577341449137686","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/notched-outline","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6abb5e8ae39d7be3ef5fe9dca7249f7708d25e4c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":34,"integrity":"sha512-S6Hai7IcLLcIU/sKqHm3LrvlOI9794YpSPGh8hhrThr013nXCi7/VR0i24h8u9sB6Uoc3aR/uimAfyfJkSwKYA==","signatures":[{"sig":"MEYCIQChu7aEei3lVQKEdQDRKZfGFEHGxoLi9vcBh0Owi3jaoQIhAJ+hLJN0OYBi3vsQexo69zMWRt4FDyC+eMuG6BUT5PR6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdO+CRA9TVsSAnZWagAA2l0P/itCYRWl5nKRQF8Ruqtv\nMYXuiEIVzZrCO+elu6LTZre2sheLx960VQHrqLM0JfawX5C5iDiNLiYxrEYr\ny6kGW0Vb5JgkHjcK9/d4xMo+de8nni16vbXtDwpJvhaRqlCGUoTP+O++xG0G\nN0t34iDx8gh3mOd74JU6cwV2nvrGhf03PC1gIjxp/1sY59ZheGzxW5SnOdL0\nCtB/yse4W5n3AkyrznhKfzGSet5nkiSpfXi+in3drS7n7gUYHI1r0TUr/R5S\ncWlKDYK4oQ8/Q++mA7YR9kBJ4XgnmcL+jGmdHAdK0p1MRSlYL2uopyMQJOla\nnOdF4v2foAWmtlcPUqTz2lVbMXugnlBxDCRJPi2cbTH4YmpayJ5HuPNUlSjP\nEzOK0S9FTOysI3kXE9Rr62wpstN6+pz8V7AWxBZdwhSWQVDb/nRXtz9YLzoS\n1//0iLZfyh5wRa5nPi0Q4EggyOMnbr8X6jWOoqA2j5ArGdy6k7PZn9MLEL2l\nxYwoLWU5XzHvYLLfOy2B/dGBmAeSKDuwBiAOr6bb1r/mLSyPoV2n8Pfxu/ke\nPI75RPOLAjYHf6GSe71G7BwEQBjDo2zTEW2wT2GjzPQ0m70ZGCoVkQYCU1cU\nSWDhZl8alH0OCD8qtpifPUGkBIITt52k0PHNz4m9oXLuuBkR0DwK44tlvoRk\nlhuT\r\n=AHIR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"219c30995da49f5c5f458aa1b983f09054c2d4d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b76f5fc9d.0","@material/base":"12.0.0-canary.b76f5fc9d.0","@material/shape":"12.0.0-canary.b76f5fc9d.0","@material/theme":"12.0.0-canary.b76f5fc9d.0","@material/floating-label":"12.0.0-canary.b76f5fc9d.0","@material/feature-targeting":"12.0.0-canary.b76f5fc9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.b76f5fc9d.0_1620169662235_0.8941934150475195","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/notched-outline","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5af3e93bf0d8e5dfbee5bec782d49a92f579c9a2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.055d4f10a.0.tgz","fileCount":34,"integrity":"sha512-2Cna+pw4b6d+0zcKtmZP8bjk+e2ZNRsz2D8cZiSicnsv5EeZkmR1h5BGisxDgnm/Y1baaTIM86pYFTJ6sKQgcw==","signatures":[{"sig":"MEYCIQD8BsXGtOz2EFjrsWDkTUzz5Cs8MQXOSSg4Ol6AbL1pRwIhALd1YI6HaTAVtGqFNDvkqpUOFr+2QqMrjFrYlzApcxS4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkddSCRA9TVsSAnZWagAAxFUP/02BWBvdU274ug4yazsU\nRqhZzi6PnU0MfFsb8m+mF8rVGKkCDQCfar6hhfwT24CGFgYkd4arzTfGn++4\nqkTHLE5Vy5aqNdpwG/2StaV9KZkh0ZGaPwdCla3WqvTnie+Q3OVxK15T5H1n\n7ph5bTwzj3ZQ3C0PkaG+pleW07BK3SqPNWq7Z4w/0Fht8EFptR0WQSrVhakx\nPDvs/fNGFhPTUHdxfxg25NNi6yH2SUVdzLkIn/g/DFrxM1S31YArD0tUKjWY\nRLZHkVcPOhHcCCDAcOqLKO33laQCIcC1Dqn6mD+jvFXxSZhWI12LNTVOSs++\n7FSusxW1DIp9nqtWIBMEa5I5rOOZiqcL/cLB9lyC8+S3fFtlI6+o3Fhl6E9L\nVtKR6hrwZ3Ml6MBbt+TV0WMkMVwTchXKArBrWLGPX96cgj9T2+Nd5hgv9q1e\nutXGDEMoSPzdua7y77rJEotedJvoR2sIAZ6XAvAL8v6J60DNnnzyCV9iREq/\nm03sV0r8IMIYlJAlqBga+zb5EXG6ZNIpnQtiptVZUA3JtLXGgdGPgY92ptaZ\nn1aIsacNSlR7X3IvksfGXncCJkT6M5fHj1Wu06JPAIZOxgRMyEPrOePC5cNX\npV8m95jAYO/IQURhIm+riGx1gK5eBoG91NxiSvjxGSEaCSBYwJ0XVq2ME2Nz\n5mHL\r\n=M7bG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"df8d3cdf52cca2c339c1fa1cd18129db35422c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.055d4f10a.0","@material/base":"12.0.0-canary.055d4f10a.0","@material/shape":"12.0.0-canary.055d4f10a.0","@material/theme":"12.0.0-canary.055d4f10a.0","@material/floating-label":"12.0.0-canary.055d4f10a.0","@material/feature-targeting":"12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.055d4f10a.0_1620170578290_0.8350657036952034","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/notched-outline","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adc029299cca350cac8efeac3371800708ac35bd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.5b6a46016.0.tgz","fileCount":34,"integrity":"sha512-bFJY4thNa2amvslEnogPLazjZb6J3OafqTBv6Xcr6QbiK3mx0m60EgW9vafA41y3aezNDJftVxlam1U8wenLQQ==","signatures":[{"sig":"MEUCIE5F5eChx5mJPQHQmmy+tr11O0fjps8wS/MTsjYVDgDgAiEAm/QlGXmkwBaxZV2CngTr28E5h6/PvzcKnKozapvr2Xw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksUZCRA9TVsSAnZWagAAADAP/1JmRHFjnBkhzpR/8vqQ\nGFjKSlC491dwJE/JSCbw1ZaOtNIilHwvxRFCD9iwkgFrsew/77ikl3CSjcej\nbu+gRnO7fMjdLwbo0tr1OdsUI6Q8TuOv3vTPrSHZR7YyreUNz/F66W+sAB0z\ngmSdNzAVO9uPEv2UtspwSfu3StLrNyqmHsnvpwC++r8ETRtw+OD6a+Z6Q8D4\nyeIqW2J1SHFN4GjdMoxYmC7yIdDVR7Fb6te5flRs+xN/qT9MjOjbgbqu0Hu0\nVHzKog3TKOHDsKKoH/FsZQ+sikCbkvg3z8UOUjP0kkqyR2AAKbsq5d3UaUBN\noOU404hHiQO3qyQmhfs1z0FSl1/8wdbva3vE17QeDdCDiVQwlcxBU90UNjPK\nOIFIykzeVsF6zbah9bwoPD7jnOhK1oeDEG35v7gYNgpqvOkrvb7tlD6BJrex\nCpt/NWPkZUN1JUD8iYDi5Oz/KKGBqnLgyvLRiLoouSFH+WFRjwfhkcIJeEOm\nTEL5bXdR0eDkIlVLHneTn2MDFHtSNYAhEJ7810LjCULDfP5rIpcnznc91Wjd\nO8G1jjUMFigwOwdCQb+F8agF67wO7C9RZZI1WEX2XqKm87VdCHQ5L/uYS9hS\n71qRhqmuAMS9XdIVEeEQiZrCtMYJbA/Fk9RR+xWeNQRpe+rFzDAZ2Pxbv0Nj\nmTFq\r\n=Hcws\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3d9c7e3c179062db8b5bc243e8bbfbd9d9132e50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5b6a46016.0","@material/base":"12.0.0-canary.5b6a46016.0","@material/shape":"12.0.0-canary.5b6a46016.0","@material/theme":"12.0.0-canary.5b6a46016.0","@material/floating-label":"12.0.0-canary.5b6a46016.0","@material/feature-targeting":"12.0.0-canary.5b6a46016.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.5b6a46016.0_1620231448710_0.9012771205827621","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/notched-outline","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8a99c074247005c2accecb615b8ba789389c17f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.33c9a737a.0.tgz","fileCount":34,"integrity":"sha512-cvMclyQH+rECCQbxGBkWdXuNT5Zx+fD4QGHoAgblPlFOfwPlHL78v+2iwiHB6m0SnrLf5THn02x6UAUmKvHfdg==","signatures":[{"sig":"MEUCIQCbfNajWGM32Cz68A3HNZSosx6ho69Wr51HnXKVGzB3PQIgWa80LMEb17w5p8kjwuFsbEMqFLPEtH+lQibS03vI+lE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktW3CRA9TVsSAnZWagAAzs0P+QEFSNrpTJ8aDmAWRUu0\nplAJy/x29lG7uiSGSclpHXMIYD1p4UUzpA7MZDaRmV4L58gyvspBE8s67ND7\nmME9uun2N4X80e95TCliYWgA3OLf6Mdl/X3MT1F/8v3xaLidxn8iKwysEuBI\n+dRtLYcjIqyTxS23wyl518p3VuWY0FawW57NaPkDZpZRi0AO4CklxlFx2Rok\n0vpscZ7AvsYa7VR5MpkeTkMZlQ+tCqKsZLgBh+7tdAuD5SKCRqUXq17bCMSN\nQaBofnn1AmoIHfQfUUVb4hIgBdF59o/K20MreCK7dSbbDhbMm75pgDJD1Bvc\nqQKMcWdW9vSFNDsJOqnWZcjvk7ybyHgjf6nzoqFoHHmo1iF3cx/P9Q6iwLoB\nfulGZmoNOKPe8/qio7NdgbDdBjW+gW132tn8/ZrUqcbbDzupqBLAMB36c667\nz6vrGlzPbcnyIa1PiECk1fPhMUMjtEzehZ2CgsGgygHgQXVm7+ZwHjpAZVYC\nbZB2jRSEpJ8Gwa6VYpHEHvEHGD9Krf3JUFOsHjqLAB3ePiXuAZp3/1WxQBjh\nZuZ0WLfes9rcyZMjpHYuVzQRGs2Zc+RKltVLx0DXh8Cr6qd/rQ+KZzuTx2qS\nnQqiBr6B2vX24DTSdbEvv7s8BahW0V1mlNBssloW9FkkL9y+e1Xgf4hPvGiX\n1PeB\r\n=6SBA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fa5c97d28049bf03f5b138c0d97bdc267f43c363","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33c9a737a.0","@material/base":"12.0.0-canary.33c9a737a.0","@material/shape":"12.0.0-canary.33c9a737a.0","@material/theme":"12.0.0-canary.33c9a737a.0","@material/floating-label":"12.0.0-canary.33c9a737a.0","@material/feature-targeting":"12.0.0-canary.33c9a737a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.33c9a737a.0_1620235702601_0.2414224935767657","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/notched-outline","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80f26f0deea49b6de8f821d3626e464439b54c1c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.9bc0effaf.0.tgz","fileCount":34,"integrity":"sha512-D+DbnteDWqdiVYe3sSs6bu6XgB8HE/NwXjDR+obl32cv1Z43Aui0smG6eRExFG6rbbalMSl5RLRUjq2Jri2YJg==","signatures":[{"sig":"MEYCIQDlOTM/lFFAy8mEHG1fswSdTNy+WoRDeZCl5Et/3e9EFQIhAM0vhOwAmxc3GvaItawbdC8u/ZB3ukAktHXnR8wb53oe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwedCRA9TVsSAnZWagAAjfsQAI0MFANPNChXc6inisc/\nu3uM04/hnOoC3oLn29F+U1c30Eip+2HesYXyjDa95XmOmlSB1F7ujlFc/jVH\nrl86khEktiiDzTXNAWjI5WPQKeAL3cjv8nhqTFA+PqIhMmuByAs9YqO0JOqR\n1NzIzhjWhdEg6oO3R94EZzlbE3LIjWFJ5ngRKGKeGBWtw8VxK1h4Y5A536Wm\nwC2X1RopVDvJrVFGSKj0/8ypgePcpEsQKgpFR5rKGVHvetWnHbaCBb8+n7w0\nRZsqniPwsoKCtr23SqEpGcTqVXSThtR5Ht/LmHHVKEhP3CfETOm3bRiY5RJc\nC3SdQL34ycOnuDCsgcUn6Vs0m4S16hHkivp7QNFc4t4dQvFV+5fnqHDt1r2w\nqHOQrws9yqm8DW+fREj97Uiw5sCEsPSJGhEg7kVSOcEWKB+mEHFJv+7fJy5C\nGAV4cv+ZCRDo5PpcMCeHDJ4M4JDf+SZv6Psmp/1oumyX7eK6OQkksir3x7MK\nqH+anzZqzkxpj5dvBcVLyJFrXYRISwloPe0zggOBXeN6l8AK0I0P5rAPha9n\nAOUZLqAl8BkoWvGCgnSVC7kloLlfbPL356gpb2LuA5RSIqU5R+BoOGXPz1Zw\nMsZ7KGpTfdijav+QwzpoB9ExAeyafIfIj471fDrHZRzvLxu4grxJSi1PA9hM\nMCXU\r\n=LB6F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e671ae06efdf42f7ea0cb40bb6700fc57f6a35f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.9bc0effaf.0","@material/base":"12.0.0-canary.9bc0effaf.0","@material/shape":"12.0.0-canary.9bc0effaf.0","@material/theme":"12.0.0-canary.9bc0effaf.0","@material/floating-label":"12.0.0-canary.9bc0effaf.0","@material/feature-targeting":"12.0.0-canary.9bc0effaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.9bc0effaf.0_1620248477041_0.8355490910631906","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/notched-outline","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e6eb0ee62d26b03832758734677f123488fb9fa","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":34,"integrity":"sha512-rrLXW6CnpYtB/mfT5ptgW5LV3gqVKC1O1IZrpnv2o06P7mtpoyBHNf9hTU6oE94OWVfcgYVN0ZaOdfg3b5+wlg==","signatures":[{"sig":"MEQCIH/d03xh3SR76JuDdsT8rwbsl5PzpIDhuhjXIGgNuVLVAiARB/0y3Xl06F/FmlRNbj1u3oUSyw60FiT16CGuYaxyYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxExCRA9TVsSAnZWagAAJfcP/jMoY6xJLWjJ90qzZLqI\n6IMeD22UbnfR3WBF09z4ywv5YToDQAXNeqEv6wHXRrXEo1+i85Pli6tnDUtC\n2Pj+z2GC17AKi6MAaYCdTE2CTAe3VA81BTS+Hm2L/GdphtsYR1r27r6lADRy\nuC0JUWsakPVaBSe4ZrkMkOuyofsBjbBGZEUz65gjkVTtkZFi9NzJdWmoHUDv\n9+Ud1VsOabq6vh98HLyAEmk/eADpt+8VrxegotZokB/N0W/CBize4/3CcBfF\nfskB7sBv4wuR9NSEOeIdykbKbA9F4I5BFNi/CrikwuPZUjcghFequLqMl/d4\n5aHlIjD/WYzUZw0ZtTn5Sf8MxS33//N0J6ZcOr2WPZ77xN7egLGIqlQkZijm\nj23yibvnXCFmyocikT11j/HawXvTOxH9bYewt4Mio53TDOCBmCOUXGafrEjA\n16ycWLrM6xCWPUS8390uowoah8HzKYmMPGSHSAAiMWuYlJlwMJr7k+QejWGC\nwb1aMnKUY8MJE8y5TobmsqOzU5x2XMxIFNy/6LPhggWNV1zGDHswOv0m+wSN\nw4R1Foxpl14CSo+s16HxjbmLkSNW2T6ZyvffsCbW/J2snZObWsCAUL4DXhMz\nPj9y89Kwxnt19jLJ55yhv/7kPeelkI4czMk6tDRWK6a6FB1KAkiwKN3/PvRl\nI+t3\r\n=qSgX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7e20a4b86d7cb59be9ebe12cead11b1e8c7bb63c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a1e0f2af5.0","@material/base":"12.0.0-canary.a1e0f2af5.0","@material/shape":"12.0.0-canary.a1e0f2af5.0","@material/theme":"12.0.0-canary.a1e0f2af5.0","@material/floating-label":"12.0.0-canary.a1e0f2af5.0","@material/feature-targeting":"12.0.0-canary.a1e0f2af5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.a1e0f2af5.0_1620250929496_0.11369426159955709","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/notched-outline","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.06930c96b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bfada62946c392f94239030cbf1a35792c9fba0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.06930c96b.0.tgz","fileCount":34,"integrity":"sha512-J/48/GzvKsWDxW3Oc1PXLVzOGULyQtuRcoMnCEvyejaglz4W21fl5Q0f5BtxcxJbS3oZOO46D+nKGXlU4sRHlw==","signatures":[{"sig":"MEQCIFSNJuQm1ifWi7LsrBcJgvBju35Cxf9SiC7xHvFSHyzUAiAtPIGu23TWhQs7Py7hW/1Gt4mzZj06Elk4tJ0h0WWTIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyzkCRA9TVsSAnZWagAAGZ4QAKH48no+v8bGpyysh5gM\ntGft4dwXL4HpUfq4j6C6tpxtSbef4omT/BItjFCVFKhXndbpTM6t/6HW6prc\nfUpEUA5l4ZbIvK97FeuulzZ7HTgR5nut9gTFHl4zJkGRbQrI4wfq12jDYpfY\n1mUM4B5pa+ZIV7o5vm2vRgPKoj6u6hIOeDcLBlA3HDSGzScSuhYB+2d2aXHX\n/4Zn7Q7ldZIm5wlwrmCTRjDp+Wap6t0zvEHlpu0J+LG/0LYyHlkGH9qa343f\nlTBEHTA7h/RjauOWqk/4rBCuD0MTbmXsRuEQdK2TVA467+ysU9wW57Wyy3mf\n1dcizJr75UaXZ5e3Hd9UoiTJ6mGITW2M/W/SijqahM/vDf/ueAtsDN7RjeQy\nGcYGi0Osr/e/3BbOy6tIoDqioh2rhJ31CLsxrJVaKUvwZSO+zDFCb6kq8j1K\n89Ghz+YdRAVyiV81Ix65C44NY7DWV14rNGfrWNc5DMeegryhg0ARlQltMBH2\nvtPuQL3L8/+LZZv/hSRoHgCXu/MPMnRb1qkcOO2s//lb8pCRYI1n6ahBMaof\nLzuK3UgsOapMts03/6P7BMxDHaAfyJSbZ/E0pDGrBJWJ0rhtQh3aAUBIInFL\nVZ9+t89lDh+jik7YXbzVTHkZ3xom41xs6cDtFxYw+L08b+tpd3M4QNae54ET\nvR4y\r\n=9Lyw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"aef50df6c5f49244a2b0e5a941794f4e3e4fd21c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.06930c96b.0","@material/base":"12.0.0-canary.06930c96b.0","@material/shape":"12.0.0-canary.06930c96b.0","@material/theme":"12.0.0-canary.06930c96b.0","@material/floating-label":"12.0.0-canary.06930c96b.0","@material/feature-targeting":"12.0.0-canary.06930c96b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.06930c96b.0_1620258020433_0.9047460190412846","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/notched-outline","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dae4c97193945b5aa0f0a10082a299f4e96071c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.03f525f9f.0.tgz","fileCount":34,"integrity":"sha512-FuuLQ5NKBtEyN/Vdzu03Pmr0zfQyqjsHqjHJKbFgwTtSjHgRVG40cvnncyriCYr7zfecgGshbIRhoqNSQ6Dmhg==","signatures":[{"sig":"MEUCIArUfabjmS+bS4XNSubRjPfp1jvMxmWqTF59pXsEzGjFAiEAgbF5db/eahYo82WOL0CRponA8UMW+AycJq6FN3qE4Wg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzjUCRA9TVsSAnZWagAAMDQQAKUSOIQQZGGnGmaNrknv\nrq6tApWBJi9iiDv6szJFWjR/GkJ9BAgCLBdLVAE73dCz1Uyz3VP8Woshwhvr\nA8/x3D8kJ+dNGSfQSscSevRM+7ckOiRs8cAJ8+4OWKk8KDiM02DQz6WFD3Mj\n7SGm0ugW91A0ge8g+TF7gms2PoIfgWYhOsHLCX66h3dB6C1Si0unMB96Ik7Z\n+qOErG5X8AsLnkBRpgGpmOZxpC6JwrtZJm7ol37wudmpl7d97nWxWxthKOLD\n6257jqUSxpn9OV3gqqGvyqejuz+n0JQE9G0tzLw4mCUvmHHdLgU6X/uMyV6E\nQXGGY0KD/a/EDg9m3bW7VeVHHAWA7udQa/4l1BrirP9ASP4ROfzx8qNSbfQ+\nEsA9C5fdXvcRE5hgKM2WnUnroXPoQqPo7TRG2/GDwnuXWNI2cDMALTvcvCW1\np2eY6d2qw7F66BHEAdi6u/QKpBDtqik3fA4YVwNG6SxGYr3xCn2ZilQnekdu\nNubmazrxc4sY4OyhFOn/67FjNhnnzmTtJmoieInuc5PJui9LwC6pGnOO3X64\nFSOGaG82CRMac/entPvoPqA1NP5h93hV6G+lMM5PpusrJjkIisgW6HB5ioff\nU2bZ3WWptoiIzmaaZIyTGlto+aTsOPfdeh4isMy3hjEDZI3IAQct6BQ0Y8/K\nHlEN\r\n=dOyh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f9df1400e21c75e46fe6641abb76d5840dede67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.03f525f9f.0","@material/base":"12.0.0-canary.03f525f9f.0","@material/shape":"12.0.0-canary.03f525f9f.0","@material/theme":"12.0.0-canary.03f525f9f.0","@material/floating-label":"12.0.0-canary.03f525f9f.0","@material/feature-targeting":"12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.03f525f9f.0_1620261076472_0.9872133868707371","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/notched-outline","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40eedbc4ace26316ddd08301fbabdb366f64cec5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.e82ba2a26.0.tgz","fileCount":34,"integrity":"sha512-K0uR78em7Quo2UraEr/+/UBm34wJW2HH0iB/8ounRgjSYSmYf7tVfFFxph7N8mvgdallVDEd3txpRCQlRKkH6Q==","signatures":[{"sig":"MEUCIFEirjip2i3gBWceHuffKKKXe1DWE3KbkuWkekW9NSjZAiEAkV6ZIrP/QDd0zFwTokXGynpNaI0vrSCt6fiVqbBl6Q0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBH4CRA9TVsSAnZWagAAqCkP+wWUe2+Hf33NNBlM1cEL\njBNJ8fxglv9xSsVmX7jnvRAe/NDCbaV7WF/4qAkUG0EcYxUvhzXZPXO2puY2\ng/AGFiTgj22TQWF474hlHdOQMB0ov0iSF65Kt0hueu4xDHspCLLJWwJ9YQYL\nA41wuDORxqQMiLDC0J3yNMcTXCtyrpFCr2xcpVF5yL6YGBFyBw+a1vATjvi5\nA0GAa5zzWhfnNm4hP9yTpsBV1RQj1SRAKuSrvQdnkGLyHS6yioXwaU/Qkbv2\nvUyhEzOVkq9OOjJ5/3nRTRx78wx9tubUfoyWOKDZI+mDjrXpmE1051hVdp1r\nShsMQO1EKkLdVRgcBqrwlC2OxRzw4Hzg+XKbZE5oQ5FxP4xf9pCoiotSBlqs\nw1tOD/Ff/tYD6HXeL0imEUJhtUKXl/3D6QBLWsLKKfQrna06Q1gf/gMvGq2H\nHDoL2ktMyCWOPYsYjfAg6gt5Fi0a9KeiEfEZRGj8S1JxKmYRxTcJsU1NS3E+\n1rtc5SxH0AyyWlCiKQk3bwPi5FzLQBGA/AkLxUr/nDRasuntpvdxW/0QlvlN\nEX3EmZwM1JLEPhjEgKvQLMoIQMlamcfAV9Xknu5IIgOTrQC7pZG4RQiwP2E5\nK3F5sOLS+DvH05NXBK70f9keaOwlSC2DC1XtIbGgkSDjoig/vIlVzmR/9hKN\nqnmt\r\n=rjch\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c3349c46dc5415cbb89b8260a8db012f44f09eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e82ba2a26.0","@material/base":"12.0.0-canary.e82ba2a26.0","@material/shape":"12.0.0-canary.e82ba2a26.0","@material/theme":"12.0.0-canary.e82ba2a26.0","@material/floating-label":"12.0.0-canary.e82ba2a26.0","@material/feature-targeting":"12.0.0-canary.e82ba2a26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.e82ba2a26.0_1620316664342_0.6013718352722479","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/notched-outline","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5dc0eb2fd2cf923803423335655eee83e8ec85d4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":34,"integrity":"sha512-cf9qyr9Uyhx94HuHzRZxHy2wZBqLZxKNMFeVZgPD191Uvaxfg9Ny0H5enbsSbGqy6Q+AKvSUGWAGGPZRbRDWQA==","signatures":[{"sig":"MEQCIC0NSvyl3anuE5ME1XVzCEKmCAuBcJm9+Ug1ITxjeupkAiALTpycangxFOrjQlCnHmR8KS0mJ1PVKkFV/53YDvO5iw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCe6CRA9TVsSAnZWagAA96gP/j0CLObGeQMNjOGoTYg5\nAAVCCLXSyhK60D32dRVJRScGjSTaghoYagcG8QXspvMOKYJhcyHolMz+kIUn\nZjLAf9qk+i+FPsmChtXDgBAfSLyT3V2jD2Ca339QMr1M1guGgwDXnHaONAxv\nEpfq13yD09yN5ZfmS0pMgH1R4VV91lOjbuvYg6ln6I3YcyO5IFmUjil2Eta6\nbbJq3IbKZvHjzoBtRcMeSj+kys2O4Ro2jftob2PMlgcn/Zv7mxC52u5YoTyJ\nze/BAKCJONeUn+7dMJeYI3GiC50gWVwXSJSRt4Qgbx9ll9wtgCBXmMFtZHkJ\n8BWVsyqZlLh5AfdV2XSwfM59eHBFKBETLVimVIaqOnpWnieOVYlPEOpA3P1T\n+lRNgzHlijIi/ymlPBPvuhdGM+LDFIX86ajGQuRI2duyuA861r3erST5hyXL\nptPjcNkiJoMWJjAT7MM4YwIUfWYoWh3ANLlOIBPXN+xGFvwz7+SIcSIe9VJO\nXRAD7pzyumcrPAhzqzNsW7fTaF6+yXykvwXL1bRRzAb0BRJWX+8W51g1kvFa\n3lmkL7zMF0oVbCGywD/62vOCYZZNde0WYigcISxr1zKrBxUng6HNAa7fs0Q3\ngeEqptkZMfmKa5jirn0iS13f4e9bKh8cyAM2M2hHGMxb8Oy9qZRo1gYJp/s6\n6naN\r\n=3tzc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b549929c65e0a33cd9d427a600513c663c2dae28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.fc7c4e5ce.0","@material/base":"12.0.0-canary.fc7c4e5ce.0","@material/shape":"12.0.0-canary.fc7c4e5ce.0","@material/theme":"12.0.0-canary.fc7c4e5ce.0","@material/floating-label":"12.0.0-canary.fc7c4e5ce.0","@material/feature-targeting":"12.0.0-canary.fc7c4e5ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.fc7c4e5ce.0_1620322233424_0.8875090233290535","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/notched-outline","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.65c04514d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71f0ec0d347952744b46bd0978ebadbe172ce00b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.65c04514d.0.tgz","fileCount":34,"integrity":"sha512-SNuxpScYK+6njJC9hILrG5J+Kc0qusFSIgPHoKr2C9kJI1otRfg2l0qAnHRu6+CcIDwpOwUBy1/DxuQkLbaySA==","signatures":[{"sig":"MEQCIFu1KJJoFmrR0f/EnaUPY8XD8xILoQPI122tKz2B8RvgAiBgqYyxFN7naxyjZQ8HMov5IqFRiZ3O00FY74m6Hv3jLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDkwCRA9TVsSAnZWagAAkKsQAJha+j0t5L7OtKYOKt85\nWbMxv83guAI5lcKwGQRrJl0Cnfq0V0uFvSGj4+qvXKxjepeyWElnhJlmYqUe\nb3FlteYxbgxTbHkcox2Dz865GS9mL2gn/718M+boMNAHNVFX54WcHjgyxMOq\n0ONBbmJwYsSc00ZQgEfS8y24Plnyh3/c+FeQhZsIZgCPrfxD2pdx2m39ifMZ\nb02NgZK++R++o/HY2viRIs35UkrvilnlfzVt5fxqAScZehGwQ9neOnN8E9vN\nijLjKnis1v39GqZgn68Of7twIm8niduaeaBdJRa/QiDGve0oVGAK6ZRfOjAE\nI2LFbH/DsdOknvlI8BzS5e6GEfojO8KC9Crx5UE0GSgsNoWQbKjz6hTD8Jib\n8806oAyl4U0fqco5QHLTDzfdhh+IPFp+yKVvAqGAdsquIeDdcDd+AkIxgIJy\nksTpWC8BaKcHWiljPtUuXE/ac6n4kD6pzSVlsvH44kvdKTT3zBrc+5KRK36i\noyVyTCE4IldGvj16g6ebCEPa+P5xtHizY/yaPdJJf0ZJrmtstvFP8Psb9UKw\nYAER49ff//IsJ668uONAW6OAkWfwsI3B1zJ2bKQ1h2RwklPUVWDBf9iAsv2v\nPD9HJQA4bGdJOFgF68OuCeDtWI3f10zZj5aPnobPisu3rd7LDG3UKrfv4PjR\nqo/r\r\n=OF8q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"01ca5daeb81d99750f9020fc62e04bc76085858c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.65c04514d.0","@material/base":"12.0.0-canary.65c04514d.0","@material/shape":"12.0.0-canary.65c04514d.0","@material/theme":"12.0.0-canary.65c04514d.0","@material/floating-label":"12.0.0-canary.65c04514d.0","@material/feature-targeting":"12.0.0-canary.65c04514d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.65c04514d.0_1620326704120_0.006701410684295306","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/notched-outline","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7612df01183c6b9e338defdef6c86173fb1cc87f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.c97779ca6.0.tgz","fileCount":34,"integrity":"sha512-Ks7rMJozEK/4fvgzURAtftD7+beR+cTeJQTak1gqsaRTElWzcpC+ez9+kj2uvREgJcQbdlF12OVS7R/jaMV3QA==","signatures":[{"sig":"MEUCIQCW83mJN/t9pzV5ZGw70hzBBqsd4ioFQPXirtBdYIEclgIgI1oPrwwufJzDQReAaeFCo3zPN6wEm+KBS3kE5B2r+rY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGM4CRA9TVsSAnZWagAArjQP+wZ5Ap033Xq0L8ji80qH\nOzRIfLH+X6w6/0YGcMzLPmx5iXzrwWCjoPzH/YWYVkSp42XSRb77CgTol993\nbVCzBehQhDWrhjail1mocZ0HN4NerIEe/QgFfqC1X9KfXsXaSOyXROZyuP3I\nTygzYVVnkjUPolKheOXvIVd3JeBLk7dhLxf0mWmQWvxdt+n0h88cocctQJ5f\nxCqfj0psM54KxfcCjJpwRHV8UlSiV7o/JGGxLejWg9fa7OrRq5l6cCUBmqbu\nCF8A3ST0B8DHAdjSn6WkkEstplboVKzw6TzSvkB8KSXnn9U0WFjv+OIk0B4Y\nm+kLGGXPoXLTO1jNuvS/efIV3bBSwQBtLiShBagMgtKtL4r9WxrjnUUto1uk\nKYrOY9uRYXj7Yfbo3Ib6YZF52Jaq83o0+jpAS+IUpmmmTlZ3DWh0jfMjNKu0\nNhFxy+B11gwIldbyGnOBqTbw9l82cRKsF4DtUmn21nFaDF7gnf0PuWsiMqqv\ncjgDz5pzOuFfWRuS7jIAia729ZISRvDGkuJVEAQTpriVdYVTt1mr/qPVqskv\nDgJcxETnsi4H2VNNQjYp2+1q8QZqBO57rlBSH25daHiZWiO9jLw1OikApgvP\ngYCr+JmJZgsxg6PjPkzbT0FYbyNRiMXzOWoZsyB8jNzX4lQKWj62u3Qvr/Gs\n/6jc\r\n=KqK5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"046f80118629481ec1af7c937a84ce6e0fd1f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c97779ca6.0","@material/base":"12.0.0-canary.c97779ca6.0","@material/shape":"12.0.0-canary.c97779ca6.0","@material/theme":"12.0.0-canary.c97779ca6.0","@material/floating-label":"12.0.0-canary.c97779ca6.0","@material/feature-targeting":"12.0.0-canary.c97779ca6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.c97779ca6.0_1620337463983_0.47360878194239464","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/notched-outline","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.869d890d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c4c525bd7d3a6d95a2d5c3a7bc3473c7bb79d25","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.869d890d4.0.tgz","fileCount":34,"integrity":"sha512-kORWUv75BBn7BWK4Pj5WdXcPmKz/q4gX+qAUpWfLcfCyMjEmhMsydAegCt5QVnkjmTZvgcKqrnH+VMqSh8AJbg==","signatures":[{"sig":"MEUCIQD5aJzmT+iOtXtkE5pgYcJJ6xfKvLMZvav5knBTHopAhAIgbSrnY/upMgDXormtDaH7iqICxSlgkkLz7/H78JTCwrs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVqeCRA9TVsSAnZWagAAeUIQAKMiGvypENcA05t1LF/c\nukeBFvoXWYij3nxR4y2DVQLeyx2rUPY1TGyb3FGUuiBm5/MFIxhn4QF2G/99\nEWeC9r833omnmS3AnSMLurFja4TcdkKSH/cdrMmLkW+EOFOIOUhKuNs6d3te\nOUwVMyVwEfV3ghxI2vpGce25QTeg+1vY2oiNr3akjH2BtQVSpVrPv9mc5eoc\nkGaRDXuOJAC1Ak5oarUxPPb8bUs7U2ll1/ILkQPenKEHf4xE08KT/0kSIgeg\nv+xltZOKu8+4kSt0tEH7tD8/PIoBRzoI/7jGw+ArFKeDy3dleN3P2ARcFFnE\nAWcwCdjyuW46EBlLQJ+T2pLy+/y6A7fc0r52mX7csl+niWCLlm0vhPdZRuSU\nT3/JM5LoUcaBAPSinVrMHUAZnggKMtS1wHsQmZRAHf0VWG+OrOZjifyKxQ8r\nLBllU7kZ9S0+zYS5yJPamsC7R6FArEaMv3GyAgfQVEvnDjBA8e+w27l51yKg\nkuT44HseIKCz/ogGYBmweU2zGhwJ6rQfP13W47qexkGL3/Hq6SAnMfgxzFRg\nyVAqmi7DudI6dLgY6cSW1xMVcJJ561rmqvVS1EN8xM56o8Khuzh4jYh7Pq3u\na3qr2cwRRDdjt1cgIg6SSzA2l/ZPStjrFGKoEfZSq8E1Tl979DliyZjuI/DF\n2rW+\r\n=AtFW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cd73688a61b81573744ba9a03cd2952798eb68f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.869d890d4.0","@material/base":"12.0.0-canary.869d890d4.0","@material/shape":"12.0.0-canary.869d890d4.0","@material/theme":"12.0.0-canary.869d890d4.0","@material/floating-label":"12.0.0-canary.869d890d4.0","@material/feature-targeting":"12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.869d890d4.0_1620400797887_0.7455719919021679","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/notched-outline","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b671aa545d1ce400449756327a5d35b33de92e0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.ec22e1da9.0.tgz","fileCount":34,"integrity":"sha512-fPwnbBA6socuW9zEUGE3OxSw2dqeUh3JoMhX9NP4x8tE6xzB5U0c/QWnG9FBqSGIwj+xkIjZ0j0gjjPCdx7CHw==","signatures":[{"sig":"MEYCIQDR1ztYYvBUENDYRKvRh/x/RnHwYpkzDuBXw5PJCLkIuAIhAOt/Lb0ldAkg/6b/P63LCbBufvPYClcJtH4HL47LUgfR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXpmCRA9TVsSAnZWagAAvgIP+wRwpuIk7ZcOzR/gv0ts\nL2hv/jP+SI3RD/dQ0yf6xxCNmafj2BcHGit0ZjPnmQFaRTdubpqdmlQQCEXL\nO1UOBFmY21POx/UE5ihJY6qd4JArJ3OYOhVdPDGcf1ld27KuYg3QbiFd5/s2\nNZjlSg7i3NXNPh93XolvtUChdTOenlkSIAik9EugsWQqR1xjXKJ9MxgR7MQH\ne31ANnlCNCKLAER2bM6nrS4M7djymGlCF0wJl2lIHwbelW70BSxYkCZR9T/S\n3C4zLcD91Bwc3wLhbxTkltkyp/O5b25ZjxeCDvxAuCwnAdVnFwQdRG1VzTzV\n2kqhWY3Ckonb2aFFiYnVSaemfi97bpdTzbjBC1CDLX54WXcz1u4NenD+Z+8s\nA4o8TBMWF4yqU7gXfDC3FYX5bqQCzvIh29ff/1Eh5zkSewsHEzbiPN8YNRRx\nj5IWOSRWbwxWxVzgp31HZsMAHGr2/VegB5Ix5xF/oNYBqcAa82hXr0UyF4Bm\ntSnyqtv4AM7sZSfEej9pzaYTi/wbTFSODRb+WL3Qi+MqPakA/ihkNQat6KCh\nLoJ8VIYuF8wu/mqL+o7P71hCUbZ6a/jilDbf5gEXSwBBO1wscahQjz4755QI\nm1MThzwZgf7axEcbOEVEZyvIOvSoqmNLG7ufko+ecRo3U82kx0xBbK61UQo6\nUiLN\r\n=IRkl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"273a15f546b8d5df597771686f431c3726397778","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ec22e1da9.0","@material/base":"12.0.0-canary.ec22e1da9.0","@material/shape":"12.0.0-canary.ec22e1da9.0","@material/theme":"12.0.0-canary.ec22e1da9.0","@material/floating-label":"12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.ec22e1da9.0_1620671077705_0.0015331266816858147","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/notched-outline","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f6a60b39d9db5c9b02ce190854705a2ed93fd80","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-nightly.7427449f0.0.tgz","fileCount":34,"integrity":"sha512-XWTAJy1EKAgy0qqyExLRotS86Ik5Vucino7+d5FoXUuuvu483KAZYWe1JqAw57kp2V8caj5KSp7iGZWOCr9YTg==","signatures":[{"sig":"MEYCIQCoSkGE2POBHSfjNIEXIE+Qy/dYCNZxlJpXVWfQR1J4DQIhAJRhoEXull0PNRLuco3wMrJgqbyrKTWlNAEge5vJ3uls","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX88CRA9TVsSAnZWagAA214P/2VU0ULAEsErc64jXKd6\n6y7OXs0AyTWooXiFWce3/Sj6fPUy7SXaAIYAcgXqjd1S/6GmwC53fw4jqz//\nBm0jCtUUAnhdDvKcktpahEgQY0HWisBBjxpTJioHDUE/0BUBlfqLHXlK93QB\nn/xPx5+Ov1yQB6/QW2BKLimUbHZ0Rh9GqaLpUVrDmV7Po/Lx8kppZy8CTshx\n6usJRnSRc5orqLZCfSGodI0ojiA0YyLM5Ge8uKwjUGLva7AghfYloSSDr1GE\nNe7WglGQ6mD1mqTvjR8QH0D/ZNzQyA7+uIbN4kW0ySX6yAPfSIvcFHvFTOLp\n+M7iscSviI662UVDVIaLZzRsqsJ+0vPOuh/yeDVNcwVqymmzHQxMDHK35c0o\npBM06tFjThnjCJQg9p8kL9FuYk0Lnlv7ReKyUkMkysixtEIl5x2QQjNfP9Bz\ndLYlnp1S4G8DzJWEwcWiquSBsUEZP1Ux45SGB2WbEst/7ZtkVgnD7wD7++lI\nC8U/Tq+OvVz9cMr4/bhm5wZH2B0cqEBz321FGMJKDOpDmHwhv6muWsn3R6Jy\nBiJMPZT4SGIZdsbayKA+ExD/d/P+46RYy30Y74EjPZwpy5Id58pytAa77FXs\nrxZGKYLwrdUKdE21YDWpu9SXv+Hy1Fkmhb25Fpwd8q1gZUuqpZt81JX8VK/2\nKn5m\r\n=342C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7427449f09e9521a6deba6ba7da71038c2fc1f05","_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-nightly.7427449f0.0","@material/base":"12.0.0-nightly.7427449f0.0","@material/shape":"12.0.0-nightly.7427449f0.0","@material/theme":"12.0.0-nightly.7427449f0.0","@material/floating-label":"12.0.0-nightly.7427449f0.0","@material/feature-targeting":"12.0.0-nightly.7427449f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-nightly.7427449f0.0_1620672316347_0.46977029334560316","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/notched-outline","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd687000e8022a07ee0e2fda3d40ba56557c81c5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.957cc3bf5.0.tgz","fileCount":34,"integrity":"sha512-IsYqYAqhBt2rAaJOib7RKLAi1NGFWT1+wXFdx+biWgSZ9N21/hnFKQGqfrBw53jK4PPzy3Drs4VJXi9YFsa4lw==","signatures":[{"sig":"MEUCIAHfWT2tl0dAOjTTP+40sxE9LCv9wsRBAeFRbsBhvDuGAiEAtF2WQ8gG92ovUL4tE/CsMzcz5IlzbMRgGYuAaWrdKSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmaxkCRA9TVsSAnZWagAARTAP/3Era+Hf6jVaUDU79ZAN\nYAnX8UasjLAmeGYD2giMvaBXEHtBdhbSHMPhWgW+QBE6FZPBhG4fIUemAlPh\nILB16BWJwCGRT/u+9M2h32xevWYObc2fix0GueWqhRK3mCEhY6guIdjoPWJQ\nXMD+cH/HqFJ89t7gyfF5kGSRk4ccnD4EO4/+hcg8wYzvK6Z8OjmxjudksqY1\n9+khGcXZmck81ACzjgOF72Qdpo/+aTEi/ceM8/bq23O2t8dbRiPeJcrNLg0l\n5eUikoYm7Hyz/Y1Hmdp9Xq3BgEw/9RzrxNe7pa68c0MVJ0g0RFaE+x59cXXO\n1BDVUmEgjSqgor4zYhdVxDBnK2v/+WnG65tWSLGPEcpUJtDHHBY6D8vZSXqo\nPwmkOjAxIIYBx8qobtXwea9Sm4Qjz0vAARSrVBw7GaF3Zmy3qE+0jXtFNJjs\ncik7NZhZnAGgIWbs9/qSVusLVHEN8HanJjWBGI856HawpASgWkQkX7qVXGrt\nT3deSheca5ZrdSPUt42xLwFJ7hxRzgbNkh4hNoEmljUIE2UGFf7L3bYTNAL5\nikCKpbD2mOaI1bHsf+bMhoPN/SI9SLbHprxsaH+77g6VVYYOkVg1fRZzad84\nDb50O+M/LrLV2BIOSam3sGdlOav259sA/dTLHFsN4+s16x3bX8PL8Rw4KG1U\nXGxg\r\n=dFvg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3c29cfc65a597598e2a8e1841ef1af72450500dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.957cc3bf5.0","@material/base":"12.0.0-canary.957cc3bf5.0","@material/shape":"12.0.0-canary.957cc3bf5.0","@material/theme":"12.0.0-canary.957cc3bf5.0","@material/floating-label":"12.0.0-canary.957cc3bf5.0","@material/feature-targeting":"12.0.0-canary.957cc3bf5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.957cc3bf5.0_1620683875614_0.5844746611470213","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/notched-outline","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6bad21761d1061c820bc23164b226702129fc9c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.88a33cd70.0.tgz","fileCount":34,"integrity":"sha512-oesms9zAPcd1+MBPwSYTEctYZqrPIlKW5xZbudQvIchqasGWzggyhCEVQQjxrazDGVEwvJk4rNhNpWRFruOBPg==","signatures":[{"sig":"MEUCIGp1tOhOfYdxBBBca3FQee9Os6eTD6/gPnK1V4cnxHcjAiEA4NTlPvmD7+2nNbUKMa0BONiI4IrJ6XGsc/cP3cgb/T8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmctaCRA9TVsSAnZWagAAUGMP/0OYwpghD2pGRYiq+8Mf\nJArkrssGTikyatsAu5Eg50RFQnwWy6AZ+eKnuv349vGp41TULPMYuWAtuQMc\ncSvE/fbpc0HQa3kYbitEMGpkasyIZUIhLtjJoQf2Zzne0S0zYXPVS+PAhAvE\ndfGKBTeYoH7AVHMjKXjLUbAVp/HObcgzHxOWmv9Rnbl9FSit/RYjJiSA71Vz\n96q1Q/8YZ43SGg+mUejBSUzy4FUfQgGNe8xWbCvZ5Ezv4qrU+2vFC+ZQCfJZ\n8NQLN1Hj84BdTonir/P0ZVrTaQ0HdBE/zmdVqUbDyvzy11tdsqjXbsan/UYn\nCf/iAQ0g6tow0yF0L1hfaMZ4oA/GddNaFjOyo41S2kfccpal0HVJAnEo2vMu\nZz8xGp/uPUn0XK02khedZSBJMJ7qWfa6j+sYQB6Z9F6m9qT+RR6bNBWRXWc4\nuVnoNp1POqQUTnyVvKbNJfhae+68SDokxMQSIe4mXWYyZaCEKkuJam3dVhFZ\n7lOJOE5kC+XfQU4HRthcjjAHB0KZwpsOK5jzPU92nXRLd0btGudeSXqbm3g2\nI9hVtgJ0XqhZKF5ln7P3T87VoTLgf6Alf1sTz1cHvcZ/Wi/DTIXYj7Nra+gB\nhXNb57A+99uP9PxfCfJD5rhgxLZ/xtvcdKCzMoYMTfraV+Olq9F9/+foKHgt\nhRXq\r\n=Q0fA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f1d341efc173e89bd2770326eaeb1fbc581c9648","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.88a33cd70.0","@material/base":"12.0.0-canary.88a33cd70.0","@material/shape":"12.0.0-canary.88a33cd70.0","@material/theme":"12.0.0-canary.88a33cd70.0","@material/floating-label":"12.0.0-canary.88a33cd70.0","@material/feature-targeting":"12.0.0-canary.88a33cd70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.88a33cd70.0_1620691802354_0.1612638922671008","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/notched-outline","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a91e8ae8d1561b9a7bfe2441793b57045d09b8a2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.d20dc6dba.0.tgz","fileCount":34,"integrity":"sha512-IuwfrJAnC2W6GVol7I4pDWJLyXzfsVTzKioEmPpjQ3EWaEoRDW0MkyW4M6pV+cqethfxiJbVdGugfwYjQRQduQ==","signatures":[{"sig":"MEUCIQDXV7Br8gAmGTWHnXkQSFGCks2Kgkl9tKxEZM0hvsGwVwIgbA16U0VoejiyHB45FrFPjIB6po6OnTbeRmA2LpWGHO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc8WCRA9TVsSAnZWagAAnxwP/iatSuzvdJ2T0t9plvAG\nUrEtdzSheWBK9CBbb3OlRLmeyqSXw9XLimwr91IhfsOsWm5xmZztaOSMuW2Q\n+SHHqHvhtg5AF8s9OzKjsVbybwhSxQz+tXcwrQuDMJH1FpsDxKYSk7GYbu+c\nc+ktzTm1ueSFhLit1v/nl3K4j7yI+1NAZ+qy2F9Sevopc9oiQhbzsIQRhCYP\nfbWW6FP9a3DVr8xlyf8DsNOitRgrTSIi/GTYhlYfbrxyttKkECObDvB0dfpf\nogDWy6kvjL5f3AzyINXJ5qAtcaNldbsohS2AQXMoJYo9qMCavRhO047hReKo\nU+Z74VQI12xNt+189+hB53fr75UwBYaZljQYRqgEnSHHEFi079YyZTFgjKVt\nMEIq64f+WjZtwbikhe2TiGd4ElO9W01XT+mBZEscpQmuvjX623W4C69Sr233\nYq4QJzfe2Jzf8kBV+Tz8PzF0nnArsFCxaEuFT/srzbIdiRWhPx/HWyHqk6Kx\nNaeSzh5U1eFcjgVJm95BKrjxPL5QSnX76vzzSjlyrLJpgDo90SAtPsz9Xah+\nfQGQeKrSBlTS2XNFll9JSkOm74TANMezTVcImFX9ieIdd/q585wfDqi8uanA\nQUE73WEnaglPC72YrT/YpNp8KshQleH8upvsuUOAOx/AsnpdDWXRuQtCj3KU\nC4yY\r\n=5vV/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f2980d3f7fbbd8d2e3b824a765f7fb03096bf11a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d20dc6dba.0","@material/base":"12.0.0-canary.d20dc6dba.0","@material/shape":"12.0.0-canary.d20dc6dba.0","@material/theme":"12.0.0-canary.d20dc6dba.0","@material/floating-label":"12.0.0-canary.d20dc6dba.0","@material/feature-targeting":"12.0.0-canary.d20dc6dba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.d20dc6dba.0_1620692757898_0.2721292920757896","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/notched-outline","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48751f9866fdb5634e01a9ae01f1c0cc801a63d3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":34,"integrity":"sha512-CE4/1RilQCA7Tjim7UOt5aBub07ooy40RKYMn/BmYRAVQp2tN3iwP1aV75aIZZ7t6bxblLfQspGYCXbbC5ya2g==","signatures":[{"sig":"MEYCIQCXth0oxr2TvniBxQbdGLdXBlNQ/iGFStuPXURWtY9DDQIhAI4Yu87vweJxE1WwLauLOaLF01sPGn58B8oVIY0CMpe2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdcCCRA9TVsSAnZWagAA42sP/jREaSkqOyPmt3EHVgNl\ndAsOrnCbATuEgW9X2CHAQY/Z/kO/PBZeVl7EgQKJH/Mwly5Eu9Yo8gbqqZus\nbwZJVAeUqngiIZJWQ1jtfI9LNAui4qPfnYr53up61ejyCHFA8O85dZQW00An\niPCA3NGjv4xnW0EmNt15K2bHLQoKr1/C4pCj/7gCHsssC4ZUxOtto3qM7NHO\nqzXDKDbjPBA6Qa646c2zJ9qIIB1Cm9iTrUH7hXTKCEBwbrCAGweLfsbCic2M\n9nUuE3UoqB0HIQt/FN7MtevLxFs45KxNKwA8siNlb/0BHRyl+JShKAsj3U1z\nQU6VdAslvmv3TH2awnFPan35aNgkCCtZlP/L3+D9enzl12p0BsSQo4EW/thd\nL6qGNFGtC8PtsHCCAIKL8a/H1HTONoDo2KSEuVBRT1I9F0HYjv2rt1PGvNUH\nzqSvEGtEbJ3Ml9okDJijxFy/lJmEUOuXVUfnlHSv6ZUpQp8BZThnY/wJ32tB\no/u/ejqjUWb/rUyuqEH0yY6Da/XXFUbed+RKDILcfx6kXtANoqUSxR7bYU+w\nz1AxuJTjkRQ3rnMc+XW8vJxwCkHWkURNU2v4HTpgRvW7GPOWqvgM9pGgSpAa\nh0wuMhrYOM/EtHmP3V4PHTyLvbuUI7XmagW9DjWp8ARzqTdl+BTrU1UkMdZl\n2cyY\r\n=EBpT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ee2139d87a1d755a50dc6bf0a6dd53a2f39548f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.0ce2fdb02.0","@material/base":"12.0.0-canary.0ce2fdb02.0","@material/shape":"12.0.0-canary.0ce2fdb02.0","@material/theme":"12.0.0-canary.0ce2fdb02.0","@material/floating-label":"12.0.0-canary.0ce2fdb02.0","@material/feature-targeting":"12.0.0-canary.0ce2fdb02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.0ce2fdb02.0_1620694785879_0.8427163455162086","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/notched-outline","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.cb162da37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b41c28038e8f5efe904b6bd671e9d56318922068","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.cb162da37.0.tgz","fileCount":34,"integrity":"sha512-0jW394Y+KpdhakchNquzL8opzpX1L96knI15kfouKQySy6f+TLD6XnArRbNuRabrveNcZi1v/aCnxxBy8heo8g==","signatures":[{"sig":"MEQCIC11y2qk3YNvff9quQ3ZedAw06Yd89fa0f/0XMWeMSO9AiBr/fmwHJa67wvYXGO5UtyZ6pdlbHVC2hPKBfCk2MuOYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeT+CRA9TVsSAnZWagAAY38P/iuoIRMNQz5YfGJFg8WE\npmU9LV6O+IwSLjYMW4iV37PwExDaAqQ0/XHMU1Iqq0/ndpqfUWqC3eBSD5oM\n3u4DG02lN/ihIhMn7iaDuV5Lj9Ou85w5xAnub/F+wJzql29LQ3dPmg9gSryM\n2Yt1Mde4rG78wMIkiEzAkWxu/tBivcGBnQFL5FpRa3hCQJxDnjOkLm0ZY6tP\nwkj4ETwaZ9YSaWSMqFZVjHOrfNj5Rd2UuXybMXri+ks7aQlg3H+bxH0W12nB\n+p29dSIDEbtYJ8umOZn/3m//WEFP3fARLTsVI+kQUmB3y+XzyvoMJVkIudIE\np2YTW92VRKtmlyVCeu/KKVr2zZqbBJDoJXORDCAgPl+jHp0lqmOxeEw7j9Vl\noWr8kQ41HFd0fvNWrBaFmLQWfzebDYMfsKBykc5WKmzlxS5qIs/jBgsIfB77\nxg//G5cWM2mJj+cWlkjgd9Di0G4Evij9BKhXmWh4vyjXu8CPKlJwhsdQ4nZj\n+sWKLQSFk9mvQfu7TzFAKbGH0WokHXpAV0KDWspa7Y1e+EwtTZWHOGtuK2gq\n2/WZTZ+qkvfI1Ne615lsUndEvqrRZ+OqOBeOBff03vqiHRNZv7JSwdoEveb7\nB8InoJ1vhKcVyOaDN6Aou5dWHDNnOh4WkWyu8nIY4jTyZqJqjHzcyd78oZBX\n7fUH\r\n=7HA3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9858adcc9ed7b1111dde19951ba96847bad0beac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cb162da37.0","@material/base":"12.0.0-canary.cb162da37.0","@material/shape":"12.0.0-canary.cb162da37.0","@material/theme":"12.0.0-canary.cb162da37.0","@material/floating-label":"12.0.0-canary.cb162da37.0","@material/feature-targeting":"12.0.0-canary.cb162da37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.cb162da37.0_1620698366107_0.16821294737041703","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/notched-outline","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"087838babdd1555c1cc0e80575f4214a15053432","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.573dc7ffd.0.tgz","fileCount":34,"integrity":"sha512-6tjZZiCWrm/ALyM5OmHfWpKPoJmv88NVgND8vbyEODcAr9CoFxbnEmtBhEZo4k7KMwY7jdF2FtBeZjuKCGAT3g==","signatures":[{"sig":"MEUCIQC3iGa8jQFpbjqQT23b9OuzB8EekgZip6o27ZCRvxmcnQIgJh7Jx5d/IdXAuQQsILUtBIW4pJ/kJSMLO9qzMFBXSao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmel9CRA9TVsSAnZWagAAJcUP/1kwszsXccSMYrvHlDjn\n1pEcxM4lrc+YUVwvwqypeELzgFIPM4X8P6sqC63l9QL/q4Q1BQoqje6Jjx1N\n9FEiH0PNFVLGPCkkztl8r32Wh230Kn1S1oCQdQ+IO2ByomfefM1aWUTAEcKV\n8x+PLoNYb/i6CLUEazUWd9rm8pSuTo+rJUMMF9vA8wbzAVn+SG1gW/2/QiPN\nfLHO4E7K0xc1IsLQKVzkVILUCz/V/iodrI4pTyGUh3WGniwbf+ecqbekXKiq\n1YtKbSqjSOMFBA96BnVY9sUsMvgtA/3GSq8WV1UPD48b11ueFGM4uBmzORsb\nYiafiHZIWcG2pKJ4qJKRg2d0/Ua/DXizNCVDBLjP6pziiGilI6IeRMSZHTeA\nZNbDpx5l3c5X9Acm7jtgAZPW5300ImkhOn62ZXsxPMb4qXecH+T+Mrcrmdhh\nuZmc7H2yJ5nlKd0Y5aDJ6FMmqksswXf34tlkfRksB3ZBvBS/3ZSdvyezeo+N\n+VAI/4wWLal/3aubmCs+rexY6/sk6vY+wPYrK5we2WDbTPygzcXoRht4ZCen\nATNYkfs3QvQXpTR0MQwXVfD5DoqL/q3VYGVTyhQnZSlhEDG1FKddfoKZsy90\nA/dy/eggHogtJ4fWCVtb9IXo9v0oNid7JG0twJsTOsnl8BOZzBltvzqbVqMh\nD+6H\r\n=Vqnp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"67aa299a5066425730ea2e8558f89c111a5ab156","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.573dc7ffd.0","@material/base":"12.0.0-canary.573dc7ffd.0","@material/shape":"12.0.0-canary.573dc7ffd.0","@material/theme":"12.0.0-canary.573dc7ffd.0","@material/floating-label":"12.0.0-canary.573dc7ffd.0","@material/feature-targeting":"12.0.0-canary.573dc7ffd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.573dc7ffd.0_1620699517406_0.47459025272760647","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/notched-outline","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fbe9dce9b3a2d7f5c6ae987b72670ee416f79a9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":34,"integrity":"sha512-9dPchBjV7M0t+TSGwOmhaolsCfC2TobtWDYHOdBAvV5nVLwnG7/DCUWpzbU4JF65VRk070wqRCQKVRo9aKxnGQ==","signatures":[{"sig":"MEUCIFP0mLF05DnDwdOWL1cTCoToVzlzqa+UGaWE5bxmPdRcAiEA3UPhlsB3GAnrbDs27rOZPWvdhqHIf/1mYJceSqB8py8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxH6CRA9TVsSAnZWagAAobUP+wTYEIctGWkCdUj+SKyT\nUOmLh6T5IGzWioTNgdU6oq+W3jFs+eQFM+9klTmusMKaMyxPtMzmQX+2uvBL\n8sAfXe+sWLa66mHuSREcBuLp/piGuRFds1SiVAXYoopCfg8/XcnfEpAbTNtL\nw+/KqQ1b1ty136sxDtywYbSPkuWbAscWwulNH/bEOZPGEniJbGD4hCUyz2ya\nawZNqg0XHIQ775p90QuC5X6BAg1UdTZ28L1fbOKJiE7O6hLF2hmLujLyXcKo\nc1PGXY8dBnsDqcL3VKb5YHBbw9I3jvwWdRRWZjVytYVc5FEm3Q6MvPNJ24do\nhkk44Z2tfd6nYnz5nnuBQlLXopCBpxDn/jGqbS/9FkzufKEFXQfxLKMHK9rp\nig1+1VLT+Kh5G4sCQ1yLC5GWlWYL8mMThwFdR+YF2Cn/SaqJYpZo5pCZ5kLA\n9ZTFXNcK7c9b38UE0vOS6LGv5Mx8xBiI+tQiGxXCNAa+ast+IlmrvxryOAnc\nGofiBksZPn8gylL38R0HjFncpFoDuLxX+ZBU9N5lJ7jcOtjpWX4ozs7aIt6l\nK3MHDir4mxzTy8RuK2oK43KISDeiqp58lB1fTW1kcb6sAOEqOfh4tz/P9bm/\nLPvEOyeaW2oYAdtDGY1ClGXctulkhBMdNKE4XYFxc4JCxbciN3SeTdd9Y9bG\n44kc\r\n=wiw5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c0bf85201107dc8a95576c2392f5b1771bb2c969","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d5f6ad3fe.0","@material/base":"12.0.0-canary.d5f6ad3fe.0","@material/shape":"12.0.0-canary.d5f6ad3fe.0","@material/theme":"12.0.0-canary.d5f6ad3fe.0","@material/floating-label":"12.0.0-canary.d5f6ad3fe.0","@material/feature-targeting":"12.0.0-canary.d5f6ad3fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.d5f6ad3fe.0_1620775417891_0.12903809301816027","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/notched-outline","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd2dcd434ca7924fee685bcfeaa2448e1594d21a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.25751d2ed.0.tgz","fileCount":34,"integrity":"sha512-wZ2ZmTfjQMMstaG4GX4QrMGS1Jl9XtCdX7mcAD63YS+klnAbNSWiI09Z5rusi7PdE1ouh6F9On/imf1jmkTXMg==","signatures":[{"sig":"MEUCICEg5C474W578z/xtpxG46sr7NTVZSpK5l3l/zpYa1+gAiEA3tb3mBGIAJMB6apfK2pcpOxrjQ6gqPP/ZmP3McEaCz4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnAB0CRA9TVsSAnZWagAAJZcP/2H/WgwrhV6FmtWJwKVa\nJ7avh1MwzjIw8x0XX787j2Dv9E9NSgziW20xeS1cL84wTKVp2T2ZrEYGf9ha\nYjKOM2NSMeaA/1+ef75FgydsMprxDahbvckdTthD7pN41uuM8GXS9fDPola3\nENXBm7fKxQ4ilF0EzR/1fEgG2ZDD3+RKCuZQSWLLR0//baPzc7kPBgnl+ZLr\nZaA++yGQaVli8LszeKcFsXryF2XR9C9dFCdKvaoSR7xusSE/h4D/2HPQ1p2D\ntA0qasbzXWylcGtw8GUdEfccakL4oUYlDZnconTvNogppyTUmDZR1fwAAxcI\nGf+L/RxJkK5JJbDLVwarO0nwXaAMrgPM8eTcLpQdHduLZq4xxXZhQennledQ\nNzM3NoEIhvXOEplTUDt9PCIAzFQXDMxvsx2zRe+EAiNs9jyH6nHd/VNgV89U\nvqBLq4MQQgBjVVBN9/EHiofPgEGLpV9A5MpOL75tAq2OvLLsYYnIIOCG6hCM\nEvDJM+48qJYHSoumdqgP19KxhKlv0tPcbqLKe/eENvWDWuJHESRBppgiyo1k\nLWX2S02gs3PSS0pS6v9x1k1ONCQMsl/rHEhirTLnM2fjw4rDyYVFkiVgHh/3\npI6SyzxIgiM5GjShoIyDGS8SGWC1PHyM9+tYQ8eIz0fMkDN0DH+16yrJy3xi\nwwCI\r\n=J9AX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c38dadd226475a1dd91a992667019eefec273bbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.25751d2ed.0","@material/base":"12.0.0-canary.25751d2ed.0","@material/shape":"12.0.0-canary.25751d2ed.0","@material/theme":"12.0.0-canary.25751d2ed.0","@material/floating-label":"12.0.0-canary.25751d2ed.0","@material/feature-targeting":"12.0.0-canary.25751d2ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.25751d2ed.0_1620836468463_0.010264783835224556","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/notched-outline","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66d9179bbd907d473d7a105a0189c65d7da108eb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.a23ecb682.0.tgz","fileCount":34,"integrity":"sha512-wSrTZeC9tBPRAqhBHbfgmLpTxO5/Jqv57P2cEFangrJoXEdT5LfL1lVWJVNbcnl1tWnobV8bosRx2PaQLf8YSA==","signatures":[{"sig":"MEUCIDzpZ0dNBPlGHbrP4c/iRTooNCSYkckyITWjryzFRj2dAiEAynwRWq4loZKeyqa+1L1Gb0xqflnbSApzX6Hk6c3oTcA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB1cCRA9TVsSAnZWagAAPsgP/3S0aM2p0mj8p60hQnwW\nTc7sXEFtb7eYsdjvKyvfQcJT4YWwoRL8GHmL4hyEaUS3ILRPBzcVFcFM5/Ja\nG5EjMIbRU86JxLLjIGxFPrz0Q4HV1hgbrk+XkqouoIRu9d2n7dIr96F1oQ1r\nxqzNVJSv1q554SE+JbDs7Vg1kkiAPSlN/lfwuxwSzGnsWLB9DJ5ukUfDYg3h\nPjbHB9GCbmqX0/C50BSQjiUr0mB4e535jRJ9sjcA0t5VnLjWKXJFTNkWsavl\ntu9J/nTexNtKtM5c1/5pU+6AGK5irTkrJRj7qAZebQYBrNW32YvLcDvNWdU/\nKDKFHfXJFdhFO4Zc0lu0Url8PvxrLhHHciKs59FbLaHjhFz/AkH2kTlmnsvB\nRx1RM9x7yvS5gZ8FemVb+dNdIEQw3h5c4J0X+GLY512+7PR8jZlLe8e7xM7t\n71FUSBJDC3dJAfgun9FMXtnrFvN5PQ+NsaxyVR973miYcdkWUgeGeUTpzRiD\njUsM5snDTIhapRvIYSw0dqeg3FT/9g3K3HVPh1GwiMRNGy2ez0qPL7P3IppR\n/DruDjUGAcg+5RX6F17/1mzNdURB0487zA26To2qmE+dx8TRypFrsANUvfW0\nb+nEZD+QHIdv+As/hw2VdmIeKEaY4ZrQVapQwqdxl5efDrBegR//iV93qo7h\nf3Zr\r\n=CU2A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"da78c3f024a21d0e0df18a30c887082b202d7269","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a23ecb682.0","@material/base":"12.0.0-canary.a23ecb682.0","@material/shape":"12.0.0-canary.a23ecb682.0","@material/theme":"12.0.0-canary.a23ecb682.0","@material/floating-label":"12.0.0-canary.a23ecb682.0","@material/feature-targeting":"12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.a23ecb682.0_1620843868074_0.4967293511848223","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/notched-outline","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.33a954852.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cfe0320c63a4371a06857c7f0840a1b08bdd87d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.33a954852.0.tgz","fileCount":34,"integrity":"sha512-A/R0yA4rkqPwTLvLsrreSrNVMdfImmFaj/3WKBsum4eRzkvB1hMRJKRU7cRZXVmQbueFQ5PoNA+oGQjuZ9iPPg==","signatures":[{"sig":"MEYCIQCWAAGsxoZHLfEWoEG9Aa7Ce5COS7SH+G1bE1sCLkfsuwIhAOfW8RjFt/2zf9pX8K3YyORtmVnY2+ZoBCcLKICXSp4Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUEFCRA9TVsSAnZWagAAG3AP/j9V0E3d71nr1h2W9QGB\nizY32kcyg+9BmEdNQnzosRwzrxF1fblOpOCkRW6Xf+xB6/RSua9sXpyiC1rL\nEzH6+tLloCJ/+pe/fzFRe8Dm1WTuqajsj2x0D8LLxRQFWLMJ2ksESsDyWTKt\nNs4Ls2/TXdmHBbNvJLIoG7vRqhbocADR5CIAiborqHRX218BX1JrmBrPBbZ2\njkusrdobDYamt/kWH9aRrIN1RMRoOdaONZ5r270S8CIZ+8IMENzl/hotFm3g\n0RTUpTV/4an64KgAtq2KMoS1ZpoVwRl+V8SF/f/1tSoTSAaLzleOxeIPSnUy\npBkGB5C7dgfrSTZJJfvE5T1tdlOgGy0nL/iUr580sSqS8S9wWOyTo3we6B91\nO9zpTeCB4VaINDRPdFiRKWCH/DzTMvSKDKHAnZ/j6kLtBctKFTaW5jAdpX77\ngowFTaV9hlB9PwpsDDWOuHEDb1W1IPl7kqKYN+FS9lADdozD1FhBinHFVOcp\nJlKJFUAy3V2nrRaymW0ewrOr/e9wYw/+MO63LZIwGe2yhQPG95Dkh9xa5vtf\nbgpCn4LmY2DvZfcmFGxGNpOTkwQKn2/mVz8++AXHeHBd7EMHv77ILIzD+EFq\nrZvJNcTlnbYHOsdJ5iyfWySPYLNNuv9CKuk4EVQjIVHpY7kUK/zgn2Yn4qym\nKKVP\r\n=iw2H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"703dd5ba6a1225efec74655d3393690dca1922eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33a954852.0","@material/base":"12.0.0-canary.33a954852.0","@material/shape":"12.0.0-canary.33a954852.0","@material/theme":"12.0.0-canary.33a954852.0","@material/floating-label":"12.0.0-canary.33a954852.0","@material/feature-targeting":"12.0.0-canary.33a954852.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.33a954852.0_1620918532590_0.6187031925996467","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/notched-outline","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.a4484849b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b76e69b7553731658d16786b2bdb29e3085ad24","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.a4484849b.0.tgz","fileCount":34,"integrity":"sha512-JyEiKUfvEe+GEM5lElft0F6/Hm9MFAOS8xMcUtumP3+of85E61RZ/unnL5H01fokqTlOQzyRlk6JcfnPHJE9rQ==","signatures":[{"sig":"MEUCIQCGZt55CfU9AuuHmJfpXNq+4Jl29MmvlYaBEMgem6u5FQIgAftrAbtM8V4E+SkrFGkkkISZvI11p/OUh6/Jt8NheB0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUZ/CRA9TVsSAnZWagAA/H0P/A3aPykqnSIu/brGZT9Z\nptqCDk+mlaI0pUOTPmtpeRIt94Mkm/tqKokogbe5l7TzTGqCgDDXXjAHy0fT\nifUrQPYUSJryu8VftaikmcFsTEBqZ7idSvXfVrenZ47jvew8hIf0yp2e8uvB\nNsYZCRgeJubDQAVjvzBrfbrmWZWL0m6renvijv/PMfk/zwMCAKk558fuvz5f\njYJ3USzBLT5YYXiFhGX9oFegNWf3q5vl5K56s+nWjukXd+glmjuODxqpVdyB\nezMdgnU81GrV7sdXfX9T1TaCViF3MdDl6kF0BUkaFlxp2Ehvzw3Q+VINpHni\nGUHvxQgN0/nmC/2QMmaWdOZL08jEbrXKIpvjxFFeAJGLVAeWQkhSSWSDRM83\n2LknQJljWXr559zYf6wyMMhki1cVH+/IWfLvuu7cd/LypUpjpaUb3W+Q/ymM\ncZdKXlJ4MEyohXBVbnAMGYXX2zjf626Ueut/qrot4fvUijZso6fTqzcCCTMB\n/tj60wxgW5hjghpdTCpu8Xi/foK5OE/GofqBKvSxaWrdxFPOPh4zuIsRFBiJ\nlCsRAflv8dLW7XHA3MG/68fSL2WkfDYK1z2lTdkneMhSGhSwkZBaXinLUIW6\n6AgmY/YRD72cXs1Ez0/7+65J/yHjoxz6/gFAbZyqhPaTf/1/i9hKzJFKgVpf\nHe/1\r\n=DWPB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7908229b1205198ad87858e49ed29ee3836cebfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a4484849b.0","@material/base":"12.0.0-canary.a4484849b.0","@material/shape":"12.0.0-canary.a4484849b.0","@material/theme":"12.0.0-canary.a4484849b.0","@material/floating-label":"12.0.0-canary.a4484849b.0","@material/feature-targeting":"12.0.0-canary.a4484849b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.a4484849b.0_1620919935146_0.4779747185150267","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/notched-outline","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5b8344c7bf35b345109f8a745c96a4d184c560d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.b4c3f513e.0.tgz","fileCount":34,"integrity":"sha512-7nsf8Brc0KlvvLWjFBYXCVMRaJ47AWplrLnUl7HC6YqG6DzUE1cjr5NdTFMblnMM0Gs9ClzSlCu4+GRIPsGzLw==","signatures":[{"sig":"MEQCIDtpG5+0+VoMORttsQr5fdASaqVJSZbAkJbC8uRy22A6AiBmW652tal2j39qLFNatI/UgaZMV1g2pzBm9vTti08DKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU8oCRA9TVsSAnZWagAAPdEP/2+4B83tWdcLRkcdjnA8\nllgoKtkUjVer7IqSznhNK8/oJI2lUZIsFWZd7HMdayVlD8k96iwDFZ2ZvAWL\nyDAzTTE/SdUhGCExYmhimjp/6FItjPfuy4jM/mVq6TbJi7FFWm2vN37FGF52\nh45rIutB1JV7oRX4GZEcUXlmvb55K+HQ/rg5wGBhnIY1ZNEGqqO9Elsdl8lq\nZq2bEaukWjxBrgBhUfHhUdUjOGriNKnEd83TCvlLK8rObVXVsWbtaAY7oTo+\n/mihmD8ouvUzKGN7tSwsMdc5kyuztWhcrbe8QfniZcaJ1TdBP506/pgOSdyK\nYpUy88dLHVj7yCwvNTKZ7EjG6gZafww/z72taU0lZSIzDpvFjSliiWecRrfg\nOmSl4L9r3hofJR2EDsRb798mr2qk7Q8f/CNoGKZTgSqfHgkPX7OzCAaW3sAt\no/9WuExz0gyrk19WM8HvUEfETT8gUCVGN8Y79PvuANSCW92Sa0oBHuKpcUkK\nzhtYz11QAWW2Xb9QjgwYiB7HiH71YMM7P4Ic5nRf0AJfJddN/ZqamjkWEk3O\nxKrhRNcqRedod7rmuINl5vWSxFNB4TtlQOSGwzzXpMCQRmj9lPJKbrdPDhQ2\nOoJAeLo9sA41sjd24bSqO3F5rdw3ugkwdO+9gMVcnq1b+lEeyK2xwW9rHcnm\nz50D\r\n=hX0W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c2183e7caf6f0437e64e41b632f75d33156547ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b4c3f513e.0","@material/base":"12.0.0-canary.b4c3f513e.0","@material/shape":"12.0.0-canary.b4c3f513e.0","@material/theme":"12.0.0-canary.b4c3f513e.0","@material/floating-label":"12.0.0-canary.b4c3f513e.0","@material/feature-targeting":"12.0.0-canary.b4c3f513e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.b4c3f513e.0_1620922151851_0.6370867808526932","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/notched-outline","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88d6b84844aa79724eacc892d695daffde2c5344","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.1a8d06483.0.tgz","fileCount":34,"integrity":"sha512-/AgLTcrEKe5kb+SK7qqN1npmI1BH51h8lncWIwT76bqLdSK38Wh9JxHXTMnOuzA7o3A2KCcmsIxm50dXoZhpXg==","signatures":[{"sig":"MEUCIQCDMbmCr0rRy8vhStE3ksKjZsDiVzkO9kr5LAf9n0ydawIgKgV2/Tl/+I1LwMyy/WgYW6AssG9zxLFlxKH2cqnGpSg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVB9CRA9TVsSAnZWagAA1xQP/2ex38UdZmH38l5B4efE\nZ6LiLMFIp07gnRZ8b9pek2/QNMix5qDBXX72SOn7DJUKMk7q4c6dkimzpLwe\n6njdJJi4GCyWVjcyL73+P0VqMpOMpwXBQ23Ovz/mLPNqkyGrncQv5+iYQ2a6\n27Jk0HH9krDYRu7G12I5r6x94zg5rsGEEL8KONQc2r0SeXL7cjkYrDW0hmuZ\nydYhbq2ZgeCMcapGijLAAFGGC4udm37brBiP13NxSFGTMlAU97rfLB+EAyHt\nA4rPKuZmoF9Al8X5X593jJZJYKCavpSkNTKd8Vr4MY34ttmYonejIu6A/BfM\n/ClU2j5fb6Ty4PxUIcETWpXJ6g22CTYdpJZt3Ysat2WEyHHQXwMt7b4KmzmJ\nUs45GAZYZxnPLiJRaqnDpp5puiicG7O/QiFV6P5/GOitvI/8YGmTgr4ExANg\nBHdVFEb7m/3x3tvAG6uQ37ySiO5LvFNjNeZQKZFEJbupQb2xFx+dhCcFXHSj\n75W2gTl6cD3kw7q/DF+jEQfPzIF0/vq8GOpDnXiEQQXSou/XDmTBfH3zEmQR\nrThC+O95SzlyD8DcfyBPU6vbF99WWNQGXwxxEOMKzs9uKoQINYwiAGojj1Qb\nhC6OQEEQVPs0dxglZGpBlC2fFDZr4dkE3LKGSyxIyw3239+4NjCcmyDXgZmk\nkS8X\r\n=MQa+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4fd7ff5259e7910dd76488a7faab45af839a13b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.1a8d06483.0","@material/base":"12.0.0-canary.1a8d06483.0","@material/shape":"12.0.0-canary.1a8d06483.0","@material/theme":"12.0.0-canary.1a8d06483.0","@material/floating-label":"12.0.0-canary.1a8d06483.0","@material/feature-targeting":"12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.1a8d06483.0_1620922493283_0.06685284807899561","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/notched-outline","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.8e6081836.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9396d45700b61d7ab0a3f305fb04cde0ea65743","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.8e6081836.0.tgz","fileCount":34,"integrity":"sha512-KOizZNutSL0Hzuz7ZvQqB18j39gbeTLJDvNSsP8sGrfkmuEQ09jQgaZLm3KX7k8P/UfqgbnwM0SHr8X+oVl2Kw==","signatures":[{"sig":"MEUCID1tvgd8fS+Hh6TvXc4WxY3EMLC3wRPut11o72oU++q8AiEA0JJLVZuE/8RZZ3OJ8j/as0rcM3j7SGqxPuO0Nf7Yzpw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu6ZCRA9TVsSAnZWagAAAecP/24FNd0o5nvEbLVGemZv\nVf9yBiCSRAxZvq7ew9yAgEzrfWp/gU64E7zsMhRpinoqB7/ingr0mEOkLID1\nqSwLR9ijqXAx0pEPgUz5bMYWmFuZKucIiPEG0t0uY5imL3Uyy7mzvE52VGBT\nIXGCnlbqUEBaLrBFZkLzNT2GqFOVEVJgI0JyKx5lyPzibNTcSaOMV/cA1FA+\nqhiZZc26kBODwh3Hu8KmwFN0AePXfRyL7eDrZ0IPfEmg5eRAUEjs35I9wskS\nNzP9LPtev5/3SPL1wcWXd3Rq7qMwn+OAiV3V1Oki1LU9iHDoCURQePpxUI+V\nSlUAN01iSqvY1slSMW17KzVwEmEPP3mHDk6jGSpTRG04QhJcwF165Z8r8Pyt\nJblGeAaJis0Ok9sQmSuVJ70xPwzM8u4NP2oQETQu+Juh6PazNUlfhIU5zZDn\ndV/wqxx6QYKXFLqdEyQ2yMLE4Zsy62ozvm07pqUGeeHWUUU2ViFczlbHJlg2\nvs5qr4zkq6DHXfGYd9/mKyNPj8rx70HYFGFbZGDPpr4t1A80zoQHArt2k6Jn\nckfQOs1t9+LX3519Zfv2L4xeywTLMyVVUCIOKK7nexnLRAa21T4I4TErZBpL\n0K/06PMnNkyyHDdnZoP/llGVk+lC+vgsjbQTlWQSfi/YO7Ey1U1Y1Kasbnsy\nh4Sd\r\n=9WaR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e648805eb34c990054d503fd3f70ed25e40d6d9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8e6081836.0","@material/base":"12.0.0-canary.8e6081836.0","@material/shape":"12.0.0-canary.8e6081836.0","@material/theme":"12.0.0-canary.8e6081836.0","@material/floating-label":"12.0.0-canary.8e6081836.0","@material/feature-targeting":"12.0.0-canary.8e6081836.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.8e6081836.0_1621028504882_0.7910288569397863","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/notched-outline","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85d1a64b9bea9d18a1e447c8f795cb5dca7784eb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":34,"integrity":"sha512-LGMYQlKKmTxZt7DxEU5NlzcEn6+qHB32E1Ii97tKZgEsSyyZ7eVuHhahUM8AE+sx0AWiwQLCgXkqt7sawiaeow==","signatures":[{"sig":"MEYCIQCu70iyFH4A1rV+jrMinzNOQ/JmVM7wZaLZWDuGe/rORAIhAJ4cjHwIHviRlEEE8hdQbrq4aqLt/g+VTpnju8BnVyG/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvGsCRA9TVsSAnZWagAASO8P/jW2nJnfJAnEg8gtNe4H\noARdgPflPMVwg2KD1r9wY3XqyZLv2b2p0Ayog0IXwAhrxqOmvrBYq7re3abd\nd+gwnmdGwJb13C9rn5k9wQhvxy267bSAzeD6n8/+DB0Opiaqm/bkVzKPUvzE\nN7ybB8ayJgINlYPJJkutBmFBoS6WE/4IP18r8YZZPjWceF8kMpQO+GsefBJn\nmBB9NzqBBxTGqHs357JwH+jd566JROyQatPO/OueAzYlYwHhgD0m9Oqq3Zmo\nSyjrNwu+4eMbyeitD776JIsz9jL6HBWGhOdQ/vB69u/VxHLjjRX+R/jFQ2CE\nsdTeN8NUdw8Wq/Df3Y2PK9FQhQJGtnR2vabwLwDXmzRBP0JIg+qcvKZGY3ii\nRFdLVoEOfRb31plo3pkrykjyJ38RJf9lsXFCgLWDRVikE0ADmjeRf6n9zIsC\nbky71u3u34p/+Q16gtyY11BD/IDeNsOKcj/djHHMJ6mgQcBTTe+TRaxMqFDs\nreRg8oYRkLCmPsy6Tte8lUs0XkKYMJhydcuxoESYC/8+78poVlxa8AI0GOFS\nvxRbVPexRMWCYCovHKrosYT1motB1do8hZ5R8TSayCoTF0dEw/L8sA/TWEwj\ngOr5MCJdhOWf4HadzIbE6JLkmCQpQWYKCaBQwtmAyl5LpXM0Q9chvJaDcetC\naNHe\r\n=VHMO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"67c2d3cef073a380a13ddb6bbbfc90886c7af364","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a2b0f4cee.0","@material/base":"12.0.0-canary.a2b0f4cee.0","@material/shape":"12.0.0-canary.a2b0f4cee.0","@material/theme":"12.0.0-canary.a2b0f4cee.0","@material/floating-label":"12.0.0-canary.a2b0f4cee.0","@material/feature-targeting":"12.0.0-canary.a2b0f4cee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.a2b0f4cee.0_1621029291536_0.040909002560822305","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/notched-outline","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d9d1805933021e348203279d9f7d4ab8f7fe943","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.e8e39ad19.0.tgz","fileCount":34,"integrity":"sha512-8EOdGYqCoTEKD7HfAzt171dvw2i9WR+Yrr9BVvfzINl8lk85lQTgHz1xQ/1sD+eEAyJBWfLzMAEuQ8ZX5ATLCw==","signatures":[{"sig":"MEUCIQDX/uF41iuWBSctdOyianCvY+VdXZZ7yTSGN8ST4nwl6QIgSLZWOocG4VkUwmbT9pKF99pH6XILgCRZO5agUyGeesA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpCAWCRA9TVsSAnZWagAAjTEP/ieH/3LkmgOtkIuUhoL4\n2cT2xvTC/yVnk2lq6vCa+JJbckwONLlfrGS0pZaa4az9la2ovbLhq6R4djPD\nxfhtxXdVKhxLhY0+rZV/7Zd46pHl5r1fwgaT2tvrHHI/gLCim5zOJZ2tL667\nTv86INpxOenD5fTVo1F4H2kn57c0ZwP33VpfRRGVVllqVzLso3RsJrBe6RmK\nTx/bhDpjQujaMz1Es4ka7CfeSwEPtoHmuIp7pJ5t+vQezUdSBe4YmwqdgL65\nvzH1frDUMiOXcKRCBky6fJ8SNRJtHn0I8FNW3ZnTIE9cjDwlQRKD3chlukFT\n2WKmnz7XawQ/2m8cIVCfeFm0cj+fLY1HaX7An9LwoSqFlvHvOpIAOwipRuyT\nmmHJN33yqMXavpjL+0ts6QqLs16+M651qIV2LrckAmjP+mWANqBbDmrPrZ6U\nhXVi3Wo2IPXwU6nlEcFX4SgaLhebOLYArcP+R8IVZIlzZM693niwyNDA0rWW\nOzssSeL19NBfwGFhu8OHEqOcqZytHR0CfrM3nB9UpDSG69fD/PgMez3jacaf\n21GfErHBU9D1jNbEeryAJk7pSldBtbpewgyCKMBHFILONxvprZTWqD+ZpGHp\nACI3RvgMAY6KNARYuhibolMranNG0IqWtycqP2cZs6qad0IsbxBc8nb2bSUv\npicg\r\n=7lGw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2bde63cf3be6363eb1508c4d7e1747acfc51a761","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e8e39ad19.0","@material/base":"12.0.0-canary.e8e39ad19.0","@material/shape":"12.0.0-canary.e8e39ad19.0","@material/theme":"12.0.0-canary.e8e39ad19.0","@material/floating-label":"12.0.0-canary.e8e39ad19.0","@material/feature-targeting":"12.0.0-canary.e8e39ad19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.e8e39ad19.0_1621368854277_0.4843313540561527","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/notched-outline","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bb94d8b7ba2a672c034e28655b006c584ddaf17","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":34,"integrity":"sha512-IbyvZdGzDDraG6fOVZLRJw8S7dIY314QYvdki6eDVa4ZOguUS4qTZrT2w0J7q4SnRP702BA/MukI0+ElVnWPag==","signatures":[{"sig":"MEQCIAkv8Q6HDY/PVa8hnaGmbnVCtVG3wrlNVlJH+GXagBP0AiAQSyqiqr8o87oNlJsIOxhzokZ3rI6J0lezu1YHZBTb+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS7YCRA9TVsSAnZWagAAgM8P+wbOo4PwMREk+7fD8CBv\nBfdkBQhLsPUXpeJfSktR/NPbzTeQFAdopNC8sQ6eokBS97k2ootCPD7+QR9Q\ncjw7MwxQHDMr4N4LKYgJCwkY4PfvN50CdQwMYEW9Jq3kHdgYEpV3JVuO5kQ3\n2eLCVQJ8Jl7NCKtNMtgLh+CZoGFoqa57LnIR15O9NLy0KfX/MPGvkS8wACPN\nBhT5FDwjNmtXKiNfjonqMU7LVaIQix6nyv21Zgouk59R8amaGRk2OH2SI6cT\nsc9t5zS7tHvq91u1Kwtk/d6QoWCJEu1XGLy99bYnfZ7LUjj0rSk8vr5IOukY\njsRURhI/KAtv2uUOFRVuSqnKeR4HY9Eba+pHMNACBgEvH3rVS8remdaNM+PD\n3IUTuH4zA7e/8pswtU9yZSqrpjz/oYkXb9vFT7S0IiWPGpmwCPLR1STFNZfK\nx/zgWXUi5OGdOTBp1sImDwfcVaRfh/d4goluqGttJWQksEm8N+iPxFKhH/Fw\nAC10RgAZwLwTuFs8Bu54saMo4uVoX3TdfxDxaAgAGZ3ccgO/4VKMwdmDfBno\naciiF6tl/rsbBFwEoDG1ox3/mMEqz/Ck/dRbz/WZ47YqmjIZ1MsovAoXxrbN\nJBy+Hleowgr25zWK5F1tJefYVOd8n53KGe8CMymxWmnaS3NwUunD3kocsvgz\nEnxm\r\n=dzvt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9abe3ad555ba3e9ca70f37ff3419acc2edb56676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4bb5eea2b.0","@material/base":"12.0.0-canary.4bb5eea2b.0","@material/shape":"12.0.0-canary.4bb5eea2b.0","@material/theme":"12.0.0-canary.4bb5eea2b.0","@material/floating-label":"12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.4bb5eea2b.0_1621438168423_0.8063222920041602","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/notched-outline","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e574705d549d2c1b00eee41f2e4f00a4e1bcf4f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.ccce99cd6.0.tgz","fileCount":34,"integrity":"sha512-I9TKPpjFzLi5rrVQZekX1itYsJ4obkOI5D6IWaLMujzEUq3Bxjq4gXqAMys4cuEQwJXVENHZT4vPEjh7ewKqbg==","signatures":[{"sig":"MEUCIQCP4poXlwcE4BO3rewrWgej7fjibX+oXXUBwVI5cb11HAIgMOWR0P3sgUkdj4Ev9M3cuzOvRrtINk37b1EcKccqyiU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbQSCRA9TVsSAnZWagAAdFMP/R0BP1JniOU3UqwnOIup\nmT1avGSWmJnWWmht7dSKwPXR2gpqSMcEa77jiLCiNHk/T9UTWXh5cXYfHqFp\neH/KGaQkZZ2AeXpitK/DAESRC/h+f8FqtIhBvHW3B4BxfiwxZzqXpRjgVTNG\n/Mci0Iaq4sn9LSXtNSFePwJR+IFXd/77ep24+SkJuMsCqIytNYeAu5cjOkLX\nxPbiHIJztllBGFj6yrPt2jiFJPW08Y0IiT8m5BmYY2ztQmFALvmUP+uuDbMl\ngLuAmkd8H/JGOgLRxX0EVF0JN/cDHv2KP+WCRVyP06hmZ+GtJPdK5tYc1tlz\n1dz1aHDwQxRm3k7lSZKIKMEb5j3nAZCz7S1JSij4Fh4x7Owuqc99UAzVffRy\nKXXdpBjrkKHMTq1pg3sCnZXJoIRi5j4+piB4bK3U2exKlnajaYxXy0pX75rg\nywdqlyVtfLQ9RSxtHxl1mJr+8pUJlToOzF948dFKbyU/Yl0EeTXnzXykxV8x\n18nnh9AYj4QkorhIYzF9tZzZnF8E+uZPIlBBWYOzVffg5LXjbyKvbK7lnrq9\nvC4svxP3cjcIPOgMlohN3D9WVLrA8uWEoQ1Y8K958vMbtfGoAAddNJHT3MKl\nprLX9JkQV7Mb6luXDF9eY0kAR8jLYZR6mQzGH9h8bunx/Tppl6pCvSXrURvs\nBjbI\r\n=lw3G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5d475a1522350d9dadb5fe3597683fa7f4851b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ccce99cd6.0","@material/base":"12.0.0-canary.ccce99cd6.0","@material/shape":"12.0.0-canary.ccce99cd6.0","@material/theme":"12.0.0-canary.ccce99cd6.0","@material/floating-label":"12.0.0-canary.ccce99cd6.0","@material/feature-targeting":"12.0.0-canary.ccce99cd6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.ccce99cd6.0_1621472274272_0.307032151339254","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/notched-outline","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.14767a8db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2309cac26313778df82838c7f0f93457b32f4006","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.14767a8db.0.tgz","fileCount":34,"integrity":"sha512-rGUUdvx9QVrscEDGkPNCFhPRTFHW2UpdJBsff3NOOfSM8urvKzWjVEaHaEsXYELY7Im0ZMHdvmA8R3rQV/SDow==","signatures":[{"sig":"MEYCIQD7LVONGWbHZ4/DUwbbZde0hlx/jPOmiFE0QBdIAnXS0wIhAIlZv3xhb9w37gB26/vW9tq3y0sGkpO8kqVM9ZkAMt5c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpsv/CRA9TVsSAnZWagAA+r0P/Av58cioSn7/gK7fw2Wq\nupSJYsL28a9I4UyqvCtHg3TwcFiGmT1M5mLgEaWWFX92M19hS7dgvIvC4dEU\nLJ4+8PpltTs9Le1lT++RjgdNe7O9oMjJhdiyS8eJo9Kl0b1FCSA+ULBZPXJK\n4O/EbI2M2TIKfcGjLfSv7owGYHcCnbuDl66v19JjKLmYfp5TWCj/C9HKpjM+\ntzKEv6A4SyLNwHiKiySBaXq69tTKIqREhEz1BAK4m0B0rV4UcTeFBUtYRSf9\nJdwN8N+ehdBVigc/lgiW5UeJoOnMIzXmqTyog6YU5jU5xmaTe98X7lhwElt5\nWj/QT7uD+hgnqUm4o0c9uwokSA+29uodYwIfAnBH6i3dI1Y3RdyazJ+fN+pc\ncteJYS8cxQGxzVuNL6Y8YIHZqD+EmEgKiUuQUYdWaNdDC/CrlH6MR+zmjnRs\nNX/QptqbAuoDOZ/2uDI1tVgOW6GP1l+rl85WFEpjQHl2KUP1jVvmMCJaiqF1\nVJXv1wo84DzHjPDK41ZI4kIgg27aNM2eG+5AiDz5/vQIF/yXm4qbUQAzy9Oj\nTC+bLdQiNMUSiUU82UZ/NItD78A7QawBeHnnImoyyGO5nkKtRvYRjeg7vsrt\nyh1REZmBnbZuKl7bW1AXXE2swJw2L0D5Yr+hp4oKVOJYCozq44tD6DqWA0sV\n7pSp\r\n=4tOK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a324b91ce28769039998a00879c6f441cb1159b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.14767a8db.0","@material/base":"12.0.0-canary.14767a8db.0","@material/shape":"12.0.0-canary.14767a8db.0","@material/theme":"12.0.0-canary.14767a8db.0","@material/floating-label":"12.0.0-canary.14767a8db.0","@material/feature-targeting":"12.0.0-canary.14767a8db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.14767a8db.0_1621543935201_0.6456550397110128","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/notched-outline","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ae172efcded51ffbbc3d650cd16ef022e9f27b8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.22c6dcff9.0.tgz","fileCount":34,"integrity":"sha512-nNuuNSulRN03lb2t4FmyS/XpQnjvNgKnzDHQYHSnje+qxEoU94hw0LlL04TnoeiltdG/sJAnIeUJWR89SEiWaQ==","signatures":[{"sig":"MEQCIGyD1vC0mZye6Cqo41SyQYCjDsATDhpJgWG2FlMi40OGAiAP+9+ggIfVCX2+ZruaxjS2niDaeSUJb0vc4flZ0Ehmew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8QTCRA9TVsSAnZWagAABkgP/0EEXuso3MS/3/CnhWdG\nalBlGwPqgIbdEAvc0Xg5gwn7Qt3kCuNxvrqzatnAinOZf0ABKe7ko/ne6Mf5\nnKWXRB4hB84JMG+ifGDigF0BfLJLAWPqdDUC6mvofzMj69U4EHE0lQhOEQPR\n1Ug56oBVQ4Nthb0yRAEI2XNY53NutitRhlnA9AOrLqUtYMiRVk5MG/LfUT2x\nMGW6UfLAT2GpsdtY1yYr+dQ+mzeJ8vIWDSFelg+VejS0Dacw+rXzE2laaZ8r\n3gpRne4PcecuiXpKwyYAOutuuPw3gS2C5vm35S7pbQT6bNnuPPLG6EvXDM/o\nJNxQ1wGXja60p9+m3dfygziuWRehft0b6JNK0/V50LBG5RxB/yqastHCX9wE\nF3WviMfYbsYGxKxjGmlNUw/cd9GAqGlBQE1CCYHnI0eq8eTgEtXg/UvU4LfI\nIb3Qkvs3BC8gqw1uo/Uk5VJkr0KxWoXO2M9fJn/KCHOSiJhTP5UvCReRaMUS\n+idxpCi5HVMeeAx3BZZgG+Yj+XtSDhiU7SOWOWVSHL7yOHBV19ZGZVxGe/Kz\n5Z/567KpBI7Yxyj2oRpXTwuKfaQqQy2HI5yRF3DCtCaVqadt97ju9tevt6V7\nRT3b29jrzqEwET4eQCajzLy8Pf0i8ZqWTqNih8DgQjOvb5qvFZdpw5pNkC/2\nsfJ2\r\n=kIrw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"74541e300384d800b9cdf492ff70ba20ffc583dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.22c6dcff9.0","@material/base":"12.0.0-canary.22c6dcff9.0","@material/shape":"12.0.0-canary.22c6dcff9.0","@material/theme":"12.0.0-canary.22c6dcff9.0","@material/floating-label":"12.0.0-canary.22c6dcff9.0","@material/feature-targeting":"12.0.0-canary.22c6dcff9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.22c6dcff9.0_1621869586975_0.6132708387685548","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/notched-outline","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.fadab3372.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"299368a5137d8e38861fdc4c4715a58bf5e6bbdc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.fadab3372.0.tgz","fileCount":34,"integrity":"sha512-8bsXWF8K/wQluPOcxn1tgEaVZv0n0SeosgGmBGBBLd4zT4juBOwhdnuPaJUB2vYWoCAtAPzy/Yb5P0TaPrbx7Q==","signatures":[{"sig":"MEUCIF1TY3qJpbVxqpWIYnXN6Gbd57GrHLiTEb2wuXZvoJALAiEAhfNQE0tH1qwT4H3rcYw09COeiQ6xkvMhbaVtvxl3mYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq88kCRA9TVsSAnZWagAAB8EP/3H9E8WGJrVuwOn692Rj\n2fL5ohrvGzc4W0xe+Tp65R7R1m80Y3y/sw4KktYK/I8OeMrdjbVWdGgZGAZZ\nFEtsrw3WFVBjMuyKN/Zcj2OzN7gEWHfhFF0MM8beCqjKf2+23sXMSh7WJj10\nsmH2zTFdAsHcteDihy31mWVGwbNfmaOoiFEXGACOREZwi+DOvnOHP19z1Ymf\nsAgHVoP98jVM11mo5/Exu9cnh263cDTnXYe6NVq3pxO3ap05U1c9LzmPthe3\nvTLkvMz5ncmW8U3yZq2wJlMIKp6IQGsIjnGDOzTcjO1boKpMw37ls74B6U9v\nRucX+WGJoMZNUZlpJWVsDV0KBuo2dQzuWYyVzU92tSSDFZN5sj9V7hFlm/wf\nMJoRpV/YR7Yr2ks59Q8JWaSM2SAc1FhDBQEZzvqN/BiFWD0csfNvbBQ+rNAN\nxkqido8Ulnt2mrQl9PoJMcTHUZbY7zovlMJRYIGpG902/vwe5T6q6pyGt+rF\n+BBJfVLIhqU0nKfVwBF6xu8viW3iVySRaHmpN9LHmVj1VgIPliWz3N2Us++b\neRP/OPgyRzr0ENKRWt+BgigVMMGkoqBtqnuL20AOv0J1EglCD+XvBcUOAeYB\nUndTU/1kZ/2/d+B/OpSaBzjE3Q0eO/I+C46Ph9xvVOwAYbhoCWBSHhZ99BOC\nW9Ne\r\n=Iuba\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d76e611194693a7270b5e10fd87906ada48c7af7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.fadab3372.0","@material/base":"12.0.0-canary.fadab3372.0","@material/shape":"12.0.0-canary.fadab3372.0","@material/theme":"12.0.0-canary.fadab3372.0","@material/floating-label":"12.0.0-canary.fadab3372.0","@material/feature-targeting":"12.0.0-canary.fadab3372.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.fadab3372.0_1621872419582_0.2953911802884934","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/notched-outline","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a3ef2c0fcacb60cdf9f730b00a02c6611a44b56","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.caa73aeee.0.tgz","fileCount":34,"integrity":"sha512-Nflx5/NtoDxBhNfYrffOrqgq7ahBjffH9hr83JyvLGqsALw/DaVkTJcdEXrSoJ9kiSGCgIhuWQ4JzliMFoZ7zg==","signatures":[{"sig":"MEYCIQC1Yna3eKGmxa4geFHl7yDIVBoa75z3BMW+VnWTuthn7wIhANvJqHpDxdY3LVakwxPlqP79E66SVjN20cL58P6LI0WA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQaFCRA9TVsSAnZWagAAZJAP/AxBGuB51/0hi8Mz1qtM\nHkjZvuZfAicYSC85Qc8KU5LdA6w016zTD7DakiI/ch1SdVdtPMYjZ3xmetHZ\nZr5IlOszHfyJyzLCMIcqm+iUGjr2jvtQuttpeYzq8vcMdNrtqaumnM50rDx/\nabdXu3H3zTf6VVRCNylwZABfoim1V9ZzM3gz8LbiiLptMyvwOcJO3G0wlWs9\nKavl0CSRPtSlJCNIfSMj4OrfWjyK+UxCWR8PeRh90rCyWGQiIUH+UOZMDimT\nfk9xMxr6dnHVFYTMANAbC4Z4k34fz4spv7JAaoA5m9veqltm/5chBWC6iu/T\nw+ja54V25zxq93JuSdgdvcgI7vNzIO4PMtaCjp1WJBHeByH+H1aT8w3nPga4\nnteOkKw3OOvHrBDYzAiR2jnmD6RfNIv/FeSfFnz8CdMhfRffm0tDX8Lh+NQf\nd5sqNeHXGP72o9HVUhFm61hnCDCj6xqiB2yBTQhCGzXPRVzHvtvYL1VXBRN2\nziCFcQ4LSMFF8OuOqCNMVuVxb/qcPrSdEMXXkzSbt6NDZ737jh49V4SHz9Eb\nLa+329Fzty7gE/QiF8ITaamMu45IaT4v2HA/xLC+ZZCgg+TDTBs1D4PWufYl\nM6OXFCAZusmJC35MxoVjETacuuUEdS8HXuiZSDnHrHo9NIsR1VKBnbvmelo5\n+esh\r\n=br7w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dca5692fda23e55426458f6b0c56c2b6dc9e2dd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.caa73aeee.0","@material/base":"12.0.0-canary.caa73aeee.0","@material/shape":"12.0.0-canary.caa73aeee.0","@material/theme":"12.0.0-canary.caa73aeee.0","@material/floating-label":"12.0.0-canary.caa73aeee.0","@material/feature-targeting":"12.0.0-canary.caa73aeee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.caa73aeee.0_1621952132514_0.10854712744632788","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/notched-outline","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7447263e215ad633ad044bb09295a4e1a237b4e9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":34,"integrity":"sha512-7jj8rQwOFslogunv3oC3zf1oCt23Bg2WgEeiCYljd7Fuvegr1dRQm4zaIz2KqqojbY3snaMn+wj1aN1HF+8rzA==","signatures":[{"sig":"MEUCIBdu6y8l+g09xGfzkw9adhQ8U0qae4/Hk8sDJQLG8OHmAiEAgT4LKe49kjLmoCPN8GdMMQudHTgb+QFwGW2BavZxc6g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV/TCRA9TVsSAnZWagAA3HgP/32lG3XG5V3B7fNPk+Ih\nxsODzXGqG/knU2Ty1+DmjQRTm0SL2o6lcS1L+ZK66YVn6FQJ1ox1cqdyWIsq\nIKCUDLUqFos5wZd4pvtsvGnUyDOfrxWUUpl2TEYIyyjk9GeNcrdcP5NH2JxB\n7dUNSwuOD26AGUFp8WthUJoDTRMqw/orPp85jHAtLq54CObl0woMGcXeHKBe\nMiD62Ny3yF7k/EjVcRhgZcjSAfCQRYTRhp8hvmzsUK1qMLAncfkQyLC7m+QD\n+sB+V9ojV/M6mCH23J6XH33ahEq++gRN6+w0yjIVEiTFSv7voCm3Skn5uEJr\nE8UcL2OPjtl1rj4hVOFi2itO5kvCGd3w6nXv3n+BspdjqeIHcN/Pdr0qkwkM\ny1YIxK9F+v6IKvAZtSJes4ONvUSn18utzWf6Cw/TvleT2NZA0XVK5hZISIeP\ndMmnf2pasSTt5Q03tF9h51wbS60a3ZgNJHp52e2JKyUMI4lKX07XCTns0yVF\njuF0HjzmhwaYXCCs3ZkHY5BS5or7nTMuHhRB+Ad0Djxva35Gdiu10QR1vABt\neNI04uH1b2Qvkfxx2svnRb7v7MurnIcctpJbkRBm+t7fZKoy9IeaJ90hkXAm\ne4ECFlmnLxYQDmx7iXiH5Dluv7tVFjpvtRe8smBUVmVFKWz9iIT/COhsrScu\nrykC\r\n=tCf9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f9db084a3aed73c844554c3b223d5185727b6d07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ec31ae1ed.0","@material/base":"12.0.0-canary.ec31ae1ed.0","@material/shape":"12.0.0-canary.ec31ae1ed.0","@material/theme":"12.0.0-canary.ec31ae1ed.0","@material/floating-label":"12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.ec31ae1ed.0_1621974995218_0.47779448224857446","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/notched-outline","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.8530d3514.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04db1cafc0a604800c0f5a48ab863cc1f25c69e4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.8530d3514.0.tgz","fileCount":34,"integrity":"sha512-LoatlTeNGX79oNFbKrt0q5iOGu/ZCwZi/GMTfuY1Ti1PYtDPcugN4LJeVQfwPc3oMcl1u5NdFGXPtgz3n/uSCQ==","signatures":[{"sig":"MEUCIEYwWqLMfRjjaftAlIrsnwEbSFn0LK6pMAgM7N32UG1TAiEAyfbYI86jCTMSKqVZqpLenLPBcOkKv49vMuya+toN2sM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8NrCRA9TVsSAnZWagAAQJAP/imPnqkr81hPCHWBbdd2\n+4cFAjM4rNwC12hjQ2wWE3HlIp43T/fXVofFOXXMdaERWpzfzkOzoQJasE0y\nlbsMZMyDrUlj8hL/N5NPcB8+gUqW3R+5sch7Y82K4lI/sjiroq1lp9GJBVoo\neZrxIWsO8WXyyYL0m0sTFmTKGAwQEVG8u1XlP6pbmza6fovtcdCa36yrovHK\nRwI0y1YdbK9YaXMHaebt5KzDH+WdXnULNxqmq1c7vYA/8I9LOcssWPaPv5bh\nrPaHKEvB7RJZjIo8TbdbHISxN5MuOjN5Yhk+VMfX9fwqsPnMHOn2YEUSoHmE\ndiMgrzEOveWMJrXVESCCOzOLu26/UDZvyV8+TbWbUhCLFfe1jGD/haB/zLZh\ng42n/g1tAadCq0rGzkVj0ndjF5fEI+uyBSHqt1R754B32BUFIPB389ASdq20\nuU6idTNhSGqW5HRyW7MWKH/Zs6+DtPsS+Jbd961XrRy2GlgKHXjec9fz6NDR\nc/uZwoJHLyyEBC2K3ixuWmyt2GueICa35WcIaBkuwXTDzMy7HDydC1lkmWJG\nd6ri4oQj8bsxolLl9Tt4SALGSUwQs4fj41o7lqDWqOel80jBlXYBnSyu1kHH\nEfnNEdKGuGioOD16kphpjb9M6014fwy/dzJWlHtZGhXxEPil7CCpcuBzu8K5\nJJv6\r\n=ic4y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e32508a69db8bd9ce4383a14f2c576d35950566c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8530d3514.0","@material/base":"12.0.0-canary.8530d3514.0","@material/shape":"12.0.0-canary.8530d3514.0","@material/theme":"12.0.0-canary.8530d3514.0","@material/floating-label":"12.0.0-canary.8530d3514.0","@material/feature-targeting":"12.0.0-canary.8530d3514.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.8530d3514.0_1622131562550_0.35032017780658653","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/notched-outline","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db5fc0e67a077a3b6b9bac9e46deb9b0c5b08105","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.00b5899dc.0.tgz","fileCount":34,"integrity":"sha512-vOPYxPSYudxhY4CNnR8wj2KSWkEfBzhq34vURu3964es8ozAhe48l3C4OEoSA//4/JBT7jK3P2lS7IvNpzy33A==","signatures":[{"sig":"MEUCIQCCcL0q6Y55zEWSRO83Wf/Zn27Nqaxr//MSSV9sacZ4OwIgfr7euXJ/57/S/j2WVFHcaKvA8Wx2HFMAS1yCA3eCQ5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtrjUCRA9TVsSAnZWagAAgjIQAIP5B9YBSoO9lVupkQhj\nzv/LBIh91x5ZFcR+dKPhX8PBF6J3RQpJT45X+hC2Fz5A0M8T/seP5dAdYmoM\nIqbUTYybjrN3C8/3/BWiFLFJtbkm7oXGs1vBJq49LUHF7TMFHvqySMhZ5n4E\neN1BQ+dhiIPKPdLlZMM4DPVnwyitqcGOat+gtNaV3EV/muA691sECmuZINJT\nageAtX6OfeZrgtymyrOS1tloAkLIBifZk9xcxj/APqElVzrLhpIA//8CWn3n\nWu9kirxpwTfH/8qYG8D6VvMn+0luzma7ym59MQigeEMAVo5HUvau2WlrPLEP\no/JzwI6Hlfbcw9f3cuatQzHXxlsh2ktEx8hRdF8uHMpbCDOJxb/mpYqveJ7R\nQ0GdkpQEC1x2+lKK9e87h270oMCC9e/mz7Aa/d3zi33cicAfNYuy56nPegr9\nefXu33IDKAiPnE6LcjpA3+hoYSvvYxr5ikhhF5y5GHKMUOn1O3S+IRpnqNKC\nPb+oAX2HspUkYAjJgCIOTmy7heBrohBh1wqHSPG5sSylgpVSqiwd5ihHdVVk\nfvc2tchCFrDtNcNm2CTYwUy1Zo5tK971Zu1b8ytpFOdL7bJz/sSzX7gfTGXL\nft2F1hYcXFWchIRc/PzF9DoG83bKqumeB9vfK/GoE2StynBFcL459dfmJGyp\nXnOK\r\n=EFai\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"19ffd4cf15764c62ec7b1dfd76483a2919f6501d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.00b5899dc.0","@material/base":"12.0.0-canary.00b5899dc.0","@material/shape":"12.0.0-canary.00b5899dc.0","@material/theme":"12.0.0-canary.00b5899dc.0","@material/floating-label":"12.0.0-canary.00b5899dc.0","@material/feature-targeting":"12.0.0-canary.00b5899dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.00b5899dc.0_1622587603673_0.9041795394618508","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/notched-outline","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d8c535344c91257c8a6f2b6a18497ae0ffe7aa6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.f1525ea3e.0.tgz","fileCount":34,"integrity":"sha512-eLy1yVRjlCoUldi3+5kASWP11zjlqxnBmILtIPCglu9cFWzjtD6HIDAZrdetdTCTMhtmdGGsRqXpSyjuru3XBg==","signatures":[{"sig":"MEUCICSxnz7xGMnL8m7Ru4SpoheAgPqMxXvYhDROMNTwt2aTAiEAu8oA1X4dH3MvL++rN+LukZsnoEwmONbIlcl/L0J/YCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN9UCRA9TVsSAnZWagAARYYQAIEddOS595HJNiiOecDn\nlBEEvkfiU4tKTMKAjJ3Fv3KdShV1A0AzxY4Rx6PD7TJN8Pq7wFhm7ECiW9AC\nZUARnAFLZEBs/LK/RR+vH8IwM9h78KVsc2kcpfV+deqBvvAQnWjGaPDMKQgk\nC0yoqgasETZo+Zv0TQzN20LIfU4da5DMKWgbfvV9PKUPq0r7maivaUZZlKI2\nNriA3UHFbdqRXPIBg8N9S+gxxsUZTwl8wpO7pslv0F1Xa2cvHZiTAfE0yQSX\n8DqmKeeS+tO7p0zP3VAVmE680P17AV6btNy2B8G9cjRYz5rYsV6lK09sbxTY\nKbDRAtLrsKZ1R7mL2usSjjyh4vZp/7h/qLE/3oAuYGFN2MWq2vH6RRUyH4W4\nSLrVp2fvWUYOXgSBm1nA7+qB4UOTDtd6G0ncqNHlqUFZEH0iFPBHNwY92WBK\nq+1kx+j8wfY22zlvwWsOdyvRNeC55R/+fqxuxmWJLNm5qv0f8Ka7mUdxtBMF\nwU+rb10F92TktnYB32kN+/imnhgOZJaT0M2WJUPUXDZZ046/EpcK5SfyEj66\nRQdJQeP8XzgkjX44Z4Dib7mq66cq+MCRQhjkZrvJGS4bSOl9/bcn+tp24B8H\nOA4aghtcZE+HHPL6oCgXk+Sx8XR8BlK3XCg37aj6fA9doITD2YoKsZC+v9uY\n1axy\r\n=hPaG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"97ff3c2e33330849b0ca447ac6983126a385d845","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f1525ea3e.0","@material/base":"12.0.0-canary.f1525ea3e.0","@material/shape":"12.0.0-canary.f1525ea3e.0","@material/theme":"12.0.0-canary.f1525ea3e.0","@material/floating-label":"12.0.0-canary.f1525ea3e.0","@material/feature-targeting":"12.0.0-canary.f1525ea3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.f1525ea3e.0_1622728532128_0.9590684109433518","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/notched-outline","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.464a00286.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf9dfbf8aadc4fce786e15f6beb494c55220556b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.464a00286.0.tgz","fileCount":34,"integrity":"sha512-jWCjeOIxTJLTzCCp8w5rIBAqBDT657yyYkbIT4PxLM6zDo3VT6CKlpbw/MWs8FLyrItIvdcD0XKdg9Fq6xt3gg==","signatures":[{"sig":"MEUCIQDf57qDh7WMXstRMfUU9i0vpl8xCj+4SLfVqngdDLL2TQIgPxFCUuHip1pYNanWK3nCOIlOHTtf1w1+SBFXTitVlF4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOt6CRA9TVsSAnZWagAAxkIQAJask7I25+t6p43JzeAX\nj3SiDXIhbRPfrHme7zwLBk01R7BRvt2R5akBQ6tWHeF3EG+1vn4caDuB8dRg\nxeTr/BR6NMP5mOE5aSUeITHxbYKPIXe34LU8W/tzlK64jw5GdAvrCf6RP0Yu\nV+n4Kqi/5fDi6mOn6s5Kz08t94iFxq9E+yR1qgoALcJpikdvjmY2TW4uDf9v\n4lFeKRLc0t/ClQ965Jg/iDVYIb7X8c8cQans/G2cSU0Zq5SKc38ZfOQEC75w\n8zrZIa/uEQYpKlfC+e27BO1WwvlITL77YUhKhndpCPMWnZrx6AUSiPTIE/Nt\nzzYcxssH5NlgMc4r90pzHNiKVhBaLu/0BM0y5KsGtU+zjndzU6Uys2YjxZ9m\nCUGFa2dTa/EJqrVBVI0pxINc6rbAsWYukBgjYF799pWY+EiAVruL+YQClIBb\noMlxpFFDyN8vsyk7niV+l+aJ+jXlfCkWExxHjP8PiV6NVhAW4ESQ4X5+xQEe\n941GjK2micf34vbi+bC3eQXHTvxYYhza+M0TLu2v1Ny3ZoagDDfg8x43wPjJ\nt18wX1McBhONZZscA1CyyOVZJXzopidnVXiccp4+IUhFb7C7zT6cAErpXxRt\nYiWwHITbz8v9EFKerlAaVCRZR/fQzFL3I54DiQ/481W0rNHMh6t04HYFQtjf\ncbkv\r\n=rhzE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ceb43f7f74f7db77edbe7a13d3b92e853d599d6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.464a00286.0","@material/base":"12.0.0-canary.464a00286.0","@material/shape":"12.0.0-canary.464a00286.0","@material/theme":"12.0.0-canary.464a00286.0","@material/floating-label":"12.0.0-canary.464a00286.0","@material/feature-targeting":"12.0.0-canary.464a00286.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.464a00286.0_1622731642270_0.850984421274555","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/notched-outline","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.474de7878.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ce44273140dd19f67920dfa6313429f9560f5f5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.474de7878.0.tgz","fileCount":34,"integrity":"sha512-cg7tR3rn8+GAQMfEgB/CqZb5NYKlYnFhXR2fTO6UJrRFIBm4GD3kAPETRJgUwcvUDw8KOFZegcC5khMx0vnwKA==","signatures":[{"sig":"MEUCIQDGqGTuLO665SL5o9RP79qFNe7e3BBuP1aXGvDXn0SusAIgS6BngE1n0DigkIlQY9hhNFoHGDgnmdn1ZQdhcaAPzSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPIHCRA9TVsSAnZWagAAdtsP/1LRpCW8Vb2LehTc9gy0\ngROHoQYDaJdcVdTy32LCbNBsenE2pO7nFk0Xkg61tAql2CPzfmjYCizBo7ZR\nB8oCYLKGSzfWJODwsys+3uBI9nVSpLBDe8pW/ZImGlSTZTpTGK+mHdLrsM5A\nK0pUNKPF19ghw7S3z8Fjk4A30po6lDm54ZbltvFDjfo33ePzjWehau66zvy2\nTKpUVfK6jbtau/M/KWMJvrb1jeepJ5voLLk97oNYvtJfDt4sl/XWSnFUBe4z\nv4E+F4g5615H7Jsc4iROweIiTED6cNHSoWFvG8bX1HCP6iMkSBvgv+uErIG/\njuehiRLjfbgKEyMMxrB5VZeGXv+/DmdiwjiNSYZOXqyoR8UlqDu/uAuWj82C\nI40CRnC4TqEn4v7aXhFJGJE22e+Clu8VVC1Um8jpF4yL6TLV90Kmb+VzdjBz\n3A6MluxLEbh0teixRzeF8inFP3tFG/6FB5uw000bFVGYDSCD9bPXxFdhxMPj\narH45OPmve/+8V3W0jCgi9YKgb1UbLzduySszM1F1gBIQdyMrPKG2JAwOxGa\njbxwalr+K7EhbGMNR2OoeOH8kUahEDSNNU9gTvB+bTjFpmuKzu6WwUfJ0TE3\n4wtyZLWMLAgs87LNUUScta1JyAdqfXjAkUSkZ4mfZE9Zl9K8E2VVS9soacJ/\niu5q\r\n=tcv3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"67d604ec9cbaa0dc385eb36be35e0adfe641b244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.474de7878.0","@material/base":"12.0.0-canary.474de7878.0","@material/shape":"12.0.0-canary.474de7878.0","@material/theme":"12.0.0-canary.474de7878.0","@material/floating-label":"12.0.0-canary.474de7878.0","@material/feature-targeting":"12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.474de7878.0_1622733319432_0.6274745457281194","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/notched-outline","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"739665ed274307918800eda90f4363a32aa7e3b0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.b87ebf74d.0.tgz","fileCount":34,"integrity":"sha512-O84fRFCHS12AnQzBIM32ovs8TzujzBtIS5/eUiKNTNqPZuU0kSOOb6adaG3Cv2qPs3a0ys/Xe6u13XG4ozJMEg==","signatures":[{"sig":"MEYCIQDVChmZJsh7nh79NhOPYSEYLMoQpJna7DkLtUI/uhAiQAIhAJDgXLqVsvj+lLi4FgU0ZGl5U3g2phXSLVUztLBMq77l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRWsCRA9TVsSAnZWagAAL6kP/2lO52cVS36++7PWU+pp\nL3zxIUR/Vf+AsT5Xw2zUQFqsmLQDPI7ptslc8BTiuJH9efR0HCdd2nPrCJHR\nuRFPPINo5dRvsPNI/ihOtoZ7mnJqL2vtnIXnGeRK6zahifIN5Iyni79va/2z\nYEJhwRdjbE9jkiXbkG1N0ujhzU63oy5pTJVWBEsUOhHtvk/s9igTL0ZNbSpB\ntCR+WPgqlEwH3WYb6UUY2vg/gXI2joHQL5VF3Bl6sIECyPxKrAlUw2mkBwUN\naXGdiKRv65eYO8yBKatIoGt/OSsiSc1pBO315hODMLERIBIa1tmuilO+azan\nrwgDk3CyoQ6DCkGY3jeIwfgXf3eL5fimUz1XLSJlFh9nTqYLBkUB+UUKMhKg\nKIsiVKuJSu67PK/RTGd8IuFKMxVQU8PGzFbNd8nhS0oTDgL9e/d3oHQN4PkN\ncBhxcBtVtAP6OBPKj+RMxGnQNxuNGSeS5Nbtw7K186ddCenGCMla1nho/YZ7\nqY8we1yLuG5aOsKz41Ac/eosvA20U+Y7YVwOq7tmYx9JTiOSgA7nnMqIT3Y4\n8OP6OscoCVQf4Mp5Jdb/WLUIQn13CWaFj4k6d8ZJFOHWN/rhI838ktTI57zk\nZB/LS/DeUkjb6iflHVStYddstH3TaZQhrzJzHcaV4K+LXkrkGBIJv9sOIiVf\nzYGk\r\n=lsNg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d3567c6dfa0fd347d2141fb92460c63fac28b46a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b87ebf74d.0","@material/base":"12.0.0-canary.b87ebf74d.0","@material/shape":"12.0.0-canary.b87ebf74d.0","@material/theme":"12.0.0-canary.b87ebf74d.0","@material/floating-label":"12.0.0-canary.b87ebf74d.0","@material/feature-targeting":"12.0.0-canary.b87ebf74d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.b87ebf74d.0_1622742444355_0.35732951716437","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/notched-outline","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0dedcd4d75c1e6f6e5911578bb22ffa559c4c72a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.2daa49b35.0.tgz","fileCount":34,"integrity":"sha512-ZYgxOZo2Q/Tg8w7Y9gnxgplGPzXwCm2wsWvOTFNDVJzHXZumdyNFzLKotxOf7zfvsgGwxDpFlaZMbM5HYnpjTQ==","signatures":[{"sig":"MEQCIFsuMPLcsD5vzUwkPx5K8M+tGMqhaKRZ8sn497cjUghsAiBSitZZSCdNGXUrwZcIgdgufccq0RHZ5vwJSMvVprq0fw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulGUCRA9TVsSAnZWagAArFQP/1aBrgVg6TkOEsAz4eXL\ncscZI+uEV307jvNJwGxBky/JIyKRJLvZI8W+kv3cHzu2jKl243d3xaHQ12p2\nTcDyVptC4iQ6TUUk1SEtw1zwPVxJM4roS5xj9dKBywcs9a9di8YqXclh5fAc\nMgwmnV83kmgfzT/fwGAVFJShGnX7GzWEwqIG/FA0dKOKm0nc69dhPG5AIT4K\ng0zaVnVMJ3jSaSZvMleB1YEw1nY8h/AnjoLswxdpBYhyFI8fNnzwaJyyo7XJ\nCYp5zvIrLqBXs4L3nDnGMYfPIuDycnMOPQzU7fY5cBg06x2ZTr2IN1h+RGtO\nwIa9mP3ysa7b4umrj1hxNFsPI27523hNhAZrjsBZkTUt/FSgrnyL4rmJDij0\nmpj38k81f29EKqQbz3Xmts1D6smvj78h+7Tlb3fHZrHdrIazCa0Y4FKkAVwN\nhEhMF5zODIwT/OkIaMxAdpHa/MhbdSsXX/ThG5CF6bnJFBD/iq80D5OgdFZk\nJs+wzyUpp/1jX21TQuwhYbvzARJy1zq0QzBBfAhNq61ckYmj9r0O0xbabn7M\npF01banW1O6glANAJH3seY1tJMfCm8uIyzFFWqaW6ABW2zxoXhXo8ocRL64J\nJUheLLf+A4YGl5X4z0Im2QPX+RqmDW6wwkFM98K0MOJrn+mCP52wd6afeNsV\nYdIx\r\n=o6BE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3e759afe4116e5fb3941df918249b1b1348fe684","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2daa49b35.0","@material/base":"12.0.0-canary.2daa49b35.0","@material/shape":"12.0.0-canary.2daa49b35.0","@material/theme":"12.0.0-canary.2daa49b35.0","@material/floating-label":"12.0.0-canary.2daa49b35.0","@material/feature-targeting":"12.0.0-canary.2daa49b35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.2daa49b35.0_1622823316585_0.4861711062920353","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/notched-outline","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.08db3d737.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfb1c9d76a82a295b376c1b1e33d1d741ff26188","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.08db3d737.0.tgz","fileCount":34,"integrity":"sha512-0o7Sgdp7GKrncD6SzfTkFeVuNJFRI9xj2Md+W3xP+nY6KEA+ZFXVwg+SicKd3dVKuO+NZMwVRVGpRyMRG3ZjHw==","signatures":[{"sig":"MEUCIGAdSE2PxqHAtc/QzSHor/w+S2/YkE/T2tB2HX4TrxtjAiEAiPsviNQQhtEESeKcivDSNfr6tw8UAdR2XMJCiMfOSYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoI4CRA9TVsSAnZWagAAa7MQAIagDyHnDfc+COG3mY/l\nDuqPdjJ8vBbUnBogfffu/1ZaSls2gXcAKAf3Myd2yUmLzvTEgC4r9YMt/7rg\nEyYObi/GfZ76GVvu3QEB7SVwi6TTPq+jMs+heFaM6/uC2ycsFR+5nLC+F7Hc\nsF7CCTvrSVqCYUAqXzBSqnKB93N9uRpdoG1ThjUxwlWd/KbEDz72AMu1lmZr\nv0d/OZARtaOtQHaJQzXpdLCsYFGXKisWs5X/TR10vfhtSDCmPttlQdYOpTQ5\ny0wnyB/6zQa6h2ZVIz4OUJ3CZ0D6WX6tIUCDhyQr9pzbMVJKidCrkyrRVrem\nfpDANq+mylU2IVlKkJ2pxlWfBsMk6+iYOK/RhdKrooNhi2fXYEIYKGEDwgiF\nGIrLzKWvGo+77dN5PfrzXoy5ygddX6qLnPJBvKy80+1zUZ4PgdHxewDLrrnq\napAAqfL+8V+ArmHncGmqRBPdsJRxxiWYx3yI1ikrWxmGkNjQRPGka3c6K5Sg\nJpWQ9WTq0Gd9qiI9XhH33lqNBDVg0Jshg6O4hzfKH8mbmX6ym5rxehLF1s43\nm8FXlxuDi7aTjMhMmYvWO4sN478SsvvWSAiF7qjbMhKbVbHDLIDajRvycnm9\noUMMSOuX0iEEvuvbWRZGFCy83U1rm3uiy33ymAmmc93KVlqlWv16pIOXsnp/\ngdWa\r\n=w9TS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0175b9a3635a8e6c8c6690948618b55f39ca1ffb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.08db3d737.0","@material/base":"12.0.0-canary.08db3d737.0","@material/shape":"12.0.0-canary.08db3d737.0","@material/theme":"12.0.0-canary.08db3d737.0","@material/floating-label":"12.0.0-canary.08db3d737.0","@material/feature-targeting":"12.0.0-canary.08db3d737.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.08db3d737.0_1622835768666_0.4381575590271387","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/notched-outline","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.5823407a7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a04879a2c3161228891a6e7cdea1aea618caa84","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.5823407a7.0.tgz","fileCount":34,"integrity":"sha512-v6rO0XtZDisP1bNEB5Ejyaw/84s6Y9/CvOZKUI6hLRspqM3SezCa0d5nF/91FKF/Q3+Y2dTzuZURAgRmru/J1w==","signatures":[{"sig":"MEUCIDjWZdmWPZhASkCsmxGPB09TRdmj9YPximDCbYoc5UEhAiEAqxP5Unt5FvV+IMB9pTXd1pdZXgnPWKvGNXMNnhHCfTM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr6dCRA9TVsSAnZWagAAzDYQAJphrrybf2kOFCCXX3cn\nokkreTT9VGZYXZp5qkMnZQhzKY2XSLO/iJRA70lEnw5u79uOKqhBGnLnZA6j\nPTKqQqLK/a8JZFiDRb/S71KDsaDAX91YlYsUXU1XzVIqWfvXf3MnANpq8yqg\nsrWLMVp2E4wsmfM/lGo7HpaWV6YI5otWXjh3UZRdHnool4hJNpCB7sp/zXms\nSfSDj06eaHxcIbxEmoc/0bOmBS51BXepw3pG0FBjN50JMER0tthsTubg+G3d\nGK3ZfBbqbdGQfOEMxcisViLCAyGViaRLYtvLEr90GHQ6JPhnnNy0ENn6v/iv\n9W7jfRunfvQTF/qfcxKOHmL0lQo+EpOsvYPFkMe+CgD6fVlTGKaOQI38JyC5\ntYXcu7xwvr0i2ecBrpvejH+xp5ffJIcn7azwh4ghdYQLe9k5ffJwzkdnKIgB\nmmIX+z9ZLh4onVzgHp85TS7hn1Lz3PRuxMxQLT8ArY/dT++k3Uyob7Xb/b5B\nBVp/zEJtAM+ie2ssOsikLYgtAqXhS30XAWoFoTpU28YSGEVj8EO4l/Oq/Q17\nyXf/oUwaI5Qm7eHKUOh/3v5iARPVkh91i2vBdHMbbP3M8yOj4fW5gNhXO0Js\nxhet2fW1aTOjXNr+c+MF6FVs9k7M0WVZv3QmdD+yxUPi+8NErKhl6TiuIrU7\npVrq\r\n=s8Kw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dd3ce4590e0d881d04e885d116e10e680b6c01f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5823407a7.0","@material/base":"12.0.0-canary.5823407a7.0","@material/shape":"12.0.0-canary.5823407a7.0","@material/theme":"12.0.0-canary.5823407a7.0","@material/floating-label":"12.0.0-canary.5823407a7.0","@material/feature-targeting":"12.0.0-canary.5823407a7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.5823407a7.0_1623113373246_0.6206174974163654","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/notched-outline","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7c3f6ad960c6e8d631a4949595c1b9999412570","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.23b0c5e22.0.tgz","fileCount":34,"integrity":"sha512-SupQw63/gHRpaZUbBFFfw4Dw4dlUm2eTJ7v0iJzyPvflwaK5iEDOc9W3b7nxQsrPWOgtsB8MXH7XcL85jIbHxA==","signatures":[{"sig":"MEYCIQD3rxM4QbUxP+U/cOU5CueTYVJhH0qxHevxjUgZX8aXdwIhAN0KLklHBLHAFggrVFe6ftJpmefCQfO1Yw+GHhcLhdIG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5l3CRA9TVsSAnZWagAAfhQP/2NkLAE/ccWoYkVphkb6\nZw/55ZU2OUpc6igvu6i2Bof9QGsCHaqus0fJ1J55I960qrJtFpGHxDye9tK+\nMq0MYMKoT7ECX6VeR49XBKZ+e5ArYUj5ofRocJj8BjVUsKhvNPeAigSCUQdV\nQox8sz7nartsVcAE8kphZGJtQTKUylmaX5/4rbZTPcYRKZdiRonpWkJJYGIp\nAwwsW0YyMqxQXQ585MydSwB/8gr5yCdf3nXq1oGE/BWHlyLHIIN54Sy6xnma\noQWw1yJSldYdtLhs3UQRco2/JkZ3klOw+9j0MrpsRHiZTvTL7mwUQuh4CcEr\nxHVQ8yMq587FWwbOX8ZeWJiuEXxQxssmZU0SV9olAY92Kf3Z2G4yBZ2bQ/3j\nIRvT5W1gNIlEnh4hyNJvO6xPyj4+pdQXXRsxl0C6Ar7AnVQ2dLeQq/Cvc449\n8A2uaYVYWPjCV8YtPueVjycLxkYhFCTrLesffZDd/DIW2kfMrN8cJTdR08MU\n34BoWsg53bA5KPLQNJMvnVoFMZ5rL6gqn5FZIKaY0/NI//UDsXCCNgqD1Xqq\nZcVfZv7d8ljhoPIbv2Gd1fV9HuKTlH6uJtehG0NQIBViEchmCj+Uz90iNcjt\nXsdlrdT8YcDgu5IHZc9KRag2sq2O4TA5oUQReVgN3EKZ9oXTDcfa+W7KKJiG\nBsX6\r\n=/CQ1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fc55a497a3b0d48a691942de987d781555ef9d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.23b0c5e22.0","@material/base":"12.0.0-canary.23b0c5e22.0","@material/shape":"12.0.0-canary.23b0c5e22.0","@material/theme":"12.0.0-canary.23b0c5e22.0","@material/floating-label":"12.0.0-canary.23b0c5e22.0","@material/feature-targeting":"12.0.0-canary.23b0c5e22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.23b0c5e22.0_1623169399010_0.1458590498818102","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/notched-outline","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4475ea18ad4814adb720c3dd74cdad1885868a09","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.2952c6a76.0.tgz","fileCount":34,"integrity":"sha512-EvOY+fjP4F1YaHv6MfvSozBmN8B4zeCtpmlm/iUAt0YRN4jIav9EH9Vkh3lrOFFe4gCN+059lipXxx/D3imnpg==","signatures":[{"sig":"MEQCIA3ktaFRNQ4moy0TprWRbyb4opJyqRUo9MDwU7HLCX9RAiAJqyxOotZ90lbUtxaQ84EKFkgMGiG/pvia7euW38C/wQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6vlCRA9TVsSAnZWagAAiiQP/jr6JqaYGM5ze/zJ3v5W\naVaqoRduxKCgieCKI+/fMy3Ti3RqnnnNTVn2fGtU3pmXyBHeRsCokRKi7ifn\nE0qY87dIB3q/v4G7p0IOqoRu1o67YIoCJ9HiCbj8gF4SVOlKgNtgBJcgBEer\n48KSpmTpH/0/JiZFJc9P9uG85mh1T1vbmnYq3HSbRSErJlR5/kZp6IL8O6YU\nGU8ufs49MzXHeFEh4cf41P4IEM1i9FK55nUnxyU0AAcXZln7uqN0bgGU8uSg\n1cjYQFqFp19iQBFCU1hM0UedqJE6lJVktnJ+eDaRLVZjn9FUCjN2RHkiupYq\nFty5wqAfG6lPiK5HRMlPu+5V0Su313L59Isx4tQLfpF000+06SI5k7DST5MK\nA984YGciAnGqow1mtpe6Kt9xwkNhFYSHdOjrlL0Y3zfKV5qUX1yQvCJTzb30\nOfK38xwMYL36fJCgEqCKD5kGrqFsryj82Nvb4D3QEfixEgWESodotEZ9q1UG\ndcAwgLVql0vjTolTaru2Mte9bD0MCmPqtp8LhTfVKzKBBHd+igDzukFUUtzp\n8mONUZ9WGUiniYmVX5XCV0sGHx68VZOuety9lYCrR/y+nJkXLNcw87snItU6\n54JYMm3ag0pQ2THNpiwQh8+V89TeTz1uGWzAshIma/bT1z/MrYz5qesuYxaT\nOZUs\r\n=zofO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c1b0afec5d55ef54d74fa1cea1899368fe5c7180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2952c6a76.0","@material/base":"12.0.0-canary.2952c6a76.0","@material/shape":"12.0.0-canary.2952c6a76.0","@material/theme":"12.0.0-canary.2952c6a76.0","@material/floating-label":"12.0.0-canary.2952c6a76.0","@material/feature-targeting":"12.0.0-canary.2952c6a76.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.2952c6a76.0_1623174117019_0.33274713270629364","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/notched-outline","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.f12425f88.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc258f3da6b6055465d0da1dcf864e943823bfb7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.f12425f88.0.tgz","fileCount":34,"integrity":"sha512-jE52hqyOKwApRY7VxwGGGjMy5VqetT3iMP5ClgN075G93JVHOO1/Fki9JVUkOXMMdi2VHY+etaKsbXggpZwYXA==","signatures":[{"sig":"MEQCIFb+Y4sjtnvD/cyJAUKYN1bP/LavKfQomaTO/AVO32V9AiAkWP5Z+VsCX9d+yoCOB+ri1mQlM91Wc69mInZ+9kJCYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWXUCRA9TVsSAnZWagAAC/cP+QFgVjHGMf4xe7nHyIKH\nNWcsuUxifb3FxxEjvw/AttVZyoclemS4zhZmDyBQTAd2q8j3GlnOp9ICEepi\nfDerzwewtRW7m0gznXOQY8ZyaWWE4s3bkSnK6UpAnuixRQrvlUNq5FTLq63x\nOOXDfn2ra35olQgC2p/YycG793S9udeG/m69kLKsLLuXXXlVJ9L4jUYM8DZF\nJkRoshHgH4bu4PoQ8NPLTuXkRLMX+Q3vwP1aAfmTWR8PTru20HfclVdtL/Id\ntGaPg561atyHqf3Fuh0pgVdbU0cMxShKfuWJFoaXQ6NIz98IVXFbBJLfdEug\nS3hTCRNkWhYRSQpDrLxMxBk1AW2KLtNdpFiqJPPxiVv6tga5CDuhtWIP2mzT\nIuhJoy+4xdILmVPZSC6NgWhNtvxSpr9HMzdFc61fasmR26fRL9jcGptefXbS\nvc5/UYUEL8jziWgMWm2A8P4mF4Fz8yp8o92QYcdfSfNA1V72YighrGWu1V4F\nGR5ew4LnRjtnWurelQy775cws2bMdv24ITKYy7nsLVFsQRscEMExGgDdDvYs\n1Y1wuaJeohVVCVcXcCY7nBaPMULsrE/truzdKO4x2hI8Pxi9RGfg7zHBNv0p\nFACCRJKd2F3QCp1ZHKWtk0RYJdYkYK+PCbqt3pRK2noKVaQOnG+ImkYxmoFy\n+EFL\r\n=7TMT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c8fa3a7d372e06e42b474eed4ef3e4105dc43301","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f12425f88.0","@material/base":"12.0.0-canary.f12425f88.0","@material/shape":"12.0.0-canary.f12425f88.0","@material/theme":"12.0.0-canary.f12425f88.0","@material/floating-label":"12.0.0-canary.f12425f88.0","@material/feature-targeting":"12.0.0-canary.f12425f88.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.f12425f88.0_1623287252357_0.9607820230985833","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/notched-outline","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.e543628c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e670118e471b9125eb2413dee829e3d163981f38","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.e543628c3.0.tgz","fileCount":34,"integrity":"sha512-K+8pY1w+8JatIEtuTVitd56o7Xu9YMaY05Dd7ayKk9DgowcKyk9ZmTnKhVAqHn4cO/ogJB/1do1nV+DWp5sPPg==","signatures":[{"sig":"MEYCIQDqAu1/LDRwX/4koTmDYS9+ffvmj5Fbde660svIgCzWpQIhAIg9S/fcw0ll/6P9h5CbkGAVc2klhgJM/5A6C1TRi8fM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWYNCRA9TVsSAnZWagAA/10P/iahWEcFdEJHa5MWPoRx\n0WyDjf8JPzn75MbmtM3Uyu97hMOtMYKWPoR4rgEQG8h314QjKnarRACF/xlA\noe0ntXligaG/8vqaqQO+p0dok7dcMMMKCXsaorjyjozsfBb1s2MWc0Oxi84U\nVMUKTMZijLizeac2MT+7Rf23Uh/uWDHxresn9r+froYlxrQBAid5b59LJxV9\ndQzNLKsTZO/0ldIgTwSEJEakNAkfR3a8HWBFetGHnDYPVG8eUY3FU1W6+zSg\nEMv5Fxu65HdBNiVdlwoAeSFmjLcnhFosg4mmj2ap45EQ7PGqg99lLJBoxX1T\nCiM2fdH66VuWZaRITHOkgmg4vj1pLLI1f8A5JVWxT3FFzF+vqqVoEkNd5Y+l\nDkfgy4hLcvmN5b5sIEs0wZKk8hSYa7RMNQYHM0HAkMSW4pcrLqm0BqKNorcf\nbguDYQKVUiwv4ULb4LPl6OeBgFAM0+140RmxgsQpNaOlHv+2a+IxRX2MK6qs\noja14pn1PuWgngOdJkJQHJlxJuB1ekxfH/PoK+1ST3n51Mm9OJfte3OfYaVt\nkyTOtzDwAF9CSKL4n6Cyv+u4BE6ZM6fJsvk5Nw6hlcDUZJDEGUifY/JpOFv2\nZG7O58JGD1r3iXNK+rK8C/2AjqtPvfSmNtpUhd+jDZUneLIjmOh7eBO6YjVC\ngbYz\r\n=Hnoc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6e28195a46e3b2108c76ee1a6a9ea9416276ce52","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e543628c3.0","@material/base":"12.0.0-canary.e543628c3.0","@material/shape":"12.0.0-canary.e543628c3.0","@material/theme":"12.0.0-canary.e543628c3.0","@material/floating-label":"12.0.0-canary.e543628c3.0","@material/feature-targeting":"12.0.0-canary.e543628c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.e543628c3.0_1623287308790_0.09068636041095446","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/notched-outline","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.e0c346286.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"790578b821d5828e1fe8fe79d29f93f575ead915","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.e0c346286.0.tgz","fileCount":34,"integrity":"sha512-HHewT52o6vK6LfCDqWCbUGStHXUp6dtXM3YtARA/Vwe5/flyLBimnUirPkkhO0hDkQU/9+jQF1CUEY3egyoNhA==","signatures":[{"sig":"MEUCIQD+ZhVv0vmnZfFWMqzD4qHBsnt6Gxz7zN9ft2L2WTknBAIgdSD07wH7B3C0N7giTnJMC1zjqOH/7woKMXzPG9WNXDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj+sCRA9TVsSAnZWagAA0LIP/1WQLHKbbrJdnPu5104I\n92Y4U1FkUIiqtldi2ocCFo0miEqAVVwGHFpsbAcY61LenEtdVfQH/EL47SdQ\nXX4q4yYUaPu+eZ+1yS/IVduBpXotdEA0uX50KxWnsUevzZNX5F9tudsl8aAo\n83t2bkPv/KJrJRESTdGxA/QKFrfEwSk4cRMvGIqmE1QT8cDpmaQWAreBlIcW\n8mLWWLfFSw3UoWxeG9ir1+9Hf01JT6ANiHt4BHJNeVF/Om4yQIl4GIVVEWf1\nt0oaWaR4+MyrLEKbNtHupeS7IyugnFEhf1AqSrYLSDD/JyYwyLF0EZMarzQ/\nFm0J/cqNuGjnH5Dzs12qzpl7ys4SHwOnyGp4niI1j/Imq0S0POrPmbDax9rM\nvjUGPRgQSxxQLsSGJqSlG/YT7HASc8O02iVcitNgZnaZ5GQRXdJq+GRN226t\n762IcMJMYv4QAHjgdjeV4fKmkFYfZ7EVmheIfaBHGkU5wZghE53TU7GLuIH+\n2gV/M1SdUqXoGGitWBxt2VRL6+ErtRFfgxTuVlonIZfGDAzsWgCiyAW56RGA\nykfq+ZikkMvFJhjdZN7Xl0rejn4tx/LksOJsg1bJLC4MwlU83l3ILahzoZvW\ncjpZG2nGIyb1EBS4G8aqtjRSBK8OoGwFB29SMaweGJk1/C1r7o5LChrJJmLL\nstu7\r\n=TXEK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"405607237a611d804caa0b022897b683aed90ccc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e0c346286.0","@material/base":"12.0.0-canary.e0c346286.0","@material/shape":"12.0.0-canary.e0c346286.0","@material/theme":"12.0.0-canary.e0c346286.0","@material/floating-label":"12.0.0-canary.e0c346286.0","@material/feature-targeting":"12.0.0-canary.e0c346286.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.e0c346286.0_1623343019942_0.7637787576547352","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/notched-outline","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.f43af5633.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe8ef4855cf3bef39c7135aa6427c8bdfdf3a450","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.f43af5633.0.tgz","fileCount":34,"integrity":"sha512-Xr3xEibzNlOCJpedybLSEV2K7CXv2e9vgvr9Rvko+vNupftOaRIFS7hHjK+BGXOBkPHG0MR9/oQcXrbFbLXGKQ==","signatures":[{"sig":"MEUCIQCUlsNSJH0LqxI8MpLBtflkNM0gNUqrsibLcfYO5HcpXwIgRuGZzLMpj39Oso1Kl/VeqVZvW0oxVJro8oy55x6Hx+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwnfhCRA9TVsSAnZWagAACPMP/Ayr+x7V3brj3U3Q6ypr\nA0FfljNNoYf8XcBPjQuQ7JJQR8DonKhvS+kwq/6FM7VTQF0kX4Y/o+DSbE1T\ndK2QEJ4cQ9K9/GXYa+Tb4obL8yK275Fq7oirMhd3b4ZY83j+CHGhcnLTyOvT\nWMCOCqsWLnm3msrLv/bFJe9CwnTyWDMqkj6OWrHUbyf3iBHeP+lbYL23lrcH\nbVF8ZnCqDipVfK0AbcKalYMsvYztWG9+cFB+lF2AZdXbx/VO/cgfQHwznMV0\nU7DzjymEJECL3rZr7CRcfxXHfocbDY8hi9EuJw8F36zdm2PB2rCTN3YaVXaX\nuhOsDOYZ6r4WRp+nKDbqZdo3ogFfhvrP7RnAsyrTNZqMyK9x2Nmzy2BYlpqu\n5cesPWpifBWoFM2G9ydq+b+BpxPP1Cpdr7IlRsCbQlSSjbnY2CIXKUI/1ZIt\nclX/uxlvz39H7Fwj/z9dw8G/I3UnNR7KANc9AhXsNqGdb99eTBYgkpOVD+Z7\nphAgjeZO6en+xDOlVoI0NqAMEwz/m6vbu4ytwKdJeorIpoRcQNjZP+XyeaBx\nE1AvYUH+D53yns2NXjZ43IsapVGxCpC6WJKrc0tB/cj70CJW9ruudvlJ1Nf1\n2z8UJ0f5kL3S+5mxL2CVge3Xfat/UvwczpFOcf7cWTGquhRHXwObjRUTaIXA\nDUK3\r\n=uc9H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6889f0098642c4b4f3987ba353e17a9a22de856b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f43af5633.0","@material/base":"12.0.0-canary.f43af5633.0","@material/shape":"12.0.0-canary.f43af5633.0","@material/theme":"12.0.0-canary.f43af5633.0","@material/floating-label":"12.0.0-canary.f43af5633.0","@material/feature-targeting":"12.0.0-canary.f43af5633.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.f43af5633.0_1623357409296_0.36754361374431355","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/notched-outline","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.8415ae585.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dcd6b24bf286e15c0ce2c748e5358db73b16850","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.8415ae585.0.tgz","fileCount":34,"integrity":"sha512-MGH0W2p3nl00aoy9ZTZSBp/WYuUlXZszoCIlm7n0z9Y2PVH1+uzlXOZWJF5ruH5zTDSTzojzVlfzCYwGXogBdQ==","signatures":[{"sig":"MEUCIQCrCCzmBgOoyg7EvzRCumwzpep3DrlIbC4K0uVC2YBONQIgXDZcC0PknXWYKPphZgFhHzfmIWcYvVsO0HsBVTnvqtk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4ogCRA9TVsSAnZWagAADlEP/0zYjHMUexn6izE+3DNF\nRQrLZYa4yXzDKM5/R1ucs2DCeHpHR3nFZw3QKfqzMIncJE8g3t+kPjlIRNMP\niP7K9vb8bQufgMMbErrjPLVPMLiv9PENMrQmq0NMGloqN4OyivU3/9AeRndG\nbH44u0+X2dBqUJz+U0Gj1y1WxMjQCNNfwdlxFLOoXgfOefVzf1hJjDQyyI8H\ny4TSuujxFC7d0dh4BGyTN6PJeJokG5s3paYRt+wcp16JZ8nTlcSXCXFn8ZVd\nvJlSd75I3zdb6ggqaZLjzzhnU+Xut3QoCeWuLRs1A/zlWSRyauN/VrFKaLYW\nHqzVfMKWw5o4vMriiHc05WvT2sqmom4SHeTOx0OW0hihP/22AQjPVJFnGAk7\ne1ZFwjdWkj8se7DMT2kui65Tx7nL+gITCdrbkzAVpQZe46kLD4hksAOBMTBU\nR7dcsTg5htvfZKzeb0cL+jysmKIjN2LHs87+zukODPOPeDYORXqjyJcH7pKb\nWFPX4Vrw2yFY7zlxE+CrFXhVVM9mQ8CdRslLqVvNZ0fLi5NI/DtP1VwiYNc+\n5exTnRVKpKzN95BLthe93xzU/Sbb5NLLvpG+JSWvlI3WTxqHHtlwpkrZHweH\nSX52AoMn3ktlZ5LyGuFrEW3Gu1TvBg0QS+h1MN7UEYyWvFtGizwtR9d7ttkW\nGOch\r\n=OhTk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d00f19e41330e3956e7355a23ea132e5ff37403e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8415ae585.0","@material/base":"12.0.0-canary.8415ae585.0","@material/shape":"12.0.0-canary.8415ae585.0","@material/theme":"12.0.0-canary.8415ae585.0","@material/floating-label":"12.0.0-canary.8415ae585.0","@material/feature-targeting":"12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.8415ae585.0_1623427616684_0.7919247012326545","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/notched-outline","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c452e7c234a6868e5587556215dd0e219e1fe1da","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.598fcccc8.0.tgz","fileCount":34,"integrity":"sha512-dkhSQyuS+QfVoC8gvtupifG/1mfeyvv8mo6bh6kPrhKNyPxqFaJhEPss8cIRNNUXZRLUCocHovQDQWp/QphSnA==","signatures":[{"sig":"MEUCIEoslB6CdzA83B4g3yZlPRRHiTuL+e9rXEMOM6quyTzbAiEA//7lVsMJF3KfjxgDFj82Hm0LAMiK+euSWR4U01jBNkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9nxCRA9TVsSAnZWagAAh/cP/ioWnGuGW2FSB3kCAMyJ\ntyBNoQ8MffUWxhVeblAQTju1A6n+qSFjuLpO0CaG8TWFi4UQ1Wfz4RYTH8vF\nQ4unu/jHMgWPnhhYl35dNtzb9+JCJrOHEmGSukbALCUDPp6ES+xd5tL9CgVq\nWXXpqzoyN2v65yfv1c5G9WANEc6LB2unxmS+9Cpm5IpK/r1br1CttSA50/7l\nwb5Q+G5/s9P2EA3arDkCrRwxbbOrWxR6N7yLYEbgzy8Iwoub2B7g7bLgp7y8\nbg31NNzigBNuITzFQpZyUlxbYIUguJ+0q2/1kTq7bOIT78LvAN0cUAekz3Oc\nzZOcRFdIBHPUlWW612BVTEY28v+RN9kjru1XURvSiBk9Zp0PBuIapY4Tdg3D\nieHYILtDLqmFu+j6Br0Hli7FMzZCB2Y4EVcBkma9quO+l1r3fJgLxL5C/JY2\nnrfSYKTvqcq4lzxeP0otPAl5D652EW1RHi2BUNNAFHHfZVNZOaaiBPbzFVY7\ntn/EUraDlWv2tL3jkKEznYWwMs1A2p+OLJefsT7vNCBatncPk0DXG6i4XO8f\nPzqLhIMybyTrgawicFAuxTVy8qQQh5ePPn99Er37GIc4qt/m4qe2F0ZAN3HR\nMH3I/ejOvELepupFgQOOsvB0BILHGgBzwec+1qq3byrzAIqie+i9dIITIkIx\nFMsZ\r\n=9W05\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ccbc9ce9b0bfd89a7b5d57d3e0d6bc2ae297f66c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.598fcccc8.0","@material/base":"12.0.0-canary.598fcccc8.0","@material/shape":"12.0.0-canary.598fcccc8.0","@material/theme":"12.0.0-canary.598fcccc8.0","@material/floating-label":"12.0.0-canary.598fcccc8.0","@material/feature-targeting":"12.0.0-canary.598fcccc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.598fcccc8.0_1623448049588_0.329447634651411","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/notched-outline","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.5d0605188.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c34bbba16dc2daa59adfa449ec989a3e3430e81","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.5d0605188.0.tgz","fileCount":34,"integrity":"sha512-oKjNmlNmfeQi/jHqb3tqILSJSeCDsYyWdG5obtmPvx2iiYL2VljlcxDrh6NzBWnbdOCRGNHPegIHdFi6x3rQHg==","signatures":[{"sig":"MEQCIFKS5X9+9fdlZRpNTsWXtcDJbyvTQ0HzwgLYmp89JE0zAiAk2iNECAlZfES/Q8sOH5lsl6b3Avcb14/7DEirNwR8Hg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5SLCRA9TVsSAnZWagAA3UYP+wQNOJeWsAb+k1g9qYaF\nPvIkD8GT1M3IlFBqbsdDCrys/xE1YHMDglBlOt79rht1/m0vStGRqyIrezn6\nXR4u3B1UqnDKagFWZCOjMVKtPvR4B0awhg2rm8nqYpXQMXaYa58W2jDluCRF\n7QkrYvTZJUi8fXI5HlZ+U1945/YBmw+Tnw7pAgej9MbuCNEQmRGB6tbpTmmo\neqDowxGTRhU9IH1ThE9LxcJ41zFvwJbcnyzoRLkerwsDuQbNxxI78dHHAtsS\nmQaUh9GV2pfAgpPsgjpWqEIEynNB8Ukn1WRvyBOUOkueXDBmiZIYmO5ngbP4\nPM3FxssHnRLGOGeL/hkgAB7xOljvR66crvBmKXSV955uWgeVyP1s+2R9/QGW\n9wwuru+IdXy4EFFLvx0h1zumaNeMTqKqLHlkpM8HBgWYdDHjDVOD+h2lmIBq\nphvPYPk3rDb6FNKISRf9FzVnoonAymlG3FfDZHeUMJ3otrk1QzpO3ct9OfcD\nLeTdVrcJmIoCpFjKgR/r9j0jMtJIYtQKnQUVe6TttJ9maNZ9067H2dUjEaSG\nUOYhw0KUzM3Ie/88/cKBad60RZji085bI7c2OOjssv/grFsgo5C5iPCKkxrm\nzDrYtMbEQWPfse8Ty1pUinUfbx9BUSlClTePGC3iqBH3oWcj1RBv9or43a2j\nIymN\r\n=iGt9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0ecd220c6043621c1d471242f32f317475b671f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5d0605188.0","@material/base":"12.0.0-canary.5d0605188.0","@material/shape":"12.0.0-canary.5d0605188.0","@material/theme":"12.0.0-canary.5d0605188.0","@material/floating-label":"12.0.0-canary.5d0605188.0","@material/feature-targeting":"12.0.0-canary.5d0605188.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.5d0605188.0_1623692426840_0.6345149027778199","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/notched-outline","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.f147a2271.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfe9b0a524bfe1a8ae1c9a10c965c48caccfe18e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.f147a2271.0.tgz","fileCount":34,"integrity":"sha512-k8w+Q+RYN/RH9IaU3wkS43+CG7id5QRLTU6p+OvMkva4g+gjZ15yHCYdJOrY1sgkOc5wbijkS6CIZHof23OFPg==","signatures":[{"sig":"MEQCIAdCq9641YMmVWUycvdQih5c3ydx3jF63mN8Bvdp8YZeAiB7yddEPpflA0xjoYNYQAfBkUa/BbdAckUIn7n5GOHvIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6uyCRA9TVsSAnZWagAAROsP/286NBAWzIBvyAIwqVwf\nSnsF3Xv8A1LuA/hNu7JfGhfdyMLN4nRkBYkxArvy7oB+vxlLyLpwoUePfOns\nAb5OfeNbGDDsK/hTH6DjL2vDScDWK4vaBYrIljbN18Q7V068o4Ma9RyiyeA0\nBQA/L5bzw7YZoZoY3txGfx9KojqiE8virLND23IEfk82Vz3jrhoL0kTqyMbe\ndycBQMMOLUfWBalcv+DTHiKAqr2Ve1+lG83ekCeyZNx6UwKyt3/DIcts2lLD\n9pKxWJDOghTfigB0b23i8jPkrvkWTZGlp+l1NrCweXPB31B7RZmTe66Qar5r\nyJnJEUvkTvwAo9T8aU5F5b5Iy6kgO86CUpb83Ey4RYF1UbEvmhxsuujr+3H1\nY0GK6q40IAqsJFmF1AhTHyXMqaDict8Dk/HoUtqHwd7c5cGpfJ7OWDTTB9Od\ncHQkCk22aLgONuGIwVCzyWnWm7zzsO+u18BaGE/3wCrXwiGu7DdHIsVgZnmc\nuMWA1ctvZaQYmNH+PEq9pLVhoAaoBk5AmCKoIpXkjFxvPNao9XDMJwi6GluU\n9/x1fvmoIETiXkKRgpz8FqTQhh0750giL6GizuQGAycJgqF5oGDYVhowGzcH\nSPhQpCNLC1XmplyCSKbV7JWxwD27Tc6DRRx/B1I6T/2EB2upAqUAzSBqIbhe\n01WL\r\n=3m65\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"70b871f06c34302277b9eb3064110dd70afb181b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f147a2271.0","@material/base":"12.0.0-canary.f147a2271.0","@material/shape":"12.0.0-canary.f147a2271.0","@material/theme":"12.0.0-canary.f147a2271.0","@material/floating-label":"12.0.0-canary.f147a2271.0","@material/feature-targeting":"12.0.0-canary.f147a2271.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.f147a2271.0_1623698354228_0.6710619415359169","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/notched-outline","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.33579e00b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0229f6952c478c5d6db7ba7da225c55bf5a25474","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.33579e00b.0.tgz","fileCount":34,"integrity":"sha512-PhBvQAf7Nm6i7NLaLSanZ4JlnhHzbIWFUwZTOgdiQ7nmJPYYA6YOAQCq61Hw2h9QeOG0xPAmh1JQWoC06Kv1qA==","signatures":[{"sig":"MEUCIQD+ZBLhHzV+WAME0Fg2mnIynhcK9J3KWLZPVuI7URLuTAIgf+XrUPGgg/x1VFktYr3/RRykq2eYNS5Jl6en5/rP5LY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/LsCRA9TVsSAnZWagAAdioQAKSIply0nBGbg2ucymeS\nMOGE+nqg59z+5mB2iH3T/gTboznZPlfllSV5N47yyJcbYIsH5bi2PLEILad8\nJRzlHbyBSxrjAxTRqw/Rd5J2HNTdiHePfW5naGXku066D0AWEbPYCxPx2A8F\ni8cWOdMIep1PTKhTWoQZklWbjyk9mLctAwo0KW7LmNzmfaCy05KONqbvBXly\nMgKYyb1hmTNXEbXh6buh55nJO2qfNw0K9P/ufOfa8HxWGZAgvDIh3a92sGYo\n4A5nRXT8JraYEffJrzdqPFkDt6nxyEZLEy+FVyz5PzpIT08Z0o+B2ntYIXUF\n0mre1Um8PWI4cj2ZlQEywBws7jsMpMOYx3uhAAuwabdN38QHdY4UclWcwo59\ngD6kI24A8dp2/FRSuoYW9CdjZANQSvaTE0JwFgWQCxWlr2chz1mcYQIDVkME\nCpS1VDoDmyF5U3MzYSeBRqJuwqQzc01IlAEWrohJP/93HjJjXWAXGutvX7zR\nHDxY7R6jfy3lpfPqz+JvN378iuy6EFTdT1dXgjGmSSLNmwmYGbtfIhO6Phxz\nbvYVhLH3yyhpnWBNBX/PvxoUBe+jfECMvO7z0nVvniHHUYAt+tJWTxXIhbVr\nP6th5mi5isrIZxOHIH3656/Ml58zqdJXmVRpSiDDZutpdVSgq87vTecB5Kkm\nVW+V\r\n=x9nF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"13a815cd8b945d23ba7ba2ebd6730088fa195237","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33579e00b.0","@material/base":"12.0.0-canary.33579e00b.0","@material/shape":"12.0.0-canary.33579e00b.0","@material/theme":"12.0.0-canary.33579e00b.0","@material/floating-label":"12.0.0-canary.33579e00b.0","@material/feature-targeting":"12.0.0-canary.33579e00b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.33579e00b.0_1623716588163_0.49879074155755876","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/notched-outline","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9167565bd274e86e6cadf384d567ccb357cad6c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.a6909c0e6.0.tgz","fileCount":34,"integrity":"sha512-oWChy+bSvvX6knSAPl578f+xdVoCj/HAVa+1Dh5ZBay7Y/r6nMO+qAdHhD0hSigtKQdkrD9Lzv1+087yXVYz5w==","signatures":[{"sig":"MEYCIQC4dCuKpMLoVUqPD/sVMLHChpq2U+ZUlB0NHbOq/yHlXwIhAMrG2hfxxu1F42FWsHonDfxbBtxz2FVMEPfyG3lSf62k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPHyCRA9TVsSAnZWagAABFUP+gKzUX4B09nxAL+TYMiU\npNdG9cVBn3rwjuUQLpUbf6W5gZUqEw6eIaFqEV0GybwAuGhGGhRD2a/UwVDD\no2nyDuh0oGcPPuRJf74nOAl2BXQEX9fiamPhb+B0VgsY2ZMJ7xrb+2O92Z41\nQgWDAQEBT8az7lO4x8v+tSRvjpN+xHMeX4Q9E6f95t7lQn8p3Q8anCAG1BKR\nfp7DrvS6Cv3HpU3nln20XcQvggzti0D9IiYtffKL1wmwNyEO579W0n9XQlCq\nhHjIf6MRek/HapT+7rT5QAdafHOi9TAMVcevR45pygmmvogPGlZynr5rnUzr\n/W113bqEkWEhg+PoqftAfI48GvD/XLhEoqLZDBFkDWRp99XVQeGWVyCUZZSo\nFk/43C/6HyEJP0a13k/FA7+KHqt6RosOfEIRAbnBRKzCWAybNwXxO84JVB45\nU5QONM2VXLZR+VKKKFGlBprabhx9NIk7y/7/OOk/cG9R8qob4fUtWtRjoe2o\n11KUWkYzJ3It6TWzs1jhF9WnJp7fHuU4LqT/ueHGUQPESUyJ8iKPOodF7UZI\ntaWTpaUZuBot3TFQEkOqa3UHdRf7FgQOncH0cOksPrLS/EnNLFhHlHWdx02D\nxcRAIHcdKEhJI7eNm+d/cvCusTzmjcJxaCqJpw9Cd2xjGteFZqqELkFBsFaf\nUE8B\r\n=SoWs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f4852598d008bc1750e5e9d2a0e828aa8804f87f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a6909c0e6.0","@material/base":"12.0.0-canary.a6909c0e6.0","@material/shape":"12.0.0-canary.a6909c0e6.0","@material/theme":"12.0.0-canary.a6909c0e6.0","@material/floating-label":"12.0.0-canary.a6909c0e6.0","@material/feature-targeting":"12.0.0-canary.a6909c0e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.a6909c0e6.0_1623781874550_0.5083793687013467","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/notched-outline","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"312ba6852a28600fe9daaa027cdcf757ec253434","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.c18b5925b.0.tgz","fileCount":34,"integrity":"sha512-IkvkmldVAZdLjFv19n9QpETyFO6BVJ1IU6Qk+nT98xcwDExN7I0qL/Gyn8Kz3+bqcoLfPHqyOZTgNpnG+0GF0w==","signatures":[{"sig":"MEUCIQDGUAbxbBDClx69gwddFMC2NckurKz8e+U0Vv0JM7VeTQIgN0ZLZr+Fsq6rsaPJgf5IBWkwTiYeKuknGoI7bOPNknQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRXqCRA9TVsSAnZWagAAaOsP/j0iWfiGkUxjc3n46m4K\n7BfrFX4Dmtr6UQEsgr9DXTXlLbBxy4KC0X3HOus9mZijDt1u+6JY1/1LYCKg\nH0K38NbgdeftolK00rOhXAbB015TbfltNecT04H5f3ThIGDLZ/2SYLR5R9rL\nI+ygkOEwfcqBmZsibgFgZtqr+gnXIbEf8dnI36TCxbpistbLhUIxVs05vs/k\nQ0YDXpShd23XGV0C9rPzcxvxHQt8/6mMl9ocdjLAqzIRluBFhIk9UmfCNFxF\nRonY/n0SBA2u/k0otA6yA2l+88UsFCOohLh8M8oiCEZN8ah2Z30aDLo1LLsA\nBxVCy6EQnLZmDhoKadxSl+NUDmbYHQk18ggi0WynBubhvHsz2LBdQzC6kwr6\nYPCpLwpHecuMrUrPjW3zphKx6Hm+DuAjs+6qQPvH2JssJbEsmDsXn+fjB5fh\nhch+MRJ54WzmlTIRdYpj5hyARYluQApM2m/w9UN/HZRNDiMv6HJsu9aAzFsk\ndubYwawDCwJD7EGc+//9IeoK2oOMyuq9nnhHbpoQ+IlynZoZJY6f6F03J6Lq\nUp+C4/xf8ht2dIjrgwpgCOPdl60IWuDt5Nbwxbq9c6CFI4w9lCtBDY2unOuo\n7NyBO5fi5GRARM5N6Lyh8mkwTfsHesXEZp0+nnNpzaXmCpVvKI2zN/IHBhmI\nG2FR\r\n=B5Pn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bc767c077b93ce415f2505e54f329042c80b0d3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c18b5925b.0","@material/base":"12.0.0-canary.c18b5925b.0","@material/shape":"12.0.0-canary.c18b5925b.0","@material/theme":"12.0.0-canary.c18b5925b.0","@material/floating-label":"12.0.0-canary.c18b5925b.0","@material/feature-targeting":"12.0.0-canary.c18b5925b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.c18b5925b.0_1623791082619_0.138293852407797","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/notched-outline","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.271fff902.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab334e6fac16e288f4c44e6ccaabf07db1c89520","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.271fff902.0.tgz","fileCount":34,"integrity":"sha512-+News1VttU0SanMGHirus6eHvn5b34jhpb2J/2lq1ZB3H0umPbr59lt5ArkVAYA15hFDDktszVZXNHaj4L03sA==","signatures":[{"sig":"MEQCIEk/leQ2xSKJrnnfTo4c89gwmIxY7+ifvaSnEQJHYN+TAiBR0LVkjnikStSlDu+XgqcgrqVpniKqlWRcIvUv580hmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS8XCRA9TVsSAnZWagAAsioP/1HqaZe6FIFweI3DAWnD\n/sicG3JbPmhj0NPbkTmW4nofbm1UscV5rwLfROov9LbrfBiPiEYcTLBqgakC\nUaNE50H/9k/w85en8rkDTqBuI9f2ewSpmgQBl+zn+2dtgzlvnnr1wV5kiXEU\nbvO9J1vjZehcFcP2YxXbMOHfs9at6bCvpLOkHATTfrSF1UeZ4XSlV4BtNjx9\nyxM5dSMyxnNomaBXJBsKxE2e7k0FWaHMRpgHwsRVZwxpvBW72u6xitzigPJd\nViLd+ZNT3TYEDckEXnAdhL3K3ymukANJsxuz95Zi/yy2woupUVbaDA8g7aXF\n9HSdtaCAC3KDWn+sP+ttOElrdnfgxXzMay5007DuWYT8ReUfrWfxdL6V7j6e\n6rSFZIrcxLwp0xixrDt+Jlvktnv1NgO4mgVNtc6jnzRJmiaG6DQyJJyJgOeH\nSbZxOLTuMlDW9ClSReUsCmKQCIXb1mYPf8+4v+SydkJbKtcckvCgSl2E85iv\nmySQFceNGYiEdMsjMnKtgjM92+N9Ym/st2pjXqywPOqV8DSvLsuqrSv7TAQu\niyyHaJv5H2To9dQOBzQYsPJsWzs4o6DpXwbERZA38i7idvrSGyKBV5U7bLc+\n6DVpyvSukeP3xGKxAlz2dji/EjFDgz6gkM7R/Lr1II6rTHPHPDRGU6zjxeBE\nX7fR\r\n=kvfx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4306227bc7e5f014c5e961178b436b394f0dee6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.271fff902.0","@material/base":"12.0.0-canary.271fff902.0","@material/shape":"12.0.0-canary.271fff902.0","@material/theme":"12.0.0-canary.271fff902.0","@material/floating-label":"12.0.0-canary.271fff902.0","@material/feature-targeting":"12.0.0-canary.271fff902.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.271fff902.0_1623797527196_0.12345690255089492","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/notched-outline","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f892c7bc61c4c0bf2a83f1d729b6e46b5aaa6404","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.7ea2e830d.0.tgz","fileCount":34,"integrity":"sha512-fLNaF8Tj55j/KAkhNnmyRYILyhzUBnyk5Xj8OEhFL+inSQKDTNW6FjqfGplqJIpyWo9jMcFNfUDLEbXsRNFFKw==","signatures":[{"sig":"MEQCIEYpUwurbMY6BZiqHcy3aR4a+wYmwi5OHQN2+WsD4sFUAiAl8r5AfUgjnWugpfDmnsP63b56zXf6AER1nIhx95zulw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS9nCRA9TVsSAnZWagAAIUQP/ROBd2ADrQ8FRwKKZwQp\nif1LemUFMzMW8eCgKtFdPd/IsjNn5GMcl03qw94oTzMsnCo0UUgH7azkZ3Bq\nEXioiPFoUBby2kiv1zfgEVmjHmlB336pz1GZYb9QR+tB84Tq2bjZgy7OZgMA\nzAvcxjyZ2elV0vi3+pbMbWfP94B4NhgYpu24mEWX/2rOM13JJ7BpugpxJiXh\nktdBcVXjyxMoYOn2vGoSgX0DV+rLLSRmEd9eI2I9oUrbqV4z2vjRee1Iu9dX\ni8G6CvnQjnkdbsVynEwcM4D/fj0JHCqadRmtqCtG8MOSp2e2FYJrOfny1Pvy\n4ZHiKXc/aXtckghSyxRP9f9PKyONEwss/7qZefR9vig6TL3JudMtsTId9isJ\no7K5mksW4hegLn8DbdRq1js2STRW4DS7as2/p6Hq1W1ISwCfqWmndlZy4jYs\nD52ROUWCyKEkOVm8A3feF/g5mRzW8b5o61pia63zxIBiMVp/OWP5M7IW5RUj\nyVWs/TWMkY10HT7sLT2X/RaHXZG0Ke8EsbCezYksPMWOr4Hl9KQesblGEW5c\nM4pxXPFU5Tjxl9pocdCkNae68sOKDqiyDjpgrNmCThAkDCj0yaRiUF03Yslj\nnsd5aHR5ppeaJHgYkZ5lPAz4rStbIkIc4tY+oB3rkJ4tHuNAs2flvsNFfkiC\nZ66y\r\n=kDar\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e1f3cd5692e7f4572664681a049ec1ea1548eb15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.7ea2e830d.0","@material/base":"12.0.0-canary.7ea2e830d.0","@material/shape":"12.0.0-canary.7ea2e830d.0","@material/theme":"12.0.0-canary.7ea2e830d.0","@material/floating-label":"12.0.0-canary.7ea2e830d.0","@material/feature-targeting":"12.0.0-canary.7ea2e830d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.7ea2e830d.0_1623797606957_0.8778151259312379","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/notched-outline","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"144f18ea7de6fe22fd0984a2975864cf9ec607a5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":34,"integrity":"sha512-rqRnzR6MO6+hpfy1GDJiqBEOs6BsLg2+vIC4VYG+4wZCn1rkpUG9yRR+v5+w4mV8gB8x2p/0ElN1+aYLlYeElA==","signatures":[{"sig":"MEUCIQD/NmiSaRMcPUESjOAfNr8JT0miSJAsT+jcqWTBHsVHvAIgU0BABvkhX22jXvJpqlTcrF4KJBA+Hey3aMLzzzUdL+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymgQCRA9TVsSAnZWagAAc/AP/0Gtxy7dqo9a9yvBmfRL\nFu+zboPfK6xRAWZGE9avPkHD4MfDuHetaEOURXWrz1sSTXeyBaI6YkqmWJdv\n2qcsAnPe6XUrHt/f/NbcshwiuKqIgrwQNI3cPR+lUQlZn+ADgroPeDkLQWwB\n/F2277BEpr6oy6Up/o3NalHYrM+9hhYvruMAbaTJ/qZYoWWUnLOTqbm+Yqi/\nr8NrvT+Z/bSA6rZNTZoa3loVJwD4oDpU1btgA0oOgs9ZJf58oY4pQqC0ZjeD\n+Qx0/dG1+IOj9nssvttDphFIqCxgGU25rcXXOo9exluoVqSzip9fQ5u819sh\n9etHZQUiAX+VjSvtR9J+GZgP6ZFN5er88TN9kmB/JlHW6zdD7UZNwTGXM1Uw\nDFnbVP11pJUZ2KCZfDPma139yYbfSdjwT4u+7tt50KOh1VzCM2FRtrWMIPuF\nkyCUFBNhZjqcHYTuwUtTgLKHMelEnx3YN0DcbRyHXXq0TZ94cKBi6ZQvOJSh\nIaA8GRt/5GAkjmm8CFmVBB9pvxhA8a7V8np4QcFYGAbFaIwicjObRg9Z+aI9\nO4dVn2ALP/Hqk7ERB4CnT9sTWSKKPJfns2/vO+V9GMTqYovtLY41p8E+J/S6\n8CIUUAzVqaiFmz26V6DhRs1xuvBYglmeh8ozohBOObXLbXFn5c2l8tTi3TOY\n+P5a\r\n=xyf4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"32470ff9121448fb2599b2985e276f51563ed4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d96f0a1e0.0","@material/base":"12.0.0-canary.d96f0a1e0.0","@material/shape":"12.0.0-canary.d96f0a1e0.0","@material/theme":"12.0.0-canary.d96f0a1e0.0","@material/floating-label":"12.0.0-canary.d96f0a1e0.0","@material/feature-targeting":"12.0.0-canary.d96f0a1e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.d96f0a1e0.0_1623877647930_0.957381323212052","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/notched-outline","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.a6183801a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d72641d242003f6f62e4da5ce87176ce9c864727","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.a6183801a.0.tgz","fileCount":34,"integrity":"sha512-DeGNjpnvs+S3lsCsXs3PMzYINoM2IQA6rdTfpbBaynMijnx+nq8emU6wgnyvpZKohFDNu7Qyg4HONRT/cMHeHg==","signatures":[{"sig":"MEYCIQC2pflFg2MnZnHKDZk+BeTtJvKUv45mQxJ43npl+MS02wIhAN5xjoObnk+UVWjzPBwdPRs+CJ07s8KMDrq5NgWLhUvC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynXqCRA9TVsSAnZWagAACncQAJURWdm2fJYyMD5Vu8ny\nfOlDLUFwEdx7NFtsj61JwLn1kO0DvQunJas7OkZ9LUPsIaAaCf9VnFXFqOUS\nefWD4dmRdsMcxT/ukldweKUXP1Z3RkKE1uGRAAbLelIbQXAo/tw1aPqO8xeF\n00A5qM2Uj7S08PfdOirtTUHl640XMbtxt1/qdsorl0qYPFgVgXk2H8/CuxfR\nWAyiNZkTP4Ywg1XvfvE84QseiMGafvPiVVA0DK9Li96skrT6ZVGjGfm/FieJ\niuBpuR8LXxWHh08JOP+UrmW7q6C11xbAY2/YdhCBd/OYKa54njJ2aUJL6MeR\nPAoFh70gq9XYTiSPc2TeLMIQ0AtR1yavsG5cnNHn9+2NaAjr7tlvOUGoe93A\nK61ab3L7lVo81Yhg6jYdfMOFR6Mqbp9QxFOsvZgZp2936+46Dt+DqKNnEs0w\nlbm4I/k0l3lS7zjoKh0Rh2wywBe5gJ04YWGtkmTq0Whrpd8FvyfBxGuFrnNL\ncfR8R4BEqV5UGFHK7ooHEd982pqyHuABECwTn01ZJWE/VEg7Xg8Vw3vj/keU\n8UQ8PsT2IZ/0tYWoULwyoYx4g+HNXsFJ2rdr9Sumq7fALpVmnr5V5U14OiiW\nuIXaBykeRpo3wxyb2eUfUmq1QAtwCGjgIieDaIwzA/8Z66ORFiYPgf9IfiCT\nK3EN\r\n=ejf7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b5eb42f66e2a670e1f9573b4feb1a600a95b49b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a6183801a.0","@material/base":"12.0.0-canary.a6183801a.0","@material/shape":"12.0.0-canary.a6183801a.0","@material/theme":"12.0.0-canary.a6183801a.0","@material/floating-label":"12.0.0-canary.a6183801a.0","@material/feature-targeting":"12.0.0-canary.a6183801a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.a6183801a.0_1623881194098_0.2015267197953896","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/notched-outline","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.940550232.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8353f4b8c0d82531e2100759459450d5f83b7ad","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.940550232.0.tgz","fileCount":34,"integrity":"sha512-QxcfUBAuFGgFPSKQAllqqHv9myfuAR66N1xZfF8+zGjdALvWd9+aBKv68RDwW3gy08R5h9hymGfUr+P8u5U7OA==","signatures":[{"sig":"MEYCIQCjn1OLffAAsnM6jBj/s4UBChNQU6BnRReS6pa5g2u4kQIhAIuLRTsAZ4IuscqnESkqdMsXjNND90o73uuk5T+pi6na","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6VhCRA9TVsSAnZWagAAy4gQAIsOu1SFFxvNIpqnW1Cn\nIAy9M0dwdYtOYVDbVGYpU25SM9fko3mEt5NFEK1uOBRjliCcl8WO9NEkWyXd\nGxzJ8QVBX+1+FdaJaO/0tEfhVKrgzDVTz2ZmvhS0Lgy4aYG+WgjiDEzcQ+bR\nKIF6QNyOhmFyQOV4FQBsJamEBNXuWM6RntEL/LPdAmvEXigiq9xhPL7HliZ4\nfej9Z8eLdkWjt2aLIkxww3Zk0NwLxiAbr53M9fb8PAaezDgcFIxR0tj2Y+pS\nwPnDqY6F1aSOtncl0ZZdT/5c8U5NJLvnNHl67jA23OtR/S0RNmkVJ8FvAeWx\nl7WKqEjYcumXonb3VbIOMrRtPxQJ1i19tEwksfWl6BSUM60YpsLDRfEo9GzD\nj47cy7n59ldafyN6oIuFM5MeDNovL4ilL9X4DP7cvVQYc13lYKPP7uUpnIv6\nwLnH0Tm5Jo3WM/FLF7Fs4mw7P4uy5GpCEMM+RsRzo2KVRuOQudLqR90Uw65X\nMZKCoItkb8zw+1/14iuP8XjsV0kEhVVwpbdPwGNASYo5OqC3TJwrKVwoRqQ2\n5C6JXtlOAqQ5eBh1eMt+oTMhCfrDxXEoFzF5H48clLY9ywAOGl+rHd5qYxMJ\nxTfpEModZxgBBLP33ASHU1y5hFZPQeNgdEnvdoX/E7nntBnBnYGwoIuzXHtN\npExf\r\n=X1Hh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1d6560428828a2c7ac90d050a744265e63c8563e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.940550232.0","@material/base":"12.0.0-canary.940550232.0","@material/shape":"12.0.0-canary.940550232.0","@material/theme":"12.0.0-canary.940550232.0","@material/floating-label":"12.0.0-canary.940550232.0","@material/feature-targeting":"12.0.0-canary.940550232.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.940550232.0_1623958880526_0.053971512838449476","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/notched-outline","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.f705e8048.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a273bf784ca2392553b8898cdd99c1198d19a73","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.f705e8048.0.tgz","fileCount":34,"integrity":"sha512-tNEZuu+ZOHcXLxJ++NVzJK9fS1OIci3xbPY/Uta76vUlqa/L6sXocCc9ytPzAq0dZd7LFFMMpm3HNg6kqEICGw==","signatures":[{"sig":"MEYCIQCz+HTuXAYyWLah4AMSb9HTyqWf8U07Zszr/bEzQ54m3AIhAO0hobw3h+QaRTac1MOrYMvtzCbTpIivS2Ro3abwnr6F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLrxCRA9TVsSAnZWagAAqCIP/2cr+p4lg98Vbm7lX4A6\nwvd00g5IFbffqEyFc7zkU1E4Z9x/rGYgmagVfzRQqj2Omlwl/OwHqhq7ru4P\n5SoNFN6iYlI9ZrRLI69HQEl+aUlqhuP/1No+ae5mzP1UPtB4juK1vUWHHH8K\n6b0IMUQl4nlbQpBirJOHF0aJQhkef5Odrz6MoRCBWcoWMLnsPHTtvWkuox8z\nCYjO+AJUB9IMFEpvKovYX2B55JdhNdo0uKHtOoavJ2cEEGlzOGFAvkgTUlfs\nRywP+VpeDdp8ld+U4e0Z317JiqbVHcdJPEKSPhotpd510LyAQVL0XGpqyuiP\nQaUHmgrhxA0ZSjxIRRldxF/aMZb8X9q+POacMs+eo4vFfoiyJjhKzmDLoFzs\ngRI5I4OkjanbpOXY3SCNYgYy8JNHI3I+GKYvk+ZgwAJbztP4fBvTfrior43U\n7rBfD3psEHB7Rg1N9y5LPDbChQ3baUQ/9Ez2YhVDRydSGZ1NkFOWKymGYwAe\nVmKr8Kg2MT234aiM5Fj9575bz8VDLT21582BTyrhTX++eBnQvc1Y7hEoygfV\nvAX/55NTqo2veAP4EcR5fzrBbPz0QiiPdPzUmHt3pdxxt0PwMIB5n75buXJ+\nkeMTnjk67/UaTsAeKWQ6KGQiL7zmRnmLY1EeNxodQ2PB6Wy8OWPDiw0GqPXG\nNrxp\r\n=DCIy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"65fc1ee152f3abef35713b70962e3d5b848a5e78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f705e8048.0","@material/base":"12.0.0-canary.f705e8048.0","@material/shape":"12.0.0-canary.f705e8048.0","@material/theme":"12.0.0-canary.f705e8048.0","@material/floating-label":"12.0.0-canary.f705e8048.0","@material/feature-targeting":"12.0.0-canary.f705e8048.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.f705e8048.0_1624029937311_0.6931261426689681","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/notched-outline","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.08d791f37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89e640c081372b36c881a6de58081687b905a44d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.08d791f37.0.tgz","fileCount":34,"integrity":"sha512-bBoPUZr3MLT4FZD+1C+cxLOez4ZpXu5VwOY/F49BSMe2ihWISFIi9CrHZZlLGLVREFqdZGpd0/15ZX+dAHYWOg==","signatures":[{"sig":"MEQCIG1WmktmUIbjWOpedlzNiIU77QdHUoNX7q7SsfU9IyCQAiAcE6ApZBBhyYOX01jDIuSREDkj2jOln+tvEbaX1L+noQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQxQCRA9TVsSAnZWagAARa4P/iUEhtqUwfK8g47tGf4Y\nB6UYiQxVr9goinCUmJKnDJ6JCbiJIGGzk7pmLNnpaLMOiAuIk8HxzJ3LFXpQ\ndijOH9apfsYdWG2Ijuh+S3XEA/h+R+MW5XwqOlusa2/2d2Bsw0sTClYTQYRb\nMMqUMeVQKhRKeTLzlgyIq2F28f3oGAbkaIcTXh7apmP9vDZhgMzNpOS5xyPG\n07GPQe53/dur3Q0nMtdxq4FV6BQw/ksUSAs5+ck23QZFIHZAHnamkuWzF4xK\nzAVBoI2qZ2WIIJR5pp76HNmXOJpHactQJG2xF7kzYJUAP0CCSJvwCqasGwYe\n9NkZUynUGF0+fBPrDxUHOBbasdL4EqCRQx1OBbyVEegBZ0tKgEwbqFKdOPxp\n9UIy1IC9gv7Aq/XT49IrxmSwDIanhDIAYekiEuVLX7D+Yjy+dGJoAvZD+nwC\n9Nm+znMeiRdaP2arEMEaojahm1Qu2V1JBitBGtESwz/miBCo2ER++vTZdhdo\nSmis/Ct1Y4Pov3TTnXwCQ9US519lLbYUeE6O7WdS08BYWH7V1HI9wMyMCz5o\nO4XdaKgBfPJw5dlrVxQ/gu/BAKDVqW4eRwTxWy3f0xFtdxi+qVPKRxGZDfOS\nOu+LSkuOf8/TS2k8yPHhGnca6YMduyTaBFZvh3lXcNbP02VKIsb0/QxZnR3H\n2AXw\r\n=3ip9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"854f301ec7183c3cbd2e62f9ab541f21aa6a459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.08d791f37.0","@material/base":"12.0.0-canary.08d791f37.0","@material/shape":"12.0.0-canary.08d791f37.0","@material/theme":"12.0.0-canary.08d791f37.0","@material/floating-label":"12.0.0-canary.08d791f37.0","@material/feature-targeting":"12.0.0-canary.08d791f37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.08d791f37.0_1624050768174_0.5473011604527451","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/notched-outline","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3185312d71ec874f75875f1c0439a667a45e5bd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.e38d7440f.0.tgz","fileCount":34,"integrity":"sha512-m/35rkAw/DE1At1L/0SORHHLwvJioCEBUW+4tHgrmNCFefAYKm+hMYjPALYq51E1jqf2r2DrahltSFOg5aiDTA==","signatures":[{"sig":"MEUCIQC7snke/XSk6oQrIIog2SZL4ZY44/xeEN0iif5Iy5+OcwIgahAB22li5AuRTbTJRmEb0b4gSRZDFDgZJl5LVa0UG4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M9WCRA9TVsSAnZWagAAIP0P/1qTbza19dsgR72C2WPO\nw1tvF6S5RkKz6FANNiGWrFiACmCqdfQt3ec2HdTe57zt32iafuh3SshqEhIh\n7tlJkLnhq5qPRx+FpjZzlF61vGwqStD5YyVjBuE7OhXlzD9zLD5HGHsLBGi2\neZSp8Ein48sbaGLYTluA6xH9D/MqKPv4in7B4xxNf9Gqza9dcXnJtqKH2kqj\nP9PA7ZGogmzQX0zH6WdcDJUcqAqJPjRrmaG8Iv9ANSvOjT5ABStuD4R30owF\nZUQ0wRCLeYGsJ/HYSBDWILCtNj6xvdumFIpDT2djiO4UvUuwM6V086NKTCKo\nHES5TzC2u96k7sRD9ruQX9vxO9/U/dfLBDY3lz+reFqmSLXmb+4OJOiArOxY\nueHt18m6KPBOTqyhTbDNXzsHG8zXQxjX2yoKlKtdJ9FTDCQmy1DoGZWLhoXV\nKTqHHpsADiPPlkoQ+UX7bQzhFJXfPvHDrFRKyOLgEc+ubP30oRpvOvQCzhoR\nMYkhwXmkZQrAPtDtHV67v5EhXpZ6U+HYYCSpY/Ha9sz1KskUD6np2jKT8uNk\n9XStljDt1Z2SW5vZ3wNB5NcL9ZE7xeOVZshCWS83LRp0bdWbYXQAzsmUGSH8\nnaC3tVutnWqoI47onWOUi65zqvrJ3pusZslksHVgD6bgzsiQV0DbKK5T0Koh\nHdbr\r\n=MzNJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1d46835e968c827eb3b359624ebb85f8e3ccf528","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e38d7440f.0","@material/base":"12.0.0-canary.e38d7440f.0","@material/shape":"12.0.0-canary.e38d7440f.0","@material/theme":"12.0.0-canary.e38d7440f.0","@material/floating-label":"12.0.0-canary.e38d7440f.0","@material/feature-targeting":"12.0.0-canary.e38d7440f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.e38d7440f.0_1624297302036_0.47376727825346077","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/notched-outline","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"264935760c88128a8fea601d999dbb3cfac6eeee","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.75900a5a9.0.tgz","fileCount":34,"integrity":"sha512-RXn5TBQZZESf4eEGB8Nfulyjz0xp3FeUcw9PY+iVgQv56GxuevcBNeaGTIpDoyvnd9n9R66evwbD5MtzBqpf2g==","signatures":[{"sig":"MEQCIGlTgFXfUmkVkv9OPJsXyuNZdqyKXhyV4MakkeJxFsJzAiB4eNn6A2pEmcRG4RHWrk/LriVFidyWOXggBI9cm9RCcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NyTCRA9TVsSAnZWagAA5C8P/iY9f1LcsynMsqLIFzZz\nk1H3R4du6oVImriSldCyiTM4e2TrVWcQy1Xp3CEsipWEk/M8aFnRnvQInBNS\nDYMeSVePEWPamyub93vitWZRSMSP1ULM1VAkvt7zxLZjLHEokPi/whPy+8hQ\nwrLw+wtrI3wzfJSvroVxPOmYoM2j9ZvyRXFfZ/bF6vuaM54Pc2fFuV5KMfGO\nbrprQEh+DCjnR7aYEiLjb0w9axkoo0K7PUpE1P2tjmui2OClnGcjz2zuYI1P\nJPr/TPX+zh22vX98J+iSFCb+tpr1Uddhlp3coxAo5lSjWYeWd+oRXflqGj3d\nO66B8vMgSpLew0DFOj3ZesMZJ/prRCAoi2rkrpFmAmMG18X/iTVZh4kwlhx/\nTrDiFij2RFu/ti+phFjU0OHfQSmj7KaXxff0I/ZbAagF9GubUwZV+JZJBWFj\nquMXPnx1c5FMV98QaunlCbDzmd5Ns6WXi5uv+BPzWQDviLTgzcPE/flkJ2iM\nfNazqIR/gzQn9qrxatb+g3XsY4pqAPy08WgWuRXB4IDU/0RF8MgiL9glqH+D\n/JoS5ynu/nfpLs2BDj3ypAv38aOpiGjSIjHF2R5gcu6hNV/gkE56XOp3EPKe\nCsLFLOziatDnReDMlLE4shGVKMsPeHnuJE6/PAkqA9bzLnqjUas/03oMvNCa\nNlDt\r\n=f2lt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f08daf05a41f44cbb5e5c07039e1e165d123c405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.75900a5a9.0","@material/base":"12.0.0-canary.75900a5a9.0","@material/shape":"12.0.0-canary.75900a5a9.0","@material/theme":"12.0.0-canary.75900a5a9.0","@material/floating-label":"12.0.0-canary.75900a5a9.0","@material/feature-targeting":"12.0.0-canary.75900a5a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.75900a5a9.0_1624300691314_0.4444326218566934","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/notched-outline","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40a60d3b94dc0221d01169a4c324122d0b7e4367","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.33e6f50e9.0.tgz","fileCount":34,"integrity":"sha512-m0+EuTCXf6a3zWrgDp0JCn4LJaqKDbC1OQuIvNqih9Sdc8WtazsqnEG9tMwmMmMnINBqdnfBUGkKqCt67sPGBg==","signatures":[{"sig":"MEYCIQCc8eExzHjgsmwhY1q17I00Nqb1gKQ1ezAwSzAVmruHrQIhAL2AiizflOulr/Z7gnHpxPQXBqIF8x8ubhCbaz0wCYv4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nyVCRA9TVsSAnZWagAAujAP/jfMBi924uhHX38Nymjm\nlITEpWJo+vIqkt4OCg39My5PqntjReSt3gByqM4FHuzTKK6UHmogPUuDHFfI\nzTkRPg/K0zEe9sFUJq5JjQ79LbcWW0mSmlU0FkkfCTxCJ7A10lB4eb9lrR6+\n1jrOfHUdmVYR59/R0QiQzP+GKkj54l3+vjHUg3XpWzrLfg1oCoGNkg/ab51I\nxeASDEUBlEnQjSs4B9nEoqHCsQTYgCEotItosD4JOnDCmqyUpxK/MvkWLgq6\nTHsEEaD6Bw9sehCJwo3f9tYfrZVf8Lpew+ShlSGTDOmXlJE3OKD7kbZE0ywN\nxOR3dNd3QoeuuFhFttA/Q7PO982kEBCBzxNPkRNlfzcgCSYSYZSi3gh3BlKi\n9sFfKk/HMi71Jkpy7hR5wHRcrbQnlUj+eKSYW440NE1ymRzabsRUQ/aP3Z88\nHGNQdbCrI6pZEZiYitlspXzjZCYJdBzPjgOHmPIMl2KMlPuf0HQp/VFqpsnI\nVHaWI/M4RXpOD8LvG3gk9MIKvuRyt7diOh95UsT6jIttufd4gFLCgg/ws5II\nIk9qtwRmRiE1E1E0BhWYSgsaO3tNnT8wyIz9Y35B+BeV5tO7ZxkykXETitMg\nWRc+DKNICZzdH57FmxNMGoZq+3CRi3wgLA4wGx2dfRzRh2/UPSY9j7/W/x4a\nqMho\r\n=fQ0b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fb208c22fe558f863d851b5bda74038d5a3b09d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33e6f50e9.0","@material/base":"12.0.0-canary.33e6f50e9.0","@material/shape":"12.0.0-canary.33e6f50e9.0","@material/theme":"12.0.0-canary.33e6f50e9.0","@material/floating-label":"12.0.0-canary.33e6f50e9.0","@material/feature-targeting":"12.0.0-canary.33e6f50e9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.33e6f50e9.0_1624407188766_0.17882301172200576","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/notched-outline","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.8c685301d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b220a6ae7770db65074bf500b57f6cf3826fe870","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.8c685301d.0.tgz","fileCount":34,"integrity":"sha512-3UGzliOmjNJlys83vnIwsEH0CwPd5s5VtgI7encolXryw5xHwqCeA12zSWB+cOln5QyIjqt+NjzhAVToBYLY/A==","signatures":[{"sig":"MEYCIQDeTydNaqbrjjGpDIIqWN0Kwm5x4SvkMrJymdmJd4GncQIhAJ9f/jt/kacd87oIo9fPXzZJokyoUGpEJkazF2LTevle","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03ymCRA9TVsSAnZWagAAFIUP+wSxf6Gu150ZFvwhEkGn\nlgVZMpEojbcsa8D/3w/MV8EnM943o/4WfGLqcJEA8uJIayyAF9LYYBADOtMO\nmKEhLC81FgmZKbUcnKEZ3J6nPPGIv5bsaZsWtZm5Wb48IgFSVaA9XMIu3qCO\nVvHL2Zz+zPLLrM501aZmu4NwlK1viQpRpxu754U/hHYhZRHiuLJdQMQcc1zf\nOM03WhU+R0/cdSjLqKu8QVvY/YedsyBwDF5M65MufvyEvNUhvQo9uahj0IoF\nNq6pvWrTlYH6SEF9uWYSyXbapUipbFSmi/WTjl3sSzZZVg1h/hCBp5CQ3qgl\nan/DSsg+29g+xybYZ3y4zawH/gwqQkvpz9uEv44ErUk4Vg/BI8mL6kNX1yHE\n/ca+VHyKmO0uodLCp7cWH7b+KWrRAw49AcN36PMRydJGsDg5SqJ87qiYZrb+\nc0AHDs+WJ9UVSCkzgBKfvqCbbzdWoHdzurRE3Qcun347W7H8N+qbHBtKYJoI\nBX3o1u/xml08AmCDADAAVF0GBIRZCYHe8YBl+yMor4rdVWlJob7XSed8N/fj\nsLNY37X0DVz8+8DdfuhQuYW/uH6Khz/FlTgctLt3XJsOA58veU/sogra4fLb\n/5bIi0UyUwNqbKWZiSB/LetzRkMIDFb47secAx9zYZ5YTdCVF1IoQomYUD8A\nQxIR\r\n=o6ay\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"43d0ab810254e565375b55ae118522d89b7e9254","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8c685301d.0","@material/base":"12.0.0-canary.8c685301d.0","@material/shape":"12.0.0-canary.8c685301d.0","@material/theme":"12.0.0-canary.8c685301d.0","@material/floating-label":"12.0.0-canary.8c685301d.0","@material/feature-targeting":"12.0.0-canary.8c685301d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.8c685301d.0_1624472741623_0.46715167003121394","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/notched-outline","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43b256dd2e4b4a531c616f4003eae0fd23a0795c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.8c7d994ae.0.tgz","fileCount":34,"integrity":"sha512-MroWLpRkWg9Wdo7YSgUnTk+xWPAbsHnazdCsFk+FfCFMkfpK8C+dweGxq+K7qKIo4S3bkzGUZ1cCl1LDcdUmAg==","signatures":[{"sig":"MEUCIQDKbgUvF/ox/HKFF5iy4dsJMaL8eIyGZ7HFl0M5tFyVhwIgYcu5OmB0jTHpQK7sg/4T2vV0j3AqHIpWc9ZOCvk7dhw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04tfCRA9TVsSAnZWagAAMggQAILuHfs059eeaXzpU9iv\nWebLBkfR1+wfBxlmzJa1xh4N4DIvjsHKUhfc1FP2Vy2IRp8vnlHDYtAqNkdy\nFswNN6PONKVeDcyGFd6qMmwZhUvrewSQAtwCr938mgcZ9Je3y5fNNQBq/82o\nXXrSJi4+qCgSUp4ywdtlrwo3bjD32OS4QmcJU+JMd4yPvfH2C9GHx86GD6EW\n6b1MsZPLa8TsC30xM9IREUbhPiaw0g6ZwKfI6cKo3LaWsdtGIajwcaM1dkXr\nMwbJDZ6rwtzuQjjwHfiLIIaTZN7iuHFQoYAp9o4g3EAURTKNz+AUQVCgz1pF\n+RUcI4JAThei76AOJ9I5Z4PEcmnfswyrVLS0JAEax5Z2Zqmp4X/YSs9zecgf\nda9vKrAGE6ADFwk+2bZIZkIlyrp6Mjl6GRSer0rT28p/3bmgfvIetOg7UlIZ\nvlAuPhCp6z7XvG0ekJaUt370YfEnx0TrHaFbrZuz13K4jm/I2MT3N73ObBQS\nmjOjBDXJH4WMEkUE9J9vHwVEl9QT18JIcFujUYGVJVD0KZbkz+6oZRTw/JoG\nA2xV7IQExOT5mT+9JlKO71FB9aZ38rb4h2vlJeP8fF0ZJoG/lN4n1AaikoKr\nUmgZJ5QcTFwMBPKslF/hbtEl1tOG4PP+1dawF6NTZmQTDIbYWZR3EphJtyIa\n7N0D\r\n=NvvM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"85693f86d68563f451e95113f3d03a29fedcf142","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8c7d994ae.0","@material/base":"12.0.0-canary.8c7d994ae.0","@material/shape":"12.0.0-canary.8c7d994ae.0","@material/theme":"12.0.0-canary.8c7d994ae.0","@material/floating-label":"12.0.0-canary.8c7d994ae.0","@material/feature-targeting":"12.0.0-canary.8c7d994ae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.8c7d994ae.0_1624476511532_0.20750104666634517","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/notched-outline","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3b7f5cb5718b621446911484d2f4da2fca6a200","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":34,"integrity":"sha512-lh61GUbUhQuZRT4aGsLPVtKbTJnhFC3g3hHcOC5pH+ZauYGfda1kAtlD3Aa1L2thVVviGuUQNEL1GYZDcNJx5g==","signatures":[{"sig":"MEUCIQD5Uw/BymUGgZz/l+/XP16WYK2f3J1/vEXqaW1pGfYSUgIgZ35boFs9wWF6aOuBFcbucSM7luouPh3LPiNKOUohb9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K/CCRA9TVsSAnZWagAAq+8P/2I1Fm74EyUFWm5100g8\nv3jDZjls639HbMwUZMkBOWBD6ttMCXvC1Fc2dN7lPdevas9PKuTO2L5dwgqU\nkV8SUiHaRm0Osk7Tcc0wJaCl9E9Pj/ckb51DXpFVdGFNzeLtGBjcJP8lzPB3\nO9/f7X9J4TlqpLAIDnfzh+3yLlDaWbo0rZ5lagsI3xp53Ty0UVYn9cK8bobK\nr+WoldTX4Ip1qeseGcSUBulWCYrpXE6y1sDSrUUAyKZntmXpo4sOd8T3HnzN\nIFP8yXe8+HRsxHcgvp5J3zJac+jP9AF4R9svZRbuyYIi2ysq1QOHL1GoypFn\n3UX10wbLiilsUCnO2DCKyuQUCK+F94SlSBENAGzT8QZYEcR7qaPTY18tBazA\nwNnBJDVO1F5BJY0TXInrK8FvJNV3q9rPI+aPScLkoo4p+Xg5Vx1p7MKxQ1F+\nK4CAjEWK3oAg5CXGtUr8tubJJMUPsa+dioJIu7pyl4lShiP/dJ28/eLVRH0r\nJLaabzQqSZpyvwfUqg7LtKGQoBemB0Dh9de6X2UFJ848dLxw9/2vCd0YHsXi\nyzHxx+iWV0rIrbSRy3zXOaARai7+qtWLkLFhb9N/SXf2XEbBXvTIXEx5zuxm\nznXN7i3AspqUwV7dmJmRkn9/7rRoqjOPf/nWWVj98eAY/5MAm+5XV13axKfp\n6fwb\r\n=N3Pf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0954a36f2cbd31614158e8425662a4969ce9c299","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4ccd39bdd.0","@material/base":"12.0.0-canary.4ccd39bdd.0","@material/shape":"12.0.0-canary.4ccd39bdd.0","@material/theme":"12.0.0-canary.4ccd39bdd.0","@material/floating-label":"12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.4ccd39bdd.0_1624551361868_0.9315139957540874","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/notched-outline","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d25ac00b2ce309bd971704e0fe601228d115e7a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.17553e9f8.0.tgz","fileCount":34,"integrity":"sha512-4tsG2wkC3LD6PRTV7TRaaCKPnfOyPlM8jYeE6SFDnxhk3xhGHZDx8MSKGWDz6+yENfYQve8DAWYFHmt8o+CpgA==","signatures":[{"sig":"MEQCIEFRegsilxff9H+NPbYkKmQRwG0cFx01NRCGkEuQ1DTxAiA4lhdiuxy73l5H4M6y2EoKkrAMnj2npwSoKlMnITYfpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lLzCRA9TVsSAnZWagAAQiwQAJr867VIUfMtMv5zycS2\nj7zIjGwWYTahP/mL5sgoBHkDP51E7ANoIStymhdHSWQGk4xayzjyN5sV70bq\nBjIaq/A5NsqKiSgws54fN7ysOtdXh9cvVKpR2k/n/eot7xeRAEduOPzwW9OV\nGIo9uiNHUFQFL+lWx1xT/kDwcbyt9jrA4px91bgVOvk9B2NKu0pPwcOJykJs\nKH35zR+UA5AXQCbCJHidZEEh12w+LE+0ozvw4RQmA2Zu/gdvAU+UgMxLQ6IQ\nkrpo1T6g7EZn9hY+tU/4ERqOs6KoC+A9dMlvduK64pFKvGwtt9I8mB3S1bi6\nMCtCNeLKE3LhXVRyc3IZKxxArexA65F6gYi1qXrn0AyjslVQNT9GKcqAhL2e\nrG8rp9YdZ7SahurDzqcvCaEa0X2xw2dpWjC/UXHI4SB8F4BLfYtM/4WZPGIB\nWRjOJ998c/uoSZedTgGqfApoh5JHH2RLEnh7u+olaY4HjY4E5Nwh1u0WUE/F\nLwtBZnteWIMtHUjsdrCZSe3skwtpG8npoBDR3XiOSfcNrzT4BlQKGJDo4Gym\nvxfs5LwlDmb0kCKZyXxIweAP5iaAN4M2eUogcYNNY65gZPUfynLYq/I/84v1\nHzKIWJw6AH4I6XO9waIFvIQTBQk7leeuR5hXAGLyAwmhZTQZIn+n3kW4Jm1X\nBILW\r\n=sqVS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bbd7dc5fbee09c82081517ffc14264d4834209ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.17553e9f8.0","@material/base":"12.0.0-canary.17553e9f8.0","@material/shape":"12.0.0-canary.17553e9f8.0","@material/theme":"12.0.0-canary.17553e9f8.0","@material/floating-label":"12.0.0-canary.17553e9f8.0","@material/feature-targeting":"12.0.0-canary.17553e9f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.17553e9f8.0_1624920818914_0.7957094506450442","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/notched-outline","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c312d1bc18825374ce13f850835935433b328ab","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.4c80072fd.0.tgz","fileCount":34,"integrity":"sha512-lwmG4sa+CV+1FWUS8vvfIWKqtjHhWLXDfjKhHtOiqDJqn8E9obASt1FdozPH+bK5IMH3YbhLaXw5eGonW0oNnQ==","signatures":[{"sig":"MEQCIFo2jt03m/kp1/075IeLsWYHY5t1aaXLL8uoa7OU/WjyAiB+y+iZ0wo2TG0/J4wJ1L2R4+a/P+4DdYz0V56OVeTgmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22luCRA9TVsSAnZWagAAuXcP/2Bn6Bp0sdFAQ/gGFSKt\n9Dze5iXsXCt/JY9SNycE1dLJ+OdfZerQCyiF5xOdnFrmAP3ivH2Jfvd1kWKn\n9uDUEGnTDtOAy0sEv5u2stQPIhIko7+DvSG5EklJ5JlSYgWCxqc1siV20qLC\nWMbg7Fc900FEHIajbUuoW7pa7i4Xp8wDD7lcBbcDA/G4JNzogkZAPBgiHcVR\n1F1giwGW5F8YYh4SZkgAlLxMm0p1+/KQUGIs/bJ2umyUTR1dcmtHJGGboEK2\nW4hCfVZMtjb7HycrOe1099n77dPZjtmLV66+RGEoVIn8ugjczOKY20Sg+iBP\nITOs+ETv9mY4imnG6jeX3PlKWCFcMdxFu047/rzqrwscccWgbkDe5BIds1Uw\ngjlikXJBQt7Z6bWzEtEEtdkFWpzmitF020oWLHYKgw6HJ5swA+gf8TdVZgj1\n0Ahzelh87++9fAiQVmtCYjCVQoWC0jcQRnAgyOlSccuCvghtT9RBTohaZVP8\nDYfoSdKBoBX/KVoiowj4sxUufklr+yJstbx5oBVIaqj9juWtLKAlBbhthBQI\nRdhs9mN35617NPWzZpMFamyQ6tbAKxG/jT8rUEXN8+TD81hPQlS9KUHjxlGx\nEreR6ENTToujzlqJTT4uxBbzovG/HkXhpedQ1pAhUE/LlRfv9Arcif3g4x7B\nfsMC\r\n=TJqv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9f6d10da43c6e0fbb1366c1e37fbca58ce00dc12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4c80072fd.0","@material/base":"12.0.0-canary.4c80072fd.0","@material/shape":"12.0.0-canary.4c80072fd.0","@material/theme":"12.0.0-canary.4c80072fd.0","@material/floating-label":"12.0.0-canary.4c80072fd.0","@material/feature-targeting":"12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.4c80072fd.0_1624992109517_0.15553831979247956","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/notched-outline","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.796811db7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18c458001194a810c872dcc754097179be92edb1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.796811db7.0.tgz","fileCount":34,"integrity":"sha512-+c3GtM/v6i6pDgbjMsXAv4cYpLoxereTrGFQ8k6YQfYpsEk+k/r1xa2RP8CiQddAwUclDaJLRBP0Z/L9G5DQvA==","signatures":[{"sig":"MEYCIQCyaDBaJfCvSeYT8LS2MNdNEQAVdtp9L1whAWexCbkVkQIhAPEDGiIQ5KshOE58Dixwnqx/YxlgSyIuuA2XovY3uTtr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QaSCRA9TVsSAnZWagAAFAwP/jiBeMrmNnSaL5h4auEk\nPVaW8dbs8joA6UwkAmab6HsuEO+xSGFVmkGSUYif4saK96UVieSD3A8HwHu/\nmUxxiEVw5+B2iPAfiSQ+o6hQ/C0gmKKViPvyWnMeLUSBbc5Dk+GahAFdMQxi\nT6m6p36kdOWf/ZW1ccWeloWi7hcKXQ53EEKrbw0RkUNAWfJS7f3KGrUm3b9x\nuEhFH9ulvKqClg64Dh4FKJ1OBIgYKbtMuYUA42x5gbKYifwxlSolVeQmlYQj\nDQD2Ea8GbWYY7537r4LttwfhiR/IPpNsSU2Nk81uduOL4L4+7BbUh1qy1Td6\nWBMKPJGs0TG5y4LA3kIZq9Qq6nRxQ1S+LaMs6SnteUW4zeb2ZKUqtnKCltvd\ndSN6Qt9pVbx3XKlG0puY7GygiJ5brkXOF+e/d+0/cioANm8AtmO6tlZ143+X\n5RwAoYSa5IdpCgTElBUF+cNJ8puiYvVnVOY67BnW8n8lvjLUqEYxmkzbd7TO\nvxfE6byqj8vMHfCvm9hf0x9sJQ7xEzXQTfD3IgA/8DbxyAyywgdmaV9fv2/p\n/zj8hUkBknnIySJRiUsZxxshA3EhruoE9wilCGcvHsFjjjICf8GtZDLxj5xS\n/yAMgsuFFVmwR6mBpgP/IDb0r20Yt/0Z2NDC6qge0DJG8cxVcymM+3H6r30Y\ngw9e\r\n=HAll\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b02de77dcf32bdce7d23406dd395390b35e386e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.796811db7.0","@material/base":"12.0.0-canary.796811db7.0","@material/shape":"12.0.0-canary.796811db7.0","@material/theme":"12.0.0-canary.796811db7.0","@material/floating-label":"12.0.0-canary.796811db7.0","@material/feature-targeting":"12.0.0-canary.796811db7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.796811db7.0_1625097873604_0.7532808234640407","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/notched-outline","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0939bc250d872d10579f679a32926ae62ed05e97","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.70e1efdca.0.tgz","fileCount":34,"integrity":"sha512-+e4hLhBe9lrRTP/K2eORUCZpFQ5274LJwt5/kmQ9LDrXuneOBVMjVBKd2G1cb48O6s9IJcCNkAwQE6OS0XnOtQ==","signatures":[{"sig":"MEUCIQCtmFvTjwoQnK5dId89DoepugK/kQL76ohb+v2ikhRBRgIgDeh44bEQSR8tG2x9MRP/+fGlF17LLmkzvPlBYJUSQuA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fZgCRA9TVsSAnZWagAAspgP/2S/3gR4aAp1qoU9rZPE\n8F6DxUgxCIsED1G3VfvmUAwhDgjh50L30q6rzx1vNwkgyijP+T31jya4+zbU\nf11eEp0LjlSUjFOcQbcNOZJAcUWpOi4i5YHlsI9jDX6pfawJUd4YjA3fzucH\nk772W/Ey0p1OZldAHC/IWChjp9DOrLNkkVjTOr5h/V36P+zkbIRitFD18o2/\ny+ZZLy8LmIhdG4+pPt3icqQ2nGDtsmxjT+Ocw1g1bbG+1ZSu1zXxHlyZrR0u\nGnpL68C1Xi0gPc08EicSbEKtExbhFdymFLUQPnTmQMkxPWA4SwoJvCII6Lld\nHnHMOloVdt+JymGR9Dd8WwBjWReAo3HN4bR2v+S0jUVnVS0ud4e/uGvNCqhM\nK0tbq1ZxieGCDdpXwjcyCs/32AQLdI0PvYAXLHde0ijpW2iZhZQqyW8+pRFZ\nJLlrLxLimj3u6FTvUKhQ9f3HTifJEG8wl0OhLSh5zpLcMlFP7o7uxNSXVFEp\nrHUlpcAbduxZlCZmH9Q5AEhO2+nO+Hl6L2Wudn9I8pWzDoLfBeNo8GrvpqL1\nirErktuUQGsrMDBDcYE2U5YW9MpzxAUSyTtp27NiRTzXXrZI1vD1Oz5zD0eY\nRaEmDMJM1Bpcs9ee1/EAeURH0xFbRnIx2CqvSSPNLBpklLDLmFQHx8OBT+Vm\nvwPa\r\n=b9Yq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ab5924ae38bb3ce40d3b1c303e1ae6d175b844ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.70e1efdca.0","@material/base":"12.0.0-canary.70e1efdca.0","@material/shape":"12.0.0-canary.70e1efdca.0","@material/theme":"12.0.0-canary.70e1efdca.0","@material/floating-label":"12.0.0-canary.70e1efdca.0","@material/feature-targeting":"12.0.0-canary.70e1efdca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.70e1efdca.0_1625159264228_0.8326612054257991","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/notched-outline","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.435866d32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"beb0f13d802b769b170e85b71adc34d807e7c686","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.435866d32.0.tgz","fileCount":34,"integrity":"sha512-/d5+jpprqt5LSsrlEkNbQm1nm7RBouzm0oQgZGbbQy2zH7DbXsUg/vvR6NbXW839iqFhbaR4PwFlJObZwYD/jA==","signatures":[{"sig":"MEUCIFFoSGKr8c7/syhw8y8Om7+80sDGKpeVqZakWSYkzhvBAiEA3YSz+S/zcivLZmO8Vs5hxjKbt6mtzRxsKctDsFS9vXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31lZCRA9TVsSAnZWagAAzhYP/RnHR6pIm07ybBAUwc8F\n+yoRF38LrZG36QQ2lpnUaNnHs3w65wiEFJZQldoLsWrgFX3jKHC+EimnYZNK\nQy3oggfAd+S+bCdK2/0+ob3ZW6SSYDWmb0cdP83o0QHS7LyaUk2HagaHAd8+\ndxYMjEtXZGgGmZ9GLCgbNazmr9rHqMC5qGDRNLl64wgDp2n6hqF0+6VlgxLO\nuWPWKVYfRJGqkB3q9uYKmRpg7FOI4AZpjN2G8GyrDa8GFcafRpCHCE9atEHt\ny2cE6DB9H5auJdGagxr9GGmX+4RP0HChWSEi+KfFJrOYWDJnvHfPyo4C53yg\ntNPWVoR4U5N5e/fWUllxsEMviFLBUaDapUvq5AMCHb05eNiQksLN8Yao86pW\n5UsKKthlEe1/4JLZpXJ2lVAi21EmpHxA9n0f7vHbAmPsFqRw0Wb2qdkn9Dkn\nOCHdajZixz2V1S+diL86fqOezlsn4oXC7lssy+bTNF8N0+FAyH69wzgZ6Zy0\nKZLiN1UiE57ENo1zD8p/OeRM1KzMIr7hdb4FbGWhmEVQwsFeC8gMeikFuQdP\nIoNoJLgeQA6t8fNc82vTfBpKi0l1VUi0CRECky2sahYn17Ko0JKfWcCdoD44\nHojjeBhq01/CJNw8y7+NJWgQQkU+R1LKi6tj8TVltkAw1FECdrDbHO8kXZdc\nd/+G\r\n=wnHE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ecf68c368bd1ea5571aa4da569d6fe6c4b8b8caf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.435866d32.0","@material/base":"12.0.0-canary.435866d32.0","@material/shape":"12.0.0-canary.435866d32.0","@material/theme":"12.0.0-canary.435866d32.0","@material/floating-label":"12.0.0-canary.435866d32.0","@material/feature-targeting":"12.0.0-canary.435866d32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.435866d32.0_1625250137003_0.7713665459135179","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/notched-outline","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01ca74f9769d7a8f557f8434a55818878e57a040","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":34,"integrity":"sha512-Jw4BvZwiAc5fZuM4csmckJI+vHkahPEjhkyJmZ77IeRovfMF4UiI6b5hcetNAwyTIyzrk8bw8JiA+XZNoj+sXA==","signatures":[{"sig":"MEUCIQDiEg71/qbRTK69xp90q7ec8E22wDK2O0jQX+yBPp1xfAIgU/WCrfx0t17v8+KJTIrSRco88gDw/Q/exbSx98DUqyg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36jGCRA9TVsSAnZWagAA09UQAIEIExC21rODhtYcyHju\n215bTuU2vZrN3IqPOE+X/Hpc0Nj1YDQLB4WgIPWa8HnbwgUgixBmL48nYmEz\niRiVJJo6HixqkI3BZPv1bm0Qt0VaTg8+tFArQVzEbpoZkzMCw/FDYedZHY98\nUa+y8M9UgbFf5maLsbZWYMnRezey4yUmgYAi7duUPRwLArlmWaiXmXK3Lz8z\nqqZrefcUAwbC/vMJMApCd02OlkCyVxoE2LWGuUSMkvhYvdk/IYw/dd06WCrh\nTNHnTlrAaPF+9IgtDX6r+rB3zgdjujG3vBxhSrLxEtrjCNcNMdnB7h5pS+ow\nyljDPJWfE1m3lHa2g9FJyRCGBJ95pr6OvKIro4hGluRrCDEwKIljZ7T9fwuT\nmplbiNw7roWk901imkxur5D8v4cXT5HjgksF59CBOpVAikcmgcaPcXbd8Yt/\nm378RgbQVEIGbmw62AC1V+/vzKdyhAysjV15m+jkjHbgzCH34tg8VTISWp8j\naYi1JC0C+R8waxRV1p0EHGzIC5VwshssUibBXInU1Y9Kyg3GC4KviB1f6AAx\nE1DddZV2LBzoHkSh7HBzjXx1mOEDfyoE6nLGdjBfZKbu+tLeP4dOEQn462Rx\nF4KdjzzzcKJ0lIKlFfk57KYAV9mv5ql9r20qmCBPyfqw3HxN1L2ph7AKPVd3\ndNLw\r\n=bSui\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ed31c78c6a84cb24353ffd1d406693496f090e29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d0f9f3f2e.0","@material/base":"12.0.0-canary.d0f9f3f2e.0","@material/shape":"12.0.0-canary.d0f9f3f2e.0","@material/theme":"12.0.0-canary.d0f9f3f2e.0","@material/floating-label":"12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.d0f9f3f2e.0_1625270469858_0.3936132319600085","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/notched-outline","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.adeac0549.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e1230187b36fdc7243f882a2fdb808de47461ad","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.adeac0549.0.tgz","fileCount":34,"integrity":"sha512-FX51KEWf96B+RoVI0GU6ohqiZ/Yf7leHcVgbksN5/ARVeMUNZJQJNC1Ym/jp6d6Ig36waZoZnd3U+aeLGx+tSQ==","signatures":[{"sig":"MEUCIQCFxxWtfQ2NeYQn9RAmDdTgPPC8E2xp8xev37cwKk6tywIgckInbwqAZuCEJd7AaTv/RJg2Uas7HG0M55h4gH4zQrg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xVxCRA9TVsSAnZWagAAKbYP/1xcqUxxCYgBxNGgYSIj\nw50vnm2PEcvoa6D078uBO0rDUtdnLWWfJDnQbCPwBdao1annfttsk+R//bpa\nT5MckCxAP2Yg9gSelqg7o6R0rwLYylfGtGVNi/Xt7Dpb8N4OT5KLPv+WRWW6\nseYTZQ9F9yBCsVCOgQKc4nSQhjobhzzbE6eKn7AJLEJK9mE2dkDJGoDpwmDY\nLGTDHg8ANQoPa2Q0Zugzw311LUMhLUOqC4m6VukMs0h9v445fLa9J19ixne1\n0j/wOXuOVJoq5I9W5NjPPscr6x45DQcdIs8u7kTrCKDciiAukECP38+1ZRXU\ncwvNfuslpvVGF2EsGm1VnWg8Bl3gkkdMlltIfhv9+Up34Yx97acaE8g9GOJJ\nIZss9jlP0bRLtpE2qaaxsnrGac/IKYvVSsTUgwUCXmb1ynK6oCuboECA6PsV\nV1FG4Ch1WFlKKxlJx8KvC1gn0MdWC16hVpSXNBMlesXlcuIEq4sJySzSCrvJ\nsMMkICXigiUvdJY2+RT0dvntcsJZktCiDI2Ob/e8Mm4lni1vM1UpgtSsvlb7\nj4Eh6dyKbeuNbgNPUjGjLt01FdmsJc3QM9O/+DtciDk0+g8W5ptKmey0J5It\n0M3OV6lCBccc9gL19EivjwgwKCfXTNu3BTamBJEO3sGQMDK3mN3ioS1w6eEJ\nhjX6\r\n=bb80\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a189bfd7e13b17660ad97870e074af0ee245e36d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.adeac0549.0","@material/base":"12.0.0-canary.adeac0549.0","@material/shape":"12.0.0-canary.adeac0549.0","@material/theme":"12.0.0-canary.adeac0549.0","@material/floating-label":"12.0.0-canary.adeac0549.0","@material/feature-targeting":"12.0.0-canary.adeac0549.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.adeac0549.0_1625757041365_0.271253687436424","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/notched-outline","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.068fd5028.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"699e0e85d17643e7a55740ab6365aca35967fb77","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.068fd5028.0.tgz","fileCount":34,"integrity":"sha512-yzBVCa4aHKma25YaFwban1ot7tesPd7zg32s9N6TNt5RNmduuJH7XCt6+Jql17LkyTiUGPVYmPSiKiZq7ywQkg==","signatures":[{"sig":"MEUCIEQQLSqcFgM3jAdZfTaEvFvoTkpWH1/+PiRWS9C68NbMAiEA/CAMkhwHqIS9+dAw4DIU9YbBuYbdsyXOZN6pkN2sSEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50xLCRA9TVsSAnZWagAAGhEP/2FIKCISzoBnZuAmLBbU\nr4zzVc/n10WnYg5hbyGcSY/8V/Sru1UqvbIDBMFuQSo6xhAyJ/JJwS9cBIZw\ntL5Js/1BQ4GoUN6s/i2fVGMI2bdGk9TVTDXJ8WQbjObZAOQgIMq0oL/70h4C\nA2K7lO83+tgZXvQCFmQsMIzfH7AP8K59cAev7EHYqurHUJ5fJUMRdBmN71oI\nk7ZQiPrD5mwXYBBH1GouxYslT1AKSs/zBCul2A9YxhUFVyQj6LTnOkXBQd6f\njpkPWqzsFW+sRBkBnlc4k021G7rDVm1XfW56wsuPqX+J6ky1j9v9Etwcsyrl\nognd+xaM+FHrH8x7Bv6/Gh3Bmo9lbDGe1lYqHPx1WK6qZSPrk0qYK/hvaRtR\nQ9eIlJi14mHNRe2hmGBueyqOQmy0UXhEK+1y5UASw95hFjihK614P/yjLjCf\nKjx6StlHIIF5Ch2kgClidMZdWonuJ6yCcCaCpUk4ZJ1uiKB0ip+Ix2BuJoby\nDJ4p/bTT0qJv7v0LamGTdJpgJ1Ug6yhJfKfShjOexkKsjCEvR2JKQg5Ymgll\nGrxmODParjKCZ1vxvoepH1SrfbV3VlQlBDV8Q9hH80bTpZW7NkR1dUa05FHa\n/IHthaX2PHIo888W2N15STWc6OcPpYHelVP+UPtg3MB1LwbtwNhU7XPe2fDP\nL/O9\r\n=P8+z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"daf6a798ec3c54ddba492f33c939c41a8d88655f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.068fd5028.0","@material/base":"12.0.0-canary.068fd5028.0","@material/shape":"12.0.0-canary.068fd5028.0","@material/theme":"12.0.0-canary.068fd5028.0","@material/floating-label":"12.0.0-canary.068fd5028.0","@material/feature-targeting":"12.0.0-canary.068fd5028.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.068fd5028.0_1625771082655_0.929801745487074","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/notched-outline","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0077c8d82fc673c7011d3aeec9079e4215f1d360","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.5dfec7a14.0.tgz","fileCount":34,"integrity":"sha512-fEOKxqPKAzQ2ZabGiqeFj0Iv9XlnG6rnkSxDu7qvXi+LCYBRZOQMUwc5B4MZk2uBRvN1K/oCDFWZOERF+WZqIg==","signatures":[{"sig":"MEUCIQDIQtG0hj7M8iz02854evzifVhZ1H0UxV76R+dA7unOqwIgW/oKibiyOBqzzYQc3q/ITs6Vzlj1+WROxAMx3jFz+3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KB/CRA9TVsSAnZWagAAGkYP/A4NZzNU/wfNqnwU02nB\nX32i4d2iBpWmtDKnz8svXkn6Qm1P9pFlhTIsF+Dvl4Iwrh9j34iXTsp8d/Vo\nL9iILDFoZaaOiJjyL43pI9oiLyHj2ecHupu1hzQpi9CiSGUs+dcl8B5Ne6HB\nlUgBFepv3krcApmgkGWiok7m05ww0wfHAevwx3S0v9YW9n0Pe4b5WVGljOem\nJSbR4G3lNvKy4Izm8DdmHOu1B/42q3/wNdTRuKHM1xZp1eCmJv3qAFd8zrDY\n3Pb0pW38IkYyI0HhRksRJuFXFru2O0m1uDdg76WC8JyPR1RfCAv0SgXkJRiK\nTahazV/Cvo4dILwidFFpdGrcoYXOo+Ua/q+DTB71yUvUSi9ob5/o4KEf/Vkd\nLlHokyJg3Yp/AGOdRSVUoNMo3plHD9dqD9NuYak7JVHk7e/8W5BLSwYEAwUo\nrnpit/QTjFuNq/X5HFZ1aysH5Zl/My2zve4LqI12J1v3c5GHmI+v1rOQ+K9z\nzy8FM6ayPun53CFXJvnPIz9aSnQmPRkHHp/IbEsDqToZl3BZhnt4pstiuOiB\nacnkOxtbmkikwg8gMUbL56+rimP1WODfAzsIVIw9lBZSOx9PMWHIaHnT3pmC\nf7tfbk+zLH9zbg7AGF2V9fdcjdZQV7PhauP+qBOO1AIBTYCQ931tzmg5PKYz\nUqqT\r\n=QNSK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7295656b25be2c03cf7ca7ca800e7dbec4d9b531","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5dfec7a14.0","@material/base":"12.0.0-canary.5dfec7a14.0","@material/shape":"12.0.0-canary.5dfec7a14.0","@material/theme":"12.0.0-canary.5dfec7a14.0","@material/floating-label":"12.0.0-canary.5dfec7a14.0","@material/feature-targeting":"12.0.0-canary.5dfec7a14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.5dfec7a14.0_1626120319212_0.5766738753796725","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/notched-outline","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.07a73750c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73be9be02506989e3c559ecbc771edc8f961c40a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.07a73750c.0.tgz","fileCount":34,"integrity":"sha512-2EgAI4WcESv4FHrO1vJZaSQa2c8jU73bgDEMngK3JW6OZVgSrB9llt3UrXe5bgMtvfBfmdD1Jpz7GYk2E7Qmgg==","signatures":[{"sig":"MEUCIQCM918UDD/MTD/U1QtRalcy1n5oREwxcm0NWiGeeHLOqgIgVly2d9Q6FeMF71grHKggEwVzi1RYPUZlCdZQqMc6aPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KV8CRA9TVsSAnZWagAAMSAP/RuDVQdbSPFl1d7kvYiR\ncnO5wQifsXbkCMQtd+VUybb94cEElys3WBpT56zja0KA6Ghg1JYKPSSZ36xR\npfgHSKQRqEkHbDjAcnLwXtmXYFISYg+x/fA3sXGKCxO8fW4wvp4BOmQY3mPX\noH2PBpN5vjdpO7LLqfeJ+GbrcoTDkCx6mOKVfZUrQPvQO9FKhtFTSzYUAI+P\nkBn7oHGKXJhd5sPyYSz6uH9u+cQ2vWSHhMfLDVVrKZl2dlvyPdrQ2hN0Hbh3\nlgtOhQ5IaRTn3dYu1Luf2tZQ1LHmsttSU3D7bQTzMTv+NvMTbowPcgv7u9py\n9DtkgrbBXHEhNBLJkA3+GzDcDas1VXK3kvMo2vhuPA8//FRK5c5wbiZKiZPl\nRtghGU7NR3EjTrvA85F92i7emPL4ry5Qv8Bstsn8SsKEbzMWDd88LGsqfg4v\nDUKGKbgI8OgbDKtadLSsAiZ/qK3ZNKj4KoaNrGV/weOBEG3eSL9G1iZUKo28\n2s4FO4nnzCG4L+V6Kgw1KxmUEzeUvWq9W9GZZlEoa9f5cmCrhznvi4nkcH4S\nhmueXUjEoO3QnUHlGx+DpWdKxIYUsKKw6mlPNUWWG3frhQdz/mVj54bCThWH\nA+pSv7klvHLYIgBA/Ece5hDg9quK5eJVMBUi6yke3Om7jptsMqpg3tnTXCTv\nGooy\r\n=y8sm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3534c8199752b92a52696d2065e73b8e4a997195","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.07a73750c.0","@material/base":"12.0.0-canary.07a73750c.0","@material/shape":"12.0.0-canary.07a73750c.0","@material/theme":"12.0.0-canary.07a73750c.0","@material/floating-label":"12.0.0-canary.07a73750c.0","@material/feature-targeting":"12.0.0-canary.07a73750c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.07a73750c.0_1626121595683_0.2808879387543297","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/notched-outline","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80d1931cd085a7e0c4f50a5a5b58a9cb794b6ece","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":34,"integrity":"sha512-ZwaN8wHcGlxFAgVzys8vcJbDq41EkgRU/WBFaEvX/s+vNJ6oRjB7TxSE88lzYFG4RpGOtTLI6Rj3KDeT4xd1Hg==","signatures":[{"sig":"MEUCIDrGVMph5nYcO9b9nEmSnMv6P13V3q3SdkewZNbk6pSgAiEAtkqdWxJXxbuoDlob5cy1vS0uyWXuLJFdfppd2uHMF+k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PHWCRA9TVsSAnZWagAA05MP/RWU45yaGeTet2PExebX\nxHZZj4dx+0mffk5m6zWvt6oJkVrhBXyS+v9rGmDU8fAq75oJHHkd3rGRXKwy\nZmXQyUVY+MFKnfPWdCDhlOIlDNCaCNzjVNCdpU4FC0kQOxcVjbcXC3BI0mUr\nI4r7cgJmHf+72YAKFMFuG4s2vfWF9PfDZIHbtEcUlKCKjfQ7GQL4oFrEav1V\nW5MH+S+Uf/18Sl51xvwGxnYnF4m7zI/V9OelzACkpeJ0OGEyPI8V2bAEPs74\nDNapYOB3vd7L9m0hHFma0EzhrVkiubN9Ackb6AqFikJJez//ZzQU/bGRjioA\nyAWU8Ersa9iYTQPGSkhu5HmUXc3nO3ht0Rts/fTSYAw/t/1gbL8qUbaS1JbC\neojKTmbNC9sPrnn2Dt4/0o7j3uVL2lYk+gTQMAd7I5y8fGqdRx8TCL5VgCIZ\niSIYWyzvKrAQqsMofzGOUpiEBWnsekhlJ/N1f4X+DCjXQQNWOaFQMCIOIPKh\nbQurVwO1LaHdhE0dKK8vAr9Hut11NbfwGNkdcfU9FWqDE/9jQqs61MHxh/Gs\nBDlugdpVFgRs6JVzXgV6T8QvKjafdwQj1PY+Sw3FAPO4w4IIYweorhvLpYl6\nOAIAZc9XOz88t6lWiYKNkLZhckuruSMpc/YmDOTU699F9CN0TVKcUP7hXzjD\nmIC6\r\n=xxKj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1a6a8bc529062b0303c0df830b36d3110a389f4d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3e4c6dca1.0","@material/base":"12.0.0-canary.3e4c6dca1.0","@material/shape":"12.0.0-canary.3e4c6dca1.0","@material/theme":"12.0.0-canary.3e4c6dca1.0","@material/floating-label":"12.0.0-canary.3e4c6dca1.0","@material/feature-targeting":"12.0.0-canary.3e4c6dca1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.3e4c6dca1.0_1626141141811_0.09833738313633233","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/notched-outline","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02cd8331f05ac3e6c186b98942d12b84779f4f3a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.ea77795b1.0.tgz","fileCount":34,"integrity":"sha512-uw+uKs7+BS0iPfe+JAMAWetki1pWPgaG57sPhPYxLu1NXjNylSPCTMEIj5g4oL8fg9XI1KPw5yKTnaRKy5Bd4w==","signatures":[{"sig":"MEQCICh5kbOQequBwF8QFAoP+jeiovJsEOoSesEMKnyTvRtHAiAnniMnSaXhCsyF1hT9b5D9xZez3pqRhjpxinSWAfKuLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bY+CRA9TVsSAnZWagAAxmcP/1TlPzLjjj4TDXSh5Djd\n8OH5MHSaVGcAPH2RBzVJ43yh41YsIsrQs6rjAkW0hMfKXdpcFhzA8XgHZ2Qc\njdfFXp/7+t5XH8mz7AG55ucBlr3yR3+y26jYWlxKG0wsF9Ls6dMxjSEYs1E8\n0wbci6/B4fRCBilh2oKNQYYbooVbr1Ab16DD8eLkHEjfn7Qe54cJ1UICoR73\nnVuunZvhxvncy3Yo7OZulTHi7eoLIy+Bk6QhSlM2nAHV+2xYcb6Ge+j/1M8F\nRnRtLv/ZNms1sARkusB5uI0mhDqHr14uB2tFvxFc6HEvrjkwdJcGfRIxaSab\nXCBNEbK6wcE3zkkEP0qS0jLYuPBYEpyCtAO3pUrzIGWkCNyXdXESpOpnkOZZ\nRQq+nlybdVNomg40YYQPza0+U2ljY4Kj1OSPZoCmySCGgzvzRjo6wgZx5mGa\nkRuYK8gNTYDAxxmKjwbTNBGfuJz+oxqL+kBo0W1ElFs+tbc6Va+PNSmoPx1E\nRyNgGlPCmWHJO5FZ7nCMq4GhC242jfQ56OA1BEpqKISXmmxHphM43RWlHcBp\n5OvFODGDERDg6GmvrIvlKhbrzS4NT/kBL8GL1zxsWY+yKTQMdklXRyHPgxyu\nbf+bogACgo1XTLfUNqNO6UsYpT67C9Gyd5HFSOLagOK6VJwwbubGrEUuCAE2\nutVJ\r\n=Us5j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"830444e6567decdb85bd9b22a92d5f85b103f107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ea77795b1.0","@material/base":"12.0.0-canary.ea77795b1.0","@material/shape":"12.0.0-canary.ea77795b1.0","@material/theme":"12.0.0-canary.ea77795b1.0","@material/floating-label":"12.0.0-canary.ea77795b1.0","@material/feature-targeting":"12.0.0-canary.ea77795b1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.ea77795b1.0_1626191421559_0.6061177949677281","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/notched-outline","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.15a179fad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bf9bf54e25c1dce77b068599218cb4e17bca802","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.15a179fad.0.tgz","fileCount":34,"integrity":"sha512-Tbp+lbThpXGC4LUWRsOkfMcQoxJ1htu+8BPN3oJNCqcaEjI+Otct3vuzrcE3QTq7x+rFP+rGddiytRquxG5D0Q==","signatures":[{"sig":"MEQCIBmAbX1x8nbiLG/puXG+tC2zEgxejou0O9oOCBjMioUXAiA5lSVFerVJvRkfETqhAH9O/Fq090StOQ/VotxqMW/+3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dciCRA9TVsSAnZWagAAl40P/0gl9GWRdi8didD9T39o\nPNTw2UdvOpFrOk7xIsn7CyKmhPA38wiy1a6m6HNtTl4HZbmYguJdCZ8hF9hb\nK7oja8tlB8/Gu7p3HuJViXoJfOZJYPSgKTuGohN4QGqTz3A7YjscW22t67i4\ntx4BIBUCuteX05MIMwBUDxwZC1/SMes6MG10U/Yi4lMmPpMEu03VsKq0LHwI\nCIVVAjwaBhiWf8KvI0YEC3WpKTr4IgE/VpSo1okhkLA7dfoNOtG0gljEwO3z\ntrYKEKcoQjMI/QeT+Hflpc97ysxyyq69p40ZHi6y0nnjlcGkQiPGr5nH/Ung\nWi18hQ/zGxbzkGLQfgbQCL3B9GuHjukvzRm70KedgsxgcZPKiqg+AoRSxDgJ\nLygTGDufMBXXru1/DcnNFDiZsde+WdC5/q09rymQP/CakxEdLXSHXapbcWUt\n3Z7KXLbNs67EYVd45S3Ss/AVzCSTRZz43dy48CgbxtQYOvHkXFO4x2QnhtfM\nKnRnpAJL6xwsI+9cN90gotmHFqse9yhfyzDfdrasMasxplVzYfSE77qU1uYB\nYnSASZX/HNi5gWpIzPjZkpMRvY8DQahG5vONeVMkEdweLSeSM6UOakQiNsg5\nZGlJuT/v2LNxMJPoN1DYKAB0/9pLnV8V7Xj/nOrCuR8Dnk0nkZRo15itjNHH\nhvK7\r\n=xnHR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"eb659691c3a77be825ea082c434c0b24c53cd610","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.15a179fad.0","@material/base":"12.0.0-canary.15a179fad.0","@material/shape":"12.0.0-canary.15a179fad.0","@material/theme":"12.0.0-canary.15a179fad.0","@material/floating-label":"12.0.0-canary.15a179fad.0","@material/feature-targeting":"12.0.0-canary.15a179fad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.15a179fad.0_1626199842033_0.6274131912068761","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/notched-outline","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad9b0d117da66234e531050584d5da371dac4968","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.c73142a1b.0.tgz","fileCount":34,"integrity":"sha512-LqBg9TRnMiobTloHEuv3sCsCbHtcsOnh7wmAlFqp3m6gPOsTHwt6moOIcmP5wKEbWR2+kTjB+cdkWFu7tjmseg==","signatures":[{"sig":"MEQCICazFHHsjuKQhb6fO09i3JUGoS1lKrYZnJ1cQw7A1MfZAiAjfwUqWI/smQPBHPiQzIKbC954sppbCmpDXwpJ/2KI/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d87CRA9TVsSAnZWagAA/xUP/0k2T9j4IcuZFc+bb+Wz\nOe9pR0hDUIPW7IBa0xZzU8QYtq41tR9M+Pp44rpPtTSKv3xI4GLZWAjp0VQg\ntZ4UosHI/4aAq2Zy8eHpKLpB28U8ccO0p2glOfd4CZuQ6pD0MmNCWqVr/+kr\ndQAkZo1py9rYFRwn6LHSoIZeYha/mHipOaNiXwOf0LUSjwUZ/FopcuSAC2q1\nq3Mf+ECx9icL73zv0t2Ox5r5bx9Y4onY7rMWEJb6g3B7LLWovRo/bh8wWB7S\nQNfMk7NZHJGyhT4ag1VArgDEJWxcgHkYmxzExgkcUyalQRwf/0gMjTMtDNWC\nE/lTBjXk9mrtOnWnSgwvRK30CbUQ9I7AR0lZnPaFEnPeaSJUglKBgEsxCVQd\nsvh9TTX6UcM29kuOxmPXG82/kH3Yo/38yRUwFslICGN4y0YhQcCpKop2j8jG\nUAjLwBmzA8sFSF4BFqSoOpr5qpTnf1JE0V1GMrms/jS/9C1Xusi3cuPUusmZ\ngLKfkeEbHSZL1E5lrzox7W6vsCnG4xcGtzFbziYmSbj3f4Y0TQYRJ3Jqhtq/\nVY7Ec7Fnd+tXWn33oiwZ/Kerr+Vtv/vL7qEGGrAOr9Z6eqEXFuhWd51QBCLp\nYcvBXdibOsl64PvHwxPH2EIe+XpLet0h5wmmvbmEPUMv1FoaYOBrEFOrtf6E\nQvi0\r\n=HRSF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"037ccc3828bb7b7c6f3375754059c10c231a6b60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c73142a1b.0","@material/base":"12.0.0-canary.c73142a1b.0","@material/shape":"12.0.0-canary.c73142a1b.0","@material/theme":"12.0.0-canary.c73142a1b.0","@material/floating-label":"12.0.0-canary.c73142a1b.0","@material/feature-targeting":"12.0.0-canary.c73142a1b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.c73142a1b.0_1626201915379_0.7149012827036592","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/notched-outline","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.d923db73a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68282b5b150e9ca14f29ed61fc21e52fc933e465","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.d923db73a.0.tgz","fileCount":34,"integrity":"sha512-yH8x+Z1uFfwW2z8SYCnTY3DW6iiDf5cz4MvxS1QukLV2w5CJkUzCSDKhdGGXFTuVaZYmzH+UvAty1lU+dC28+Q==","signatures":[{"sig":"MEQCIFmmiJJ6QQ8At1kyaU9K51nYUt/NS9jth6qx66g3cqd3AiAr0ZFqZqDCuU70zSUH72WHwmLBVqJWoKRp0w+xXM26Ug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f2oCRA9TVsSAnZWagAAUJwP/19JpzesrC04INbo3V5C\ncORIR3I9cSMUmwiynFreqekm9A1rZrhUuC3uz+aq1Cljl1tv1zNIWQpcJ+of\nQ8YU89f4k7DyhWbfJQLJsWGlawFJr38ySeTtwkTAp43rByLupn0QbpjTpgcZ\nqKHnNjhdltJcuVUPO8nKmXkCG2Iz7MMJi4tGXUjoDc+kjZLb/XQkQkbDWyeu\nkuiBY/s9BXbYE8hZqXWuKnv5ybqTS1y//2+t0YD3M8QLsNj5pYWH3ItRIHeJ\nvsWDeKQmkI6xPQsezQb+nwXFsaOU0hcfxTNlrYSgC6s3WjSKiZv3FZr72qXI\nsi9P1E9Q/MEMHgBOJn2DW9zAP2S0UDkeGFRksIJDgWuxnAqDreHn8kj27d9m\njmoxrAcZPdopQdo29ZvDI1SdP9hB9Yo45GCtlHC4ullSCoiTdODTIKKzLJxI\nZTO2Hfid0Mlsj69Asyb67YfK0ll0BWFVLT2N9/SgkCKvA09xFPDEmDv4GGl2\nHJTlrm3qfLh/B/jUKp3YeloLPFMrfUZ7jjMU4QVfC84W59LVr0XYf47/EPP8\ndQsT/9GrATG6/Vff4rcko8zYNiwqIkD1vjXciKF9qR1HnDPF11MhmwC09z78\n9Og2v1zrvMlCuBef6PTj9vEdgqcoSBU8z58nztbTQxBDUXtU5U6dk7llxB7Z\nANJT\r\n=G5lh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ae010eec116ad324d7e442d7ffac5c8ddcb9edf6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d923db73a.0","@material/base":"12.0.0-canary.d923db73a.0","@material/shape":"12.0.0-canary.d923db73a.0","@material/theme":"12.0.0-canary.d923db73a.0","@material/floating-label":"12.0.0-canary.d923db73a.0","@material/feature-targeting":"12.0.0-canary.d923db73a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.d923db73a.0_1626209704492_0.9309087106484013","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/notched-outline","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b01a1d05893e65a5a2c0a12fe6d9e7ac5c99f6c4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.22d29cbb4.0.tgz","fileCount":34,"integrity":"sha512-LgVwQri2sI/EnAbSjyyzhifjcBKpYO48oy6HyRg6Cq/ZxOgNv3u/VG4fE3ToyNLe8pMPkfQsn2g8czuZoRYwxg==","signatures":[{"sig":"MEUCIQCXoP39CmEztF90KD/wVaDgqsIpcsZNsjOxD/456yQoJwIgNZ+Yv2tuZscobhc6KjwHf2VMikK4zWMc66nOUvLuqz0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hkGCRA9TVsSAnZWagAAeQkP/03l7tD8b6JUtQ2/s+ns\nFReftiqP5QnZy/oFQcVff1qhT/kLV/jcl0zmlQ8NHiuY9LIUN61g/sWW7jtt\nlS7az5JjSVGzJ2QHtBqPvYd94aXWEX4dh6vCDPCBklM4v7rwCoQz4PJljQIH\nRSIq5CxI7JzGRUHar0pKCryLPtqawWgigfos6aCRmdkIze/VZBnBRVPP+GuV\nQrfheKhC3raAofEfk3dVhgBaUbtzkTyrVOGFwgMvrHJdGHgNjhMftdEfEHZd\nMznJWJuOuFILg94BxsfhptPHXYtInNv04Ts8mESV1iWL48EJjsRTu1oRIM8I\nOMPd/jCZypH2q/VF4sJKvk0A80v/M2y7W4ntuxsuXcT6p97b1Rxt5u4hMcB5\nwC4QsfV/Ios2wECMuGMO6sohx+KQo4yKb/MM1DmS5U3wSHBNjA6p678sQOxW\n1zRGLLA6xIucCDHPst4+jGvkAR1xIPYSOPowsPi0Web08QFdqGXmbTtgPKN+\nx3cq6t9ZKFxY6lp6jabC0++dwlK6olm48oA/MeoTtvBD4ZBdDODNKQYgFL8/\n3n51Yqq4CNYIUkZbfdCZJePAF05g3VclJXuI9Zyvzwslo7GqmNasOiIoJfSR\ndlQ11bFwlfz9S106MkudsDuatynDHJlfKcqAH553p8V3g+wPzM9qRyXTMzc1\n6+DM\r\n=xb/G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b37054450964af349924b81bae43ec6b3beb2808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.22d29cbb4.0","@material/base":"12.0.0-canary.22d29cbb4.0","@material/shape":"12.0.0-canary.22d29cbb4.0","@material/theme":"12.0.0-canary.22d29cbb4.0","@material/floating-label":"12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.22d29cbb4.0_1626216710472_0.149672739860776","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/notched-outline","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.2749604bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"845915ff4860d89e616159424a1c0237eefbb90f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.2749604bc.0.tgz","fileCount":34,"integrity":"sha512-Y3iMDETlrWysUTnaRXWoBcGA9nsM4s4DdVyxLo3pTWX000M1VswhP9/bEdOKL2QmYZ2ExE9meq3yeTTCehD7rg==","signatures":[{"sig":"MEQCIBb4dI2pzgDdgxF7BHuXoCBBI2wuqK4bpRLgTrmLpxO5AiAQ+lUUPR+b5YVIDROjccv65r4F9yiHArER6oDmZKik4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w+LCRA9TVsSAnZWagAAt6oP/A+zJTvoCt+FJ4yx78Li\nlShD5IpJPqpljIYFGfnxi8+pOzkcW5LIPLFMgKtwGp47QLk9lOazWiRY5Pjh\nVOd6cKP4mt900CtG3SdeWLl0V+ltfF8pTa8jnQOhGJtCgYAuXMX/5bJuffzU\nkPjNYcs0NVsE6T69ygSZCF3wgs0CDX8j4nhQfGoCE03w5JGmRWK57vp6MuhF\nnSHncH6mjzCgXmquFyFhC+oDfEnlUMi3Z6P9mBvyL2z6yecmshcIebrpIFVy\nEI3Jrv5+gQZXd4bIT8wZxeb4XaLfrFSKBXf635jLgUALBb9+yxJZRNk+yuOm\nmo3KrJWTMIyES8KJQzDWYu4mN67d07wTVb8gFWtJn/DjvueW1PVYK1uR1G9C\nbprIdcQNrjVLsRMnrVpwKrLSg2FVGDoJhcLcBj/dlSXbeIXu06auHnMHcKh6\n3EpQ2d+D0BR90YkuzYsoUCpkJZVUkMsKqkZXnFZ7F6o7OE4K5g6FtnHQm7BG\nzKPdYueP7se8OZppBD6Gi0Em0UMY0gG6hJQ51WZDMfXTEo4KiFXiqvDisEFq\nQH1iK4xDOx8b+hdSrZltwguYsaDx7vc11YaD0551pEVauxPyk9BX8l6hRDHM\nw7GnkDgC8aERrmtTfyCACgYYUiyApTY01Lm/WXdZH3dwIvvMFTF6IjNIeoUK\nEdQ3\r\n=w7zY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"58ae4287239fcccbe4c5dd9259164a0660c76f85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2749604bc.0","@material/base":"12.0.0-canary.2749604bc.0","@material/shape":"12.0.0-canary.2749604bc.0","@material/theme":"12.0.0-canary.2749604bc.0","@material/floating-label":"12.0.0-canary.2749604bc.0","@material/feature-targeting":"12.0.0-canary.2749604bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.2749604bc.0_1626279818942_0.19090744126687786","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/notched-outline","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1bb77e65c7bdfd0453492384a1af110cb31aa81","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.e1703bed9.0.tgz","fileCount":34,"integrity":"sha512-XYr43JK+hoMAKP5frg+RcdWcA8WoTzPHkbmBU6E8EV8Xw6vl85J1dhn/KUVmOSyrf/Vh1WrskJAkowwRUOOP2g==","signatures":[{"sig":"MEUCIGFaUilM9CqteGM9jZ/CsGXfw0slmAJi5c2oXFR1j9tRAiEAvD+UcT3FBWR5Vj+SLMF/QpR0g9j83vU1k+CGiVPS2w0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71vdCRA9TVsSAnZWagAAw8sP/0WKkayTPFZzfZIUzdu4\nSaBAM31wajWRsq3hDaIEiMHgwfaG9XbNK9acLwa6UqXB7aKEN9EiDJFSawxG\n3tDXZoC/s5BY7tuODFdy9KYuOenjf8axNbBaiQh5sZCH5U0bXZ9ZYwbcyco3\nWQ13KgQhlrf5SvfphUhlpRT2mUsqE4Xo1YFS/YHDlwu2M44Qot+hMolSEAQj\nrEZFlHiRjYsfgn5+GAQQ5ZMqeDEro9C84Y7uP6upYbj/hpnUrLKBm2vVyRYM\nqBh33nq3EoSl7mVSw0YKHlVeOd5r9rilwGdgpN5mfyC2gmBEY8hRi52Hg8gu\n4emp/MQNWMjFFuwOHUzFpQLNBJMER/afYHA/KTsPnE2TtmsAUj2DmCPy4LLW\netkNKQPOahL6dG5RGhbBnXGidc4L8LcFfjify4T9UN7yGyWfsHwNLNs2Nejn\n8EzTA3wu/un3W4xNfLUaqLmX8Z99CDPzsXT8zjNSky4zHaVJD7b5wd9PipkN\no3ezQ1IhgjmxkugyOKuj4hDgZE8faC8uUidncFFpC4elBlv8ENYXbhNwxbaU\nOqatSrK7W3UBAq0AUXNxDOMhmbKERJ7+tNDBF7fjSG2zJaFXgZurz4ZW7Jq0\njo7/5cSMHwwqfi4tt3hPr1QNc50XqMkZO2isQ1XsB+jKYDQK3xYqvYCIW7L/\nFLKt\r\n=6V2N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ca9075f939dcacc82290fe2b01214639958bde93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e1703bed9.0","@material/base":"12.0.0-canary.e1703bed9.0","@material/shape":"12.0.0-canary.e1703bed9.0","@material/theme":"12.0.0-canary.e1703bed9.0","@material/floating-label":"12.0.0-canary.e1703bed9.0","@material/feature-targeting":"12.0.0-canary.e1703bed9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.e1703bed9.0_1626299356953_0.6092556723466791","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/notched-outline","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7381fe47646b42f978f2f1e0aaec33a5c4a3f514","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.de48eff0d.0.tgz","fileCount":34,"integrity":"sha512-XqNKNZSYjbUlQAzuRyjYfCQmsMF3l626RWtaU3vewNcKqgKwwlCbO4ypVmhD0hCb/65iipN4M4WRvh4PeBTPSQ==","signatures":[{"sig":"MEQCIHsn020eEe6BtGE5jQ1x9Jujb91sIDrEzguWt38URLQ0AiBTIltqozEQxsug3+1qzWhKNZwGj0iUotCcn4eUmrILVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GvACRA9TVsSAnZWagAANZoP/RXmOYDlKzj2+/8WAAAO\n9tP0Sbj0PgidGmjbGJHtQGQeCHwGKyQExHFtDaw7PQYzWddjDL0c5cosu3OM\nGemK92Vs2zOASemCHOohKZt/OHdf8uLlF4Tilj2R7iAWxLPenN+oaYXvmiKS\nuA/oz8UIYFWS+Hbxp/REbZboLJN6PlL+izfUhITyeoCZ8q/F9R4ny/dQ7snC\nxYyaY3VIY2dkeAzJ/uH0Zf5Yi4rKcYTPE4zygmVMUFisq3Y8JnzhNhHHWeOy\ni7DuCsCgI/AmKPo2wKjhvp4XadXrfoF8thIEomh+LGmMPuetUR5zD75l3wcX\n6iD9HBqTRCiQVPor1HNwNtsNZLhpOKWiNksNQRNFKmgzcuB62h5zO2GaesqP\nzK37T6oGjIpc3+iFyzReDJ6DsQ1s1D5aK8Zg/yrilfkbqR0jxi1s5HCFJ1wy\nSKq+EUiHMDvotDdGWpIBkD5UecERSOrWCwqTwL47nEMandLOJat4yELBFmid\nqQcIPrlp0S8vpd9t9x09hrixWzWkzpa3Dae4rdEYZcjaaH+welGqmbf6eYYI\ndmeMSYugs+aINNHZoM7l428avhKJuLCDTtL0QSr+3kEWS/Xmj1qVHMxPCpZW\nSig/tm7X/LNQ6FX8zKBrut/PeAiHPSQU95yaGFebkYXZMPXt5pXH2htQZHL4\nZrzf\r\n=tKGF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"121530dfc073c7b24dc1cb75732a0d4c0e6a3f28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.de48eff0d.0","@material/base":"12.0.0-canary.de48eff0d.0","@material/shape":"12.0.0-canary.de48eff0d.0","@material/theme":"12.0.0-canary.de48eff0d.0","@material/floating-label":"12.0.0-canary.de48eff0d.0","@material/feature-targeting":"12.0.0-canary.de48eff0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.de48eff0d.0_1626368960673_0.4666071134736671","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/notched-outline","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"368957c033114baa0a18c20c0eb953f01832413f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.4f060adc5.0.tgz","fileCount":34,"integrity":"sha512-I98QtodbvkgfxntEORkTjC4X8As4oBQXSlqSeFtuafkCcMlXfA/a0t37ZZp/yUYczbD7abN9652HIakZSc0eug==","signatures":[{"sig":"MEQCICdFC+Dpbf27o0K/pSQbLEETVjdx4w5GfE8IH9Gt5F2VAiBtqwak0Swe/BiJEVQJzYIO6GLcC/c/8XOYwPGmJmavFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IsYCRA9TVsSAnZWagAAWjwP/jqkEnwidmZ70srm5iH8\n+svgS4WhFi/LAn1yjdxaPJfumuZ9k42BZCdUPs1dx75l4ZZxEMhvFFq71eRA\nYa7S2o57mM+bLTzdNa7gWip89fi08tdJmlSa1rUhRA7VxqaWZXKFMDbJMfC+\n02kbacI38d5jHE2i879wgG9J7/3LvHfe0S6ucmcT4O2vIZVGzP3Hcg1uuRXR\nxuEpqtVEDwccTuC6TdrovTYFvWlyoQl2O80ul8Dwq26Hpo0jvBfZ3gILySM4\nDQv35qZO7DYb0gqLyyCOPxrJeQHHFcl5FXqwEgiss7rGGCGls+NQSjJ5ieHi\nqJ+vWyjM/zfV3r4mD/EURg6X2YpfUftuPWk/5e1vCarbOkIbod+p0pMSj3yr\nl0zOeyuXw7c6MsNd+UtGoBt8XsDqo/omoj10Yb3F71QB3VXVN8vFGtZszpi9\nSigkG4O+rJgmTiH23LHr+z9TInGfLJfTDBS7bCAGsRlra8K9ErennzrUuiuh\nCzEHJUEhfZUtyVmE4EnvhLMo1DnMdEqEbrpxF+ae1l0q8/IhlPSbzCaj7FWp\nt8NRRYGUYCftc9eJ+XOpDhFZw0mze+CB2i/Z3vyLFdvM+mycDG3X7qIB9hn9\nSLUCvKh9w1dgjtSOnU+TKGISmZ+ysCo14RHFhMFXYPyPGIht055Fnkufv+Dj\noHvi\r\n=kkpI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2e70b8cd653f195a01f93c3e9928feabf39fa87e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4f060adc5.0","@material/base":"12.0.0-canary.4f060adc5.0","@material/shape":"12.0.0-canary.4f060adc5.0","@material/theme":"12.0.0-canary.4f060adc5.0","@material/floating-label":"12.0.0-canary.4f060adc5.0","@material/feature-targeting":"12.0.0-canary.4f060adc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.4f060adc5.0_1626376984030_0.6775351301193542","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/notched-outline","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"814a149a0887f11c89f4a47cede8c8fc562f02d2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.bd25779b2.0.tgz","fileCount":34,"integrity":"sha512-S2iP7UBALHOS85RiMAE2ZOek7xjHG9soqQgMhwNEa9eQDUSI4pN1gGYunjJ0wVx3YjnpR85RsLjOxgU0CA2XiQ==","signatures":[{"sig":"MEQCIFNxLHT/aYrtyBQr80De6njecudccR56B0fPonJl0AEmAiBI4NmS707uXlCSgVF+WgDYkYUAj2zSImkAsU2jNbVjow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J3uCRA9TVsSAnZWagAAjZ8QAIbmlo087xvwlBY7j/r6\nUDBUBMwvUaOe1JNQaBT35X3q4PgK+HrGU+vH1AWutpdut465C3ygh181S/Zv\nGTwqmvQWTmsYCuad+iRvXw+5cflKDnyGS0NDAMwlrFUdhVotRxVJ+JyMsGgf\ntB8qBqpdfzLUrenmnTAQNugZkM70saEwlM6xJzua8TCvXllruiIi794+Fu1r\nVwMUdJ0nltsx5x2mRmFiCMXBmJmbVt8jkeJuEybbL5M56WUcxUkc1ub1ejZ/\nzyeKx82Ygr0kiBLz3F0oNQwi5LLPmzc1vox7qKZFkUzvQMfFAcpmJeYyWSJX\nnu7XgQIZ9nFRuIHuK71NoUMmzpaXoCFYJm7YMEygfmPj5Q6x4/gtG1xDzmmY\nJnSuBoa717hZdYA6Iq2you9eyBG7XF174/dwKIeYsKVU2f06PxMeblyEOxZz\n/hqpy0RCU38IKdrWVNDRUH4BHuesY9JCgMk+Y0Qertn93e7FqZoh7J/lU86o\nW8xD70kP5W6t6tLm90jhRM2wUWfFyK409czswYKzr5bdAyzpC1qH1tyfTl1n\nNFJNE2F2u79mRzmXtUD6ah5P3y07S/zVyPmeOgC6BpDj08Mr6fnYSqPqSFWb\n3fhSyQtcX5Km7znfAQ3+AgJof0mZyUxgjiaUoLDc3L7gBCH4QNdyV3wjOOpN\nloI8\r\n=X+Lh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3ea8422325f9bc5f9a356842191da47e282aa4dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.bd25779b2.0","@material/base":"12.0.0-canary.bd25779b2.0","@material/shape":"12.0.0-canary.bd25779b2.0","@material/theme":"12.0.0-canary.bd25779b2.0","@material/floating-label":"12.0.0-canary.bd25779b2.0","@material/feature-targeting":"12.0.0-canary.bd25779b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.bd25779b2.0_1626381806526_0.5527522863279806","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/notched-outline","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c226f5a5392805f733f59d76b35213ff245f1ffa","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.9f68a932e.0.tgz","fileCount":34,"integrity":"sha512-W2uMHKFouL33c7TXwWPbHYSP1sth05c6ENS2jfp81I0+p0nLumjBczAethgvGy2EIquEdJKWiz5WUxIxcwY58Q==","signatures":[{"sig":"MEQCIG/b8ccYowk/iHIZFt4VlUSPe8PU554wDJyC61pT61PtAiAHAliZfBjHIVjB6dpoypyxZPAz34/j/6XxqjTsLfRwHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LHUCRA9TVsSAnZWagAAV2oP/Rlw70k7KByyOE6gx3Pd\nZl40q4aI4xTtIgep126YmV7nyiaix0AXJJ8AuLIXqa3hcqALMs2fKCgkB7RG\nysFgP0czqh6e96SWAqWGE9jtpXnJ1aiEItJKZ4Ht17y4RrbRu2p8ck8eKNRD\n4rmtpROOqG9/uavD4oZR71fI0DeoXJGs4eFj1Bfg+t1b7JQAWDmq80lOY5Rc\n+ebt+GRL9lPzMv7o8EkvSc7S4flTSzFjn4y6Sg2dA3hnQGlV9xdqymS6zlul\nVcX74NoioCpslLZC0trJb8Q57lnT7rD7D69gQH+C0ZGaZmXoeixLe+af1UHi\npfzxhG+7/Fv+16glGx+pma9G7ct+ZFb4JZvNiMhhPuh2d5h6DXQV4s07LwOi\n/HU7//LArikv6E/MtPDrqHBdqTi+/SwndgUjFJA8U8c5ljZTxuEoN6KRpn7L\nfcRkj6TDNDOP9Gewk6TVRkR9Q7vzty6bQiAPWJcUV2X9ijR3S+iMdR48+I3K\nHU2pbIjuR/8FG19/YnNODOgYiGJbo1QNVt7B5XU/oqCcxgcX0ALM/2FHkhgt\n8uaLla9lkZef/CZqtQy1BUulGExgszsxrLZgAske/YSlayThjgwJBUZz9x+E\nNj7xhMFr4e4W49kuYpkdyKbK4H5T1jNso7CCAcJ8YE+CxxkCQ7HoFVBRQWrq\ndvJ/\r\n=0+h2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"34b4e5801eaff79707e9f2c769df2c1a34bbdb11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.9f68a932e.0","@material/base":"12.0.0-canary.9f68a932e.0","@material/shape":"12.0.0-canary.9f68a932e.0","@material/theme":"12.0.0-canary.9f68a932e.0","@material/floating-label":"12.0.0-canary.9f68a932e.0","@material/feature-targeting":"12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.9f68a932e.0_1626386900190_0.48769799442351225","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/notched-outline","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ab7c8b501499939476982d0603043cea0a77873","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":34,"integrity":"sha512-ywbAybfZs/pbmhtusJJ1d+gIjOQJ3Qb38r42kK46vBToPsr1c/E0P8B1BtAuKMy0eSOr2ag50nCLhEya8q3BFA==","signatures":[{"sig":"MEUCIQDETrK3HAPH7SlR5Ts1uLuB42ITXca2ZX4tqH8l1IsMswIgE1bD56XWjm3Y3ulbSijSyJrrKNIPeqQ4oEsrlT7qqBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z6yCRA9TVsSAnZWagAAlHoP/i4WUHMFn/V9KPyLq0aO\nVOEgprfQT74pcKyNIJ+wAw1HZcZalFz6vmK8hgzaFj7cYfvpRRK6I5hcREdq\nHOJTZQhdzznY+hYMkGVWQ6fDWN2uV7RjlX80DdSloMDJkQjBOwxYHy85UYyp\niT0gemYGNQIBYS2PBrbUET1JqOnKP5GnGsieSMq0Msrgp4ZCaYOmOmmwQ/0S\nqRFPzA4OwHREqnt0blL9wWmxIK7c1NFNuB8XkdLvN8c72HYzJRx05o9YQV2+\n8fpb5cw3tcLJLxXS3k3eQ63aY9W0A7LO9Ccombamia4XIspTghKNaoN9T++4\nfTe4htubwRixrAT+Q5H9C0Ika6ONyqh4ugpPTtU+5f36cLAbt6jOTWVEWifp\n4uDs2WVj8FF4u+OorDwgT1L6yDm0vQZxnW8lTdmGe4Lb8LVLAhUP7MpuuuHJ\nG5BoJa7QDSEgqdLvG6ydzKjrBTk9Zio1o59MKdTnRgkySm4hknHlZn30MZJa\nxVaLOtShQTJ986VG6R5aab+Eul4yFqhenU7W4yXSOh89CliGWUeBm6Xwy/ps\n+R2RX9dWZdoHczz8CM9mXSX/BNtW4GLn1O0ctqE3k4yOVWK/4Gzl1vssi+Fs\nCzD+1Yk8wbQmck+Xi/ttVVc+PP3ZskKtFA9yIf0tM3gxVVr2V/bT531uQlOu\n3Hn/\r\n=A4as\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"89a3faf78d32cadbed38135c9ae10ab1f3c8e9a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4eecdeaf0.0","@material/base":"12.0.0-canary.4eecdeaf0.0","@material/shape":"12.0.0-canary.4eecdeaf0.0","@material/theme":"12.0.0-canary.4eecdeaf0.0","@material/floating-label":"12.0.0-canary.4eecdeaf0.0","@material/feature-targeting":"12.0.0-canary.4eecdeaf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.4eecdeaf0.0_1626447537957_0.7483548484164846","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/notched-outline","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.7239684d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0995b67318f517612e876f78180c7b4f485914c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.7239684d4.0.tgz","fileCount":34,"integrity":"sha512-zH2mT8CGjA+jIKLWPhEl2QUVL6uejVPm6fv6lHGjcEgZtecOX7NbH5mLm26fSR2ctjF8x6XqF5Fl2AU9ANjY/A==","signatures":[{"sig":"MEUCIQDBQr05vN63aTgfZJ3Ph2CyFjYeBva2DWI8npUVwTkZxwIgZkAWVbH5bBlmr6/3UTTbDJyvD08j7FL8r/UVnECTIys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8a0NCRA9TVsSAnZWagAAToYP/AzIGBc7QS5/l3eAhKH3\nIspJ98CgFM+oR3KJKDiYpgYJo+JSPNWssCRB9h2LQJt1bfmmyryROGdXT+oh\nd+jqyCaMLf9EaNt9lSrW9alFZaKgaO8BywZrYo5UQ7d2MPmW0e2A9Jrq88+M\nrijgIDRX2L3lVzjlbFMqY3GuC3PA45qANYrYFBBTZTJ3RmIodBNsKf4FXiGg\nyucPHtmbYIJsOEGlUCdNy6gIFao0CA/EX+lo/bPGKsHSNvZP5s9NdMim5ua8\nGP3RACHIgXXTH4JJq3j38VhX7w0tal03TJ1ke/uNHqyoHAMnwJYdwR+EMd/F\nhj/MeMf6oefKkTKNmdqm6ww5lTpYYERNfk4X8YCoG4ybvSbqcgzbhHrQyxcp\ne10PLOTe8LmwFnP54OOurRhvpPvzxv0wlmvYOAFLVWg1jqoKwpP9snAdpE/L\n4/oMVpXBeFuhj+cBRtUMc0VDq3J0cHcwfQqQJkQazSLM2RXVGK+t2op94pxQ\nyM8hDyI2g4Oa7FUtto26RewG8A4WqN1wNGFHkVvr2K9vZx77QzqwVifJE3sM\nS4C+C/Z49rrFQQEOQGSTAqHkQtPbgRCgO827rO2yOHq+N7785JsR9ngbSuT9\nbbOgGFLWg3buoKhtK5GMjqgTfyau+Vd1qQFLaD13c5ze81Kl9dePKJoeiwXc\nt8Im\r\n=dhLQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4b35543a488bb22a0855f6f0d00b047fa76bd623","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.7239684d4.0","@material/base":"12.0.0-canary.7239684d4.0","@material/shape":"12.0.0-canary.7239684d4.0","@material/theme":"12.0.0-canary.7239684d4.0","@material/floating-label":"12.0.0-canary.7239684d4.0","@material/feature-targeting":"12.0.0-canary.7239684d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.7239684d4.0_1626451213328_0.5403701526480773","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/notched-outline","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbb40e41ace49876f0e4d0efa94a69d693eea51f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":34,"integrity":"sha512-BjsrctALGO6FN7hIOjuG3/FuySf/OD7l1RedIcJP0pUiVuNlISh8Y3c22fH5oBwnkG3cMdV4PLd9sy8TG8lsDQ==","signatures":[{"sig":"MEQCIHSHTBfeC3ARRzXt0k+Ty8f5kIvKlQj+CZcpqGxN16rfAiAxTwmCqyMyMKAQIzq6eEOB8/upTu+flPDknBvF2QJ5Vg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bCOCRA9TVsSAnZWagAANzkP/1itC5zL2s2y2hmL3N65\ntdLvJ4bCdiZgKEBpMZ3raOob4hvf+FNgrjIu6WjU0TFim0WUszJdXPNpZCVI\nnJg5ufO8hhBfkRa3pZ7SgOGNY4LI0R2OkbAiuGC7XoI0r9ChyGM1OSco5Un2\noUeIbrEnSH2MH1bxGzSwCzVTvz1x7rIXkihYuAWIz7EzAXjN2/i+6FMDwzhU\nH+ix73rwwAzGVg5yZb82lcj5XS8hI44nkjef6vea4eQ6ZK2u++CZmNctfuGd\nO7EjHo46F4VLS4B42Rq+15rilpi+gm38Pl6OUV9zuz3FEaPWQCy/MK0uS+Sr\nVfIPtMz8xXB57CrjP3ZNiwT7aTqQege4QzEw5hFtum4NrpvTxx9dMp1uSDD/\njc6M/SfVH0phwLiSwI6R0je3KRa+yvHtNSMcBfETJnOullHmlUjgJVN5R4+o\nkd9OGTSoo4sDu1XHfa5FuKqc7fSfTadAnOvY+cRhzA694yQaNzIopZ3OWOP4\nzYU4JFhuNGIHc3+E23gdXJ3qAYSy0X1omeGFmQZ0IswE4VBn+xn6+cU6YO0P\nBjSjeYL+VRuxOEESqt4p1Bd9M2HuU9GgAaglK9o4RleOdwcP3mj8WZ1eezv5\niV9Sv2qCT9QROabbBVgwwP0Vqdtb7Ur7p+WpoX+YriEGB/LI6T/UYzMF1iYk\n1S5K\r\n=aK0/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ef327d93f5a591e88ce5af94a2bb181d97b58472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d5f1f7c72.0","@material/base":"12.0.0-canary.d5f1f7c72.0","@material/shape":"12.0.0-canary.d5f1f7c72.0","@material/theme":"12.0.0-canary.d5f1f7c72.0","@material/floating-label":"12.0.0-canary.d5f1f7c72.0","@material/feature-targeting":"12.0.0-canary.d5f1f7c72.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.d5f1f7c72.0_1626452109909_0.612082121333368","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/notched-outline","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61e2051a5a523d97dba9f653b74b81a70e5881b4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.4d95812f9.0.tgz","fileCount":34,"integrity":"sha512-8dD1Nr1HRLx4C67E1fG30js9J4JNyO4XSC8dBapo5DTUmZ6NAe+b9n/jq8Que2Ci1Zf5girAl1wcGkAbjG46NA==","signatures":[{"sig":"MEUCIQC7VBRckchxcvqz2kNAimkKjRLFNt/kNf6tUrmqrjFUmwIgXHBMq0cil6NdPU6zQN9J1WxjakvY7izNLDPCZmx0xCc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eGUCRA9TVsSAnZWagAA8ycP/0KUZrtoL2LDT1ZSsCLN\n+bLJVjX6lqU+cm/7/pQzb6K2DbTCU798zqD8wOp8Bj6zI/Pe93LPFfzk59b1\n++icxkKS45OWLeebDV9SYFDxVqo71hO/s/Kzzf0pYWWWqCsjihtP7yFXyzwJ\ngAaYOrvp1F9sHHIs//ojlMbQ/mwnIB+jaP/ni6SQ7NYSRhvwAIVogcYp0UYX\npp/ehO4q4t/s63eloTwz4ipNTI55z7yW2ymJZkHzYyzu+dvPaGiNeqTrRiq6\n4rIN+GB2IP1pu+Hgf+hhgMNNIoA4QQYakSV+dR94SFON9kxenUu+S6DRcrf/\n2SK4MnA/sxZDniD0FPoUTQXX6BpEME8U2+jKyBns8Fd+y9BzEM7y+gBU+8B0\nsVDcZfV3c5+WnUAUWTz0uMQMSdOFzBuOkGF7p4biXFxZfPWXBfPUnFLwm93E\naRf3gOejZ4WDcgB+bcSyjDwk/jauA3rATGxgyH1aWj6H7jCDNx96w2SDIxvq\npHCmG0dOhKlrblhWYKbZRPVQKmP4m7kMYI5CIIl8zU9RoIg+rEJfpGfoqKBp\nkk4BPsHvQtAaLRqwGvbksV4TK9byJ9MKJEYIK8DC6+WudjGhKhg/AsUcM/do\nmO3snGVD8aTY+55kc0wYvoqC1INh8nUiF5smqN4F09PCa3iweaGy3Kojl7kP\nYuur\r\n=ZPdG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"34bd44726ccda77331fa29afdc1d5ab7ff0879af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4d95812f9.0","@material/base":"12.0.0-canary.4d95812f9.0","@material/shape":"12.0.0-canary.4d95812f9.0","@material/theme":"12.0.0-canary.4d95812f9.0","@material/floating-label":"12.0.0-canary.4d95812f9.0","@material/feature-targeting":"12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.4d95812f9.0_1626464659988_0.218792899645041","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/notched-outline","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86cd545ae43ad618122bdbe2d7c87a2bf70652aa","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.38d1846cc.0.tgz","fileCount":34,"integrity":"sha512-2rYUMjIkSZ/HvEhOYeH6+kVDlwmWlpdU4qDmPWA8z84mUcWjRcWRCKqngeHhkoisFbsMcNGdpLYRl2vWySIH0Q==","signatures":[{"sig":"MEYCIQCkDEqJySER/qcxVEJpnoqHWdqumo5OmYEn+0dGtf7sbQIhAKHZSn+8cUI9rWlJsUrF+Hyk2CzRtpJXdSPION/nIClp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9ce/CRA9TVsSAnZWagAAGMYQAKL/JaZMo3Yq7tdeJmll\nj7cNqbIDvFfzxFV7sNoGat2qs8794OtAu5Ub75R9hEM9ayG1xijgJfsD6GFD\nma1anaDnGl9bdVBiKX4v65ePqjkwaDmOt/0sMXlUph4vz8EItbM5CYL518wK\nEFg2z9dkxMOWTYXQBgkGASkGTSoOHEvuAmUJ0wixLG7xyRnVMlsRRZYpRzsC\nvifFPFQ7N8nGb+OiJX6TVinXZrZD3G1ym854QfstN7mz6pnReuU0ycxtfQPb\nqOQQvSBzmzWS0xozfDrbntw9yzCgB6/vk9zzC+cbdpbNL9iLuUsXKdJjoIjQ\niOit3fleKwLfTwCjIGZ3QX97TGcL5msvub/8yetP0JjjLkwjHRDxhsfyYGE3\nPbBZV0zf/Gxc3HfzMywTWc7b1+QySUH6jLy7gQmFieLXx+gcIg8qlHDezmqH\nJyMORgh6qNFEX4939alHcLmZUGnr0nOiA2qzHhvUrXEVA5bgmA0wvcv11wqC\nW8atcWWNL7WyJlHRSB62FWOsPsJt0jOfznN4TiE2Pte9bxaGuMoMvAo4CD4c\nG8bcK1nGWL3QzsIcQFlBUKqRv4cOGOi4UxoIxC8QmElq6Yndm9Wn19ecW/mr\nADdaIw96ucN4jGJqGCEtiv+mLENNOGXrpUkuC7NaCSuURYZcNy/fIlgYP/nB\nh2ld\r\n=4Jlq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"77a8b2af56ebd184dae02df9198e75b16f4db385","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.38d1846cc.0","@material/base":"12.0.0-canary.38d1846cc.0","@material/shape":"12.0.0-canary.38d1846cc.0","@material/theme":"12.0.0-canary.38d1846cc.0","@material/floating-label":"12.0.0-canary.38d1846cc.0","@material/feature-targeting":"12.0.0-canary.38d1846cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.38d1846cc.0_1626720191684_0.9912681753459969","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/notched-outline","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bbe10d20b17a74018a5a3c00411fc1931f58c47","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.3f691eccf.0.tgz","fileCount":34,"integrity":"sha512-cIg+ZhP17H1yixVX1ViZ2ESjpbbCId7qtlfGk2m/QPNfnM2ur/D1+XyH83/BY0v3UWpquZKEGRQU7w7KkXGCGQ==","signatures":[{"sig":"MEYCIQC5Mak8P53v7Lr37BbsVa0qBlr1TZAqYsokNQq1PVCEUwIhAPi0LWZymrzpYRL0ZAreSCOv0IPxdgeuFVvqmyyH5z7W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vVmCRA9TVsSAnZWagAAs9wP/jp1zILQrLOhufxTsfy9\nyWf5nNe3trZCIiMpb5x+Qwg8aO1eVk8t5R1sHKVthl7kblLJgfDZvU5Ng0Nu\nsHD0k0CCE7G+gsMW4ARvdWo1m7S2NpWRgyCChRwp/Mh8X8mvOtNE2+4GspXI\nZcfXCEDL9vg4Lz4t0xJ65sr8LLkzjEFfl20Fznj/tpV+NSt/VhYYxQNev22R\n/KRmJ73QUbzfP8GtopZ0vkVcOnrvDEMuro3l0bKBlk6uETT8VLqKP1BxdsVR\nechNmnNhtw841gJbtvG1L71RVnfd7zauHnouTNKDv3q/YrYuS1fmS4zgEjLL\nrSGkEzoSnCg4VR7NU4e9vwbToAgCai3AC2d66ERyqPLZrAc7eiKgTUbLnxDy\nOiJNEQIJFV2fGdDMH1jqzZkH3KkS4GBBThWtDqEbt3Q10RQc/mYpYF9ZN5v0\neeOeRVik994QCKpBoiM9XhlHmn9eDvCnwWLUZURgUZbsukW/Xr9WUdsRbOKE\nnhhy3Lm3AfGlceVdOu3EcpY0PPXQv9uKlGjMgPr6A8pZlRDFH4MOLgDcmDqt\nflxApSyMVb6Woyx3WYjL++bnhVnyLuoWnHdQz/9/fBDWaXJ5CmvhODaWiC19\nQaYg3kPnoJU1pJoB2M0Hw3ROPa+t+R/YagrtSF2vnRQ7tKBr9Oi2X9VsYAGj\nPGpP\r\n=SfAt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"58271219b83ef8db16c68153037e69345831b4cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3f691eccf.0","@material/base":"12.0.0-canary.3f691eccf.0","@material/shape":"12.0.0-canary.3f691eccf.0","@material/theme":"12.0.0-canary.3f691eccf.0","@material/floating-label":"12.0.0-canary.3f691eccf.0","@material/feature-targeting":"12.0.0-canary.3f691eccf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.3f691eccf.0_1626797413847_0.4989822051024566","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/notched-outline","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e123d4c769fede2da2173956a4addab95769fb98","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":34,"integrity":"sha512-OMCilKAmFnS/6jRe+SXDEj+FG4/6kNvSUFtH/JDSaJLTJik2y0ZZHqaUp0BXEyxs/Mrac3VQi7twl+Hl2zxsrA==","signatures":[{"sig":"MEUCIQCmlX+Sw5WxjqgPTSttYF9bqIKhSJePsOJAUKBQCaUKMwIgaVj2ASC8IO12dWsv0dgv7RuRfrCoZY6FBr67a1e3kno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wCNCRA9TVsSAnZWagAANbkP/0DjFgl+mis/X4J5jm9+\nXeTC0wh2x5O3kRR4NSvgyFp3seneYiUZl9/lPYpfjPJxzLHo7dFJD+igTCoR\nUOMVcPs4MYMnbt+hucNzLB0OrYVC5keYZmOL7SxPVihcacc5wt6or6KcYLdW\nWPwInTQNCq27zlGX+gTyOX+Hq+cfq6zyH/m9RyBSpeF9ww/YnzB+cThUFK+l\nF3DVZdYkXZNgImihMHfKO7Q2zBQDTClmyxlA7ywWRTuzdqAd/+1UDxbZ/LEw\n7GYg8zqf0YQWo+zknUevebCtaK2oCGzaKCFQlhdaBNQA5/0S8ZRe0a+mtWza\n7DLlbtZVmY74COX2QrQEMnK5lwqM+n5GyDOzq/Z2H0JUXOTXykK68h4NDjN3\nL0aMp5pMhhjAxx3o0E93vrV4uMXdrGkLDyHu6Dkv9YBWT8F1omr5nybcuuV7\n/vTHfoV2bICndzjHywC5xsc4ObZL7F2bsa81MKRgZJ88xCI3Uzpc2mOM/s4u\nkWZNzjHsSlBNgrtWU/esV6zB6DwcAHs3f/hm4Y1UCvbvO59Ad/l5ImObcDCZ\n17gcceXA/oHvSzfdDfyAm2Nc6VORtbW7mGew+l6wdxCxd163MWGSmvzpwZxW\nWpD5LSgPUOgm6SK4kg7BLQPGDpSzRX0LaSDtEhbxXzMu3c5n8NuOzy0hvgaa\n3K81\r\n=bRYd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b37a38f7ce62c0d87ebbb4bafa0f1fb02aedb050","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ebb5c73bb.0","@material/base":"12.0.0-canary.ebb5c73bb.0","@material/shape":"12.0.0-canary.ebb5c73bb.0","@material/theme":"12.0.0-canary.ebb5c73bb.0","@material/floating-label":"12.0.0-canary.ebb5c73bb.0","@material/feature-targeting":"12.0.0-canary.ebb5c73bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.ebb5c73bb.0_1626800269624_0.9225688056730799","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/notched-outline","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4df13eeba7682586a70c18c25c58efa274535281","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-nightly.778a0e8a.0.tgz","fileCount":34,"integrity":"sha512-TpbGx34poGplOaRtS+7C/UMiIwqYz0UjQOz0WMVswqT36AuunG62HWo0m0f8wZnaPNk+s7Oye6srv2J436IkDw==","signatures":[{"sig":"MEYCIQDbH7jkR7l4jNVMoRF0VOHM3qG30owt5NhARQduReWUnQIhAId6KankIyrRDk2H5nKlflxQViFfvQz0yZHBbXoOy9aM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zreCRA9TVsSAnZWagAAtjIP/0yuFUr6AfSpEVuffvvX\n6WCJKg6km+h35vB7hWowz1vD4XZ784tHhPQu5KKBkO3KUpRS0tepMZsGpu/h\nVQBGrh265go/5CHBHKblxV9r6m+I4jemS3o/jNR3BorX5d+kNOEwsbZqRRrq\n8EvzWskvC+smxchcxIbk12IT3cFujaCjYeRXbfLOzcd+yMV0dwbXIk39CL/6\nRqavYQw4gsUSmQWFFSX0RETDDkSBI+f/XmLNQuK/kRJrYdeu6+168CQPCX89\nE39T6HMx/AS72JOWmgBc8LPvdosyRL37B2s1cOq7g6qzlofo4HClt85Bwo/C\nwb3TKzFXd9A3NuJlytLoRvOowbGggernAZmOJW9MufrlWsAT0CX/Oo4/sei6\n9qdOCNsC+Tg2UlqdRmk3606h4aUWL6uWekiPMtSY+vx7KQu6sDOvtLseKV1g\nMd0aYTPiDaPzAmylxIlq5vvyZ9T/fXifxOJ3b4vnq39vmzBzaozUh3ymcMiK\nVG1xa1vDNMXtM7jVNnwUO30OilwZ/ipbLVV9q4ueZrNaV+O88jhKUQnERkt1\nxaZtzOjv6+7jYVz/V17SBNqa3Yd0mooVfCMlGwyF3EM5CB7SDWab+aAnZezF\nlYimFCDjZgvGKIjxbLvIJS3c144guIhnToQjfB3yLdGOcPzqg3E119asmcmi\n9cQC\r\n=Gjo+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d86234d661f09ad766ffa2f82c69582e585a8fdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-nightly.778a0e8a.0","@material/base":"12.0.0-nightly.778a0e8a.0","@material/shape":"12.0.0-nightly.778a0e8a.0","@material/theme":"12.0.0-nightly.778a0e8a.0","@material/floating-label":"12.0.0-nightly.778a0e8a.0","@material/feature-targeting":"12.0.0-nightly.778a0e8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-nightly.778a0e8a.0_1626815198264_0.6143516016055515","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/notched-outline","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.791311bba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0640cc6c7b770bd3d4a02e4be2c2ef645b867649","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.791311bba.0.tgz","fileCount":34,"integrity":"sha512-RZiB2gppvScTFbeeRnRBpR0e5t0eXkC9BmDby6wYWaSnvs3WTI907mqznPw8xQAKHDySwvAtQLf6K+q0G0sdKg==","signatures":[{"sig":"MEUCIHEbfR0UuSSlvAk+1dvW4urLdLWDo4MXLjJ/65vwJagFAiEAqKB5qI6ojW6dcCHUJXyylhc3vrd5OyIPNvH7m3qVRRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90lpCRA9TVsSAnZWagAAabsP/R9MgXHI62dG1+3liGA3\nDRrQdmGmDNN58offIcom3KtIWdhkeSY7aAv7SSkJ3sstquaIrboor1MEjdxs\nptkre4HP3J9vC/2X9BQhWjU0gqH1/pgU65y/7tpcAPu3WJONjcmztxCnVrGk\nk8XAphXvETAVuce1qvQZ0l+CPImiks8h5CbUFGikTmKLQtIV9eLspmuZh+gc\nc30dBnc9gIIyCBXrz0uRn/4Ae+y4T/dJfIulf3rG+lEszdUUX2EbeQTSfLm0\nggv5cbcnEGWIf8C1qOEcr+75ALB/1Z64vUBXFcv/2vGOC92D3CB1LOkDC5nf\nAd7JaJxxoj/Oret6ZjNUZlCLL5HVh1VfTVJqb/r32aI6za+T59nlXgPXdcqm\np4xQ91kZQXw/RI3iymoOkET74cAf1EuC84SirvLwgdFj0noPqJzeiJ/4dO71\nmnZrp50Fw1tOGa6B1EZR4Ys5oEtEIBxbajit2LvzhrfbGNms0djmN8zCaar5\nhhIeBqRfA/jPB4im24eMdQqb41FhpUomRi0aPjo1v4Aq+p65HdrP2auQxyOB\njWNSE2AxSlhTDsXVE4w5b0QdKlSP9b6TWXLWw5BbB6DWjslEQbsMnL3RDqKV\nmbR7Q7bmvs/IqGw/26/LhTKRZwH3UbwDU+4XrC5HhqI43Yxd8MlTcD8HwAZz\n8DSP\r\n=pYtY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b915b82632a30b60ae4dca5d12fc23d5a5df4d4a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.791311bba.0","@material/base":"12.0.0-canary.791311bba.0","@material/shape":"12.0.0-canary.791311bba.0","@material/theme":"12.0.0-canary.791311bba.0","@material/floating-label":"12.0.0-canary.791311bba.0","@material/feature-targeting":"12.0.0-canary.791311bba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.791311bba.0_1626818921336_0.8957939600899054","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/notched-outline","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"784d189d0b26dd858a8ff6354fb98e6a4cf52d68","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":34,"integrity":"sha512-uhOt+s5wuFo4Eq8SfwBakMj89wvsUOzjdCYtxxeOzoA1N2rw29cdcZTffD3YDcEhgybdt5deOIggxdMZo29wnQ==","signatures":[{"sig":"MEYCIQCZk6a4xxrxsoDB/rGRWxkt3x4JM0ZFTj/btcrWYpULEwIhAJEg2Mq112Rry/WGmBX3aQnxB/DQdFwdh4DI0bIZWHmI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D8ZCRA9TVsSAnZWagAANWAP/1ms2k9ycy8X2O6ItGS7\ne2/qtnakgcuOvguhmtwcEmBAcygY+6YeEje5isCq5WSe7WImUwChgUUaoJ2T\nd1UFg9XDlrs5ej+kn/H4xTVVzkxICZAClfTz/zi8upZ2MskKghhCUsWtoTre\n3bCeZcfxpsco4RRQGx9hI5dNaz+FjmPyPJK1IQyeOtUMcLRTKghI2GyrMUWz\nCRtFGZW0VsRn9Jkc9LmarhnAx8oTHBSnEfLY51cnPu7jXjpXPz6odCgpZZCJ\nBm6+NhR7hOeGWJCJlfhKFJJSXWUxJksm4CZAPUsl4sDuzl656hE6iammslAb\nxFyioaYYJWJcTCXrHZLVyf6agqGSSG9vnUoqLa/MNmev3YOv/5GK0AOEfTUm\nNPurlrob4KGZc5dYDrCyoPdzCFmHjUXyaChJpIo+6FN7F6fGXiqN32slyS53\nQ+LpG/rUazGpSZh7IzWlFw2qhuWM2VxENnA92EMr1fhEA8Hnniz7UjS1bzOC\nChrU6OZv9qZP7j2nZVrl0uu3wM3p1x7P7y9b7YILXN/SZSjMNnthv7SlqHOm\n15L78idwx9DWY0gczHuTYMx4t/WVjFfj7SHEzTW+PyaNThrIA8yAbHVz/yio\nAFM1IKWzjgvXiTCAPZLJFUTyqo8ebeu6kZM+1dlCJwPPOCq/F7mALo96EEf+\nSIUD\r\n=g3fW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"651354325ad21ac082f791ec2abb0aa32b3ba936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.85e9a6ac3.0","@material/base":"12.0.0-canary.85e9a6ac3.0","@material/shape":"12.0.0-canary.85e9a6ac3.0","@material/theme":"12.0.0-canary.85e9a6ac3.0","@material/floating-label":"12.0.0-canary.85e9a6ac3.0","@material/feature-targeting":"12.0.0-canary.85e9a6ac3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.85e9a6ac3.0_1626881817771_0.6302291971086182","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/notched-outline","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.6b0442278.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57097f100b0ca024c90e2547a8a25c92321e08ed","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.6b0442278.0.tgz","fileCount":34,"integrity":"sha512-9bd9ketAS5DE9QVjSgVoE/uCIdq4uzFT2yvq4vjU9MTWhCP3MWk5+1bM4YZMJCczk6ZzACSVcSAbKz6QBG+Jvg==","signatures":[{"sig":"MEUCIQDLMsqMry2+y+IIeCItMtMOahV3se3q1AHGZDP4G6nAvAIgIK5P0Yv225zJeuTuTD8fXweWsPXMiQhQuHwStgqBGK0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+GyWCRA9TVsSAnZWagAAumgP/RHSXwAjlZjrLCTJLAqE\no9dqfIgVZCf9EvN+TfG5N0kx/jqWXV+6b8hdlH4ITujwsU35+yna3l5sEtkO\nvb9/Iv0hJ8rVIhM546p2GYITm0pC5b6K4iw8YOCi1W8LdAiPccinXuoTVmj6\nsid6hc5YliLfJT6bwv1KjhyM5ZCvGUnZ+JSykASupLsra9uJMsPqO6RPZvAv\nyRy4GvR5TF9EJJ5+ffE7lOr7+bjfbWX+whqUjTuUwuLAbA1f8Erwd1t0vT0n\nL4PN0V4eXr8K4NKCx+D323iN60m3zPFmHIOOVVQRHbj3aRluZZ46oPMqSXrX\n3kt3U2NWLwZpooTpYTsKewr68yFEB6dgrJnnDRzAACAh0rfSeUmJ1kIlh6Za\nk1kzGYhKE/vXLvuo6u/sRE7p20ix0y2e8av+0SZM8rkhIL8b6gS8kXjxjWpV\nbQGk96USTuYndofn28eM4q0DgoLKdDo53xfkU8stmVRY/J90LZi74hnPnTRx\nDfY4uARNCOxh8w6kYudLGeGEbuBWtoS/dRK5cpGG3z3TR4B8rb5xCaxgrYAh\nkTzsVlRR/u0JSEixS0aW7U5AIgF3sAaHRschN5bfL1eMyTdu0X5fMXye4RTh\n0lVOC6zpg2RzElw4UOvUm2eSXF0+25mD+g7wk3zMei18FiK+ROx89o6NEoRS\nLBX8\r\n=iAzz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fefa69e22f9083ed30aa4ea05114191682b45a14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.6b0442278.0","@material/base":"12.0.0-canary.6b0442278.0","@material/shape":"12.0.0-canary.6b0442278.0","@material/theme":"12.0.0-canary.6b0442278.0","@material/floating-label":"12.0.0-canary.6b0442278.0","@material/feature-targeting":"12.0.0-canary.6b0442278.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.6b0442278.0_1626893462522_0.9288998974013842","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/notched-outline","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61df68f76352da3f6bf16ac7d5b94d8bbf1d000f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.5f00e454a.0.tgz","fileCount":34,"integrity":"sha512-sXITmbt7I0ctDbgZdnz2GsnLP4yW/Mr8TDPSADYKexyWoNeRZ6vSo1VJBnr34BRcWY7oJNb1UIRhpVzIZCCTrQ==","signatures":[{"sig":"MEYCIQCPCO0ghvF9+p7RnyIooI8UjBj7aasuSKaxtKGH6CKSLQIhANv7cK3bC04f00IlvNOCBi9yvIIDjmWgJ6FdRn3lfh4z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aXVCRA9TVsSAnZWagAAR2EP/AqdvOPp0c4rGAywWHra\nFy0rgEFlXC2ZvigWbTn3G/BfIEh8YRhWheL5oEVWA2w7tKB5QSuXUpM1AEmU\nOMG4u31Hd7nQ0SceTFdNG7pyvp1snJICmAPy6nTW0B751Wrs/VYf3Cn34Kb3\nl9GXUcUGY1GhOEZtw12qSyXDHyy2+71Q803aV3hp+7X8qhxYDZ4+9Pur2lzR\nWGaN5aVr1xznVYdRMeFNQLnUVGdP3UN92Hz4tUNTS+7YXmyrIQh26bDCEGqB\nmUrYRtbIoArsyMsDTxsitKgBBg4NRVmAjnsdDC6BTyX+NMdzoSl6kgndmFZ0\nuuKMEV4WCFu4nETNbcXAZX65RcifFN8sqdnrN6jnV/FBVBqB6KDgMjB3vajt\neW8ZaF7gzcdooExUlGVFtxh6zGQGWjThlmwK423Ykz8NFCaxiWHKPLr9ZemH\nzhrvgxJ/Sc0/TQsMSgjYY3bI8zADQ0nhsOsoC17T2EcVZq9NGBy1HNpq4KaU\nFkbBHxnNxrEaNX7KdDP5fmLZ9L5crv9TjxK91FRjSZOG1PRVhwxLLpqnYicW\nGI74FvxdQ9uj2uD9PRX5Vkenx4wH9vTXxcH0FDmDzDoGirYdNV+paCEW4NmI\nWHJMc6e2U1oZkakgcPOhkuuem1koywFKq83jmN4Oh4Sa1t2k/Llhlbx5sY9z\n7Ucu\r\n=hZID\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b9c8a5899d6bb5475fc5fb2c76a300d4a28f0ffe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5f00e454a.0","@material/base":"12.0.0-canary.5f00e454a.0","@material/shape":"12.0.0-canary.5f00e454a.0","@material/theme":"12.0.0-canary.5f00e454a.0","@material/floating-label":"12.0.0-canary.5f00e454a.0","@material/feature-targeting":"12.0.0-canary.5f00e454a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.5f00e454a.0_1626973653546_0.6216401331961374","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/notched-outline","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62b9ee3735d995328424feb075fbbb2388e64ff3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.90e08fc6b.0.tgz","fileCount":34,"integrity":"sha512-mTaKAu9NjtWjB/Pshqf2aAsPMZkJYjI8WCV2CLXo5cbaF3TWQmA8B1iPAXw21c/UAT/wowHD2mFfwy8iqA2GJw==","signatures":[{"sig":"MEQCIDbhsC4eYRd4xpobooN3vAA+KJmo7JobAgjd4/VJH3pFAiAmyGnmTNWKD18lO3Krp0KwabxXWI35m/aThuw6IopnyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gGxCRA9TVsSAnZWagAAUpYP/RGkXA6/WcW9ymA1anwm\nbNAcuiFPaEGowLy7uwWSMtmwX6Vz9SRFpZivDGf4bPfbxAqkTZWbYFIxBDJ0\nWqB9lcjJhCaz8B+lOt8DP9ZtsChqkGwIEiZp0qMBEu4BCC67qSlscTVcEXiJ\n3ISAW1+fvQj34YEMUt7Cb+r7KF838cmKbDGIMrU6+ddZmZdLePsyjaV6u+s8\nGgsJtt1VzYhvrY+2l183gAAuLTXreBFaGDzI1c+nlc2MuwavKyY1BLP7pwgG\nYwvFiypZPBD4jOTGQdoVPuevkUqIiX9AuAm6Xaj4WDRj677HVdulSm5v6xO3\n78XR5c7jEdq7bdswJKpIDoLqUQkGiQBc+peB514OJw3tJakC2x/02VEoudIp\n6ATDErIGOKORKGy2fOx9Mme7bWl9JWcAmOZU0yJiUmwPgBSnJ/Wm3qRfUA/G\nv/H5ezOoL28egtyYO90TubEqedeZnkl0Ot28F+/8JZ98g9ZWChZuHNCRn258\n+YdzOsDduEDPUJeZ0i1kRCRKnBKkybdueOcYGS4uuWms23DVXLdKqgNdqx/1\nW7Wkahe6KZTG/5IpIkrKw6LaRAs6c1kcM8koV1bivzifmleLrHbIVJT8nHSf\nBzmqlu28rzD/qgEWqRnFyKfUUtmBndbrcizD2t/Wv6j3sS1qaueDLCcgcc6b\nondh\r\n=DMhy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"267e307e557cdce4bda13e55c34cb0d1aa0d0b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.90e08fc6b.0","@material/base":"12.0.0-canary.90e08fc6b.0","@material/shape":"12.0.0-canary.90e08fc6b.0","@material/theme":"12.0.0-canary.90e08fc6b.0","@material/floating-label":"12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.90e08fc6b.0_1626997169013_0.6350365062433503","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/notched-outline","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef4a945bac385321db2f7418509e2faf2e371dc9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":34,"integrity":"sha512-k3QG0GbvDKTzkpjZ4yt6Qxp7XIn2qg6vEEtN/8uPa3ODQ60PdahhrjJpUlQl4jLRadHNcEnuI8VR95Jh976zYg==","signatures":[{"sig":"MEQCIANa+BstmWR8cSB/h4P8pJRgO+IUHu+lWTaZwjVhcUjjAiBe6bxIx/6XcOGgy5J7TvafLpB1zESSXl/IoUVMmSBI7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wbECRA9TVsSAnZWagAASl4QAItgT46Y05BKULDOXvXn\nN5JFmBRBRTzwj2/PilgqHBfaGJ8EgRuK3yYEbMReO/cEBLyjDJea0S5Z0vV9\nrmlKmnfcfVU1dA/qXbDNE/oSHneddrtdTL26xbHqakHl77pgrwwb5+SphZm3\nbKe2apkfYxf8hg9wlxw5axu/9Dj5PecOSLisLUrM5C0HR773+VWC/rBQoQHm\nqlEbtvYBGPge2H1KmfplPbYfJODJuTbq6fKhicwJNJ5brK6RnF/s78/fTLXP\nisT6KvcWfT8SspCGk2DEHQOimiELiYoAYAqvSzmMitHedx+rppEzCjfk4OH9\ntNOsJXX/qtqB7QaZ2BavQMwKqXhsQtq6WN29i2WPxB3dJwdc1jdeCv3bzXA+\nQqprnckbqX4mF6G5xT/Ipi4fMYO2hTDAG9xyAPCzd4zlmkWTDwULpAwfJNLJ\nCY7ZsYwQI3n4zo5++qh11ZnLNxkCXT+r7TOVFNvsoZVUbJE+1XpGkZfuA0wC\nQnpgGNKxy61rccXX34Aw9PpeVuq3PdEUPlh1KD1eZMVzH/77CTC2mPoJ7JZP\nTJwcJZQvuKuF6Kbl8T6zeQ6xOfDPH5xQaKsd35Y+co+f+k2XABt4sBHKDFPA\n266y97yZ3jmkGh06n7hC+k1EmfD8H0Tsmb93uMVX/bCKc3Kg1x84L72Rk14C\nfrod\r\n=H86P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8447b42cdc88335a4d5a37bb048f5babc1c5bc82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cf5b9eb86.0","@material/base":"12.0.0-canary.cf5b9eb86.0","@material/shape":"12.0.0-canary.cf5b9eb86.0","@material/theme":"12.0.0-canary.cf5b9eb86.0","@material/floating-label":"12.0.0-canary.cf5b9eb86.0","@material/feature-targeting":"12.0.0-canary.cf5b9eb86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.cf5b9eb86.0_1627064003871_0.9160823237717164","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/notched-outline","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"981d6cdc3134c27abc7f3c714f62efdde21fe91a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.3f36ac75c.0.tgz","fileCount":34,"integrity":"sha512-LcxzHMNLSvMiNMLN4r6HxrLudG1mqJgVU3KQI+VBVS75XT2Y2m39SnwaJoqvyfkIc1gAWDpGdZ4O29mKhfjK2A==","signatures":[{"sig":"MEUCIBt7cFnKUWjXqcnkmdBpA4vxiMtW8Fq+QqjPYQ0z+ODBAiEAopbWLTXINl5zu6AcqZef4g/WEqobTXFLVQx9QQGyRBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wtwCRA9TVsSAnZWagAAnQIQAI60Pa30fQavI0dODZe9\nWNUVY/AuLQqqZ6wj2zz1RhdkpKg4s03bk8YlOXQFW7EEv1mlbFdnghnmCGze\nVbwshxKRRKZZxGOJg3pS2DxYDhbdYTdMn6ObFHRCPNF/nqVq5xO8GcA9L6pi\n0otXgwA+3N57iZPw0R/NmZ44BcyQeP8iSah+TEh/aWr9BUJhYSc4HRf4E9EK\neJmgtW76HbMxUXjOwwSnVQkJl54csJ0xa1r4PrCYqXI8h5h81IUY+iy1w8qE\n9wVTHYCyieh5FGN8JxC2Pv+J3srAcOl47IN42FNYTHWUsnSilmqZQ2BDSNHy\nPIJ+dAiXABgx/gbrdabEcFTfm94R+0JM+fc/FGUcyaZy4ncVy9IGSbjJI/UU\n41f2nzJIG/XThIRzPRh8d0lXiT0uOO0S12TTg/lv0yeIsSvvoUax1GLHG9uJ\nzXfgE+7gtm7sb012Lz4bCgGrZiSaBoFAM4zGCHP1d4NMgypGdqjv1KePGbEd\nFA8gIGo3nuMM7xZLNCpfcRrEDBvKOhBz/Oj83uF/JsbOOaewWMpAmYaT9/id\nBaVeWKR1rTjj6EPPVo9orB7ZFiKMDEGtkv5HRve50r1b3/XRR3+i41/BnGX1\nsJT7f99PY3pLVrVmKQlW8zz4qEmHqefJtK9PeszHLg5G+lp5jA0Q+CDvOAIL\nTYdO\r\n=CPNV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b0f70c5fff2a6f188b24beae7ecdf708b5bbdcb4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3f36ac75c.0","@material/base":"12.0.0-canary.3f36ac75c.0","@material/shape":"12.0.0-canary.3f36ac75c.0","@material/theme":"12.0.0-canary.3f36ac75c.0","@material/floating-label":"12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.3f36ac75c.0_1627065200674_0.7921022095838728","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/notched-outline","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cb0846f9fffec6396f1a34c72a46d369c575551","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.ea1e1b850.0.tgz","fileCount":34,"integrity":"sha512-C9cLG1+9NMkErv/dE9Jk/KzRgVhZnQmwuTyv1PTdE8adFqxp+O/HrUofnD6iZDEyH2iqBh/BA6p+14I+kvc91g==","signatures":[{"sig":"MEYCIQD+zy7ob7A2pVGpfPq5l/H+sxENg15m1dZUc4d5Y96vuwIhAIZs3wZEIEhjl65oeOe1x/3rrCEXUn0+5MXJ9MlCKKDn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H6WCRA9TVsSAnZWagAA/vEQAIk+bfUcgwQOB+eZSh4d\ncldBM0iD/Zey93urrgSjTXpN0eItjhAGQGFBZpW3fG4uN/qCniYQZ6LDFXCn\nZwbdWMSr/tnqYN3+Q7rzse0ujxtKRpkLoNuu+Hf6N7m0w0HxiaXaYaxrR4Ds\nTxrFhY9T8BzzEAi1wZ6/Tq8FWef/BXk+FXDS3pZBUBuRp9w4WLkhh+munoqM\n+h6J/AvVufmD62QBcsCviM+rOa/n7T6SxvCXyMejeiHe76NNB7lqyQ4MzSAG\nhMeLJbjhc0bKkEztHzW/KfTzySOyK1+NdsScOC3J2KEp2p1C/+bM/hyb4HxK\nFgLko5s/psOjDGoBqMmnxXYcu+2dM0+7US3RY6MocfLGqeUZlVz5r1OzvHdM\nsxvqbOEqALY/jXXpCJd0Lv4F+X40GHslI8dI55f28YmO3SJtErtENZI3Qlo5\nxLa1HKssI4VBpaYt/kdeYpjNvNhBVK23TBWlwc1qGRp0ThpdvuKWim2ILpHK\nInwz6a+KSDRa0HGxjWN/Y6c2mHo8IEY7VRDwexO+Ucm+DNZKqhtrmkhHK1iL\nvdOJfdohFHeHpvaHfWj3mZzR5kF3XxAFflgfQwodXSkEXwO6oCh19k28QAcZ\nDuHz63J2LMA+z5zkfna2NiMMLJVZ3nl0nF+h9fxFrr2YnGThQQ81F4HGxojl\nxLNy\r\n=VFJw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7c296c6f9b2c20eb32b0501c98b6415bd193dc46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ea1e1b850.0","@material/base":"12.0.0-canary.ea1e1b850.0","@material/shape":"12.0.0-canary.ea1e1b850.0","@material/theme":"12.0.0-canary.ea1e1b850.0","@material/floating-label":"12.0.0-canary.ea1e1b850.0","@material/feature-targeting":"12.0.0-canary.ea1e1b850.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.ea1e1b850.0_1627160214299_0.49903692587324855","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/notched-outline","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0-canary.22f390c43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d198e881029bb8090f1b8af6dec56ea372a2bf6e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0-canary.22f390c43.0.tgz","fileCount":34,"integrity":"sha512-g5dDKNwUTiSlvlkOupikgdIZNMBuBW180ErwHRSo03uTYDWRSdQwtczkGjvnF21GfF0CoqbKh+8YRagsttgojQ==","signatures":[{"sig":"MEUCIQDVUi6i4N9iuxKYuDYkKx5AqtzMibj+S98YM+ctWSRYfQIgKAKQ6fSAGVPKzUrHJedxa3Ot5qoyVvR+Jk/LFNMhF9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFftCRA9TVsSAnZWagAAflMP/RgZdzuWyK3Jy4KFe1tS\nFuFSe84yIgzUFv1F5nxCbVB8RJxRl/EzxhIKvioOU5aDZjJWE+SpLL2iflPq\nEMxnK1UwoQwX9pjIGyKZkcfYlpCCQ17jdfFyg4aIXgPHA4FNOHG3QHwzjJNT\nzqqabI1BBf/lq6Niuu5SfSc3VDqkDFDRA1hc37Mcg5Q4gYudp+OZMcLn5Dxk\ne+pJa0JSD3wEumYoClTSSrpSf1f4OnBzp+LjZlddXwQbtcvuSgZ2vaHtOZsK\n3OXXKDkknQLEixLxLN6TCIontX5WBczsVi4q1FZTL0/g6AKyx0yRegojZi9K\npPrGZ7d7tWMM9OCb98zcUG7PZ4aHd4AjCcCD+rImiQx+V8LqZSkCzkXaTaXz\ng/qNIQevU39CsJZ2mGuVKxpTcTrvgd4Pwl1x7jxIi7C7iyQIK9Kg777J/Tri\nJK4/jJcJIbP1whi1y+bEXf7AUm8QK2n4SODPnvmh8os00be6fDcYdIwlBPtU\nO2+LPssBb1K3QfZyFmqU4Ky/N6lVqE9zE8uXSfjgK/zOHENFw5SVaS8lBf6V\nTBqZ6UWs1wIEivkqBsZuk5nVdc88K/1bzEhGjwNNBxYleXSqGqTAT+7RgPm0\nbrPJdmShZZm7gWj6/UCuXkhtxUWMh7WxFYGKMGFsbD02jjfqaJ5KxnUtWDIM\n0XWe\r\n=q1Ul\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2eba31ea1c3ae3c0e3497f3dae6cde368675a496","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.22f390c43.0","@material/base":"12.0.0-canary.22f390c43.0","@material/shape":"12.0.0-canary.22f390c43.0","@material/theme":"12.0.0-canary.22f390c43.0","@material/floating-label":"12.0.0-canary.22f390c43.0","@material/feature-targeting":"12.0.0-canary.22f390c43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0-canary.22f390c43.0_1627412461498_0.503206207139065","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/notched-outline","version":"12.0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@12.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff674dc0b7a746588f5d5df5096f331268eceb20","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-12.0.0.tgz","fileCount":33,"integrity":"sha512-dPtsOh2acyvv/o6daxw0mJSvns8dcqPiL2KO9h23YD81/zM8Mon7Ui7ii84+pOFLnh6JiszMNatGxdlL+dv8RQ==","signatures":[{"sig":"MEUCIQCdTTI/VhkfsRVE9kkTZ3vsXcvR6m+WR/9zwNzQXEOdkQIgN1YA2yp83+VAjGOmouU5EOOHbxwWmyf5I6v5NLPgS6g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGOgCRA9TVsSAnZWagAAjmEP/iAWzkcdmk/fVA8+FSv/\ns7YjIcsL1u6/QgNZXnnjtMrDu5VfMpvacjYrzv25TcObVqeRYnEaerBk5IUl\n82BRKotJm16KwY4Jp9VeJMospf/JJ4omXRLr5HwWtKTMBOhf+J9aRed8VlwP\nbKSe8EIykBRZAg/aDcPLq0jD/Vp9StIq7QXQQhRyD+6HcP4iG7PSTUpaeCL+\nRuAVr3ldUgcLw4WCZf/H/QveHfMEIeVz8zEWqHOqxpbWNTGfwOQfKsmyNtY8\nVd5KjhRlFQGe6TW0sPrCIZHgEX+qpkpUeaRwaq9pvFw3iysOF4H2EyzRfwv3\nr2uO3H0ZSMrTH9lLzxUUD/v2thBFP85MRSNzJRw20Aag4TaTbo69wD0S8P/p\nIAh1/bb3QFfmGnvWK7sGPdafox7CQtYd4O3X4LzvmCgyyoZzyGxnxFoyFv83\n72ZrKXMl147AreNsIxdzbDEqKZX2x1+9qdqD8XIQtiJdpPv+a17MYbhCTMpp\nEsfmEJwjd+mDFn/W3gvoiaKVWqZL1EWCoXDggn2oTB1AMRADrfH/LEV9rBbp\nw9qQDUBISCf130jsbzsCWl1scaqnj7tAvAwpdkPCKFxvJb/jatMv2iJN+35y\n7SDhe6gBdPKXmuFZC5riVWHBhAZdgTgiaAZ8n+AMVUC9oS8knuZKg7Rc6i//\nSQq2\r\n=mHGt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","gitHead":"ae85f7eba0d72f4fa5f3e8669cd316336b3e6828","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"^12.0.0","@material/base":"^12.0.0","@material/shape":"^12.0.0","@material/theme":"^12.0.0","@material/floating-label":"^12.0.0","@material/feature-targeting":"^12.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_12.0.0_1627415456267_0.341873820868013","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/notched-outline","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4da8ab82bd90f937a0f678ec7f10a5be9abbda7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.ae85f7eba.0.tgz","fileCount":34,"integrity":"sha512-RiJOK6eYqz/pQ0FRaplRuOKpU+os9Js/XLvya+y7jl5scGFpFdFy1iSZ9YWsEin10INrR6WWabghtZkXv8XR2w==","signatures":[{"sig":"MEUCIH1+DDpV31dA964nmvXt1X4KkwJ1grREJvdywVZZ5v8jAiEAoK3AF1BUUBwubAJDAo5LRvvREYW6OKORsz0D3p6Zi4Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGQKCRA9TVsSAnZWagAAp9wP/29NPvLtZ+GYVbIV6S1o\nBwsiF6dhoI+H13SOiZh8WgMEPrbu34W+f3uXiko2tLIPHuTOzEK0t4XRlPQb\niArTksBmbnHy2N+tvYs8WRss3w12NS9X+ujyFRPUsQzTxmWEFp6V1QQ2+IK5\nsmA81fA0ZAQzIa7KZ9wGF7JYqbvBk34DVx70vd7Jm2zlW9Ytuyl948sKD5O3\nYi3W60FLq+jK8UdHoSezwBHVtzmrBxusZTgmVdr7TcewDCa8bBxpWoH8jy3R\nFBs/92pI3OojiSA1p2elIIthtzG+jN1ksDpBk+7F4M9SxpDLiKWNOYWqLZXV\nOKSW6CVC1DdwfQwDzAuK2g3Gu3VlITyOG8AnDIndQCAc5GIfmt/NxlrUMtKA\n6r/M3Wu+EEkT7gXlFHjDv37JU417bySF8/f0zGORH/ekE+r3SBuaegpcaBPV\nQW5TQzqDDlqqXI29Ud1FxEMTT45P6Vsm5aeGVSjEn/HEiOAp9lMwoa+KctYj\nPJYrH1nXB9IXuFjfhOP/AKGby08A7UqRvzglg5YCh3qm8az9mcnKFfG6ZKwD\n9MZXIywOtHpQvcmN0w4xGdJUKfH9PJ6W5AsqG3ymlclwwG1FelV+mGhHB08W\nOOkQoWbB1SQKFq5bhS/+Q4MJnwZlu7kYM6hJgcQ6/wRQDM8IabdnJuz5V4+1\n9gE4\r\n=sLGV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"087c731cd84ebd8c578510bd4c8dfb5d11e8c574","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.ae85f7eba.0","@material/base":"13.0.0-canary.ae85f7eba.0","@material/shape":"13.0.0-canary.ae85f7eba.0","@material/theme":"13.0.0-canary.ae85f7eba.0","@material/floating-label":"13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.ae85f7eba.0_1627415562332_0.6908864985944754","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/notched-outline","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.5981207f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efbfa8e3a4c9b1fb3e255b61081a2e9664e9f95c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.5981207f7.0.tgz","fileCount":34,"integrity":"sha512-/wP9iZagmmNe566uB4am9zAJWnqPlq4PZ+Zrsz3h/N5DFZza/GOKJMjsQMJLsi1/buAM+Ltj7+QowD2tDz2aXg==","signatures":[{"sig":"MEUCIQDpHWCFcMLMZLK/s6hIdLGuONsPLHN+Ve4P5ROiZS/wjAIgAUEu/6LHRSoz8ObjHkZZ+9B3RArZXDC8PGBtBcr1HOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJR5CRA9TVsSAnZWagAAkB0P/23Hz/A4Vs1XN9583Fz5\nO7/QtCHvS7jdlWw9LP4Psk3bqvGms3cT6moR7XN8gCyxshw4G+gqBqVpV0am\nSt9CpYLyfXubLbW9mWnxzd9mWysFHjS0xgztUWcXM7WXD74Kxe5j98/wwpif\nDVWBhX1bY+Ep6tGggI4tnzBGLvqAC6UkP44KODNH+NJJ3II1dfji2qrzkqa3\nJKhh2fhc/6S01ey3bhWBTv6rdCTT54j2K92NLsxH8LaA9MvV/7+EJ17ZSkIB\nOoDBiAhqCM11H/00m6+T9sGYRKs6Wf//ejV0Mpd8N0l3uYIHZgdJm6QC6lpc\ni5/uJ8eaQYiKnXQ39gFxpxfRekvPdGQZOOP6t1lNP4NCc5L9GjYqy0gJ/NB5\n8YDC5aB6XlJjIAEZL8+8sacacNB9PyrWDofQ/lnGYyiBd7qRMCUblcmqYmjv\nXZ7/tBCCtCKBHI6A//PdTeVKSjMI3OdfbnaY4uZcUAP3hI3Sn8Qqx02Xm4yo\nu3U4UL9A/xH2wqdLpK+5jf4D72MRMG+hrVP1bsZ/GXA6rD34YKfmXgqxBOj/\nMXdglMhpZuyzjPZYBLbxDISJaqduD9p4bonI0P6C2jGiFkLfAvF9RB8OjCaH\nZS76bFQW5JdGTwhQx32bbYZbkHR7/zJxL7pujnrX76LDjnKbDiQbuzL5vFDB\ng2wc\r\n=pX6i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8a8b67c19b2a9f80923dd162098b373bbf34b58e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.5981207f7.0","@material/base":"13.0.0-canary.5981207f7.0","@material/shape":"13.0.0-canary.5981207f7.0","@material/theme":"13.0.0-canary.5981207f7.0","@material/floating-label":"13.0.0-canary.5981207f7.0","@material/feature-targeting":"13.0.0-canary.5981207f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.5981207f7.0_1627427961682_0.39990495362631817","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/notched-outline","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc763b12adb802023ef6f6add9abd15798641e56","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.83bdd0222.0.tgz","fileCount":34,"integrity":"sha512-2pdyd3a/geG2skErR4VvcUrbZlXDy4XFo1g/Otx5OZWhM7PUtrIcVNnFGzgLGMi+Jwu/W6XhuMr7zpiv6IOOvQ==","signatures":[{"sig":"MEUCIFspMIi1B9jyfPpeTDjwTEe5tlKQ7jzZTiY4dSfZ+pCrAiEAijOyoOpdc9+jFA+0kfCrR55POVo7JjmdnSiyO714f2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZNvCRA9TVsSAnZWagAAkQkQAIMfSe8Ygdau2F0dD5vq\naiXZv2FdifL2C1iyLgDOiIGWBgtVNGkazENsWHylko7S/A5cxZL4//+7QwtE\nWWRo5zqW1zoDcayxvGGUyQUYZGEtj+npDEj+xMXev52yZDMCn3ytrsyEnEpS\n6u4bNSeGbGoLQqJWvEK7vuDOitH3Ghgx671zFeuIJA/2sRWwgGHKHyYxwtKy\nvwQb3MnQLE0K2AQBOf6d2jsOpPiRWF8xhpALcbm+ViGgNC4Fs34b4e2qaCV8\nYUMRwDzBTnQ4IKtqax0wnhBO4N6ygdKqIzkamGU/gDAXrZJZN9sNXbna90vP\n0zxyZDThy/vooXTK+aSecUmAzVba9adgRNPkJ1Xq5fRDUEyahtggLPaQj4mS\njdS6Wm0iaJWi2VrHFoNM8jW2X3EKDxc4H2IeORuZqG2OevvHmQkadFRGwhJ8\npwHgUuxjTdOWTu1L1n2sOe0Us37UWs5sltDVxUbwJ7wzrkLB5NT6/XgyBgTG\nG2hIJdpRqN26STO1KjCctKZ0JyBFASSBhWpwJ4c/BRnuBLi+dm3c34fM9pjJ\nnQueOptaoDfBWAlm+ICyWyveRWoZcgjFtdujw8Ca9nFFazny/p2XaDTywoRh\nG9CHKqMzogiLjiDm28P1pbGrla2d4kzDjGZOvXDu+cAfH60muoGkntLG81bg\nh1Dj\r\n=i9fH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1f2b23ad4bf20ade58cc1b10490e9ca3f9469405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.83bdd0222.0","@material/base":"13.0.0-canary.83bdd0222.0","@material/shape":"13.0.0-canary.83bdd0222.0","@material/theme":"13.0.0-canary.83bdd0222.0","@material/floating-label":"13.0.0-canary.83bdd0222.0","@material/feature-targeting":"13.0.0-canary.83bdd0222.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.83bdd0222.0_1627493231468_0.04058304213945019","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/notched-outline","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.28656298a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"321ff8921f669974f1c03e42da7af40da73ec344","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.28656298a.0.tgz","fileCount":34,"integrity":"sha512-GTuXmCLZRyv6DWT50jy0NNgo4DHFmu6ksgKhycKsQ9QJ2YIqAX24reGtvUjSB2Qu4S902SdbkFPikAFt2OX6Dg==","signatures":[{"sig":"MEQCICu9+Mviu1D0hjxJBfJlyB8s0K508lJeksYcldtk/KypAiBwFajIZv9x9gJtSdatVcsVEKcc+KZpVbclSSNfgSpWEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu/2CRA9TVsSAnZWagAANLAQAKN7bWWiBOEreK392rxW\nh+/wXia2RkNAQom6uh5tkZQjm7RbEhJ2o6DmBC8qQcwAJHEabwF3K0z//lP/\nvxG/7VrbQCJrdjmo4fmmyzZNoFrIFGm3pp3MGXGCc94qpQZVyxfkXXPi8I50\nNJ189NImoIgRTpgfkDAqf8Mdf3+0Mauxv/J+9QD9EdChCFJGrFPTY3zvxEvs\njT8snTqrmDSLlJIP5v4wD3hotJ7Q1gdhvJMFJwva386X2H0vIPl8cDM3q+38\nBGrDepz0hFSsH27E7lw7toyLo3/9T1h1a58bstdcj0b9ychS7nyiiTat1/Yg\nTtX6CLN7GMEZJ1e4XOiv4oXLQ8XMkLyoVj7prkhq+l5OJlUgrsONfj4QOdkD\nmGLUV03o76ho4cKcEvGLlEEpGl/sAICcTWYB50tgmwya1l1+spkYeAdnpchw\nY4daMjcUKzEZVARmp+sdCDapLzwCN9iUVj0z3TSr1Ij+L5rys12nPkiKTpoO\nqT9RwcrUn4sLQrKRMmyYRpzG3eYxJE42AFcMUaCSya7zQzAjTjV7gS/VdUnR\n6rVMLsgN1Il3b3nlqA9hzAvnARz35m2xfAmS6f4ujSBQwlDSypes2KRElfhm\nVG/PbOuwJhXxMkxH8Rrg83skJr6i5xXVFfh6HdtJE76mBK4833frVSS+2Nze\n4Zla\r\n=wScc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5fe3e7fec89669c56504c13aadf80a71a543df78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.28656298a.0","@material/base":"13.0.0-canary.28656298a.0","@material/shape":"13.0.0-canary.28656298a.0","@material/theme":"13.0.0-canary.28656298a.0","@material/floating-label":"13.0.0-canary.28656298a.0","@material/feature-targeting":"13.0.0-canary.28656298a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.28656298a.0_1627582454623_0.05992949019074323","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/notched-outline","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20e61df21521a96d41ed11905dc85d72d34bde58","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.9e797daaf.0.tgz","fileCount":34,"integrity":"sha512-yUqdZqcED1BPygjjJBz1RqnNv2nfSiBG3juvaQRfD8awYyX0aLpkjdvl+i3Za+Rm/X2/bbO7C8Yr3HAbVmp5DA==","signatures":[{"sig":"MEUCIFxrDKG9RuAdvU2RiTU58VsBzGvzWNY15CebWSb1GPoXAiEAnccOLOUyiVgWTFO0/kaCtJCU8jEAZ9z6UuuSFvfW5qI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvUvCRA9TVsSAnZWagAA3l8QAJp8wg7IY7y+yHGfrVi7\n1xG2F46U4I5vS9w9WBoS+2RiDuQLfDqKKm/aEH3WZthStRtD9cppF73oqSke\nfHYs8KurZnlxhcB2wTjFX0Pwea3n0X6wrK9SIwEczmeFh+LCQ2jAY34OJhsb\nEfYzggM/CbAQG5D7z2D5uAwwRfX56AYduS0OCONucU55mXYSYHzzwcs+eRvX\nK3cuSMK8j4sE85xoCnSgSTXA0HRahJkWVdzGUmvL+DZhy0p3mvd9pkGJRefa\nqHhF6DrKWxakay5ox6hC7AkN+coyVgZtmjD88W9nhSCopY2ASGcKj/GnRcbu\nw9vIToijTHw9ML8RfjHm/qSCZWCs6JuevaWAVdreEmLS4IdzgBa/tNNj4CiJ\nUUIp7tpdLPXqz3qV2ns/ARyhuiB1NeF3IQmYtKqA+uERMqR8W/XbGL0rvBaE\nFrt+f6GJClFWl56xAi5X74OUUGsxS+KsaKvuvYTgHKW8F5Jiq0r8aeuHlnyZ\nNMZeO1Qqkuf0O9uV08kXmD2RkUsSghB9ViwOkdwAmPSOBLrJxvgC5O//BGN3\nZQ6RWxyz8NodMxNRLG6B00WczPVyh+IFfy+gZIVx2/Y1MI8KsTf4S9nv86NP\n62HnrD0i/mkQESbC/YJWRfliC90MFyY9qNsBAOR/oBC8RKzs8A8nxcHvG1tf\nepVB\r\n=GkeQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cad664597e3cc10ce42dff721f26f40b986db48a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.9e797daaf.0","@material/base":"13.0.0-canary.9e797daaf.0","@material/shape":"13.0.0-canary.9e797daaf.0","@material/theme":"13.0.0-canary.9e797daaf.0","@material/floating-label":"13.0.0-canary.9e797daaf.0","@material/feature-targeting":"13.0.0-canary.9e797daaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.9e797daaf.0_1627583791243_0.721489252087189","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/notched-outline","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba4705523dc4be16f026191627aa15cd09a02364","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":34,"integrity":"sha512-Dzm7repad7+cKYJVkMqvjakXLK3BDT2whB/XUIY0RKhRBffzdKL+LxDG66ZzgjxKHAiOa8Vsob8aWb9dja0WWg==","signatures":[{"sig":"MEUCIQCG2tkUX/H4Pay/LgAVWYaJ3Oq5ZDDk/5HXJe3I2CzHfwIgAQOQCw+mqril1EhgUDPUrAtNiSvBx6XBrFJY2OXtWDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE2pCRA9TVsSAnZWagAAA9gP/A4MKcy38njv8x2OswwE\nbrbvBGSTHjcPk+TDlD/DeWTo+DW38/5w6KNaIX9aLqJlxM8PpGDF9JpoiUOJ\nNrUGbjc20MTIhUkqAMI40R9bVxDlTe875IMEWwnVf/ot73b3Nr9nPd83B+aP\n5e7Ivl7rP89rcifyB5HoHjqHMriEoVcMIfvENTYa2gFP4Cg6VsQdxbKx7hcU\nJrUeHG8A0yVK9ZosvUVmUGLW0W8sI/R+Ow+gYDQONPWssAywqcTqI1fr34EP\nmZOmSHfU/xtAogwWS4HZI3xSOji3m0AxAgzIrZMd85hKR9drDhV9ZA/NWgMn\n1XQAug4C7yE/Y8TKUndmQE+v1owPvYxwyQa4inYJS2Znig9kxXqxHBGe7OF/\n+biZrWFkHEvmNWstgAqxFkMCG/bjUlwsoY8jMjhaAV6ATh2th7J3TfNedAAM\nnTqZQfO9CtgkOZfbvAQ2meDFOBVZci03RzbfMAUXn5L5hX/pJ1DGiHznu2fJ\n8NNf0O8rz1Yec+Fr9ldUFj9rc6HBNb3mV7I39yrYhAGtKSbuDH2vXCVhc5sa\nD7aEVJfSajetRf8zW/RwYijKkdXMZ1GIBh+JdLrKpl5iSIPyYuossXJJpL1o\n6zar6Y69uix3amcuPpH9oY8Ac3/T3UFQYUhjyzAeNTmiq0RB8A+N67Fe7NY6\ntplo\r\n=HAEl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"db010696805aae457c8d8c9da8b394efff28ee35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.adb9f1ad8.0","@material/base":"13.0.0-canary.adb9f1ad8.0","@material/shape":"13.0.0-canary.adb9f1ad8.0","@material/theme":"13.0.0-canary.adb9f1ad8.0","@material/floating-label":"13.0.0-canary.adb9f1ad8.0","@material/feature-targeting":"13.0.0-canary.adb9f1ad8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.adb9f1ad8.0_1627671977001_0.7464756972591797","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/notched-outline","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.cc5377458.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a476b770b9824d3605984d56b72965b4a2d36dde","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.cc5377458.0.tgz","fileCount":34,"integrity":"sha512-t9W/pdyOn/z2PmAMWYnU96fHIzVkc/niFEI0rRHv+CDXXyNzCPH5wgi4ex6nHIL39DYbHSJZgd9z/FYdFMnG5Q==","signatures":[{"sig":"MEUCICnf3fy+iaEpSZnbULXJaSUzNf25SmnZyBUe9+ZETO3KAiEAp4fgYpk0vTtksSqIcCoBhg2XFZVVmXlYBcZZqYq5VXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHBmCRA9TVsSAnZWagAAvhoP/1szc36fs8wuXdo5Kt5N\n+TkQ32AQrjF5p98hN7GyAz30KPws2K2p8ndUhIvJidNY9igCW5eeHoiVHcXh\n1J1Xb0GEKObQ2C/hJPNvlOzCkEglW1NkQeuTbLdGwOAy2aSsSA0rDH8lCFn2\nrpBINVYeXCrKrGvyfzsRtyF+I+yNuL8xXBBc+03Essrtf2Ar4f/+ctaDIAH6\npff8/C+qtrZcRT0c7N6u4CRWUkYmoKhqV6r39+NWz3KKTHDMgpC12yY1AS4I\ncPmgC56Hy3hpJGcmOkNuvfGEf3yC7MsDwGMQZD6zu4CMbHRlN4W5a7vGPYsp\nMpCSfG1dT2L5O3t5xs8fycsDW+oZMgOeG/Py6eY9yGG7JL1jUfDdidIne80P\nE2KrIT4UbQAJzzjEbnjIKLfPbSF46pqrUUTjsLaGG2NDKbP3TIPG7VZDZM+N\n3WnQnOOnr6Mo5sJMyvmXwVa92QJVN/hGhKAvJHA4P/KddUWIJFnf/6NclHSs\nITE0/NGSHSipdMFtIWIzRPVQOFS2fnvDsUsEJoMR/2/egfjvyGlRpJ8/XExx\nqMoIhWOu3cGsqlpvjG4AjEVrHwW/BHIApvWyyTmN+phub90F4q8iC/SusnPe\nbPT6u813znE5p/GlXeKj0GfMPCrXAfi6deza+MDq2KGlUzd+wgkMjHP1VxeT\ned9a\r\n=iHVn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f4f5852cfac85d68dbd83665da839943c29dd866","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.cc5377458.0","@material/base":"13.0.0-canary.cc5377458.0","@material/shape":"13.0.0-canary.cc5377458.0","@material/theme":"13.0.0-canary.cc5377458.0","@material/floating-label":"13.0.0-canary.cc5377458.0","@material/feature-targeting":"13.0.0-canary.cc5377458.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.cc5377458.0_1627680870715_0.9460089965069243","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/notched-outline","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.a395972cf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"098953ec5a997a3614b91328b4a8d35e3c667a01","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.a395972cf.0.tgz","fileCount":34,"integrity":"sha512-ymKJZ3DwCdV3bqtQ8rR3VRzAU0UyjayUZ6TCMr4/gMg2d/Px8MosRnfI425bil5K43IIesaIePTEfjOuWQsaOw==","signatures":[{"sig":"MEYCIQD1NLOXsNju+oWkR3vjlUA9Eu9/j5qLWKHr4aKMPgoc5wIhALYxL68jKpUfQ44YB1VYrjQEkiEU7tzpJNpSfp1osyOL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbQOCRA9TVsSAnZWagAAkl4QAKB34AC4NpYhWXCVMQYs\ndKy0g+fyi6NqhvUZ9N8oRwKA7nEhnFhqxOshno6fwX20ZyE7h+Zxp08BcnSO\n284XZaHVf++ly3lX1lKiZBcu1BazTLQoegdSVyPLCyjF6yPmXubOfgy1Z+FH\nYFzoc+O3orJVvLFu24dPIgQXRQtLlaSO7owMhINMbnkhrGFFmXjDcXQ45foD\nWNZed8zOVWG+RM6vmaEldO81cz7KeNeJkECOOUbd4t6FNoXeWwPxmvEDRwqo\nJFIcVVVWKv7ZJRUeZgK7i+4H50DTudGqePieVn47ozyM62gIR6VFLv4yIWbr\n9Qf+Z5Xf121m5yPsWjR/mcynELFn11gEYh/l9atWQ3MmY2t4tZlcpEDLnOka\n0aLGTmbU9QtjXDvbYMQItWeN1rnysDGHMOJRRWYOwjXIiG1l65bbcpt5+w6Z\nn5NG/XaloppU7ZO2dQOUB5FiPO1GMll3LYTah8uSPPMcp/m0zSPkeq3Shh/g\n+Ms/YFQOXk4rfoRFpzoyuK5qiVm2Y+0mn8l3D/Q+/PWa5jdT8HN3IBsKu434\n3P6yJHfp8Si6VHg8VFtxJH7iGsg/UYThcspbiGbBw6F/UJsbI0iivFdeuOUv\nxkxYWjBaegpqMQvQpYegHqKWrDloC+kSBOwejbG7uqc6VlGJf7Y4SyPgtZIl\nP9ga\r\n=MRWF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"00a6b6110465620df99cf5f775d52a1054c91cef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.a395972cf.0","@material/base":"13.0.0-canary.a395972cf.0","@material/shape":"13.0.0-canary.a395972cf.0","@material/theme":"13.0.0-canary.a395972cf.0","@material/floating-label":"13.0.0-canary.a395972cf.0","@material/feature-targeting":"13.0.0-canary.a395972cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.a395972cf.0_1628025870258_0.4295430793619621","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/notched-outline","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ee74cea72d19b1449115f22c66765e12167fb70","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.7c96e6b98.0.tgz","fileCount":34,"integrity":"sha512-Wfze0OME3SeCMbdsH0KwT7SNe73r23089F4cC3dwzXUtmqP/CsQ3EwuQn4lBt2ymY7uBZ/uv+1B2ULUxZ2vCfw==","signatures":[{"sig":"MEYCIQDVl5PncR6jYHIQBGfENR0gDoyR4jUEKDJUNyfJwul8sQIhAMyKoZ5G0RnNN/98qTGQq3i3WRoFkaSHhxuiMN0il2jm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb/qCRA9TVsSAnZWagAAVf8QAJk5bVNRwjEbUMhMlT9u\nxInvTlehn8qPwA3i+2ZA7uMUvSGUS0ygLdbQqJOJoG112dvZ+Rlhf9t1MG0v\nTQADoh85nVqg5fQjdmp2c2/f3Zem+SgByc4eDXZWhCcbdxp+YTvuiju1W3ln\n6mYJf7mJiEazG3XRwy89JxbOkw45XpfYiZGbr9AzpMzlQvstXmMszbIyDIdJ\nF+asbqQv3g8AQuOk+EWA0zhy6nqmdkag/F3mKBdyysR8UObv1Gy3smFEOiNh\narKInMOhYFPta9VP7o8h7T6MEVLmpHUvNJ+Ek+6AC8cjN5Js4zDgI0vttc8s\nUhTI2U8omAYLjbsE+y4wy4a+X+rXFV3lxvg2nzE72t9+oXdwl6rS1PahCGui\nYdPMBeSdnldJe4Q76wIxo5+5pxlIfNYZP/Hx0PZP/yYjDX/h4EN6kHcrgWaN\nxGegH20whvvIcQd6TdLCE97jMmx55x8CFZ0TGr+RlgwSG0AQHK4QH3z6W4t4\n3m4ATDbcDX0gMTHUEpoTu7QtBzM4WrC0K+ZFhBdH+ATwXhitxEFU/oKgTQU7\nEEi79uwMqLCMXVIZhBxyseY1KOO7KanImKaM9I8FUcnKonKYYF7UP3HM7SlE\nrC1KkQJsOjR5Ogk4PsW9OaPTjdziSCm+1f0JP3pjGc/R8qj1sVg4OJk/W6gL\nphxd\r\n=+8ON\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"38c48bd580ff0facb66c28bf9caeebbd2a6a4033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.7c96e6b98.0","@material/base":"13.0.0-canary.7c96e6b98.0","@material/shape":"13.0.0-canary.7c96e6b98.0","@material/theme":"13.0.0-canary.7c96e6b98.0","@material/floating-label":"13.0.0-canary.7c96e6b98.0","@material/feature-targeting":"13.0.0-canary.7c96e6b98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.7c96e6b98.0_1628028906214_0.5957809796453708","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/notched-outline","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1491362d5bb66784e67d6f395e1fce24dc41f965","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":34,"integrity":"sha512-MiRDSmAwJx2/UTIJzU2jZRwzOrZBKQPfIjYoIaLpseCAgQqpB9dY+LvWWdzWeEaVLXN6VZ547idpxBAb2ngmdw==","signatures":[{"sig":"MEYCIQDym+s6AJwOjUFgYDyNJAxYQ6NkMOgCRwf5IXccrIQO+gIhAP1Ga+vXLIMeOPmeGPR5nJpBqyvA+qlkbdD8CdukZDS4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCyo4CRA9TVsSAnZWagAAjVAP/1T39UWUBm8fJOn+1Bdr\ndcFAV511eccurZzVQWnXglRE9xQFGOZ0c2vFpOV44ruNKk0nf867UJsv7/u4\nJvdOKKAOKuzrFC2t3FAH6suU0VvsNnzJNAy2ESLHrotsUpSCj0VIach7aTYp\nrf+35MR2MnyEdwsldQtESVN8drphfVVF7IXke1qul8V+q8J6Z4RMGxTb9ocL\ncpXhvm/hGU6e3uNYtGfQCXo3FNwdxI0NxuiiHP9iU1aRc10obZZudGG/aZsI\nKWWv+FIB7bLZ1XzQQYs+bQq0hMNcPFAbwilG3CydMg8FUB6AKSQGKpjmrp2z\nSk37dyCzf5vmhGOHp2KW+MtzvUbUlwomzMFwaOlVH7gbGOB0mTw+d/fYiRW2\n3AN4ro56SJkKHrrm5JBbtjFs7ZIolshMqK1IydJnK366HkzTfxETgMbnnXIR\ntwu2Dhvhs9dWcUJ7CMaERGn1o8V3Q9tuMVCEN1GLkrw0sqK2K1l0Zo9UBPTn\n72hw0TRqyg5dCS65NA8fSgohHLC/SaYJaT6XFUS/PQ8gJ8lSNdto3FT7Xvxb\nwN/kpFxirUS0JCFskFRcULdbovlATkMo8ZI4ak+h7fsiSGGOX6HewUFHvOZF\nYgN9ZimEjkEasjTFmgTm9b7OuT2PblaLtzYteg47ZHmdUR23oF11pLwKsD38\nvLp1\r\n=R9hb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cb4d3f1d1d37c50939ed5269748eebb96f798601","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.a80c8b2c2.0","@material/base":"13.0.0-canary.a80c8b2c2.0","@material/shape":"13.0.0-canary.a80c8b2c2.0","@material/theme":"13.0.0-canary.a80c8b2c2.0","@material/floating-label":"13.0.0-canary.a80c8b2c2.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.a80c8b2c2.0_1628121656416_0.4490294064006404","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/notched-outline","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.3dd611091.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e8d74ecfa1ea50acf7202b4e0d159eb1c3a2eb9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.3dd611091.0.tgz","fileCount":34,"integrity":"sha512-1oo3jGKbEcWQPNRaLeeEYDXqKNCIFAR6a6EC5odx/zyO797Oqp0FqZ3xvMt/u8JabMpBIgnhS68Iu4gs73h2Fw==","signatures":[{"sig":"MEYCIQDKtIOyyQx723IfNh+/32j0W3zCuI5CmJcNbDr/wUP6BwIhANQwQejJ3Rmler9teuzD1x3O3iZ9sRyYRZv8p1P948y8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2G0CRA9TVsSAnZWagAAxGAP/235d7EJ2hVTUN9Gl398\nQBhAYoeenze+51jFD0h5bFNKRqVEs7K4rO6PfgQAwfg9tuEe8cFNy2Pn0pbj\ndkyMZ6VIH2xFXnySmqKiKSf1jMsghkDh5zye+Mk3PKgQiM0ogxISh7Of4MF7\nHP2tfhqD1ehEFIGZE2To21VKcIpga/B/xNlevrLkrXTRjWZ7/6AC607QhECc\nSRCOqH+RZQh8gM1LFq8jBH45rwpOJ+p6NabAx/XZOQrPtTeAuVhXNmKRQlZK\nye9STkWXIK/MRTaUE45NKD6vy8Fc50tfINfdR0LwhfJ2flR+h9SrAaSLDNG+\nqSwtGYM7mxJJtAU4B7nHPo3h2LSHnMraLA12FI05Oey/R69PPB5MIJoZl7bh\nbl44EIONUpfJepQz8r4xjpcUMJ5VpsmResibm/0mz5uNuSJ1OYYf53TPA5Vt\nf+grYJpuKVWKL/UeUML2Bdu1U1T7pgSExRoWGKRYrH5+83TbmqrFdGATQMit\nK8BNl5Ws1nns3OKktJl/Yf4LYMW8nWT+Dgo4/aA++WEveU26r6buWevQF54Y\nxoKfwpT9W0VKSJgDm6KhrfVGDT9WwciITrIyimgjCyhcw1iJinKXSIUxLs6J\nYtcBiS1ylG2xyGAKSN2N6LzoEI0DX+faKmC4tIbG9weHP1rmB8+bJ/Wl4jVa\nFhQA\r\n=NuIP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fc6a6a59d9c86ac1f85efd94a4aa6a8e4c27c379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.3dd611091.0","@material/base":"13.0.0-canary.3dd611091.0","@material/shape":"13.0.0-canary.3dd611091.0","@material/theme":"13.0.0-canary.3dd611091.0","@material/floating-label":"13.0.0-canary.3dd611091.0","@material/feature-targeting":"13.0.0-canary.3dd611091.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.3dd611091.0_1628135860290_0.002535333258335548","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/notched-outline","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6686da8661fdb5548a65fd6e1bc3e3d8ddfbe3e5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.5dee37ff6.0.tgz","fileCount":34,"integrity":"sha512-u3oNWqOKBGQnJRig8+AiQ8aqb6lP7XNrwMJdGAQ6b2W631kTVSM8GiWOZOT1m3uKS3vAJ4k/i/ieG4Of52yGAQ==","signatures":[{"sig":"MEQCIH5CMxAJrmBkm8icPW2W7d7OF60Fha4QGaiLUhIgKCm2AiAAq8mo0xhdYUaLeKGeEK6TzO7SvehowGW1HncXPpIhcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCNCCRA9TVsSAnZWagAAH7sP/2fiDZvgnC7afGL/+OEr\nf6al6++Usk27n2lVYVkEmisjsMVQu739Tv+6Q6+1bppgOCrITJwt+in+Jffa\nrkkQkyEDAb56fdpXTHHPMl9FDPYD0ObwiYB6FdJV+9rPqlb19XSdRjzaFf1i\nHmlmucVliLTB5cCnRcIMIUPNAqlA7mma/4Ivt4OcFNRK2oiwi/EAOBGt3FfS\nyaBaYyW/lRlAkzBzRcqCFvWI7QyO1gJBYO5uT0aH5OmkeoJlCiATIKR/qbBU\n2wmY1yWRKEtTwLKUYNiPL0iFftuS/hIwK8WhwR48Kt4p0sseYnJuYPwCs9s5\nL3+PTrTRe0bJ2yO2DbOXF2PTr1SE4pcZU+zIS5iVaOWky9HbDCI1T7Eh2jdk\n1d7AD0G/7ZO2i5uefQcfKq+tOHAKq4gD0KHReF/eVlEWqj7cLNTAY1fHg0H8\n+c2qPSxzknfEqvmPQgB+YrUrhH8mjWMMEzMgbOOlGYlVajuPikQZuAmGKLee\n352MkErgC8V2FCHuL+D9/U0F2Q4iDlBUYrM/1INny4x+0GqzWvAERZi2oWj4\n/ZnQ0wBkVYjyZnK64eODYPp1N8bxyqRi9m0Rjm5GRW8Ya66YPIcGqS0NSHBW\nmSMrNTlGaCe5SEYNEXecI72mHQtUuEs5oIbbBxWLSislG0q09HO8zm8ldUDf\n0hia\r\n=Lloh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a7b521f6e807878ddba15c813505134621ef85d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.5dee37ff6.0","@material/base":"13.0.0-canary.5dee37ff6.0","@material/shape":"13.0.0-canary.5dee37ff6.0","@material/theme":"13.0.0-canary.5dee37ff6.0","@material/floating-label":"13.0.0-canary.5dee37ff6.0","@material/feature-targeting":"13.0.0-canary.5dee37ff6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.5dee37ff6.0_1628185409818_0.07216884013334024","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/notched-outline","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48dc5f30ca7a1a51d5e2fdb137881f00fc30d35e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.bf405d22a.0.tgz","fileCount":34,"integrity":"sha512-ITyEynov3PL+vZTRxPvOGhgQxzQ2BJJlbZ91hM2HnFAm9CxQKzMHw3UhDAV3kf5KFM7ISWDjipuC+0e3JS5ISw==","signatures":[{"sig":"MEUCIDQISA85sOEZSreQOxeQ2KRqqyH/yOyPWUE57aY7mdl4AiEA2cVVcKxaCmqfMJAvlegyDwvkjC60vWoSccxXTKoMQL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEfDCRA9TVsSAnZWagAA8oQP/3NoBZ/tpk6yLluPrP9n\n2FRYSqJF7Mk6kcapgq1OrfCAot+QVA4B7CQcsLZkDI7auuiBx4f4836F5UMo\n/wwNLqhxERg6XOd0LpjHuyTYjFF0/oUVT/kDVyW+Os46FIDCAS450YeB1eNS\nHkZ6BjNJP66FOBWiHmn1gVJJA/01qXHvHPqv39MDxoaWgPaoKZX1SuvCQ4lc\ncau2sVY53RxhhoV4xT6VhyMLnR4jWwglFwHRmcYFbwdcn49RZQRgECx1lEPD\nk6Vqmd0ZYsjOVmZYGONVqZih8EXyQMvd8ESMAKyYBa2ZQSdmkGiWzBhR8lpj\nEja+MKzGQUXTgTkOHFmED6w/6XKEJdo5AcF3hbyPWm2vxert08WgujRPzaWk\nVQ/FIJJ7mt9rTMzFUfLTpzot88AY9drHV2TLNXE++aYNqoYnN/pB9mzjcXUw\nlwcJTjRWAqw0g6e33aq+yuEQ2+IhhVDMEKXyWtTyTLpPhU/BnD4RMVkn4egG\nRGGNXloaNYp/7R0o1U+3M+LLYtgWhj4NaCscTe33Z1JE4vCO5G9O5pCS1Rl3\nD93oC17uAO83n1pOqNuMg2JqSZg23i1AziNCW+WrQc2UD39xJSfYRZDxKBVR\n48d81EAJsf+sb48Ook/y39qn475jH2WA/J2KchOo1jmDg2DVl3nabakWZmG1\no/Gp\r\n=Th5H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","types":"dist/mdc.notchedOutline.d.ts","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"00ae15a245c6a46fa0a13aa61a02e5958c0eddbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.bf405d22a.0","@material/base":"13.0.0-canary.bf405d22a.0","@material/shape":"13.0.0-canary.bf405d22a.0","@material/theme":"13.0.0-canary.bf405d22a.0","@material/floating-label":"13.0.0-canary.bf405d22a.0","@material/feature-targeting":"13.0.0-canary.bf405d22a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.bf405d22a.0_1628194755526_0.5547149920203627","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/notched-outline","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e133b1c24f3955b8857ebf702446a9c9f4668951","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.b47dd37a6.0.tgz","fileCount":33,"integrity":"sha512-C7Z/+uIxULoZYlX+1h4OCiu6QKVE1FXbPGrPoJRZTkS/h++A7Uv3QRZYfND5RvXYs0RbB3egv+mrPIdQQNub1A==","signatures":[{"sig":"MEQCIHI0at0ncFMcayJdchFdyZrtq7fazkTbTqTQpIi2y8lgAiBu4Nv0qHbv88CaoZuwPMoCilx/vY5z41a6t08xDHcumA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE86CRA9TVsSAnZWagAADZ0QAJGfed/8ayTiPsn3WX7a\np8bqsXj1jjLCn2kxFGm7t5OLnfma6eK4/E7NggrG62BkE2K/gtlnShHOGiAM\nvNFF2D3ZwQ+i7JPD2JpKYJVmQP8T5GHKjItMoPiDvkQapFXDYjw0Dg7cSu49\nJshwEdqbwxJ9W2gGZSYXhNjRsAlIMH1rUwvqZNHr+Cl4tzz5gGjyJ51ayu11\nR2R0VBLNmEb8FAgbc3Lpn2QH148a4fSaevnTs2HXaTUqtN3jxlIbC76WnMPk\nf0MWynuNntcXC5XEZpyyYdiaLB6qh5Z50Qvewn+ynhScisQpSLd9j/4CN7IK\nIlmqgXs5EvAo4kCdKkb+On9xBdogCvsSQC2FMmWMjcDJih4NkF5MXt9pVQJL\n4fwhMhDNg6ZLGbmgAWeP7JQOqd0FrkP+3o8qPPbK9zhwyFsrm7ldmfjjZ612\niJvZ/PjRwogYPoN4y0KA/2FC1qmrzisaRsjLKcviSuUkF3rhyGECJCdQIso1\nSD5ZLslHsI6D2ZEO0ZWMhSAZODr+tX2l+w2ntWsnSo3Nixm71trBZF6du73p\nJ+OT+/lvsP/xC6Z/NlO0lVnHR4mmqKatCjx0m8XnClZxgCCAgvNbIMAfFBds\n5ICqQwzlqs0FhjHbWSfh6XSC5C990yaQgXEkrat7u5XU7BbFcFWJ5atc1uUp\nGck+\r\n=nC1I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"47f67e5fb310c13dac39b9beefbd6b53fa54d1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.b47dd37a6.0","@material/base":"13.0.0-canary.b47dd37a6.0","@material/shape":"13.0.0-canary.b47dd37a6.0","@material/theme":"13.0.0-canary.b47dd37a6.0","@material/floating-label":"13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.b47dd37a6.0_1628196666656_0.05013761419824858","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/notched-outline","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f357186f228328de2966608c80e4648fa841508","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.6c82b965b.0.tgz","fileCount":33,"integrity":"sha512-bB7tpRvcZl+7bHQHD1c8MhM4H4W93dcaWL5mICbRDOBTdaW4+EvZMBBg8+z7nNjCQfaz6AXxp2RBYPcC8LM2pg==","signatures":[{"sig":"MEUCIEO7Cnz4IsTN3okLB1Ovv06xMtcSQVN7ilf5zobzzaS1AiEAgE/RmMNTdGsqhrTY3Npfe05lXR7dJe6T0nTHcl2441A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWBACRA9TVsSAnZWagAAlBUP/iaaFGZSiLcrzfWfvz1C\n0z4iKds2iyHnREVjn9ajdF8BDmEjHepXS8jOeALKDjzBqCsltVqhy4c8pJwl\njBjHUJ3J67II28oz9X4Yere9nucV7DjtTzlHOraJWH4+NyM1utGCrNSciEy+\nWnlkaIycC5IIy9Z9jKLBgB2mosoAGbr6Ervx1UnYHogeFjh9RNr3jXASyPC6\nnchjX4cqtaxJWrVdbyZaDF+klEV5Uaw9UnT/rT0rMObPIb5I39W4JTknP9ZP\nzmosZmB6jsf9360ILC7jpR2MTzSPCkB/TmyW9RicLP+VBWtVzjrfaDNlx1EG\nRrLpS1D6+OnsQCtfoMgXRmy/AnIKMlVLrQBMe/XQiEtDvHqA7pNpGpTgbHxE\nMEjhYfV4gvB8oLsxDyGUXcmeJp9gKn6OHObMzA06Gr7uzVnSc3bahEcg+0Xa\nNt2cjBpPj5JPiHY3wIL6HpkARmtAOCiZ2gTfNM15wJO4jm/glJPFztyWKVqP\nWGsspcZtltB8Z/d4IOQ7+Qswg6X9taixpZ1053FyqD5FSFrWiMFnlDD7SJoP\nFTQtxasudJMmaqh72AuScZXGzhtRYmKDlvS0VLaZl+Kzf3VyUAv2fZZ1VhzG\n9kf3nJtghaaUDOuTDAB0Rq8fdHhFE4Ze9ycAxuDtiygZR9GUNu96NDM4OJ/x\ncKEp\r\n=/0Er\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"434420b9fc9470dc77940d2240234a564be58d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6c82b965b.0","@material/base":"13.0.0-canary.6c82b965b.0","@material/shape":"13.0.0-canary.6c82b965b.0","@material/theme":"13.0.0-canary.6c82b965b.0","@material/floating-label":"13.0.0-canary.6c82b965b.0","@material/feature-targeting":"13.0.0-canary.6c82b965b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.6c82b965b.0_1628266560593_0.6752681412474157","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/notched-outline","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57ccc896d69eb89f0b37990965145280807a57dc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.4ca11fe76.0.tgz","fileCount":33,"integrity":"sha512-9zp78mGLFPZSj8uVaDJ4lsFPryVSY3qwaVvocx7AmzMx2hYCbq+9ZfSo2s/7WpVBSad8+4WCFplNGhl8E4fQHg==","signatures":[{"sig":"MEUCIASZ738bc06+ipA+P/Ewh6+3Npiwx09q+zagx1E0C96GAiEAm6OLbJ5UQaF1DTWfvM6GjFd9nQbR4u9FMRH6NcYMjkQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWyYCRA9TVsSAnZWagAABL8P/RX9rz4lMZ4QDL1sLttH\nri9Pb6lMSfVJNvF+WxOBriop6ZfV5rvrPFIzJb7InmXKlIkMYMuVCF7Eu+YQ\nWMGNaLLXZ+fReJJgvO9o7nolCzGLCRZh71zmof2KnZsJZG4qSkbcGLciS1/X\nnYqcdlhVYLDBhtqD/EuYL16TTpQ3hY3B5AunVXfs58JVVgh4l94qalGtyUV+\nLx4vIBQryw6IsY0Foz1fagU38l5rOatVeu1cF2CREybcQCZUeY0L6/th3LY8\n8kYFZkj4+VMkMO5I8D7A6oQqrMK8JQl5H6KQq4NoeItChejYx4VSRs9OJIIp\nRb8tjmIFlRFWRCYk1wQbZOt3LM+1OR+DTZCHFkZZqM6XMR+QVLZGqMkxDVxT\nHk7VMRzKA7rkNHzCFpE996BpBGLt986PAtQdF3v4bHoWPfcNPG9UwRnYlWMj\n1fhLUYGtCmf9BvhrqhmNFJuDcW88a6k4IUMn+DY5jxdWNE/haHKxFxjTGTyb\nLOF+ee3FwRbDjXuCz8+aTWKKZOUZWmp2qJ0zOP82YdtZ7it9DxvkiA5AuTSQ\nikaIGzFXPro++RajPW08fal0wKfNvqDbIbf+KxotPXnK14j0r9I79vUztJvj\nzV0BYOVBiVIqwWG2G/8nEMxpxw1eUcXzfrT24N32dKhxYfMY8qkyh8y89ix1\nmKSL\r\n=Te5V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f012412147804a7e8c4bbcb205a7a48a045cd694","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.4ca11fe76.0","@material/base":"13.0.0-canary.4ca11fe76.0","@material/shape":"13.0.0-canary.4ca11fe76.0","@material/theme":"13.0.0-canary.4ca11fe76.0","@material/floating-label":"13.0.0-canary.4ca11fe76.0","@material/feature-targeting":"13.0.0-canary.4ca11fe76.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.4ca11fe76.0_1628269719860_0.08575662609623302","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/notched-outline","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea1e9fb90155342940524c9f9b3d0905cfc9ca17","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.510cf90f2.0.tgz","fileCount":33,"integrity":"sha512-y/yghuUCi50A+HJLbfStQDUIuKCe4er6U6ViIfgADbkDsrhzYbtJW7U9Jd+25Z9UggCPqBFS5Bd3MdCFVzUiUA==","signatures":[{"sig":"MEUCIQC+3oI757/rozb7GNFLEyxBLxJ8fsZt8roSCsp1kEeiwQIgGHqyNeIUuxzyCEDoJ8DljzkRf+HLORzQehI5cOxbVhY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWNnCRA9TVsSAnZWagAA7wsP+gKX+v4gK6s0y6FL44oM\nQz98G0Nsjag9YqsFoi9NuvNBEvbsJVX6X09cuivy5rCww98MbYLdzl/EluSV\npovZ4x2Ho6vb+e3jbMQliCzHhIraco5QtpeGUXg0da+0KLHGUrU06YHqIxE4\nbC/q6006DcdmHY+v5XykNCrf2t2waN7imPQ3PKgRyZB5ymMSRgT18OwIfx6U\nm9wgc+VRS4CVtuqZ9RPdbWTK47Uz4x5pxC/D9jZmx+vs4GE0IVy47E/yebjc\nOvuA9UvR04y5ZSPvcnTpbZkqC5BPAC8+GILL/ltFqbcqsI3Ay6lD51pK97px\nPnH1hZVY50nCZ/oxr8AM82DlURkGJSO/B/fgtGZ0VjK6AHVX9n1ii9aQRuBg\n/+4MttqwqBPdNckQJRZ0R1nFYp6sS5PoPqn8FOnN5WYZyEltZk7bUgsFnZJm\nc8WSSjaN2ba89jy6/eijs/zDdbG1f29iE3CR1IngUrPqvejlVbvJbLq4AEXO\nIG40Ujgae9LbO36mc/X8E30ETo73VlBcxgucVEq5Rw4knWDjptzEt89GN9hT\ncS6APmqu5XPJxxmlLCqUbpQV0x4+fzmdy9kSM9V/Ot6Qls9e9O/PFT8qJKrT\n43FbefWqeslkAL721uRjtWvrBzS7V7BfLPDcJfkf7ZEeOniYtz5lUJ6Sl/ng\n5/Zg\r\n=r/dM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1e11d1f2c4c830419dc862b62700d4484604a3fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.510cf90f2.0","@material/base":"13.0.0-canary.510cf90f2.0","@material/shape":"13.0.0-canary.510cf90f2.0","@material/theme":"13.0.0-canary.510cf90f2.0","@material/floating-label":"13.0.0-canary.510cf90f2.0","@material/feature-targeting":"13.0.0-canary.510cf90f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.510cf90f2.0_1628529511088_0.9751973633121376","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/notched-outline","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"deab678bad47286439794051c5670aec5baf3634","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.17580ebf7.0.tgz","fileCount":33,"integrity":"sha512-ELLVv8sREFfk2LyHjWwrcAZtE2GlwA1d6lJIeMoPwnYQquVkZRqqcLN3+Kb9hYtZyPfONZIvft9QaRKwH30kBw==","signatures":[{"sig":"MEYCIQDCra2y+Avfp2EKwtzBUO0gG1WMwnAfuvjQ4gO7fJNtNwIhAKM9E3yMJvec+q2lCDt8zBZfPHmqIw3KisVSr5VjS0fD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXF7CRA9TVsSAnZWagAAw6MP/1SmEu5nT8Ow9pKQ8aOd\n90FA4wk4T9X59GeII0dYqtmHy5Yidju/2al81G16EM9332zppFDuMwBu6g5T\nsjZGpl3vVh+MkzoOXnCiYNFqmz3WBPEOzOCumYv38n+PDaR0AK1mV1rOxxRS\nXfkmXwJoTHLz4lz7lYOMnCVjfTIIRFzqxeSYWClAPC+xmMJH4pAY2GKWXQx1\nbXB+GR2PnlSMLjmgknYjfv/8cdKulK0EX42z1RYBgONABqG5MZ9XY46XjdeM\n5Xm/RiC6g3KZwQlzLND4p2bauIOgnMViyNMUgnQKQlnQaW6+CDL4JlklyOxM\nwTHr628qEvnhSf9GC3LcmX65nazwRe+P6UhMkBH8xaiLpF+oXxlAoU0GxdnK\naT8scG9/+jm+2iX1Nw/P+6f8bRpx/9/nnq3hcM/zATX95Mp/5pN80YxR9agR\n0+oF9c2gWLUJId6Rc99QbAK7wJFVnHBFuDwMV/+NuB18K4kCKjbSkQnSfcRp\ny/jz+Pu6wpmzR3c/4Ol4h95GupsgPjgedbnhnHZPutZ4QifpLniLu87FYE/4\npQT0iksi/TZqjocwZXaHlrynzAYMcFYBFR/e3x7MB04doo25YJzuaa7u6JiT\nXahTI5JTRrcJ4GWOB62/0mZbjZD2ZIlcgK6RRQ5j7NR8oi0HxiqmYaGc/b9z\npl9v\r\n=mHiE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5bde42052101fa1fdd48d89c3dde8b9e99bdd1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.17580ebf7.0","@material/base":"13.0.0-canary.17580ebf7.0","@material/shape":"13.0.0-canary.17580ebf7.0","@material/theme":"13.0.0-canary.17580ebf7.0","@material/floating-label":"13.0.0-canary.17580ebf7.0","@material/feature-targeting":"13.0.0-canary.17580ebf7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.17580ebf7.0_1628533115591_0.05274558091845605","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/notched-outline","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.7249a3060.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0b090ae0a302dab0cef1d79fc30159064a75134","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.7249a3060.0.tgz","fileCount":33,"integrity":"sha512-09vdazyI6VOy0HcDGshNz7ZwmkuVBni6Xh2Y29DHJV3JpiCGo/fz1HheQ5rtdrpWrRBiExjnzAPBNkBI2sKqzA==","signatures":[{"sig":"MEUCIAndGBCS7Z4h+aZC5P1j1JW+LM/EqtQx3oDPUTqkCe4ZAiEA1xYw0DdXJDyO020VCoqIZR6pijYFwcXWsA7P7sVRo70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXJ2CRA9TVsSAnZWagAA32AP/A1Oi+lMp1ayvCB3iSsi\nrVMroWBLGXaHx07f1UeR5lD+EpU3UhdcSl8OKdORJN6P0COM39R2IYmFg2XO\nSSRye07l1uoOc00L8zKvlRCxAhYmYoyO9XZkagZ9dActlbaMWszPMCYsxuvZ\n2Q38NGNNitEAF/PJ1X/CXW0hNVCrN3YvH7CiOLDdP+VRvlWP++AbNWYRmnMq\nYOXcyZ+VeR6aQtUpPfvHDvdrzgVrtsWWaGiLDTbFoOIoxrMV49g4t3WQ02Ec\n5Gyi+1Q2cMeX8mO+Zh+tTJG9EM3sn6j4O+fm5liKf1MsvNKdZapyhWWL7b3W\nP7rBoe8utu8uh0VyqAUpBYs005mOY8ZOQvKk6GeYbW2DX7v7903L4C5OEsvK\nolo8SMPWckVUR1kIDnIbmjMg9kT75vx7ycMFawmZEqAB0+socC9Ay7jtuV1x\nvSOwbL2RozLDLFx/6iOr51z704DiyPx9onpYzxxP+WGPHgj37y325c/YEiI9\n8/DNg+JPUYOg0bkCa5lW5nbdnNg83v6GtuszGhkltgGHDcF8Js1p5xyHorKt\nKMACtCVpJ+j8gjMlOh+kyg3sNU7Cp0B8rs5VBLoNFgJGz9nR8Ig+oVSfYi7W\nwp38DdrPGTq7g6g4hd3gTi8rrf4hqyifCUN0xaHony+EafuEYVmGCRrLFP5g\nhtCe\r\n=qEPR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3412ad644836acdf464e70d019c36080ab377321","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.7249a3060.0","@material/base":"13.0.0-canary.7249a3060.0","@material/shape":"13.0.0-canary.7249a3060.0","@material/theme":"13.0.0-canary.7249a3060.0","@material/floating-label":"13.0.0-canary.7249a3060.0","@material/feature-targeting":"13.0.0-canary.7249a3060.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.7249a3060.0_1628533366574_0.011804480385183336","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/notched-outline","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.4c405863b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e55d4a1dd1f074e649ae7926e57f456b3c47f31f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.4c405863b.0.tgz","fileCount":33,"integrity":"sha512-hII4EFZlykr6KvWgK9Z/rMwe59UMDG91O+ISd1FpzpXQoAm6RewdAwa76yb+Yf10/r+Jjq5uQ1FMYdqrWNk5iA==","signatures":[{"sig":"MEQCIHmBFjGet0lU0RV+f2P3LDtFlvDrY7JpXVx9LMHCP6J8AiAv62aPulEMk3nPTUUhq850he5qHE4GYHVjYapdXEyejg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErpqCRA9TVsSAnZWagAAHKcP/j2Db1h98gjr5EMjQbqa\n/wuIDqHTdMRqTTGmmXvcHZ9/o8mz5Zo1nfGrqGU0vn4U9aeVsR/WQlzxHgxR\nCN+nL/cSF3R6TWmWlQhvr3H/Rfy6gE94HDVMA9oIvzYSQ6tidYS/6v15BFHa\ne7cYjQ2/+3QEPO2d7ydSPSScKQVqslScI0ZhIixLA2J9kMhUo6Yt8obRHpek\ndSrT1llRZw+J9O65Bbd5kjU9POb2NasIElAFYLRZYTNFx0jWVXSRMu1gkRFw\npGDQuNInfuTD12I4XyvboX76yyi806wuAQwRQ3GLuUa95PcPMiUhbmCiCNLl\nAemIxSMzvISaRu73rmskC7SzcE3AAmZbPHer/eeuZSPc7fS8xjXUkgMzpQNF\nI77FFuDHYCjyljlg71w9QAzNIRgy++2PIyfILLojUurYGJh8oyBc33Bok/Lj\nYGh4QOHtlJCBWnl/huY33MaUVaCx/ZrP/c5XZSdIpoFpSgNSdAWde4OWEVi/\nuJ6/jp+1dUvFHuy4dtNzr0G/bizF1KENHvPn2X7GNiXkxTFCHfvbpSwAtRlb\njSr2ZGsLdPIHaBvnlXOl5F12BMLn2S/zG9kXnpV9BLiilD9Q+5dXn/sFRPPD\nGWYpVfbA1ICTVimWG4SGx8T2dKtECo+P2jE4CQl0cD7ZvvW3RYXMeSgCUOHu\nDnF/\r\n=G4GJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b3861554313a19a861a5f6850f9df33ae5bc42b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.4c405863b.0","@material/base":"13.0.0-canary.4c405863b.0","@material/shape":"13.0.0-canary.4c405863b.0","@material/theme":"13.0.0-canary.4c405863b.0","@material/floating-label":"13.0.0-canary.4c405863b.0","@material/feature-targeting":"13.0.0-canary.4c405863b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.4c405863b.0_1628617322740_0.0056867415175079206","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/notched-outline","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2686b52f7cb57f7ffa88b7b609498f647f6834c2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.f4241a42a.0.tgz","fileCount":33,"integrity":"sha512-Se/htl6upPivGf76CKOsqWpUR/7kRWkA+EoouqL+9sO/8rg+Fy55hOfD45wJRqMiUTAWYLdR8g/klftZLW3Rtg==","signatures":[{"sig":"MEUCIQC+cudVQ38g94eHcZqxP76bJYo4FyiZ8tETNxuVVxu0qQIgXmY9wmN3lqH46YcqMnCldIHBkFxhhFAZVa9oVWp5HZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAJCCRA9TVsSAnZWagAA+ykP/1XIdWzADYm2elmowkDu\n7qgUCbZdy7a13zSq2xPJMtkXRyMGBxN+xbqgxraBKg0NrpSXfZWYfg4Vyap7\nSxsED4X604XWufaylw8KhCq/F2CdpB+rsEFa1z5+UuS9hl/6ZxhFRL5kDr5D\nb6iPN3D0WgVGOnMi48PeG9naTbhy7FuXvvSY4jDNnmScJ74ORyUvNgu2hZoq\nd1mt+JoYi0PXAji4eavaTO4NLuX8Fl4U2IxMlggSME4tdUdx1JNe7msyp3FG\n6FtJc0zt0fvivZDB9X9j/+NP4AqV2821MlnLv5HFEVLLDFzfraQeBSqMhRBc\nhYzvcnzf5lS1CU+f5rMLDgCWqKiXe/fr+GCKtUOD/w4yEkr5yqNhTEn0XVIL\nMBwnmjln302JCDFNCTxFbFU4xh/tegBdfvMKrB+GJbfeyZ13rLtABJRYhzhE\nwB0f8BLl7kJGbmdo3esJDs4fuL8cOgtZneqthCxsvBxgb6YHQkCIV0P3E68r\nqqCMgFZDyHSetSpB36QmSmIMESs2/ww3bOyAKemE8pHzLf/cbUQUi3hp96oB\nSYfKWteVf9UIxdcqxulNmKSGvu7NQfWX+LJqTg/RgBm+N93KDbPIe6Io0KeN\njjo7klIGcBD4NjpTvxjkjV9fU+4FimIR8nycdZ1OionrBdH4f6HpTdPCw+Ez\nGnPa\r\n=Lu3j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bd97e42dc6a97fb74d92a9cb04e919c5c8af4da6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.f4241a42a.0","@material/base":"13.0.0-canary.f4241a42a.0","@material/shape":"13.0.0-canary.f4241a42a.0","@material/theme":"13.0.0-canary.f4241a42a.0","@material/floating-label":"13.0.0-canary.f4241a42a.0","@material/feature-targeting":"13.0.0-canary.f4241a42a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.f4241a42a.0_1628701250114_0.052528105453906626","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/notched-outline","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b5ba79f32a80842bb08ea0a63d8f35c88f65f9d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":33,"integrity":"sha512-qc9f6JBiI4XeMK0LsrNSjCq2V0OWBAyK2nNfHMDKLAp0FV5nqdor7TvgSA8bodmYdRhKqSt4k8Rwo43jf5x+Ng==","signatures":[{"sig":"MEUCIQCaeKFqR3en5Vhj1LgqtykcvK6pVZ6SL5DEkfiNhUWB1AIgNAZXb7LHtHJkalSXC41H9QX+n/x8QZKkD9pj7A75nns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEFUCRA9TVsSAnZWagAArv0P/089CJQJz15sX8uhvrCZ\nHOXuwAbgAjiAOHrcOgeJqzj0Q8ZM6XekJo2VvZOZGU0i4yNKJ9LVtB4AfNkE\nPCrdDjsBXUaT2qfXfkKQ6skSBNBzA5fAOi7u2CZQ1Y82sbvsQHwjRKAKhPY7\nAfAJ177ssueFT3QJt4LRSRAgw2RHvHS8IaDbIAYBuPOz/PIqAOxfZyKMSgNY\nJtZbtK0QoFE+gdsM4VxMmAB/hkCJbnH4ijX5dulAGeBw21Os6aAm2IY/cL/K\nDduOAKGqRkcylhh0t7rML8pT4juILC7mtchKBr041F7Rc4u43D3skip96qTp\n0CYHSIwoYZcv4kefcZjUBRm3EaYPSflLM69OfHYV2IeXq0smlsapyDWyUiCM\nmSxh2zg77WUZ9EsVGfhgHLHdiGuZhzfMcDifGRhttXQZDb9osWl623m/MSj1\nGnmXu1REOs6raUaOTydBKCiLvgoLSz0CvZt7jDtUPm8dwa7XKcLhWgIm+2/3\n3s/WXZxyfNuAsh60YsoIVyjOrWYSXlNvM4W8CEMFfoiiJm/2i2NLjqY1M9Kj\n71hha2dvYzBdx+sEnarDLwYEaAzKkoC1JV56NHzDoYzBOmKDU0Dhn5G6gqUY\nYCdm+Uvtu9+5BX1CEuZSIifPFJkQY0ExKyls0/P1MOn9WfEIdfLK0hP1CtSR\nyG/5\r\n=dhNX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"db28e7f3596365b1d41f14b53d656a743eb28bf3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.0ad12ed3c.0","@material/base":"13.0.0-canary.0ad12ed3c.0","@material/shape":"13.0.0-canary.0ad12ed3c.0","@material/theme":"13.0.0-canary.0ad12ed3c.0","@material/floating-label":"13.0.0-canary.0ad12ed3c.0","@material/feature-targeting":"13.0.0-canary.0ad12ed3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.0ad12ed3c.0_1628717396122_0.47055778113803526","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/notched-outline","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cc582177d6c0d0ac980ca512a20277e9bf727e4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.077dcfcfe.0.tgz","fileCount":33,"integrity":"sha512-U3dxJ5Vb9nQZhQQMOBt1kIwv+7FxSF1Oxqt1mGiqgLTgqTZpZbCG66qUszsDPRjKd3gm3vCiZVzFp7MJqhgTeg==","signatures":[{"sig":"MEQCICQY6GVFKLzzsZ3lwwM/MydWpc19QmNnTCYBO5nT+pCjAiA9cSPW/mCgrh2TIosOUXfy70UvBIMAC7DGW3pm+0CgWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWDTCRA9TVsSAnZWagAAOj4QAJphRXYVnWzJCYBQQmOR\nw3+JvK/AHYYPGvZ5zAxI8zRlpjVe7ev+xNvFBokkF/2Z7Jl/KP6QHPaagRzF\nZnFHd+3PgORtbK2F3qqfpw1cYiTMfTgbBa7l4zZ1zbe6KT+HjKa32Hy1fgSV\nhk+/bommjjGlroKVOwYb0H3QpxfGgcN80tzcImiKr0yI+ZcmTmxRVxQE3nBy\np6Nw/AJU1svNLRp4VahSEZFFkGj4afU6xrnthkkyJsKHVyyr7SRWuiB062or\n6SHo+GNbgKtyg1V8kplwmSrDjhQNPVDWqwtHUqzl3PrGsk7BFiAyfArlNOKy\nGy3Q2nAcRaOop1VZ7HR61eEu/gPg9k88maqdDuCIom7ALp7Y6f/ulYyr/kyG\nWa/BCAqve060R7pUEEeTPNU8XgUnW5uxFajIMatvVLMF1VgM24AgAdpe9mLQ\nIu8v3q+PNDtw2kOQsz+ifxnbeiYAcWkF1OuqrDIBVGEy3z4lRAZVumHOq1nU\nU07rg0ATfSh9rJ/BAW/UTgvnXLM9Z7gtxRo7rRD0sNNxNFGOOTiRH9ftPnQe\nAmO/42zVsAo92+QO6hwukn7vzhqfSV4Dxq0EPbObp55wNBTsKGOKInWATv+i\nbWRZSXfO9DwvwGNQvwgpTESiA2FZx85aggYA11aUxbK8hbAe7JjVi6snWR+J\n0HPn\r\n=VsPW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0ce840a62c702182bebe1a5f2ed037bc002472dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.077dcfcfe.0","@material/base":"13.0.0-canary.077dcfcfe.0","@material/shape":"13.0.0-canary.077dcfcfe.0","@material/theme":"13.0.0-canary.077dcfcfe.0","@material/floating-label":"13.0.0-canary.077dcfcfe.0","@material/feature-targeting":"13.0.0-canary.077dcfcfe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.077dcfcfe.0_1628790995184_0.2932987846072057","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/notched-outline","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.e3346766f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be2c05ba7462ef6e259bb562576501e25df86ece","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.e3346766f.0.tgz","fileCount":33,"integrity":"sha512-XlsBi4aw2QsACCQjPL/JmW+JKsFnYdenRQo16FjwwPyQgPDn/sNaKrFd0VZrRCnB3Mix44Ei1+RQocihbI6ExQ==","signatures":[{"sig":"MEUCIQD8mPF/N8abIiFnmc2201DTjfu5481pLmpCg77gm+uq7QIgJ/FMyiclhclXdhRD/o95XUykAzpNm8ccmCtIok92VpQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFswZCRA9TVsSAnZWagAAlkQP/2qAkyRA6SaXkrQ/s4+P\nzlmSR2rlD89yNye+1mMrfMJ3NDQ0ncc0IRHDAAB3KrYE3ezGR4KWGpbOZuk4\nDVVOIcZxRSklqkmL/MoZ7SiISKHIxmqKRb7nicimK6ddI0kyiNPBWgfZ/U2m\nNIhRuMj4NkfiiMUdRiQ2I4+keuA6ZXCsyPxkqScSy4dU2+PVT6d9ce/HQk6a\nU/2L+u4fFFpgEX2PAcWQXGMatq/BXizV/6JCIwhbyVYY24K/Y5vbVwmJAQRD\nXFVOeQS4MFPuIZARL3F11rTNdXZMF3elxwZWIwX9T/fXaDIb2a7PfZa8svK3\nMpBFpvc8+4yrLLFugw21NObqoOMGgRQEAIexnmlzd2JTbxa8wrrXdzfFe9ZQ\nlk52Bncgc7jvbHbDXWpKLGOoayhQ2V7+SLkESEXZpJm+bJiGbXB145uQvmOM\nYAlZpjyxSwKOcBLp+c8d8aBTuunATqsm/58RkK0WOVO4V7exQ0eJQA4ZCtYk\ndSeSvT+SEu8MV9wPH5cPLHb81TigG1i4LR/4zKzv4YCLgg2Tdyxo1nE1fQ6G\nduxU8lu1HrKHeRHgw7RC/XYcqqd8aVb1grV5ayKK9uNC/OJfYb9N9ajewIMc\nK336JZW4LuJxDW61a/NMrnwIDZh9/Tl5gaWVuMlWHHL2uKOU5jiVJ5NM4iPO\nYtbd\r\n=zjs5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"03da616c76c8b7fab07a24f82209f171a2fec41c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e3346766f.0","@material/base":"13.0.0-canary.e3346766f.0","@material/shape":"13.0.0-canary.e3346766f.0","@material/theme":"13.0.0-canary.e3346766f.0","@material/floating-label":"13.0.0-canary.e3346766f.0","@material/feature-targeting":"13.0.0-canary.e3346766f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.e3346766f.0_1628883992745_0.7411013378356743","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/notched-outline","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb1398c33529ea50e08e8386a686b6539de3619a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.2fb068fb0.0.tgz","fileCount":33,"integrity":"sha512-Zxska5El1unDiDk79Rk5ZZQPmIPxu0Le1KzYkKQaSt+ffT5Esbx68HNfQ+i5q38ex7FZfrZPhZJwnV2+KQQWPQ==","signatures":[{"sig":"MEUCIAN1/NezWMYtjvp0tjE4AjTd7VtK8APUiE5topC+c4sKAiEAo/sPLs3hkUOCMQjKYBn8MCgFB3fI+TqYlyGmwUobWNc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFszUCRA9TVsSAnZWagAAjW4QAJzyA/Rlz+uf0+Xxff6l\nYA0LUSvfCmmaT8DsncsQiE+0cuKph21hUmvt2kKGz9hsESm1Hdi0g/xuci3q\nGovD/JU0HHzZa7qYOs2dflN3fowJXjuxnmqB3BZGIPJywAeHYNAPpG3Ed96D\nRdjrSK+XeSYfLru1ELe0Z1OBZ22EFCge3ZEMmPS2C7Qhn3b1i3pbTL//DY3a\nxXq5xc5xHH2WfZ8L7gwuHpUhLRFHB0FxxsaZ1ef+4FT9V29xpAJXPfxoGNZh\naHXK48F1d97gO8M+wX6WO3KyNftS9eXBLpcL3WaD8oqCUgOFkBB0yc3ur4m9\nczpfIMTYfX4/U9nHq4nFGeJFNiaT0IEZGduSPW42yP6GFopH86C9YZX9xFWX\nuudfI4EIUvddZtqXfk9OV+zt2aHEXoF+BqGiYRs9qe99apXzd3fTrWSntUGZ\nFLxie83Htrji/tWVBMIBnL3WbOclN8s6BBIcJaGJNZdx/lroOnwNE8usyPPc\nvEtOFuusO/8GEJeswiJRmNXCQk+Lgq3z6vm+knElkMmZOmm5ednNIQkgexRX\n9Bi32t0j9XQdYoGhgn/jeg+m2n2cvGFfm89eRbSInSab7OIUFkHmy+Hpv1qZ\nc8/6m60o1XXjflNpIueXHqb6yC8SzZ4enDgt12gjATNUgBihCiwtmaPMj5Ep\nWQlQ\r\n=Mtjk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cd1967c0a3a80639eef1dd76a8e579a4456fee90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.2fb068fb0.0","@material/base":"13.0.0-canary.2fb068fb0.0","@material/shape":"13.0.0-canary.2fb068fb0.0","@material/theme":"13.0.0-canary.2fb068fb0.0","@material/floating-label":"13.0.0-canary.2fb068fb0.0","@material/feature-targeting":"13.0.0-canary.2fb068fb0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.2fb068fb0.0_1628884180719_0.749739552075541","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/notched-outline","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf4ce00a20b3de372d734308a167ddca0b44a9d6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.fb76c5069.0.tgz","fileCount":33,"integrity":"sha512-gM9vXYypPmaNceHtVm5Ys6jKivbJ+/QbRENyZumAaK0TxTm6erHp42ywE9H8+8j/VFuY0KQh589jOGvWFlwirw==","signatures":[{"sig":"MEYCIQCgyQp4MzHO9doY2JY7+VzkXEzWgiR+XtL//6BJ8HABjQIhAOtVIukFZP6N13U2Uulx57hyjrLKGdheraBVTR5bccCE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsXtCRA9TVsSAnZWagAAD40P/Rw7F3JJlyi14DNyShEv\nuK+NiIBY1Ae2Z92ic0flAw38RvawtsUCdwBywU4ksp7w3tL5GSi/zu5dYzIc\ncJeCj0Wo0cgXwuUqF9RXeb9ObdUpQMSJaX2QvgoQmpxK5jmQrBzZOFfasndD\nyLaj1UUVKdNGQO/KOU96f0r4SqV/dPt+xhzu1jJR1lDjc/1XdV2yjCtHImRn\nUkvFypqc6cuhdfepHiuTLcuYH5u7TZZm1buzk8nRybfSf5VMLKPc8IxN7Ncw\n1/kOpGErF6MUhR30xqZTv12QhvogpPn41ZyeocrGbsUgct1G9tmG4PA6Rchf\nvJRpPvfbyKEixzfgvM1IRpVne817N0OMvSv9ufjuCjTuu4n0uzxmHUnpF1Gp\nbiaR0oxBXZBX+vuyefl8xxo/UcCOwvxjSwQBrAeHuqmCPftOmRVgeF32A1dY\nsf3Kz/OYs2sQ7JnlmX840IqktRXam5huoVyxs+W9aijjhD6+RrzxVxbIMMUJ\nVrAqgZDwPiCVuV1598dd8c+msp9ajf5ep6TPT4Z8vDySAUSz+YAxACDu2Q1T\nZwqrkxtACDzZVbZwZdtMQyeLxMYamg0RO4fzrDMYbE8EEnHFFayQc5rXRBDi\nYs4cLvbpkhrimVb9UEWm5ssR8n1UfGhv8EejAzgchxjR+NkuRKTJu+rutSEc\nICjz\r\n=lV5/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8a969624431e3c1b8d80c2e2a37e5ea5af6bea4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.fb76c5069.0","@material/base":"13.0.0-canary.fb76c5069.0","@material/shape":"13.0.0-canary.fb76c5069.0","@material/theme":"13.0.0-canary.fb76c5069.0","@material/floating-label":"13.0.0-canary.fb76c5069.0","@material/feature-targeting":"13.0.0-canary.fb76c5069.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.fb76c5069.0_1629144557252_0.1699777474929729","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/notched-outline","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.457d89aad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb4c43b7c3b72ac8c75d69317a4e73623b4ee366","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.457d89aad.0.tgz","fileCount":33,"integrity":"sha512-mLE60wNXAfGNNLfUS9u+NlfVk7AgwwaXGTgpyVAwPSIrZjWPgHX8RdC/ZTTMJJ0jjYYWDABtpDbvNZfUvWzPdw==","signatures":[{"sig":"MEYCIQDl85Mmt4W0ZcKaEw5onb166xUsTm/GJ79EyZoUXLaTYwIhAKnyUahdUWy29oiByBJL1MGp41HAXvJ+yCFz+ZcPA8L9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9RWCRA9TVsSAnZWagAAl/gP/1iR2/pO6ZSNamOPdnPC\nqmCtkamhGQy9M+I/cIzSUgBKgRidiUn0X1X3TUl7QEsJThvrWG/AFbTKQ4iy\nJPG3GHzs4S4uAyF+rhRqQPhBiF8HJjQheov/PIDvyY9YVUERgHeInHOD8YMD\nmmIxYGqs6kOcVcfp9dE4KwfBPLWepmNLezjl7X1G03fgDpfae3YlizSAtXUj\nNjWcSSgU9Y0OZ+iRnbQ2RopwvUrvhWSaCa4g8VU2GIels3FpA9a3PBKei2/X\nLIncZVlgr3VWV9c5mR6FNBnpwZFQxYc8d6M7p2bBhnV18JJtotVegjAMRxQe\nlT9AQEHS+laQTNGH8HdQGnNvrfFdyJoQcfeHY20TWco3ZvPW2erAkOJa6eG7\nnEDZz8Wm3UfKE6nKZhWZ2ZmvoqVPZqEKgOcn4yd7l7O//Ck4Gp7tlcrzJ9qf\n82q4hI+JUPVe3JSisVhiQInp5oIXAq/O+AHpXzzVmt5OK3oqpztmhsSGDTCo\nW2dzEKB2g09/itQ7Fh8mgaCDiHIVBIKZKPV7roUVTfAujYuvWbOFrN7/h2Qf\nLIt1/5y5n3nmDx5Tk+uuPKSbGImCPeTZmzarM4uLcBv50got+lNd5oVOEtbw\nqFC1/WmqHfqpQIoEPxv0LiBxzHRQtdsDeZGXGJQCrVqw0WhmDs3bhF4ipLn8\nCK0V\r\n=N6Jy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e1aeb9efe0d3f4d8670a6ce174d17d7528b34438","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.457d89aad.0","@material/base":"13.0.0-canary.457d89aad.0","@material/shape":"13.0.0-canary.457d89aad.0","@material/theme":"13.0.0-canary.457d89aad.0","@material/floating-label":"13.0.0-canary.457d89aad.0","@material/feature-targeting":"13.0.0-canary.457d89aad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.457d89aad.0_1629213782781_0.14579078005821233","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/notched-outline","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d8465e7bedfe0bd458f20e912f284ca7de157dd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.0de2f2edc.0.tgz","fileCount":33,"integrity":"sha512-TLdI3k+hAyCKu8a2GBD8xcgQzq64L6FWG1tCjWht5qxq+P9WiLLljrY5iOOdWszJvRel0ei01VHf06U00Vz+rQ==","signatures":[{"sig":"MEYCIQCEQd0PK0DEdVunCmIvUWbDeg8g5sefSRonxEvjEs+1tgIhAOiJhnBtKYil+CDqxkloJJFIpwHsxO0BA8/cvuBWXa+K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCI+CRA9TVsSAnZWagAAcmgP/jstfczTqa0hClcmIDWb\naGajCLz8PFMkY876I0brB8eIZmSrZc6FvnmC2vFpp6uXvK60O3a9NgKqSMci\nPR0agCgVkQdvlQwRtgkZEupriyXxS5dPcaB0Miu65LAjf89vhndw7eisCe92\nemGpLhxCOl0XR2NLhj2jkwIee4uUm38NyUljmIpFif5T37+3o8Zud8tdXgxR\nTe8Hp/bbO26OvMa6tkpFzOApAncNsK/bZV5iMULBiJ7MKONc368iTyfbQYby\nUF9/VSsj7YVS4zmzdbJNwVYln5Hr/VveYSJ4oIXcFJIBeyIDSsc/VeLmprqq\nZMUB2iBmnUzKZlNf65Xe80ZhXP2OaKvjagCTmS2jj3Tb2EeGGmcBt5vHkQuv\nscBVg9UHsxhOePt/6bBbgbhJmU4QVDE/Ye9psa+sMPMXVs3yLQZOuAkjFJh5\nsMaZdMAVaeQ8kyHRlz8YTr5CVydPG3My/IwsZ6EnjR9amcLQEm7gCmqU/FCX\ndfpoKvLtgn17Z9Wo+IXziZML2Jp8oLD8mxhamddcJCJ3XMYRclV+gUKu34uE\n/Yecb9rpPdt5OZX49QsgUVgKvyPp9OuDyWjPKvFT7xZtimiUQfr66C5BAXEW\n1rT+8dIXpRqH9Z/oo8nTwAUdJusjvI80xapGH4vQdQcu/NYBNmx8d1pbWLyk\nrLAU\r\n=RWRQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ecc5e8dc0157f612d4cbc7b03507e3779919d5d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.0de2f2edc.0","@material/base":"13.0.0-canary.0de2f2edc.0","@material/shape":"13.0.0-canary.0de2f2edc.0","@material/theme":"13.0.0-canary.0de2f2edc.0","@material/floating-label":"13.0.0-canary.0de2f2edc.0","@material/feature-targeting":"13.0.0-canary.0de2f2edc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.0de2f2edc.0_1629233725980_0.3203016546686335","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/notched-outline","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26a25b091d5b70ad35bf9edc409d34a30ad8165e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.1f9259b9d.0.tgz","fileCount":33,"integrity":"sha512-AISaOzfwIF+XDw9TnsnMS4bKZ1yVe+ufVozKE6qnb8Tiz3J6L/1cmHZ9J/zKubAASo8OTc+Q/SMRkNlCl3GuvQ==","signatures":[{"sig":"MEYCIQCZqSobScqL64nTRYTjJHVsPWON6ABF9HdVnuTNkr4LYAIhAJLxp3E9BoXn6sCzwKnggmdeWQduCFKIwl68K/FP72yO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDUBCRA9TVsSAnZWagAAAm4P/Az4Mm9nRe951ZxQ1HS5\nVwjibuhF/t9p4x2lu8BV5oMhHuM2WdvszHAob+hevKu3dUhyv/2nThT+tuDh\nfxpOekjVQxeDV6tacDUDFge6qh30/Jjng4J1gKAhlHPuxOMsV1kXzPis6e/B\nWZq+qCLixi/XPoXNyLhtSQbgjALSx/L2YYP/Xyql4Wn5WIjN2uhlV9XMfXXG\n9POBuZSLpc9cY7qlO+FslkUu2ep7z8JSvV4lublBqzOP6c7rqzZEJeJ0uem5\nyw+xF7bSRRVe3AuYJ6LtxRmFpoufHeRZBC4NNKHfGChBrWAVY4qyn/jJljUV\nIKYuJfqxZIfivHbGEA4cyjbNoONX+vQJ77bd+bACt9DvhtkaSWQ/Pm+NbRJI\nN7VdXTGNHW35tVmhV5RTGZjrUCn2aJtwnMDC9ow1KjqsEZm6A7w/A3EuEJdS\nY+rMRGtFVWZZBEgMRmtLGg/rHDNO/UJcl6YB3/AHDzz0gSklmyNwejJ99Rhx\nanvYjaYk5nhnPoTvXr8yCwtbtuWHMYVRLSYKSHM1AotKuwVvDK2sWyQFUEHH\neudEvAY7316WGPFJrQE5skepIhJeE8F05BMEA47GwCeYBCqffIj65D/KLgl1\nI2UgDQHlWpy8oCpeMgTdSETwZvrn8XIFwym/ZCxoq86LPsULsk6h8lydXFe8\nvZRA\r\n=9UBa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4c2c9aa7510a4854abb7f568046a44631dfe3e7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.1f9259b9d.0","@material/base":"13.0.0-canary.1f9259b9d.0","@material/shape":"13.0.0-canary.1f9259b9d.0","@material/theme":"13.0.0-canary.1f9259b9d.0","@material/floating-label":"13.0.0-canary.1f9259b9d.0","@material/feature-targeting":"13.0.0-canary.1f9259b9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.1f9259b9d.0_1629238528889_0.5614430980995311","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/notched-outline","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.3b9290351.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8affdc6e437ed96e4cc1d2cd29c2af008e7780dc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.3b9290351.0.tgz","fileCount":33,"integrity":"sha512-YKCF4Jex/NTTtVnjgWn80q+eLRLV8Dz6JIltvt5rTcwUgg7AiXU5Uv2wSy9e0nFQTZJOcQdUGiphacOLrrM+Sg==","signatures":[{"sig":"MEUCIQCIr2exp9woo/Wp3gXyJVNouaw6bZLW89otzr4+qJgBVAIgDb6rOK4+D85eV4KaSZfkiHGXvfqbgDMiYUhLiTF7xG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJm9CRA9TVsSAnZWagAA/Z4P/R90udsmT+l9XDE3vQJt\nWkZfgLBOY3aVX3rkqRA+Px2QpLIuhV+mfUxRCVH3cTMsL9meBpdoOAHCftu6\n7ez+lA0GtNhJ52Yiuloddx6B8n449kKJHeTUrJ2zcujpSMZtcnqxVS/j+QkZ\nGQd9ZAqWj0s+NK58TPgQF/vY1J4mXpRCPqcUBg0jX4M6lMK4Q900laU+Fn2k\norSUYs86y3iqTQqBQPy41NeL7v6D51b4XL3L0xrRUjqgmEN3JwXU6OF64HYh\nvwzd51npPb/Snq9Tkuq9pQp0+RdRIV8Slcwm/G4Ev0l7gAbY4LTeSlfiJ1aR\nG7SMEhAgFX0+kOBUpeW0/fY+t0EPOudHBXWeQI7Ge/UepZ6IX9VSNhcisQwo\nRAFAnV2j92del0CMWR/2AHz9eQB5T7zUuOtzXMOTpZ2lAURqnvxHltWpE9m2\nxUkTpnullxh2hUUMOxT3k/o85fmBbgmRClzmun7gsVCxOc5Wuo0ig0ZRbkGO\nyyVi7VyyGeOGjBC3oRh8LiQQv3w5eDU27CzauVA5nbh/dnL0ELu4+sR/YfGs\n0+349MYzAOJ/NB4MlNI0EESYuSUnx12/KBNL2LJq4galrvGYVUzcg3aBw1ZU\n38S678xQf67VJsjAVJGHUrQXrVAvX3BuAirvGNdFt+YJublrJEKHLQS8A51C\nppw2\r\n=86ip\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"15fe006947f65208dd0e450f8cad53d361b2930b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.3b9290351.0","@material/base":"13.0.0-canary.3b9290351.0","@material/shape":"13.0.0-canary.3b9290351.0","@material/theme":"13.0.0-canary.3b9290351.0","@material/floating-label":"13.0.0-canary.3b9290351.0","@material/feature-targeting":"13.0.0-canary.3b9290351.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.3b9290351.0_1629264317683_0.553504457219488","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/notched-outline","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e82332680aedac6722cdb6a85f3dcaa9fb03d35b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.43d2eed2a.0.tgz","fileCount":33,"integrity":"sha512-wSQt+u6+q6VM1j+3tgMZlkZnntXEzFqfX7PSjgpNNTjEhqduUqrTQdZFt3Lev3SEUfVqIEiPR0+a++6QHjwM4Q==","signatures":[{"sig":"MEYCIQCRbEEKG409qt3TseFGSayRn8Fr+Dx3/R8oykR2xafNjgIhALbp5dMSDTUO8L8FwS6EjKK4ZDUX0vUPD9RWiFlm8bOW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS9MCRA9TVsSAnZWagAA5XAP/jh1dLmkycgsN0WgqqM6\nrzAhKofUS/iFosNncaXx2tCLzD2h3XNEz8M52Gfeol714qnCL6YiRWAv2rlc\nmo5kAouaVBmVk9udbas6rJphfpsAcmiYFBgzLtIfKKN5qHEg0co22s0BK6qJ\nYsdKPdqqvB2J9ztXoWvKVKDwZGPR8kIwWfI4va9Xm6Rte0A+7zT10CyJy+V5\nfMyhTY7bV5/VcUizm5hchu8wq1pqnqVOmrfioMfw4CC9PNHAZYq8DH+jceRG\nTnoNiE0IewMZb4RZ0WP4sG7/hUL5M8AizxY0w+8GGiMlWjoRmaAmaeN3oiE4\nN4SnXzVwY0gbbqL8uibu4OWmA8dIlJTvPkEcrchz6VB8n3pdCzjwqhKOcjRH\nOOYYII8bU5EXgELj91L3M/4Wz0WjeA6pPIbfkRs8BOdnDcnNvWOLyDVBVKzy\nhbEWzjrWowAA/jU74RN8ZfMuCkmSv81exLcJQi0Y2s1XBhHAfIQuVXVgw3+U\nQ2k9Y2iBbrVpRv3lSBckfqpS6VLkGHGJBI+BRGmoQs2IYyLlV8/EZvBrTSZN\nSVZtqkCkS4LGIQM8iZTW3usozI1GLeVtUyl3dylUiH/7XEsB5CPPFpKaoh8o\nPE0odW6qc5LblIZSW+U46NuFg2vB6j9ZVakXdUe0OTQ6qUEfghtr2NDT2ixx\n7B0z\r\n=Tdcg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"687e2389ae76da9a31b26968c0cdd837208d3359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.43d2eed2a.0","@material/base":"13.0.0-canary.43d2eed2a.0","@material/shape":"13.0.0-canary.43d2eed2a.0","@material/theme":"13.0.0-canary.43d2eed2a.0","@material/floating-label":"13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.43d2eed2a.0_1629302604511_0.7843821649900755","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/notched-outline","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.0a9069300.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d805af9f7509d4a26b243c58d8c9f24cefab14a5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.0a9069300.0.tgz","fileCount":33,"integrity":"sha512-/wAHVYhHKuhZU1ts10TFCyPjrOv4j5HutNnQ10zhSQvKGVcP+cLlSRemz4tE5IVm/k6/Q1Hy1+TkhYf6iBoX1w==","signatures":[{"sig":"MEUCIQDmA5UqaWNjqoXCwV597ywdYfNL9z1vnWD4lBpHN4PzAgIgPn3UdFnZBDdNBBWKX3WqRBmbvstrUrGvTfRfLIBcq4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoRhCRA9TVsSAnZWagAA0LoP/0NzBnY1ta2IKtY2Uj3/\njN+EZYdPHfI2beYEI8KI7bEm9hbsniINDaZD184w05UTCFR47QB/2rpLS0ky\naplS4ZRzD3q1uj//FaZSImVavD7UvoLhV0V1pINQ51uXlP95Iqcpc4e1xAf/\n4nb6d0KpmEuOFqO8hkrL04ERKPNqaAceXwYn8sJq8CvEDANf7pgdAxGLqPxp\nyWMgdyTXlX/G26m4Z1+g4XqjZ2HZ6a4QOwxzxssVtHBx9/BOtSSMtjMMMDBf\n+GPMzHZG+b8qAXLAwmNFY3yzAZQEoDx0ynQZnNJ767as771YiBDzoy25loD0\nWlgaSaXnH4irw5+37nkLnbrR53yeINoO5sQaYa3BAZnI9UWJowOrEI1tNGQG\nmZUI1o0r4fLH02oRt+OSnQykQZeKXCemKnJSI+r/j9gxpmeS5IoE3HcgZZ1O\npoEXLBaC26OgWq3YD8ijMAgngc6/IdKGYhjVVjWTxX1q91nGawnCVilwgKmS\nztSkfAxIRLgujfnCf0r+qoxx/iv00ec6bQn+eEUlwFciUohR6Yn+jhMTCNii\n2BhaqPEcnOgmP/UkB/UdVIiB5HiBs3EEbmxJMf4P8L6SjO4bBuLXhJueuYXU\n/E+Jd8P45leoVbdjzn2qKtGF48BkqqwQEMcLI7ubyNk9aBVhUiRv/PvoY+9c\n/SyU\r\n=Jdh0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a7249c6c2dd2d786b2134e129bbe3b4ca596fee1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.0a9069300.0","@material/base":"13.0.0-canary.0a9069300.0","@material/shape":"13.0.0-canary.0a9069300.0","@material/theme":"13.0.0-canary.0a9069300.0","@material/floating-label":"13.0.0-canary.0a9069300.0","@material/feature-targeting":"13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.0a9069300.0_1629389921253_0.9774623264919624","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/notched-outline","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07d30a522fa5e3fdfbe86f9b5756b1fccc55f181","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.7da413ed8.0.tgz","fileCount":33,"integrity":"sha512-dj2ds8PZdIqIBBRuH1oKTC0hiTNw1M2C7ciVnRTjnCp3DHIliOdHETT9RgL14cdl27fQ7ze9x+IHShJTfDEPnw==","signatures":[{"sig":"MEYCIQCKtnjbyL+JqwYc6ewhz4qYGyM+jLVpQHz63Ued5AMk2gIhAOfWTXQDGrrd9uY8SrZjjvYAPgxZSu6YPCLuhfwTa2MY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH88rCRA9TVsSAnZWagAAo58P/jSPpzoc/5q1P61BrpKQ\nT/r1xumSNg9wGuPunjCExDUUYnZEwX7ra2N7D2HUZnpOcu8jElMDDWW0TyEU\nFbRi99xF/akkxzqLVmsZdzmJWbErwpjJ/9F6NSlj26YSaJlA3Ni4nV7HRmjJ\nStZmvm0NKCjId1jnxTUwayumVslnK66LtOMEa5fxuINbgHbMHzScUsuC0DwX\nS1cEb2gjZOT+cpf4kzNvbxUTX2ywXUO+0eeF6mykgTAbQfwW2TR3V22M7tPJ\nmE17Cz3eAainO+YsWUmyfZCY/SgvJtteoCh0Z0rh9aJY2UpGSQ6MVXMPztsy\nAScLefbPQaLAKyoM/b79yD+69IwdTdAEq5eN0T2zIAuVxyOfm0os4JD1Ue0P\nb8C+eYQU3KnkCIpT6VZObyqHQMFxTsx3UGgRZRfRkacP1fd7hBMl2pEupkoS\nIM+V/rGTmFnKI4YAChr2T6y6iNTMFungydiYfOP48nFj1/pdXljL4eRhmAi5\n/QWO4EfSKpoxBvtu0Gxc3GUMdKfgDqMmR503SaFjaXICZstSBSrpEbYeuaPk\nag1Jp7Uw8m8wGI7xoqCm3K0/iGtJv9JOqlzOKmOFyi4kG7KeAR1LqCQL+Fp7\n0kvx3r+oRRwIGLR/PW/F/ed0cmgGpRlWd/MWW0ZLse/gkrtkiWI0pJq/iNzD\nRosw\r\n=TEuk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"66fc8a91fb533a43e898483e7c4e1fac92aa0b7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.7da413ed8.0","@material/base":"13.0.0-canary.7da413ed8.0","@material/shape":"13.0.0-canary.7da413ed8.0","@material/theme":"13.0.0-canary.7da413ed8.0","@material/floating-label":"13.0.0-canary.7da413ed8.0","@material/feature-targeting":"13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.7da413ed8.0_1629474603123_0.4598587015176818","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/notched-outline","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bcda87f79650117710021b607cb1a12143d7a73","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":33,"integrity":"sha512-hLr2oM/TXzP36b1OxNtPyz1HvmABtk/5LtKsV9svttUGki01kBUj6VdTHCGO8W7drJ347J3NIvooLmtxhkI9YQ==","signatures":[{"sig":"MEYCIQDfOqU9JFCBI8wiNHAoZncT48cita1u7tNcg5gRetq39QIhAKApU7MITD8Encjbci9cMqAu3pGpq/ypb9td5mf2iCM7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIAOFCRA9TVsSAnZWagAAZMwP/iB6zn0QhVEWE9t7iu8U\nRIJumtCGoFNIBRw28iEhmCKm6l6cPgYsp/A6MhtN+aqJqKktBOKEOi5kXxD2\nRbDss1KD0jeROwZ2UGrS+lwlViFI1JRY7uarKseB12F1yABJt1BiFiDOCQX2\nMXvxAvteouZ+jFOMupuaxH4enm2u3OIgbVRWDLKebue5N83MIXZ3nfQra+Ov\n6iwNkxpnL5rjiNLvfdDWHFDMi9P8hcXPdjGVfiH+MiHUO7yLeTd7vPbFDE7C\nut7LFW0OmkPK8Iha4dsV6mZHsPYUNmQ6O83N7sV1HlcJ6Fr7cUL1NjzGhsD+\nXIoj1GGl9/k18CvQtqWOw4B6uVEe1bUgBVkKYiapC+s2zpsLes+rtumXsrMc\n+KeDDgrTO/nlirUpEZBZOaB9V4LM7D7cNEm72dPjc4tlxu0W96jAFakDQ24n\njL/gZdGXrjNzaSVIC+cQipx3ixsFy7IrEAEFic/XS8YGASnO30yt6G/K9dF4\nNC25mgz2r+iXnCfhggn0Hk03XIkOm99Bi4IhGeEVT8AUW6Hjyv27RANuQEzX\nI5NdFz99IZJF6WVy8/BqD8rV+Qtdtow5hG0+cMlPILhntvXTkP7HPIyqyjBW\nSj6842GxQ7pB2j2CNMK6o329+GbUYcS0pJJDFzXDlUv6hiJuTEwiid78d99T\nvPXX\r\n=T4Gs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e400b9052366c6e1d6e27533a72ad00199b6313e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e1e69fd8e.0","@material/base":"13.0.0-canary.e1e69fd8e.0","@material/shape":"13.0.0-canary.e1e69fd8e.0","@material/theme":"13.0.0-canary.e1e69fd8e.0","@material/floating-label":"13.0.0-canary.e1e69fd8e.0","@material/feature-targeting":"13.0.0-canary.e1e69fd8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.e1e69fd8e.0_1629488005191_0.09955222332283054","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/notched-outline","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ef102f68a366baf22cf600df1a25f14c776ce9d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.f5afc16df.0.tgz","fileCount":33,"integrity":"sha512-gGj89/l/XGXWjRbx6kPhTkfc/TywhBMZ+ibUEo4Lu6R4muz8amPXMflQYu9YGlGskRNZGPX6RK3QA7zcZ8Q+3A==","signatures":[{"sig":"MEUCIQCTKqqbkYOgPqJBhbfQs7TlYw7te5cTjV2UM9zHVQjkBgIgTcvkqsuxYPHeMfsO19H+VOR2tlw1/of6DLpuRXP9vgk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIBBICRA9TVsSAnZWagAA5Y4P/iU3m7EJXOelR/LQ8k98\n3QUOhUSAeWmI7NxYa8iDv+V+ZY5G4gLEQWFVDNM1AO71aNQBEvJn2YT/K1cf\nH/xL1Rf3XKxF5zGg7+tTJmuhw8nn672VexP9PziXa2nKIdQ7GtwvgClW5qUb\nlMWa2+DMgfXq9X00JgEPbrzHQrWOsHDmXL1PdSt9ukzKyRucFGCjfAelljns\nRH/rAFT0iyzIPTLi6iYR9gnH8Qr+UEI8NCbNBL5ENZD3trz2zuLTxXfTUKGa\njOGiVtycnNTfavyKMywbnsj69aBRduqSIRzCKGduEg24SGOMq4FNMve/46ti\nNj7yvG9sezBJ61+Qi+w8SkmkP7AQfY62ANGkTy6rjTAbCJEP0OvnETU0Md3i\nbZNRaPOk8SNPbUbh+A28ne+1WNJgPQhIw6oU87FgmZzx9Gaqhk+9lnKhbkjQ\n/722dLBk1dERIW+Ymd9lzmymijun/4RJhDj+dIbQzOT3CHwKszK0Y6RAwFUR\ncSHckCgdobg1LfEPm4qnMJBWA1+/Mn0yJ7/Hf46OQFvF75nn1IedjLYjEA8m\n0iTT2e/A09B/aHJlk0vd9R6S1YEKyv1vAv3uMavBNxqNn6pj8r554RBBbDU1\nnS/8uhi6uNgvrQ/6FigD7OKl7hoPyGlb62dfXasSR++l2GG8CyeZMIyfZCUC\nTSzv\r\n=DTcG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9a5934ef5d223f46f61452bee68b0b45a21e20d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.f5afc16df.0","@material/base":"13.0.0-canary.f5afc16df.0","@material/shape":"13.0.0-canary.f5afc16df.0","@material/theme":"13.0.0-canary.f5afc16df.0","@material/floating-label":"13.0.0-canary.f5afc16df.0","@material/feature-targeting":"13.0.0-canary.f5afc16df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.f5afc16df.0_1629491272404_0.6953185559602921","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/notched-outline","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"261f51365efaa86e733f4ecb0bf81a18287365a7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.28d0d75bb.0.tgz","fileCount":33,"integrity":"sha512-tRfyeurwJt5ndsAOPYSRmqHfuR1sP+7aQKNckE6MBdXb40ZvQPbK4Rupb0JP5MNJ9XRVU+4Eop01lHNsn066KQ==","signatures":[{"sig":"MEUCIQCtXp9arUZ5awN1tJBlTYeoSuMxzaarUzerypxx6CF3KwIgV+40y7oXtJRmClObtP+ZY7fb7SV8EYNiwi8ffn6Odc0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICrsCRA9TVsSAnZWagAAXSAP/1VR0jHcwLCFhyRHB2Q1\nXWUo0IBrOV14lnb7hNtWxXKXQ427Gvd8FVDca5f2uu8d8fH/VVmTk3onmWt1\n+jYByulVETwjiX2IjsyFs4sC1KFTvE9kP59tP8Yba2Btm1CI44NwanUIQoOp\n0/etupOpaGbAu6uehxW+26WRxY7Qyasarop1SAs7y/rz/SCBYl9nKwksQ/df\nafvBHTc6RWRW7ZctM8uveokIKgdGPhHdENSeBaW48aEDAoYVH4fZ5d6sM3G/\nloLLaHeehK/At8v76ay7x8JIqkJD9xD9BHZJykvY9cVlKE7rzQU8fQBaRTQo\nvY7gbbG+YYkiyXsfq1mXyXU3lcjkPEZW7ZFPBcYxblA79tQ09Qbs4PL7uhsj\n+cNDI6MhPE+CUKPSsgasL/Z0JSnVk/UgdDtdyOcIioLMCb4JSAMm1ft/zHSw\nMjTbzrtsW9v7wETAgRIBqj/AUpM9upYbZqLGPqxrkFYy09OHhAHxSu5PcY4O\n0oTTgJm6xd208PatK7sI2Gnu6DjykU0Lgusr3JCJwetd6RXpF3Wd1SJKu6xb\ntZMFZP8VTCFdYhZP/jc3aY6CAiPbGoHNi19MN4Dq+d3ygWxSfl8ZypgCFzo5\ncbq2Fw+CmdKCgMwP43ZHgsnYdq5DRYGgMANWsMTLN1ybZ6M3CeOJb/WgiqbQ\nmOej\r\n=rz8W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4becb1aca9e878d432cf8308ec0f14cc50e9699b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.28d0d75bb.0","@material/base":"13.0.0-canary.28d0d75bb.0","@material/shape":"13.0.0-canary.28d0d75bb.0","@material/theme":"13.0.0-canary.28d0d75bb.0","@material/floating-label":"13.0.0-canary.28d0d75bb.0","@material/feature-targeting":"13.0.0-canary.28d0d75bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.28d0d75bb.0_1629498091801_0.45430613711857726","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/notched-outline","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.21ece5360.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"214c2df0acc0f24c0fd920f6e11c4a8ceeb2902c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.21ece5360.0.tgz","fileCount":33,"integrity":"sha512-/0r+vRhN4qFuvyf7i5y3PpeVcqKaQV+geKgaLzMsdvejO1tn4TD8M7Op9t5CfIArgADUMvrKW7kKa8xkPkmI4w==","signatures":[{"sig":"MEQCIA8hNCoQgYIjpMKM9KETO6kKdDFuog/TWkw1Bqhg1GPoAiBESqnYptJpxe/N3tkITqGHe6BFSNoPMkFcYpsiSpbKJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID6WCRA9TVsSAnZWagAAm9QP/2nimbFlTcXC0jAD3Gpu\nSO3J6Pk2aiBzPY2+UHAm6GLyBGaHtxhxCcE9+m9CsrnYc0i1VkCodaPzToNo\nLPrm2EMIylwMIyuFV4J42rPP/TBW9uvol6zR/T/rF1+Tp0EILwvKO+oK9QiB\nWW156JFdOSE8oVb2HBOfeEmbv9C6ATusTMjHLenmYXiHOTyWPHvca6lvJwPI\n5Vcds1x6/DsmGQWwrjKL6jTwh8fUNFKjadmFoeEx9JM+ttKmVTl1S9IXHZBj\nDiATrUrhvwoBe3uMCOoBtzEwYFc4PCCJg7ygK8imZ1E5xVqSzZkS4vprt8E0\n6yzWnF0npisyBTcgOQWrAsx19Cj2PjguAgTpHWIJI7i5DHX4Du6/GjdvnaGf\nzeUE1qV0moGXW3SGCj2dDW14Xr6iiSH4zAP9IvSSJjV0PHuw95REAp85RCgt\nbT1mcA8KRkQq4L48IdAliy6Qhj7oAs5XR+7+bAFEeJF9U61sysGsyIm+bLf+\n7I1Hs7Lz9l2RAEnbS1BRdbWEPg0goqOXiOcqYn9L9PfdoTmAO5NJmACCklI7\nwIyqv7lqZqkQw9SDN+3P2LjDVSI58vFW6fez49rCRE85Vp9fDY1p2gPjOy32\nYkKVcpQFcLuFANAWwfByJxntsmI4hgyaHYTba/bdpXx1HTwhpSfB4C6zvj8+\nEBjF\r\n=jG5t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9625caffe59fe4a84aea358993c2811ffcf33e74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.21ece5360.0","@material/base":"13.0.0-canary.21ece5360.0","@material/shape":"13.0.0-canary.21ece5360.0","@material/theme":"13.0.0-canary.21ece5360.0","@material/floating-label":"13.0.0-canary.21ece5360.0","@material/feature-targeting":"13.0.0-canary.21ece5360.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.21ece5360.0_1629503126364_0.8587267452614282","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/notched-outline","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63c6ea2bc910d341c89413293500ea31bb19e65d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.8de07c02a.0.tgz","fileCount":33,"integrity":"sha512-e+/i9qriOjl2ukk5beYz5e/ihg4SL/313NrBX2Y1smqA1+TqCfUPZG8Vpqm6Vvap73oduKyvTJyd7jBQ4Nox8w==","signatures":[{"sig":"MEUCIQCUzvrzdwufdjw7xiatLJ2c2WlZigYu8FAdNuEgqYwNkgIgNUplSvnfVfEL87a0BKzuXNia27KrNBl5BQyDPz2+Cug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI756CRA9TVsSAnZWagAA0A0P/37cqLEFiTVp/Mn2mTlm\n5ghHORfa+mvXhsmZ7/DqhxZ908aSnc2rId5cQ6uru6WgX5B1GpvuoLvoriTF\niJdMrLAGmW/L8t1vGd5I9UVNeCe2KuMdWhVKyy2OcJD6Cn0Ug5kH1O9Af1Gz\nNGb0EmF/GnhnCcHx3IiYk9+UHUKZWRv1KJuHlhmcLnBYL7wvsNfJBE/xyaEM\nKJp9resITJ8oUU3diwAVkROrWadZm+P+zA1EUPmCWJ+8HnbSV8a0JavcLLtW\nvQ8xMNUm+gmXYPog0Vka3p6Tilk7mqSNVy7OjTbNGLPKNlJ2qx+4xScrRgPO\nh8Tz1g98aNpTt4TFPI55A6bAI+ht+CVQWiWnKZor0+/dzH1PH0LxeZzhi34z\nkimNf70QlXjSvxG2a+uIAVhDW3EVbKc/Myri+6Nqcd1yXh9Nqdbv38ZcNzrG\ncgjm0g7uCsyYS2bcHGwXoeq3Fay20U0ASsbpnDEDWijyApsCvP9NzWN5X8In\nw5Tiyifxvu08NOOvYkM0mrfEUlJFmmcHL+ffZ/k7vaOofPrVk9iscm4OoXgt\nEY+8gat6eU4X4n/TkYYFXKnjCLSIvytsqjYSPdbiRH/v3cSaQdeXIZX8A/3C\nh+qinuZvTeuxluV498woaZaCE1PeZeA9FyENsSR2b9ygP7VpeROHeU9s1XVe\nlj4h\r\n=YET/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e55081eb44f85de06afceb7c0d189f0d358ad60c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.8de07c02a.0","@material/base":"13.0.0-canary.8de07c02a.0","@material/shape":"13.0.0-canary.8de07c02a.0","@material/theme":"13.0.0-canary.8de07c02a.0","@material/floating-label":"13.0.0-canary.8de07c02a.0","@material/feature-targeting":"13.0.0-canary.8de07c02a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.8de07c02a.0_1629732474246_0.5183936074397288","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/notched-outline","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d7cf5a2c37f6f9ddb0a9c756605004e5c4fba7c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.65aa63b0c.0.tgz","fileCount":33,"integrity":"sha512-aVnyzonepzERsURByOF1GejWbmg3+tV5ndpVvKCRJoxVYZOlQmy+GRPKdVW4B/HKPxKrYSVOEag/pdDbmbOI5g==","signatures":[{"sig":"MEQCIE5I9pM7rQRqVw+mx1Nx6zOrjZBjMTml3/0oJOn5ZX/zAiB/70ZpK+k1/IHP8aoHKTDAi+eL/18vD2DTXguoEcA7zQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRBzCRA9TVsSAnZWagAAQDsP/iUPpPd2oFhyDhZCuZ8m\njZGjLEaxzO2gOjIBDAxzEhPHJFQr7egGliU+ecOtc6HTRuJay8TjBGs0g7EM\nbSUHj7yMfex2/XyF3LBLQd7eJltA2YhCg0xh6nx41883m6rezVYGvEAlpv55\n/jYj/PYVFVF+KIUr9cbs0GHEbHCByd51hmbMtMicZn3D0Yrsv3b5FPJEwTvs\niOfouHGSmfF7j/NsUYeFqUoncsaMs9gs6f/pQV8Co2bO+ZiHqW8vdM5mWx1m\nnWM9/hk3Gra2JNG4wz1IBY4xhIQv9nWn2cY2CkB9Jx5hvP7S0bBKTXaP3eHI\ngkxCmBto5LbBbYIwF+lsBe8gU/JRfuJc6qMk/1XCecqeqWP8uopixqZZpxyV\nYAl7fgWJbknlP1SjLb7/SXm+pmzkpHQcx9+oooinwdQd2mnyRnXlcHwNeoBf\nyWRzPgKivqLhA9J7rDihF/NGKJ6MdG+Me0IyE6+qtrEkgTEVaanVxYvTP2Oo\ngBj0Ai2LygDkMhmdkr1ylYzLKvQ6rmNPN4OLOGloTQzUI+8F3SxDGM7Sv5qx\ncygbts49ST1EySnS3i7UIvrHDmYIy4kBf4mgmJ0RdogPd3HsBnrGKi9x+7s+\nrHLbtLKw6dHKgKl9LVZjo5dbRWk+97nuQP+EyqWqnRKBPbQ1u5UnRQ3H/9sA\nmnn4\r\n=TzxD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0ac2dcf03064da43ca7eb352045fd4da0af02200","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.65aa63b0c.0","@material/base":"13.0.0-canary.65aa63b0c.0","@material/shape":"13.0.0-canary.65aa63b0c.0","@material/theme":"13.0.0-canary.65aa63b0c.0","@material/floating-label":"13.0.0-canary.65aa63b0c.0","@material/feature-targeting":"13.0.0-canary.65aa63b0c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.65aa63b0c.0_1629818994957_0.19391248096264135","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/notched-outline","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd683c7aa223805195ca6f3bedb851804e64cb37","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.15981e9d9.0.tgz","fileCount":33,"integrity":"sha512-zszn/QO8F71lzgU3EL1gefhISQ/dqDeY+kT1eZX3uxh6PmGuF962HpUl9QxBLCDBCk1AYJ4v9EvzVKUabiwXkQ==","signatures":[{"sig":"MEUCIEB7Y93/ajdzIUehQ7BUIRJEYFO9W7XMCpOzQC1bKdRHAiEAg8xdbw+e5q9qH2jF8/l8b2hIvEq1XqECRCB6y4qpBuA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRvOCRA9TVsSAnZWagAACeYP/A7Mp4WVgMEhJbRHPgZ5\nqornpIKZHItfz1tCX8MIAXndhk0Gfz3Vl1qLeRZHbV8d/D/tihoi0ga/ZZSy\nNAQAW/AhmJDpBQ9nceSKmHDPMcsyg0yUdp9/zXCWu1kvX2h9zaUHU7BMf237\ni0gG5ylRa5rPCBr+T3Va4ly1L+xpdDcRM0p5Bjbp9d+qnp98DOt4AyMUfTAA\n94jJWp/vtYxoewVv2/9JjGBmAHIWUechMVJ+YHsGtEQcY/C0cutxLBLfNuk2\n6eFWutckk3210J51FgMuKQKl51yJN9dutUZCeYKDYYnJY5iOTb5Y/17zHKec\n2+Bod69tOFr4wjDStyAvHueAVENXToxzR/Fl7+7IjiwSZXQdMje2FyIHy3nC\ntn6ncr9fYLqv0V+kLOvILQNoyPcNpv/VV2SfXhM+1M5O6y+2BEWdAN6ri6ig\nd0GMkCk77FoOvUMzy3mQvSx4n/CcVJd6V+46V8PR08GXa8iS9lECsn7OZKNi\n9MuG89nRWf5UvR8kLLZn57WqDzJ3OJkeuNCT8A3hJzSZPT+6MHI03QY0G1yX\nXLlRfI7PG7u+KddrvTItPXvZ/xwGUIGVvAetjr+6ohmuSFMgP4yGmtLkTPZY\nXo5fmxKrBqVO96/TjyaAuQmpP8onSXpv3nFSDjQY9U7Lj2ufHWDYCsCVX49C\nzV5H\r\n=ucqZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"93acc5a9963b30cedb03f35eefb49cd35c93656b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.15981e9d9.0","@material/base":"13.0.0-canary.15981e9d9.0","@material/shape":"13.0.0-canary.15981e9d9.0","@material/theme":"13.0.0-canary.15981e9d9.0","@material/floating-label":"13.0.0-canary.15981e9d9.0","@material/feature-targeting":"13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.15981e9d9.0_1629821902490_0.6981338133678461","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/notched-outline","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c52bf285189bad8531b328fd50d2bd88008a7b8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.fa7520f62.0.tgz","fileCount":33,"integrity":"sha512-5U0b1QZ94v2GOsi9y9j3k8vCKohH4s3ZQlzDC5kf2EfO81SVuhnylkQ7Wa0Tn921qF9TccGACYP831Ul1QVePg==","signatures":[{"sig":"MEQCIHsRonaHJmDzkq43SR7MjZGPNstQ9YL/EX4pWjpckc/ZAiBOhYeaoMaLhO60ait0Uo5J+f6xzcxytFsCBLkuURMFJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXKvCRA9TVsSAnZWagAAQ+4P/iKNdGl66UWPqCiQf1BG\nFyNHyVFVQ+KM5n2Koj8H96pYubjaLYeAlTa/HcrydlUbcP9Wgs8ckbc3kvQ4\niXTbsDIiToHhJnUwiR+ZVHswa32EuNZF39MK2i78C/nW/a2Oc86imiYAJ7u+\nsQt5D3Kd3leyUCooFBxvNG4IlBACeEDxJq0oV3VMVD/CJLc9VlPkxFbR3IDi\nqLKOTgXOWhExNyg2+TV2kXMifb1YkPuC/HkiLqU2wig68c7+O+7y3HZhlciP\nAZYxOBCHd7pVyqjpdkBNwAu/wvTAQTjAEp9ZN4F1EerLJyjyb5PCFGM4riXv\nEn30EyRzNlHdiCzHAk01obggoFAJk37AudCYpFBBm4OrgXR2ejXQGj09ouaX\nQu0TIBwPIilsCBXFDgg1zDSN9W7AnOiIrYuic7kyyNY0QdDCa7ssdrvo4gzA\niAckMTjANkBWHjaZpiEDicR2SrdU3R09OXK7TRg1vGMw7TcibJnZ7/AT5H2j\nsPBnsO8xrJw5rJyFRvZtEKJ7RSTbKdPlXu/fJ2Cer+4tFTH2lVQKjHTtJ+xF\n/JqL4vgZKM9t02cBaErwDkfkXiopuGBIGpi0zQZW117UIIcXtGqOWOfdhJVq\nLskiu1ZW0JbJHh2YF8QYXWbzkOMp6h/gE+ZAtGpprZPG6WBJNsjVAfhoHWii\n+3FE\r\n=pYt2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ded8a7ce355618969092a7bffde0da813aeec162","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.fa7520f62.0","@material/base":"13.0.0-canary.fa7520f62.0","@material/shape":"13.0.0-canary.fa7520f62.0","@material/theme":"13.0.0-canary.fa7520f62.0","@material/floating-label":"13.0.0-canary.fa7520f62.0","@material/feature-targeting":"13.0.0-canary.fa7520f62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.fa7520f62.0_1629844142936_0.3886163594078498","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/notched-outline","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fa0a37ab7be5f6e754f9eb387be19c90eeef935","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":33,"integrity":"sha512-xmaqdsxtmBZ9sKn7eb4UJ3f3X8Kx3x7BLqq6dfHQZPIiyFQur+K1A7peqjSDcXi4p2pmGy7dIR0InZrDEObAOQ==","signatures":[{"sig":"MEYCIQCV+lBpNkfYwjKoc1uvWADmUZnCwn7MFOaRN56x+wwiSQIhAO5kjDbTSv8YpH/btltJ3cgmvbSVeBG6AwS+7g1JC8wh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXeICRA9TVsSAnZWagAABqkQAJM7NVtMbioZ2y9AojNS\n3NmqW0sfZ3caLcF5HCKf6awT7FMAj5DhzK73BTT0U74e04OkbgqGW+IuBv2p\n6V4FvTRqJQWwOj91MgmoQvbWhRHtYZ5iua5u493g8x4Zcfc+Zkqk1+pQcYa2\ng4QI15TdoUDLdzyofgvdcSC1v2TpJof3dokir5JzsJ6Wl91F7UF7YESBH9dh\n9pcuYsn5FgE8f9dVGsKEVlCuWLssYroRX350WvFWboHPRJuIBRW/n0ojXlsq\n9BQhtynd6HIJYh9XtFnJb/Lak53oc9HZWZDdIa5n6uuohqmrlyStWMTCuwfn\neMGWD3SZRqPm2BByUkWWSeqaLQ1EyKbrPLJ33TgN82u3snGbDnE6aRooav4/\nYKHRsaq02B8/cEp3imlxtinI4puehL5KWSoio+1ouXWgCCFsbZEAMMZOQMLF\nRd3ArkhdCuBDOF5xjL8bFvHtwJnHnz8fhLpI3m9Kx7PF5O1z2w8ONGtrZ+DR\nLEvgw5leFIKoZQm5XDE7TehfnnzyVsSRKVXWIznABvWlSKaTIN5yCSroMXN9\nv2YdLIeyne4j/BriIIotj88ZRzxuVb4VSAxULDNRgULzb7Mw/QUMCDFjtPRU\nbNEtAJoidmWB2LXx2Q5HBS0/+2XhRim0Zu8h/muKTojiGPr3WMlJ1EwjSfIW\nfnsI\r\n=WDHk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5296a1abf91023fbe0806f06b5b5fce528c40509","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.ce25bc3ec.0","@material/base":"13.0.0-canary.ce25bc3ec.0","@material/shape":"13.0.0-canary.ce25bc3ec.0","@material/theme":"13.0.0-canary.ce25bc3ec.0","@material/floating-label":"13.0.0-canary.ce25bc3ec.0","@material/feature-targeting":"13.0.0-canary.ce25bc3ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.ce25bc3ec.0_1629845384342_0.20931831594465322","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/notched-outline","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27eb8942c237e9d15f69ce0237ac292f13262cb0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.12f5622e1.0.tgz","fileCount":33,"integrity":"sha512-PqbgWAYvehnaFMKxN+xXHBjXw9RceyajUyGaViufqxbpbhZJdOxoSRSzlpN0VRqHyMIYU1AYSvy8Nxgknf2rxw==","signatures":[{"sig":"MEUCICpc4uuf3BeSSBgiLA1A5pUf4chDOZxbzOu+tXMSJNLhAiEAz3MD1zEQHUy94hmY9Gm39XXhF6KNgs1+RKRqVskebmw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX55CRA9TVsSAnZWagAAw9kP/1gYm5zWBAa+DnVJSlgP\n1AKFL+HL9dFtkKzmMBb9EJyad/B+S0oG66Y91rxpIwD5PvSiJhpBn9UvyQl2\nLpBaD1nAtxxcEsX21fKeY8H3BiaEjqqeyu49W56Gzi3UQS/9n2sCIgZqHGdI\np4XYVTZMVP+yWIwFh7YeTQlh9FbM+g/Jc1s6xfJK8SqzaTuCc24k+ndvPD+B\nVc7qNMOWKxqSTMGJHZLnRKMsksB4wGedioj+bd5UXoZm0SdQ4qyyNxc5dnUB\nptNdLV85k6ip8hAc7zz93id2DOcTWzH6/zs+0lF89sYqnnHrkuRpLPpAK9GR\nOOPhOcL7cTTsEkPsRGXOftmyZDC8fKSLxtkq9hlyl99YUsMATcPSz7VJUhpa\nq3d2g6WvbX68J0QlUctK7Mw9QzXCleZoSHRyghzqK7xZvedirI1HL/BHR8Ax\nNWOWycgB7jSh3ouy21YYGs+jY8AaD3ZxUCNdiQDPGqhei40+knVP6Y2iLgKQ\n0Wiskjas1rgXh8XHhVZQmcz6ZF/+6ipKOsYhVvNV9BVssu2mLqogj8lv6xty\nt8TgHtf7LHEzw8IXErVtJ2pvl15TqCwAAl8C8ZYoOMzHmwUj5kpnd1bqwXOp\npAiLD0nOeQXWxlZA0W5kzRhjbTuGetbJkPhMnkLBW6I1SPEzJfRB/Pg/GoYw\n0bTd\r\n=h/nG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2cfeb72e6002a5f3cf296794da5216b3114fbbc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.12f5622e1.0","@material/base":"13.0.0-canary.12f5622e1.0","@material/shape":"13.0.0-canary.12f5622e1.0","@material/theme":"13.0.0-canary.12f5622e1.0","@material/floating-label":"13.0.0-canary.12f5622e1.0","@material/feature-targeting":"13.0.0-canary.12f5622e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.12f5622e1.0_1629847161683_0.7714458959168338","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/notched-outline","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9357ea6bbc00e4e1e4acc45a542c9c1f88fa4106","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.d97f8f133.0.tgz","fileCount":33,"integrity":"sha512-MuI8F+Wl6/dcAGmW+OGwKLt/Eq+3si9wDnSK0u9Nb4kYO3lQIuN5DzWxmpimSR9r9eW7uwP2LrtvErPmYK7aUA==","signatures":[{"sig":"MEUCIG3u1M+5QC/fj1+8kBj5eElssLUK+iLT3lMXCuXkqlzaAiEAwNE6Es6sFqwmGLwep/pOCkp7eVeYwWrDX+vzzyc13Yg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJo01CRA9TVsSAnZWagAAaTwP/RHNzpz4GRmYCjsZBzqk\n9zzor2xX/i5rTGZbfzsSSp63zLq8hInLmb+Ywf4JFY8pICOBryxGJgp+i5Ae\nX7p25Z1J1Zw/LNkn/Hkz2RCzeH7hDxEjxXOJWHInAy5NvyRHezZjl+xwlWTz\n5w86Zarq5eH6Amvsfg1XeLhDfriPS/YCXDF2eOTXC4W8XEb3l8cXjF0QDFlE\nrdY90bxg+eLakA4aWpxMeCPr/OexDUSvDSgEWpPWGUHE63qb4A3TTOiwNZ4b\nuw1BjxbOAvGH01yXRskKmpeXMsAw+p70M94Eh/SrQl8re1Vt8lx57xi1Dk5x\nR2hCsMaZGddWAFB0L05wciMWc/dOAtkkF9miCdvhKiVgdXYThZ0giVZDJU4f\n+WANsUIV3PomTjKSd8xlX3adg/jJw0vp0mxlQIa0Ggu67x65OQwl/2rolvxX\nTompGI55+/+mxDiw3+afxKpsnL9oRZ6z3ZzZd2Tnqo26Q0qKUJvhFSKx328i\nPWPIWuijuJOhoqPEjjcilnVtTBwDcj3pp3mketRus/OduqpRWwOuielN6XC1\nOXZQgnvAE5TK5Kklktid4CRJIVvgVFFbpB3diJNRnZWlUdLYxGwIYXeHWoyW\nFSgXygrejoNxmwu1sWWIH0v2qXB6qwXb/A+hgcc/3LrcFV413mJaP/d87K5l\nSotE\r\n=eQDC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e7295f4786bb26bbc05939b4d6e3e42f011cc033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d97f8f133.0","@material/base":"13.0.0-canary.d97f8f133.0","@material/shape":"13.0.0-canary.d97f8f133.0","@material/theme":"13.0.0-canary.d97f8f133.0","@material/floating-label":"13.0.0-canary.d97f8f133.0","@material/feature-targeting":"13.0.0-canary.d97f8f133.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.d97f8f133.0_1629916468890_0.06913405958662278","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/notched-outline","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a02a45d4e23bc49eb741598fda7865495aa394e1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.d86fb6fac.0.tgz","fileCount":33,"integrity":"sha512-rCnhSXq4hb1P9AQxxPNzwtbqE9t6SaQjuNobCPsoKdxMCP85/KUNIEU8HaJFStNMN0eYw1f7K0uEm66i95Rp8w==","signatures":[{"sig":"MEUCIAtZku3dUfU7WUGZak4lmBD/gJkK2UCytnSGc+WsnZEOAiEA5jsi/Al6T6qt6GFsScUw+oIqDjGQDgcxR5YJmOJCF9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpIBCRA9TVsSAnZWagAApPQP+wbmcygcJOUh3wI1ePxl\n+DYaVDIuEWcBfVfu3y4uRhLKkuJYwbNbXJkkGaoubBCqYB+xH1b81izESRl3\ncdM6qeNzoAqmSgFNzt381R/wwl6hdJ0z3/ZNCjrgJqGolSSFQicn+w4f+sWK\nF+dqo6EtL7sgji2gbBBrBAYVuw+sQpwsdD1ovLeiDWvrk7Z+BsPWrb68mODf\nLuLTg1wKB0ZA1cUklmjl+NDX3+uaISBZ51mbAfzPWjS6kRCQ4SmvG0NahMlJ\nModxZirS8rzH1MAZSUhXhNdbaIef/JGOpCGCf3urvwoWLu/nyLqBbYtQF6dZ\n+/sRqiXP/iL/Cgotzi9bmsu7OTaaAi6Gw1SwOBPsHDHvHPkkkzE0tFDicPmS\nd8iWL4/+hsJYSmQ0gzAlV+Xjpp/LUPIaM6cR/3fCJfkoDw6MR8z26FZIzpKu\nTNYqrimIbYsViBWn5+0xiWP9jJwNp0J1EpR2mcBdX25j/M5nuCRrDZ/mDJhp\nbyr6bYFxSqZBU8IEUuDHbkCKTOTwL47TJ+vROpEXxkkhB5maNWulfDVg0Ib9\nond7uDhnzeStufDg873h4qPjWOEMchqNRAb8NFPqWoZZ3/5QgGJ7YK/DibCV\nVshPs4/QDILublENF7jfE68mjqPmNF8SGt9GT53B9LszO8ls1qRZSiZuAVb6\nw2TR\r\n=F597\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"35d13d1a20fe14c295e8589fe5960bc9b4da1925","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d86fb6fac.0","@material/base":"13.0.0-canary.d86fb6fac.0","@material/shape":"13.0.0-canary.d86fb6fac.0","@material/theme":"13.0.0-canary.d86fb6fac.0","@material/floating-label":"13.0.0-canary.d86fb6fac.0","@material/feature-targeting":"13.0.0-canary.d86fb6fac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.d86fb6fac.0_1629917696832_0.19946763246302424","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/notched-outline","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98ce4132255ac6896e42e32d75ccd17cad364313","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.e8554dbbf.0.tgz","fileCount":33,"integrity":"sha512-Atzg+ONl2vO8dLCGBUBIRAa13ZPkVMw8ldCKNNfGMA/Axkl3/cF7pd0EGv1yKOWzDH3R1oS4xFEclkV5AWI88Q==","signatures":[{"sig":"MEQCIElL39oTAfQkE/tXEbExUMot4JhSM+y/8VpZTt/Blwy8AiB1xOgPcUHHsg3jcwPE0CJrFfmho2iU/Y9ZqQMx6oA0SQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr2JCRA9TVsSAnZWagAAzIcP+wSsUP36nwjOJzGJ6pj6\nxnmdbDenA798X/ZW3sjWd4Cw6WAr0ZXVJzYqICGqYrstVnxtFrG8/kYM9pvM\noabN+ejzkJLoxg5iOD6PQ3AVqXSiWuUt1s5Fju+Hq5kZvQpQZqrLvHzS/e9d\nqGyto5kIY4gIVxLCd8YFBbyqVSrit5d48t0ULFSLu5wRnE4iUCXbbLha0+KT\nsTZQG4TXxzRIACUW5pdRgSpRlvTNMDvmKm4mHgNO8cXY/wBgURccB5lleFLV\nvstCl8d+tzc0bBf9nZj6IYkqsIrak5uVHcOe/7aqNIcsK2sM0kEwsZkEFYG/\n3iLFz5m7IIe/xfU8lXtlMl2uh/XVRrZo6x5z8+JUitr6cv7ulyCRaNZCeYij\nMzv2XybRlCPJbEKC2hXGtM/93qyZkvTIARnLy7WzJf4MqLWGI5glwz630DPZ\n1OcU6S4AloH28srhUkUZmlyGEdCh0/B0ZJ5JP9cLT1tRsJMbZ7kEdo/y5M5q\nmEdZnHIEPpxCPnyaQOvpgbJe8Y+XbAxookkU7wQ2ADzxZ33RmYcjVBgaIRBv\nzDSxlc4VL77YjsABKKm09JGfParIqtQitXkXV7VoO88HFuN4i202MKnPCp8S\nt8Xc0FZG1gxF22bMHbblKTTL5j4cIduyxrDayYUapIuf7gWYvJ8pXfsaFnVV\nyXCJ\r\n=mkX0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"da636a8d32198c6289df3bcef39340bf76cf8265","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e8554dbbf.0","@material/base":"13.0.0-canary.e8554dbbf.0","@material/shape":"13.0.0-canary.e8554dbbf.0","@material/theme":"13.0.0-canary.e8554dbbf.0","@material/floating-label":"13.0.0-canary.e8554dbbf.0","@material/feature-targeting":"13.0.0-canary.e8554dbbf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.e8554dbbf.0_1629928841324_0.34445764577983384","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/notched-outline","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e21b0830d6a353d0efb4924ac63f49760c65d55c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.877e3fb0d.0.tgz","fileCount":33,"integrity":"sha512-PWHDRatEPEzSUv7aR1/UCMv1aCxRyv8X7EHro7lnKB1GduGUBHm4YuKfRYqtRTzXm3qGS4UbRmilb62+SlgdnA==","signatures":[{"sig":"MEUCIEeXwJoUdVLF9vihv4EXIE4I9fqHZ1MGvToGIa4Cb8kVAiEAoXAaAlpFbNJ4yxZZCBClM2F/eCdm+r2K7/9cJ+U6aaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7WwCRA9TVsSAnZWagAA5rYP/3oCmZuw0xVcg9mKVFFj\nABekLJsmNIJi9ZD1nTcWAKSF8SiP2rFrcw7QqDCmCmjXDb15HwXtlUJTLHnm\nfuaUU9gTFDjwKDHru+vhV6+eY+ROTx51TrzmYAsNXgfLUiKD7XKlBTRlCI/9\nOf5XpxP1ojfqV+Syf6+pyLUREgdzZea6c3Dk0hu5zV55KJHODbeetxkIvLbe\n9pYAF3jp+HhW+DO/yLabOImQaKXvBS2CVnfUN1iOjMFyA9bvEOWXbXAftKrG\nOLOub/ueZMC5Izx7hNP/CdGubeW/laJOCjstkuojZa2k5u8t4x8HXwUuDaEg\nZeyBHMOkQCxkwDqAumtkAt0DWrLMy5W2Q8eZHM4019wZyyoK4PA7TIzSGbn/\nwC+a2fiMdLwXPbxGbOkflU8laroafLYpVBgKIkCjVtMhcP4QkUNAlFz3KIbs\nO+4h8LJJrwACRA5hB3xfBe9B8tHHbuW0ZuEO5YOp9f6sfpEf+Y0gLwD8YTpB\nDqNCY7yAFNJE22pw7de10i30b4io3KwWn6XXFHSAgySqt7O81inU1KOWM/KO\nOwZiuC+sy/9d3HcWg1DvTlIPZbjXw+y2hLtsn3BYnVsmF3JClnHw9IxgXz9c\nQkvCRgYoelCTJ8GrRjh80N/ghNUzMYQ9EF3Vy4r3XQ2Myy97Gcy3YM7ONdLC\nHgsp\r\n=b+ZP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"849a956f7ad3e0da0840469b917eb66537c875ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.877e3fb0d.0","@material/base":"13.0.0-canary.877e3fb0d.0","@material/shape":"13.0.0-canary.877e3fb0d.0","@material/theme":"13.0.0-canary.877e3fb0d.0","@material/floating-label":"13.0.0-canary.877e3fb0d.0","@material/feature-targeting":"13.0.0-canary.877e3fb0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.877e3fb0d.0_1629992368080_0.5928215447592644","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/notched-outline","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.6236f3576.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6500197d50f5fce9310d2d9e29562b68ba8d33ba","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.6236f3576.0.tgz","fileCount":33,"integrity":"sha512-2/CBb9mGFhGxRjjciCSY5kEMzMzdJ5aZgWv7NYDBkcnwpvurVL70diLjx4sPsLK625/ehxbxC/epbuOUSD1EIw==","signatures":[{"sig":"MEQCIAmr5YsvboSWVaThNnw1/LI31jtmKw3tggh/Wb+KGV7hAiBTVhn3jKoz5tuK/me1rgXxfQM2RBG1vjB75oSLlkDm+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7wxCRA9TVsSAnZWagAAQnoQAJkaejWWl6ZEhgizitn6\n/fQw49Y3g0QFjmwrzAJED9HckXudX+TorX+YJUpE8u1EWTY/Ft3tPnzBHdGb\niwv28php/RLDkxujoqm7yjGJXdxPfTTlcNm4PvsmneWpM6NGjBWdpluxiar+\nvvXeDofxdluV65RTWAB0Sr7aRn2DvbxKj1ur8lvPpItuIYw1kzp77OOCdi87\noWqTZfsPvcHcaK76Yh6E2GqMhrd/BfRJ4LjIHCop4OLsz8TnSzWolmz4oNg4\nmM8mL7usFXB4zySRdfYH5lkg3D/5utxyC+p8SyrclupihaXt6rVwMAn2XN98\nkcM58J9im9tzszLVCjurLpFQSCBvhLIWImXFzOu91htN4ewoEvygYRy2G3OS\nvYiZbtsvms+Oksrcjk3QWOmImTJxKu+DPOPbtcK5StxrQ2nNruMr9r7m6s+X\nIcAx1oGZ7Q1KLPArKXsOU/nJ5f0GqLDcacHBXndrsuHA+NbllWPTme6IGlmJ\nS6xg4KiEM58EXIad+UhbPvk8CXj9cEJTgM2Qr/9k7I5h/K18C/jVZE9GYZgX\nk7Q3IHwYRvMwDeKTcVrFOD5APXJnhaw23FcqoMxsu8pJwiZDxuO18pVyqnKM\nu6i3+MBnQrZjRmgPjOiLB9d8TvwDuOBF0XNAJq9qFHN3EI/SIodXTRpjNsf6\n++Ty\r\n=RscO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"27220fe16ebbbdcba193340cb99388e30976a2d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6236f3576.0","@material/base":"13.0.0-canary.6236f3576.0","@material/shape":"13.0.0-canary.6236f3576.0","@material/theme":"13.0.0-canary.6236f3576.0","@material/floating-label":"13.0.0-canary.6236f3576.0","@material/feature-targeting":"13.0.0-canary.6236f3576.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.6236f3576.0_1629994032843_0.8671798222869229","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/notched-outline","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9e24393d56d579bee49ffd42a16727c6b1216d2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.1d19158a1.0.tgz","fileCount":33,"integrity":"sha512-cH6cC+g0KSxcCCSXyHehCjKaD8H5x1O06gT/SauBrnbRXvxp/tV+qMipALhHdmpnuesxAbSaABNGETWWxEuePg==","signatures":[{"sig":"MEYCIQC5cTRpr9hXL0cwZXqV+e9nJT0wOwQE4UcQSu551g+ZFgIhAJqF0+CrnvnP3fw2va/Z4AcGh28m2s3+T/BcNoO1ozip","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8sDCRA9TVsSAnZWagAA2ekP/i1aCFwkPrgQ8jZ3tY4t\nPhS6GW3KcEMeZROIm+oN8jRh6Gd/5ESg2pkBUOyUCIMF0mMm5I5PhMnWB0uy\nvNsxHX0uuw7PAHjVsloSuEsZEBtUvjT13TByADvWE4qejlQFVlTl0hj/uzOB\nWQ4nKHxBy9XtHhg6r8ZTBr3O/azGHWZesTmxznFHvFQ+o9LQqByORXAfxJH+\nCbd17rsyN/lqg/0T2DDpKnNMGNXkCJOqEw9KKujiIGhP/0jWf4UFqyg81aO1\nKerrEgfJlbWn+Uma65XVD1qpiB2md6TGRJ6RPPp8F6RqbC/fPYol/Q9g5VCP\nRsrnbhqaAbAWrn2Sh4bHk7PuoLFryfG7+iLQV7rgnqfAVGeAbRNfRI2E3LY7\n/l3DBSiiCCfj65yW10Z9lJ/tzHrCv1osghtcnQ5cvKa0I98RxmKrpwAqkLNJ\njCyRp27Uuvm+HE6v3tX4+z4YlM8SQrrKTMKJrdtc6rwxWOt3gScZTOtdUsTc\n+ou5si4LtgEDAMv2vR+5WcEa60NY9kqj1DIkQaQ3bbPacwsQNjCibJwz7ccw\nL0IzrB2MQUM6cpmyQHICWys2r7O0p6UGULwx5cILH2X2VE+5sSxE8rYtym+K\n1ZglV19semZhOxTtk+OJUV9LJ9zvgZ8LrHSG181NhgVnnGGdtGpBSfvD8IWv\noRcr\r\n=ShKv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"451d11fe02e89db73e3ac79cab01741c3da63ab6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.1d19158a1.0","@material/base":"13.0.0-canary.1d19158a1.0","@material/shape":"13.0.0-canary.1d19158a1.0","@material/theme":"13.0.0-canary.1d19158a1.0","@material/floating-label":"13.0.0-canary.1d19158a1.0","@material/feature-targeting":"13.0.0-canary.1d19158a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.1d19158a1.0_1629997826980_0.3502157724431625","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/notched-outline","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2c3dc37ee77238b05878833d23c8c33e54fc1b2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.6adc9e83f.0.tgz","fileCount":33,"integrity":"sha512-2dV6ovpS9ptCwb3LtN2Xy5x7fWnBtVhuwS6x3QHIjlG7pL/p4YOXcNykhjBpCga27yh9b+JrbcDMZ38epUoT5A==","signatures":[{"sig":"MEYCIQCOJ4WmVYy4xhXO4FyNUkIesFwh+/WdZm1vcPIUdYfzSQIhAK5+aK7qBiBuU4dl2ig8bnegwh/CAUOlKdgaSpeJ5PCL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV+KCRA9TVsSAnZWagAARDcP/AzeNMMRLLz3wILrMyRT\n2fkvWN7PZehcBM6rtdMZaiGQBxh723BX6xIRwGIiCpa3UYBIJT9SZ0iKuHCQ\nr4P3HRAp/uKiRtnPq1U7LrgNzmvD370fdM0h0RibWUjvIo+W+WEYs+OAKHqJ\niEZTaaPyBzn4VDU3Kv7A02bBlgAFT+WKEoWY/PVT0xdjJXfnZkwThZR1axGJ\n7CCR9FFsPg701U3anBy6hAXy0WY5q6XTI9NDExtruXL1XyMqUNCpkQTzEDLc\nM+hnmYgxRJnTzQHfoQ28OD108XMFJ3AIz3oR9dgfxxHVKSkymc0VwY6u0cG/\nuZ2j20FrnRYvWrB+6oZ6Je2T0x/hzQWkzH+qmIxEgRVXtWNcUaxezpm6S+kM\nV4kKTqnsfnLsJFK8heMQnlAjuIHCOxkWscy8i1rXCQjd3d7Odd+tZ/y40Y/+\nT7SYVDzdtgxcoE/jKj9knPbfAR7ejY0mx1o/7mv+gewQU8gMgXxY6xMI8Qn/\nZVElOwaR+aEKRBh8Ai4ppsW6gGomJt1Ru3bHvB07w12EUxJ57l5XKKpXLuk8\n1Dxa3ftAuGJ4TjzHszRwMpruGLDQWpDvjuRbfNnCjMI6am/7FmHImNgHQcX2\nRJ1rtKwgfm2hRLkTm/yKTNTXXA6c+c+YTIwRyZWbmTrRhLumd5DpTxqlWHwd\nfKd6\r\n=6YBJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d3d9f017c96584c46d77544b9f0dcb6e22eeeede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6adc9e83f.0","@material/base":"13.0.0-canary.6adc9e83f.0","@material/shape":"13.0.0-canary.6adc9e83f.0","@material/theme":"13.0.0-canary.6adc9e83f.0","@material/floating-label":"13.0.0-canary.6adc9e83f.0","@material/feature-targeting":"13.0.0-canary.6adc9e83f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.6adc9e83f.0_1630363530510_0.44334072217543663","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/notched-outline","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.d082790f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6be396ae52ce4dab0f6bb18dcf2beccb5431aa0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.d082790f0.0.tgz","fileCount":33,"integrity":"sha512-LtztcdfaiXntGtRtncxHIX54Fb1G/rGpddBWzod0dO7/GRCrcqBnGHHAm+U1FptZLtzUWuhElrW6hcGhbuW0PA==","signatures":[{"sig":"MEUCIEe391uyYpHdbKBzxUhhFxRWvGOp1Jeckupn3j+4LIuHAiEA6/7RbbEUNicJFtRStSBr0J59bFNECspztXDa9SIMspI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/bWCRA9TVsSAnZWagAAFiYP/1BIpk2v7bGcMbSQtWAM\nZVKWaGYFdBaAnnINT/NZFDo3LLMNKCoO6dGptCWdAufRd8KCfOT8cO1fjK30\ntqHZXl8O6mlpmck7ZXKwJ3LyF0yEZGa+tNfE/i48yK44e1AoxLfw1gEan9sV\n1/RFP7fUdn+94VigLXBFkFHN05Uu9WPv4P4iwrjY8gwUwpbg5xPcP8uWfZMu\ngijQyQ8CzEkQl08InA2cLhUavs7Mu0is6dFkWiiZtRGm/r0k7TtMJClY/xAP\n1PNTFRdaVPXcJFUmiYreF6gOGc2CZrfVm0WvlApz8PEQRioyWsIOxdZX2det\nGDLLEs1Rb7xMouCxjWLd/i0ot6tUeXb8D5EZ3p3o4tMZmq+tdEjEJIzW56dI\nIHajJml2OiHw/tOZkvSWI/km+uQo7hqoZlpKMI/A87RxMFTjyTpzHvudjODp\nUAV62SkS9VCKo4yBPPTX41ClwmHRkLEfiB/hpDjh/U3zcPZulRZyjcVRvJMC\niblkTzzC3O77HfhLO9c7o4KhSF85Oj6KaW+R9O2YwVTU1rL6GvMkIXc5ttZJ\n/LNLcFJYdyYejJFVlC1k/7gRPagzVNoTT5SP9ZvoAAmu6W8VRAuuV+PQ8ISG\n6ey+Yh/dGy9CG3MlJp5+XPlzvQndHgLtyDTErcsx4o61wxtUsiDEXyiuOamE\nzwSp\r\n=N9Ml\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"77212852cf39af4379f15c0daae076eb8b562c15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d082790f0.0","@material/base":"13.0.0-canary.d082790f0.0","@material/shape":"13.0.0-canary.d082790f0.0","@material/theme":"13.0.0-canary.d082790f0.0","@material/floating-label":"13.0.0-canary.d082790f0.0","@material/feature-targeting":"13.0.0-canary.d082790f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.d082790f0.0_1630533334079_0.49653586049430865","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/notched-outline","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9125db6289cc6fc67a3f9f6488cefebf47b1340","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.e2c4f0196.0.tgz","fileCount":33,"integrity":"sha512-Xv5jwqgGZXnotXPNqbB/MHhvRZQ44d6ZjCkeZhJUr54VpIzart5e/2q7ndEehHI2KmJDjkgZ4RGa0gOFaQjSSw==","signatures":[{"sig":"MEUCIQDpAQJ32I+kw6hHmMonuDT8EMyg254CWob0FmTpJOA4WgIgCODAqSh/JwuPw62q0MfpwqEBwKE12yK6HeZPTGPvRPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDMaCRA9TVsSAnZWagAARakP/j79ChWi3cUu73A7uwvs\nNI0WwfNQJsUm26rwI4f1VfbKO9i5w27XtqilhDy7PxdVLrXQaVac4SdWCkho\n/PRoLnh7iy4agVV2WcvOoX9WpyMlTgxAJSDUk8J92u13p5Fevuu9C56taNg7\njVN7xl7R1+2PesbcwxY4Cb9VoEQZzM8HCOoHR3x3W3oWb8xcjI6VfO9T/enM\nJHEe4q5JUEWw22NtG6/8ZvTQxa67ZMfETicNTcyTbMYZcjJGjZTfjHCgryJG\n5HzxQzVdW0M6upw0n0yBXTqicCU6/8r6/AEr6s2MbrjZ3pf03UNu3sqkebL/\n5X0vf1r4MIhAwlwkwRDnN9/HjzW4Ag4OkWEnATBUK7RE+1nIE7sO2IZ1jfKm\n+eiUw6USBh9+8Tz4+qLpQtmTTMesGza3sgiSetnBSKFKa6Mo3wtvZcsrDfco\nOh9bqZ2pDXwhEW8NyPypXhcASrclrrqOxaRDtWQcqj42SfJw91DotaJnwkig\nFlsIrqZS8IflH3i8NzlYq3an2LSfMFsIN0Q+0PyhMmGqeltHle7790jvwLLJ\nSbWr/Bn64XRELs+R+fEVSII0epLGuCbd51jKqBKpez+i7R9Iv1iYUZbUWkV3\nFPhXwZvBIL7449BIvDjRp1a1IRG+rOlhSRTEb9hqZrsv+ZP51iK/bm/FSagC\nUPGo\r\n=Guxv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2100e21debb7fbebda0966c953fb24e1964c19fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e2c4f0196.0","@material/base":"13.0.0-canary.e2c4f0196.0","@material/shape":"13.0.0-canary.e2c4f0196.0","@material/theme":"13.0.0-canary.e2c4f0196.0","@material/floating-label":"13.0.0-canary.e2c4f0196.0","@material/feature-targeting":"13.0.0-canary.e2c4f0196.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.e2c4f0196.0_1630548761934_0.32574951292247234","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/notched-outline","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.611db508e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31f52ac37a02f0e68e0e0b8bcc6ef2885c45e93d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.611db508e.0.tgz","fileCount":33,"integrity":"sha512-8lMpPE6wsD8mdXK9Py606ux1vDmlnDLDJBqlhPA+fGmsaeR3Z76VZIP0DNDFDQQN/Djs34UtUU6n21P4Y9BuRQ==","signatures":[{"sig":"MEUCIG7cXLExUBWE4FYNXEbGTMl9e33f5wMocEr2IvFYAwyGAiEA42gRzbiknr1vx3I3jb1tZ3BzfC9dVaE5XzGhnkic0Tc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEILCRA9TVsSAnZWagAAQCcP/RQNwaSuQe630uN1h55p\nwLtTD++0UVjIkHNM4E+w+e7nVnmDx3F+GUCEiG+wzBXJSZgLR8N2P/jPHOnM\nm+Hb1cVYxvrfWQSNcsyD1ehqDVU7tRsQULcIrhDIP8bxDCeed9MyC9zo+nEy\nNCy7hC2oUBIstrakKimUhpRNhVZ3FIYw8h8L1Ozm0RJEWqa3mD7yFQrY9Y/t\nqYbvsUlr7TQtmlmhp9UnxxEFJ0J57tY4fGEr5YTBPBorcbYD16FIFG2vVAtN\nwkf+7kkTK5ldvZwXuPTC8qY42OTiogKIkYjJyX7RZSDwgs2DCd6+PlLyuPXn\nKZKKuKwNf3iAhwV+Dxt3i7lQuLnMAPB8ozjCLvDgUA0+yoY3Y0X4sSZYR2lj\n+qOf39rBVkO+OZiHI04fi/23DQDYSQwznswhBldDMZucmJWIQEZBGPot+CnK\noha8VQ+1w1K3AwsMA9P9fETBHBA2vzB1Gn4lETMfZHz1fRjivPX+Ay0PFRX7\nk24iFM6mOK4Hh0ETedozOL20VjL753KSnMszSaTWylLJ2j+vWFTZvkni7mjl\nU2kwbPe2TBS/Yxfgv6oCXJYqWN1Y7zEG7Qo6wrkFO2Dw+UAirKevuH3HKubX\nSzTtKRzViFqI133rO8Im2yj1/HJxUHYxwsZ3zkY3/GCcjbOFWyld204oxsyf\n0EQG\r\n=VGD7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5d75be4b0e067fa5d6477869a053c630a67cd643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.611db508e.0","@material/base":"13.0.0-canary.611db508e.0","@material/shape":"13.0.0-canary.611db508e.0","@material/theme":"13.0.0-canary.611db508e.0","@material/floating-label":"13.0.0-canary.611db508e.0","@material/feature-targeting":"13.0.0-canary.611db508e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.611db508e.0_1630552587797_0.9058932064525189","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/notched-outline","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.d4706933f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81c1e09b734852d9988a0a1572f13f5cd8df0fb6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.d4706933f.0.tgz","fileCount":33,"integrity":"sha512-fELwI0MvuVa4Dowq9wCb4Bq8aPzuGIi7+5eKyp0Ul7PHtfNDybRyZOOi5DPVF9tbfF302KATDItohrlz1ebIxg==","signatures":[{"sig":"MEUCIBvAI7QOmhrkErv2DmA96JNYNcSqLbzwoAbvyxIJs+iCAiEA6jEVyTWPvMoMdwpM+6T60YV1BXCaZpOvAXQk8Ymuqj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMPAZCRA9TVsSAnZWagAAs8IP/1+4f8keRrUfayWa67aD\nDkvXSPC0gqWTLrWAebO+b3ZoPV++3USLxwuGeGdx04RRSzNjtmR69gpd7xs7\nMe/IgrVEbNBIp0nJ6B2gq6QGK9GFZlQEmtJTHVyj9irBw4m4/Hh5w8WJdB+Y\n7m7O3XB4SkCh1KYNpFJzg3a+8Nqf1JuZVO4hGQxmz4vV4zvUWRzB4wWDtCBk\ndgzoEY3Kawu7IzRinJIf8Dk5OhsVa2FYgtXC/v0KtFrFFLW1G9msWjI+tBZa\nk85hevO0qWF73wuUnu4EeUH5+BhSLg7r1LwhbVHTyxs16ePktvOydhvqrnYz\nxzNcs7D9SmflTsnLqz8UYTDD52jR7uyWcZm3i5sKGtS9J/xu9oLhoNcZqehh\nwdBsGSxjRlK8IkRWDfxy2P6yyomobzjCz+YlipiJjyrS/T8jBoakSwNPT7/B\nF09qPqLWNgVaDjE4/VsnCax4Ytv1LLdVa4gDePWo4472gEIgWDcndELmAEh3\ngwMN6L261YL/bNaJJ4ZwrXu9xkf8+1PprVN9KP6C+ATZ8fBlGLAdzGCwm4D4\n6oyD5sc1zFVGEBCuUk5tyqU8r6pIsS+8Gms3p5obzt7OVJqam6iWgLD6ZwrE\naH24vCjyEUKyaVBRKY3uRkYx9gve3e5ywebzHPQbK5TWZLeuS8TJSzqjvdO8\nu+tN\r\n=9IU2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9e7edb1e0621060d55bf2765cadc8f2ffcfa0f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d4706933f.0","@material/base":"13.0.0-canary.d4706933f.0","@material/shape":"13.0.0-canary.d4706933f.0","@material/theme":"13.0.0-canary.d4706933f.0","@material/floating-label":"13.0.0-canary.d4706933f.0","@material/feature-targeting":"13.0.0-canary.d4706933f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.d4706933f.0_1630597145217_0.7572333299818144","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/notched-outline","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cfe1324ca259e8697c5870104dbc7ecc88dd30f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.c16fe03ce.0.tgz","fileCount":33,"integrity":"sha512-3wZtVke62eX9GCFgQhEQ4X1q8l+BU09lmsj8GT6cYC7YMBUfWcxLVsxGmfckNnz/kpCTktnESu/lBSyYoIGtow==","signatures":[{"sig":"MEQCIGz7jcG/fUX8z6JG4hwx+Jm2ervt4REYatR4rdrZ//cKAiBfG98Y/YUCM4458Gor5wgxyCzy9SzpF6WWTf0mx/d1rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ3dCRA9TVsSAnZWagAANOQP/igfET+uYV598EF96R9G\n4v7/9SeKdrmftIoT6y1RCfHpOBbNb5Lg3+L9gr/HzHKT7UJMI+KIG7lKN2Iw\noTfyfz0zafJY0egLfM+Lw6Dh3ddakHVx/hIwp6paqgR+Y20ItC+192TW2BiL\nkCo7pHF3yqcxA2Gida730ykeWqXKfJdJdHazisqqdTL48D7+KCTyTTsjUcoz\nB30jrs4SKUMDGArU28eIUwsCPZ7AMhh9p8TBs5DAxl6nbyD04G+lL0htbfcl\naEluGcH7TRKPbYVQpKz0mVQJjUx5qmlr8Ss6TGQdQ6/o2H06TpanQNHcUbWd\n/DLknSVNnUW0DCyFbcNHtrgi+0MM/K9eesONTRA1lMQjdOpd19Ld8i1uEiBx\ncGIuDNs7Q0qdaIw9r3uR3hy0v4Ou0nVbGLJ2HGsAis2FgKFC/CrrUQnGijou\nDOl87IzAVSFvqtsi/acFiOdyNH/pjBk6oUgc7VHrJu43mPsDAlHX28H5BMnv\n3RzinllJ+3K0yIpoMLch3X1i0eQgY1DkQ+DoJLb8Wly68dZTnD76irgqsh4S\n/8Eih28NIZXZTUPwP1xu40tOdFlwOAbRbz/Vxcknigs4ex7ZqMrvElGWfNMc\nMZ/w1MwAmwLD+JVCmkWfqC1eAb+g28pp5qQs8RA1uP1x2x8mX5AVarEY+tnv\nHWLS\r\n=p7y2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"28281c91b41ff8002401a21d1210e0fc629d55ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.c16fe03ce.0","@material/base":"13.0.0-canary.c16fe03ce.0","@material/shape":"13.0.0-canary.c16fe03ce.0","@material/theme":"13.0.0-canary.c16fe03ce.0","@material/floating-label":"13.0.0-canary.c16fe03ce.0","@material/feature-targeting":"13.0.0-canary.c16fe03ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.c16fe03ce.0_1630604765365_0.7519659428353032","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/notched-outline","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.9203a958a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a670c6c8169cc491090992b47f6b1d8a4603e1d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.9203a958a.0.tgz","fileCount":33,"integrity":"sha512-Pe7gV9pXaPYTOi1hd33iKriUAQrpsz/3pPA4I8OW3YGyqml/DWzd25An7eMugw4QN+a7hcKdw6TpXkKSHDQkhw==","signatures":[{"sig":"MEUCIFw/5Mwb2osA2VBIyAKuAJtJTMOznlHiGysZMQZF4demAiEAu0CRzsnSwAqDWCdHSneTbYzdzIbiNSupSj1Rn9QZM7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWKJCRA9TVsSAnZWagAAP+AP/A42TgakAd7VFXd6hv9K\nqcNGvLm/VPMjvi54HUMDIabv6j6dfHx0S0vn6a+WzzKY7m5WFpsK12oUf0bj\njHjLYndSl7fKEYuHt70bGdpBH/7U90tMg/xB/QYhW+DceATeHWgw0k44Yxq2\nWhbLK7mlASjTDJtcCdPi4lCoB7JigTceo7iCGFc1ZKnjZKjtPp8ojzxcHese\nnidg84hSy4W1XWZpelkKZQUWxKpJEjVVoP7CQ+XHd+xA/u8a+h7BCJ/flB9R\nVP7yCVWVoul8huCwfWZVuFCKAg4EFWSYrLTEqmKOdhE9Tyuo4+3mw3Vm59Vm\nB8Y0/yRKQvhKol8I8/ZEGyIHplgB3ZT/ulXC4IPfksD6fid5KZGl6knqzjFv\nc+ug1mpdmUNIqi1NZqgWiuoAC7HEkSbuNh4emEpscpaB7dfQdGLjijrocEJZ\nMborBf7e3KkqBDoD9k5r+cOQce5glJ+HZYwv5GFPu6upkQsqo0bs3eMlOfr8\nilqbquPqy1JL3ia/1jzuAqevw97dCqX3xSx9Wd9WdTQVsAeW2HLaJ1BTKiTe\nVZci74wvggBtqp4MyfBLgV/kM5FeCQE+AjU7ONif35MvzS8z1xRx0D2EVu2c\n9RxiLUVt+lbtx2M5Zy7QHMJ4gNyY7yfbVUJlZSvb9qNI5iKU4vaS3p4VnwRg\nu2ad\r\n=3FRd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2e0f9de34d700b0d1eabd5186c5b5cf8080eaf74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.9203a958a.0","@material/base":"13.0.0-canary.9203a958a.0","@material/shape":"13.0.0-canary.9203a958a.0","@material/theme":"13.0.0-canary.9203a958a.0","@material/floating-label":"13.0.0-canary.9203a958a.0","@material/feature-targeting":"13.0.0-canary.9203a958a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.9203a958a.0_1630626441695_0.8248648405979231","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/notched-outline","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c29c4ec09bfb4464a342076061476cc076afb25f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.fddd5ae93.0.tgz","fileCount":33,"integrity":"sha512-CdB5c1FYkdExSxjqIb77WDI+o8Y6JGQv6rPhYg0G3sGHwq2hlj9rT3xARal5woVS6KJvNk9VpBMSiGvUB/L5qA==","signatures":[{"sig":"MEQCICo4JZFg3o8kUmFxJbI+L/t/z3x9famTx3W9IkRqTglIAiA/ALRWdGXtiRyqzHlPxn7FP7azsjlTDYDZeHn9u70B8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc81CRA9TVsSAnZWagAA/PIP/RgUm+Svnfa0OQ6wM9Fm\n8/ZEV1t5AJI2y2lGbrhy74UzFQgTLd6d4XR0B7Cp2E8/zVyLhj6WH0FCfh37\nGfwLv/nVetBnblk9LixjXVkmuHBnIyyr7zbkbMd27Y4cSf11tJNZhcw2F7eB\nXI4qPZIwDveI/DURBr9+T0HpF1szpe7bvkdsNkgcj4dpXCeGjjXJHl7DaKid\n3tm33hAc/ilBZr4AbvMK3xKmTpn4AshwXFOXTeSFnQsJkdgXFnnqWwapwWol\nB+WVSpLx1KeHh8HyEXyF9DcOjXbpLVwHEyIxfrGsjREpGThSD/BuQqnC7WTp\n2nHgaZKjZEP4zK49Bx3WOKEE8rgUKGbdCwjeIBGDy0GcKTUXA0EbTnMknPwJ\nSN6UiJYZc5uVKMfulcCTQmCDtAjeK2T9hm+EcuAiUixLyWd+DUtC352Guilm\n6cgEkeWs/Rh38xuqHA7Zm6NJW7bC0BfOrnNwEdrG2/hdCk8U0pig4pFutoUJ\n2y4EOlWF6bewMYkWUbLfRgugHbSqmbH6mHmDXAY0SrOxBAK47dkP2MC1abto\nDXoKydTv/EacfkAdFpWE704ARAkAXRspmSsqYj0BTbjfmXIyLswQoyvVAlOT\nuvIhTcSu+0disF+xzbLvncsbCw8USYy6qLmoKx36/wT9ZlMZ03IIEFqT+coN\nJq7N\r\n=omRm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b5407901afd7b18f851e64db0350e0c38797ae29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.fddd5ae93.0","@material/base":"13.0.0-canary.fddd5ae93.0","@material/shape":"13.0.0-canary.fddd5ae93.0","@material/theme":"13.0.0-canary.fddd5ae93.0","@material/floating-label":"13.0.0-canary.fddd5ae93.0","@material/feature-targeting":"13.0.0-canary.fddd5ae93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.fddd5ae93.0_1630654261624_0.22377326775017514","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/notched-outline","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.117599a8b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a1bf04c0ce5d9a8e603b6b5996c15e24d5ec6dd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.117599a8b.0.tgz","fileCount":33,"integrity":"sha512-NMpBpxQOCTPpXfEaH08P93nto46WTD/LAPXBVGrfwW9/+/I4aPBDszLpFzF0gupZs8BQdcjNlw0Bp6M8KrhFlg==","signatures":[{"sig":"MEUCIQDu2PxI25xemYQV5c65pYejgOvU4FruifDT6rt1DUCJegIgNac9zeNKT1sGlBEe5YfnQP+DrnDPahoUgWXYHDVBVog=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+WCRA9TVsSAnZWagAAO2AQAIs8GO9GqoTfJmAYk3dt\nEx9csuBaBoPZMvyEzHKk/QpyZXmmIPIeJWxJoWS/NPK9td+AmmlFkJIXser5\nQaJTckPIeFNjWv5nUQ5utnYDe40uSQ3QU+1gANq4MJFG0D7tAFDnEv40ey6q\nPB7KzFACZKd6tgPnJtgcPgstC7iB9RHCAhF+12VA35oYma8qZBGqyGrVVO2p\noLS07OWd35A8ESmkQcDTW9t9sHL231ppizc1212BstlE5cKTLQz41VnkS0HR\nTfAebf0+2hMTojRec6XtnzBUGboPTLWuaen3m0nPYCOpTOcLS7GTCcnlnVcw\n8iPQS0FGJIU1r1ozzqszqMUfBTlUdBZ/wWekvl4pUA+bmPqWezs+AsyIDy2p\nKetj8PnE9b/OS/txGo6pvqZaWSQC988cl3cpEExUOvUv/32gbDfNDnfbt4A9\nAH8/pBOZ+NLH8psQNizh0Vj0myjZFZldD0Nk3Y+bbSQxTcITPT7Hlwo14sSj\n6G2wMTbmU3oyjNX5iLGI7DzqoTLIhFLYAq4FUn98ekzM91QiB87omLuIbQPx\nAlDY0NDGgJ5osA2eAL0ckVtjlRZLkONEFBRpqdNAVJ9G9sTHCgJj6/VgpMnG\nVBGR3lUCGRbdN+enFJJz1c/T92vQ/HvJvZpFp4gv5iugf0ZsosU+ZsrFj3PN\n0R/x\r\n=tIei\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3dd17eaeb796b36aeda593de120f16c60ff06a0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.117599a8b.0","@material/base":"13.0.0-canary.117599a8b.0","@material/shape":"13.0.0-canary.117599a8b.0","@material/theme":"13.0.0-canary.117599a8b.0","@material/floating-label":"13.0.0-canary.117599a8b.0","@material/feature-targeting":"13.0.0-canary.117599a8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.117599a8b.0_1630654358652_0.2212829240877694","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/notched-outline","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fce6469400bca4f72f230d44a4fa0b9ef7228ef1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.e4180d07b.0.tgz","fileCount":33,"integrity":"sha512-JHjtVFju2VcZj0b3j8g/tZm/8cYnrNFjw1857y2uH5d6qcXY0xidpd11C0VVHvZxjPVpQ1keQBHIsd5DJfwJMA==","signatures":[{"sig":"MEUCIQCnh3SxMuwwgvqDVPfYGB4Aad9bKn92+TnDJsxI/1CBdAIgW+zniIWuExe86cBZg2GSdzsNwMO5k9SAI+VaRJovpN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc/CCRA9TVsSAnZWagAA8j4P/274m3PVmC2RyS9I7+EI\nVF9Os18zDfze0Mv66EbX1PotV5wHzgEVhNsA1KjbfmzTZH6RKbFLfNfAlUZt\nio9FckIwmHNUX1Si3Tazm/muIPCYNlIJTKNiIAO8dWEmEki/50/5DuwRITPp\noOvdFfK90aM0VZA2XGNGShm7dpM3gycWuSJWpu052z2Nk63bE2NH50KjAlPn\n/HYT4yroQUXBKa7C+41wD2AGeq1oUP8aAk4rBhWaO7UiGdwzZ9uuxcX7UIjm\nNpKt/4jv0v67+yb5J5olHNEgQ0p7s+IuSkYNyFiBQnWJ3l4wyAo7KuX9a+Nm\nBc88yBDEIw6GVQb61ePLK+Kz/3vU6y9AO93kaeQLuabiGaytpl4/iNzgqb0r\nxs5duGDTjnRW6nn3wqQD4a8fn/U07y4kf6jejLfs7q2hHF6yajCCKceVkaWC\n6M2doQ4xEuIsuYfUDxMZjh4sGpG9HMu76y4tEAGzhf9UJtCCaSVz8+LpeTxB\n79cl/7yCx8vpzqUc05agjgKpui9lzJ/z4Y8WAAn4mAa0e5KhyK9poOnh9r2O\nb075Su1t/9+91aWngxLPiOpiFqNF6WfiREZAGDz9+ra2SoR+yfjFD3sFKmam\n9mmrSGxoRpwprcqShcU5xxyaSXZgod9f8VDmAU2L+JxX1LbFtKUNjv6X/uVU\nHSOH\r\n=CkHp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3b94d02f75df256cd0543dbdf5062823ee527d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e4180d07b.0","@material/base":"13.0.0-canary.e4180d07b.0","@material/shape":"13.0.0-canary.e4180d07b.0","@material/theme":"13.0.0-canary.e4180d07b.0","@material/floating-label":"13.0.0-canary.e4180d07b.0","@material/feature-targeting":"13.0.0-canary.e4180d07b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.e4180d07b.0_1630654402178_0.7400135549243791","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/notched-outline","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.42d175efc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"195067e91e09a98a0dc4fa1634bfcab1b306845a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.42d175efc.0.tgz","fileCount":33,"integrity":"sha512-UAWNcC9PvheV+uXPB8ID1jz93sjdeMb61A0yB+Vp7F69CyoRmEgN5h4jO7DCAUKw4gywnr4Fm1UlBNt7Sy6I5g==","signatures":[{"sig":"MEYCIQCgAJXK01qroxXwUj4U98e2r5m1E4goRQfl4k8NqKT7uwIhAO9zfbPSbF5T/I6EFl2+PLApS4ENdCyIsDXScuyzgrzR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkLHCRA9TVsSAnZWagAAQMwP/RuU3Z8gBh4zXmr1szZn\nV3D2oJeUaKY1dcLDi0ywW+N6r9Q4K5gYy7Xdy/qduW4LbAFvnJW5LOrrjilB\nuAGZsrOG8/igppDt7RZOJFZSbjX2oxWhFjETU1QVmUOX0NhPWF+qYc8iIIxl\nJlM3dKzF6YLLVy1CBD9r5xJS03qH4WbfuqZF4Hf3jUt5xg/M2YL0pnhp8Xyw\naSbXsCzZmA6w7pzYWPXksJCSENUIW90pTxpG8i4IHaABhKMhvEh2a6RrzoHY\nArC5NIxp2ntSMVDCuLwewgeCeEWOfBkByvBifPYmtTf5Og3C3yUvfLpiuAtX\nrm1H4V82Z7M1SUZKyqDCBVeBXiA1feVB3x6KD3hnaUmdj/RsH/9IBfpRTicP\nz9uTUrbQUoGzBBD83tNs/2piP3WXrmpIq/EsU+Iw4LjqMBXbi9SA0dKFck8C\nZbNVEIimQBhdJCDCbUNTHmWnrsE2s0B/lDEoAbTNTECRR2snfP1B0HcXd4b2\nPfpUDJw7FiX9Ol5Wo0l5gPT2CwI4R3JHdsT3i6YVZhfoOvGl3QE+PeaZa+tw\ngfqo6WWw8dvcF1JP6MCrq4rPuwrgiQJP5itykMcgUM/9h8k5SlV4am5pPPm5\nLEM3XqfOz9EaX1CO235/Tfoc/5qqcw3ZBrKGV9nL++FVnk2Bj1PMWdgyQ1Su\niNq9\r\n=V6X6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"64e749d9e76a60e5559d8b19e4b57da1f44ebf0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.42d175efc.0","@material/base":"13.0.0-canary.42d175efc.0","@material/shape":"13.0.0-canary.42d175efc.0","@material/theme":"13.0.0-canary.42d175efc.0","@material/floating-label":"13.0.0-canary.42d175efc.0","@material/feature-targeting":"13.0.0-canary.42d175efc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.42d175efc.0_1630683846982_0.4211017375264159","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/notched-outline","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.72464476c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80308538946ae71111303199cc648742328a2c64","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.72464476c.0.tgz","fileCount":33,"integrity":"sha512-N94Ip3rNH5szQXbdk2j74bQALkn/41Fpyzh4P4dOQ5nc24U7phIQnNsAdLahKWn98ORVhJPn2zHsbYR0CheQCw==","signatures":[{"sig":"MEUCIGncbNeQ/LivEVScxlil+AHxm2OBe5Y7Aww6kXlZx34xAiEA7RXRV5QtjUtiP2yxoq1QuZ47ebpPFaeJjHpFyfvD4lw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4a9CRA9TVsSAnZWagAAJZIP/251/6jMOAnpOu1BN/jL\nKAGU5hZJHem5WHiS5ZIXu/CFWmsWB9cbUOlF+JRxXesstLBdaTvG/tT5SHVp\nopb5w7FlgpjmD9D0FwxOotQoUjM3fzHJknagQ8MJVEtN/84/FdKNKXoQ2o65\nT583EXdhkJi1ZI69JCrfFsa5128xxAU725l147c9QAuoc0os6MtNO0ujxy1o\niA5ur3nUiWGjQEoYB9jCO7RkG+gz86e+ueGd458gtEASIRq8DWcXPC2nGMkG\ni24+skh1X/P+sq5Ob4gwCxJMkTzwGehsXpelkD+JDPVrUvud3VkrXtAbiBkd\nimJctz5dQuLg4KzsCbk0J1dKjKEAi0EXt1uE16bq0wjBjBe0sttA/hgeGxE9\nnUv6aRUE8KLhZpct9UdA739BneG1K5KSjkz/eO0/GoFPGJ+3eBdls303U6nN\no3ZGvhTE6HTc4eB2967hJU/Pz45dDPEdFbgsfPBCIKVRrxme2BtcxkeHWmd+\nVW9LOkw7Qk3R9UjzWx+0dKQb3e+Wgs5QE/etjnv6ljy4UWmelT948Z/QEC4m\n1XhJdKWU1Pj3R09yKdSTCuKnuG/moB4meb+tw4MFYAHidHlsoEzMSCVoZptk\ntUOdyrvHYHGYFuBEqkQij4oUJJUUmHTm/Z/qrvpuOVhZVfXrwbIuQSDoDRTO\nspiT\r\n=izsW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4c409a18f3ef0a7ee6f9b223a514471c0515b639","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.72464476c.0","@material/base":"13.0.0-canary.72464476c.0","@material/shape":"13.0.0-canary.72464476c.0","@material/theme":"13.0.0-canary.72464476c.0","@material/floating-label":"13.0.0-canary.72464476c.0","@material/feature-targeting":"13.0.0-canary.72464476c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.72464476c.0_1631028925501_0.6352482262643226","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/notched-outline","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.37d4db866.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdb644d61321a18d764cf8c14e209bf92743a525","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.37d4db866.0.tgz","fileCount":33,"integrity":"sha512-g7Fr1S+D77o9MzXGKOAtUMegJMkXMWYNtPG9T1hToAHuwh/7ziD+Exnmmj0ynjtDaxAIPOxbQn3f1L9NgPIkxQ==","signatures":[{"sig":"MEUCIQChA2c5xkBLPyQ4fodNonkPIrY4u2C0AMSz0SAyfnKUzwIge2O3jUY6pEprf5lW3/OTRrY1W5APVv+J8zAFSchf4u0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhuACRA9TVsSAnZWagAAymAQAJqSpvIuW8Xt2PuVXsHl\nBvDio71zKa8U43+eex+ENM6qgZk/xDb5y2h79Agkv97tRVODvVuC3c2Kzi+5\n77RGd60V0b3+FmEa0Ep7u+ReCwI76ctifAn7YehTX7Wh0lJ/R/idwWmz2uI4\n7ElABE6RQfwgD/a84VqAmetjhBRUCDV4zd7KBkkFXS3aWqsCK8DP59zekf3+\nIj9uHlSOk0TwjinrWVj/S1q8wOPFvGxKp7Xh6RMBbJobvSFyhMQpeBamKW/p\nENfQ9yWN+mkcRikjyJiUdCDbHYcMoCmDzXytzLY6LIBkEzGIfptib5VALgQb\nIvx/Hq0rOfyPZaKE7pfYvblcaxUoAkuai+FZx/ld9gPeJ24OqP0RYYsMM8jW\nkM/cCwVVTkuXT49+18VzIdNHoy7welw/sdfUa014Wx7c4dFqbFU+cR0SHcQ6\nQKN9PmNR7tXBFYulMYgwW+2XnFPAu5a2GDc+tmC+77Nt2+2EK6lX+dLOvCDS\nviKJz5DvVc0YuyM3ZU0xrifYRklZ/lES4FLAhLcYk9CQHHVQmrBoDRpwbGCV\nF+ZJIl9vo/htCEUXNOAMWkMDBpRELvdp9pYnLhHtymnZxqCF/BmFlv1CC7Sb\nYM+Xi4UMDNxg8Xol7MTwb8JQNBDuDd2T0GKOAHYpT1Nt8S+JEbstBEswZho2\nik2o\r\n=rYPI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"25270b452713f831fa1adf302fa3f2c357ba759a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.37d4db866.0","@material/base":"13.0.0-canary.37d4db866.0","@material/shape":"13.0.0-canary.37d4db866.0","@material/theme":"13.0.0-canary.37d4db866.0","@material/floating-label":"13.0.0-canary.37d4db866.0","@material/feature-targeting":"13.0.0-canary.37d4db866.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.37d4db866.0_1631198079961_0.8151219009995156","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/notched-outline","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.6df682e74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef1f42a7079986980a368b544eaeaf4f17898806","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.6df682e74.0.tgz","fileCount":33,"integrity":"sha512-pIhhJPazaV6vxVf2i4S2hr5Xu4JCQEqx9PHhLy8fDVT1k6QDjP5pUk0VQCc7THOL2HDjvMsgD0b0N0xoAsgSmg==","signatures":[{"sig":"MEUCIQC2p66LHj7WLkLKN99Sk79esDd8nG7rz/BZl1N6UFWUyQIgY0tVF0xBX+f9NeBQiGnnIMhT3Do8k0ewFo1S81ES4MM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOivXCRA9TVsSAnZWagAABBAP/2bNYhdxm619b49LkJ8F\nYObo+AhXKV4AosspHcXAaithQgagNbAIS+QqIySPo1ZP3Qj3u9B4SHuPDh7T\nTNr45iTZ+AMCz9ukEphQ1EqLPMIZf/7EdDfoQEkXLrN8M3rmvKgXh8HW78bB\nrPRwVUHfJg2e+S6+Pp1YNbmorjRA6AMSn5nLwIqO6kPd58bx2ac+RM+Uz3nb\neKt/LaMIHjNQhfe0RXngiWpvBtYE2r+DPVjexFGF3PYR821WJu54rnhI3M9m\nlqNM4+qjirCs02sxw7ZV8lTrlA8jwH0b6xaCBsl2w3ZS72kdIlREGERh3Flr\njuMeb7nZ1lBYLD9UlNJzKnbynM4hi7QAtYW9kf3mlE4TbINuO5zytoBHj0R+\n1EwTOjY4PZdncIwPfsyaTY4Bm97N74mxuHyjdjUVgBj0AX2pJUUsjnnqhT09\n3OB4nVlOc4AyXTUlvIxPg5ARFeCAkfB6s5EK+o8BAe1E7/jiSD7IO0c3qVpV\n1sfy9RGVEfyPio0hI+eTTq5A1i4Z+12ra8AFntp2FKM6MRGjcKO8Z5Oy1Tsy\nnfeV8Ru+C7ME6Ep4YGb338HOUARGrwY2RIla5x0OkF31cYhDHWBnnlS4bbUm\nCSFTGkIjkWg2eEAel+Iu6+FMpqPqcpkobBTalfrc30vCd8kJgQM+PfDtHUrL\nXRqu\r\n=wBTE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f8640926b088e6e6fd8688e2bf177fbb60e83f2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6df682e74.0","@material/base":"13.0.0-canary.6df682e74.0","@material/shape":"13.0.0-canary.6df682e74.0","@material/theme":"13.0.0-canary.6df682e74.0","@material/floating-label":"13.0.0-canary.6df682e74.0","@material/feature-targeting":"13.0.0-canary.6df682e74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.6df682e74.0_1631202263246_0.7316960852142795","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/notched-outline","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.b49359c35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15768bc701dec8dd59334bf2d3e3f4e4aa9b7db2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.b49359c35.0.tgz","fileCount":33,"integrity":"sha512-WaTJ6qVP1UuWWzkEt6SIMJvzO3U/GW1cTYuZevOwoZacdvSW1tNSd/IMJSm6cHksYxZuzu+MUyJy6AMHQnJOgg==","signatures":[{"sig":"MEUCIQDtFWHXOS3XGRLJdmBoZvVQlZWXQCdg4nqmUAx9+gX25QIgcMEKfvfXVizeZqmx7b2FT7Sd7+cZnRmqlDaauXq0ukE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkYvCRA9TVsSAnZWagAAdsQQAJe//qeiPZoSEaaKIAFj\neDsKtc4Lqa+LrSHsN3T683XPQZXEBQidvtssnF8OleVnpAUZgaRVp3iCylLW\nQNFBLLdsfxOF+dbw6niGs36Mz3Xeu04qnRMAAI0ZQ3+qfAN/Ql951c9MQVA/\n7Q31I3ZspcGVDMWWJPOpK5EirVNshf2oK3VfcC1s/RlpV+07JzYxmc1AkXzd\nI7TKOu7sQEBGd5/HhqWKxyEB9ntXMsNpTuwGtLtOR7EFOIq3UnQKn8S7Ax8V\nGmiDWYO3kWTVA4GbZ80PeLMq+cLu/KNNVKoAskqw0bSWEF3VgWTAyPnsxdoh\nJhHHnNkZ00woI+rel8vX2WxPOlUiQOqbjwdjYdcii3B7ymGIKkQE6ybkeuh1\nGc/AUpZRpWmj8kE+QrftDgncn2f0CM5S1nYWcbuN6HjrQ738KDhYD/H2Z6G7\nbdCSNkdODAxpiiebQ+nZGimMYjd9645s31jw5OAaTREEeYmL/0qEQ+rjNeHQ\nAaKpZT1nMfIRe+8BMjW0VQeJJ63XxfJLZAsfOGbhZP1zEr1ydWSABvlDMYEu\neWmGuG8gYvL/BFbHbWCOItFdq8l95JFzP0enZ0Ovh3UrI9tNHrdc42GwmM9V\nj8xnBN+j3yb7dx7BgomSsy3+kzZCXoBl1yPdiX9SBUt28vD/OavyJlElity5\nze/5\r\n=dtII\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"817b18da85c93007b9b038927a1ae036f98f686e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.b49359c35.0","@material/base":"13.0.0-canary.b49359c35.0","@material/shape":"13.0.0-canary.b49359c35.0","@material/theme":"13.0.0-canary.b49359c35.0","@material/floating-label":"13.0.0-canary.b49359c35.0","@material/feature-targeting":"13.0.0-canary.b49359c35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.b49359c35.0_1631209007636_0.3492121540131996","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/notched-outline","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8a0da568055ce70da8f9bc7c12e9bab00704239","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.470bd34e8.0.tgz","fileCount":33,"integrity":"sha512-SjvIFbficgk5x6oZJhz40PiWcWefjgsQDkIs/THOs276NW7VxCla6Oi78ZMN4p/Lq24je5e6OI27jfINyFvTtg==","signatures":[{"sig":"MEUCICT06G1hsE4yU4hz2XuP09yeX+nLSqe9+eWoaLMHdnHBAiEA4JnQcNSS9lqtbLY6vvGdlEkcqmcW+rYa2Xbwr5UgDG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkwoCRA9TVsSAnZWagAAg7kP/1WWrxS9/WVwQn2OgLpa\ngT0td2ZPIWGtRsmJU3KFYbkRM/gWPVLakpWTTZjG85aHhUAhnGuYOU0PHu7U\ngtsuwMQUTF3gif743S2ooJzFTPJU3br4ZMnBLhl3jNPd/7UB4SVMbTUe/NCW\nOCrk8vA9+wAesgObEbOTB//rMEFW9QvnNB4qtdmIVDcr3HTckNFLzZYizoP3\nRGp9sIZ7ejI/mBWyYW0e9NUH6KXmkvrYa4FKbKgrZIE4lPTRVnkryFEtcww1\n+NyAjTyXy+/BMyQLTbvpMIkvdtlczOqHas/Ftn9cDzsc6xq3TxKUkyBcOFsK\nF46MPQKXjN5SMmcHBNzxe006wSZVhnL0zvjB97X2q6s6mz1oazMQfHR5HWr1\nBFxvHBi7GsLwL/pbYE8zHzWPu7kOmyFF0Ft3ygFw78IALlX/upoOifQ2yDtC\naHteM/dysJPKqid/vcp44aMU8/iJkdyt9T34K/iuULPeQHzf96IWe9PL9yxk\n5Oi4yEmiMfTqlTh1FGt4kYTl/7rDWzFg5tQw+LDN0EAkR1KNg3zpAawuqRW2\nQWsLEsMGD7KIGNVtw9dEblcDmfX9DY0KhaMLXce9DHqCm8iGTZmSTy4Z7E+s\nDy8ZVVLYazwD0QamCiQz7sOCGtoVKid14u2gwQEh7pwk0LEWqy8ZhNTuOzHL\nj2u4\r\n=9/um\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f249b00e3cc067fbfdf722d71dd85392d031ca0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.470bd34e8.0","@material/base":"13.0.0-canary.470bd34e8.0","@material/shape":"13.0.0-canary.470bd34e8.0","@material/theme":"13.0.0-canary.470bd34e8.0","@material/floating-label":"13.0.0-canary.470bd34e8.0","@material/feature-targeting":"13.0.0-canary.470bd34e8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.470bd34e8.0_1631210536141_0.35412337831673146","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/notched-outline","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.d48a01771.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d77426e935557a33057b88db3dd039b2363dc0ce","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.d48a01771.0.tgz","fileCount":33,"integrity":"sha512-3irhCRHDyT65zHWIjsLGEYRnmyOTaXaNNXjG2eZWcjIgQCXeOg6Dz+EdtuNxttjrQtua7f4lRoCLvjTrp/wY2w==","signatures":[{"sig":"MEQCIBZMqYDsJHhRjFca7cZh04wHGDe5TGTIb7j3wITuRenhAiAIkyuQgE/cL/wKult/p1+NOwG72l16kmf05x13z4C2AQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk5aCRA9TVsSAnZWagAAPX4P/1ZTufiHu8TU3U68WCwB\nrd75Q/iU6JTS1739tZ5gu/RAcfksU6G1ct2kQgYwz7YYykTg+qIBgjsUYAQM\nyF48uddF65sKhpIleSvBIZhdk/wBTweOTKZx6V6GOzpy90FOA1le/t7Sqd+Q\nfnXTRQSCQzA+FPpTuwx6MagvYgwT+UjqAWif3lPiY4QOKNitZHuZ9+ktY/oU\nLzJgWivXEIdLIdYow7GCGIB0yoHLwf3dEp9mu+FgjwBp0A4SsxsJ8sbNajgN\nLgVpYmmh7hhairqzPpHm+w2Xo++NbwPaXzYcDlKwGS7ZRs6HdQnh5kZAbV9s\ne/huKgOsdRSCfzV26bANxY6qwITlxTnyP+GzEywHHhHzbW/g74r3IjLgdoHq\nzE4VFcgR3/2nd6HtEVS8Zp6n5vUDS02/MsFALEgRShjFG4siOyE/9f3iTkVo\nke8wfgW5aRn+qUjLISudbSQjP7i2vqt/BlTjuHgcQGG8xEVmmHiEK/yF6Olm\nJqmpmA0YzUaZIDjdbExeErjZVV3FGbSgCKaSB+UkFSXynt5B94uniH6X1Rc4\nvjxVaUQclqZUUbwivvu75B6pm8FscaK9SEYrSg8OCcADPRpTZP8T13Gy/gvc\ntKotJCqPc5qw3HRzPPg8gPsJ1P1fUIDS0uuBSyiR8K4ABUehNu986HloVAlJ\naMxh\r\n=ao6V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6796441e86b583e99919b207640bd02efef6fdeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d48a01771.0","@material/base":"13.0.0-canary.d48a01771.0","@material/shape":"13.0.0-canary.d48a01771.0","@material/theme":"13.0.0-canary.d48a01771.0","@material/floating-label":"13.0.0-canary.d48a01771.0","@material/feature-targeting":"13.0.0-canary.d48a01771.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.d48a01771.0_1631211097914_0.3280428946817042","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/notched-outline","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.13db34b34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18c8122cf8c2b07b83442770cc6a0c79723fadff","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.13db34b34.0.tgz","fileCount":33,"integrity":"sha512-Wtmz120J+qG+yaTbdDyqO89J2/TKgPNy5mQY8DOrNliheXXO5f0VuO/um1eVWzpPBd4WnatzF4FGoRATWwlyuQ==","signatures":[{"sig":"MEUCIQC3eCZKYoV53d/eFMKn5JqWqSNwjeyRNYquOGfkokAepwIgW4KUkvmeNwVC1Ph/7HKDn3dTR1n73VIN6sEYEWCAuLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlHdCRA9TVsSAnZWagAARSIP/2w6WPrGHxAXgRd/Mr4k\n2DEozCwgIHWfxsvWBl/GbC2pdqgwFX0Ih3M+i3SsFEZ7ALFSVjSOdx+3Hlc6\nondg68S6g0OOe6Xrml2tj6q0nNeBbl2LoD3Iq/FPHf9VFZpE/YKFyrHRQMe0\nBr2nykgx+W4g/qTKzYmZqqwmXuSLrl1V2UTbP7Q1Pm3mk3BoR+HQSF/pGBSK\ncJ4qqg9vFQSGU5vR5A6jvEcZzQ9TQ8quVCqxUa2jYwB0SZw59BdElWZkA4fo\nVupEACcZ8FefRdOqY2xhbtrhnbftNKcz4lEgWaThAlO7spAoX8k31a02Vvji\nCoOXMTI0NFaf5Qszoo8YPfzaufUAnLAu8hQviCK/w1eM68T3w2orPUHhIjAp\nybWW38v++IFnidspPRc0m+o7+eh4R830MwcJCGDeCXNvowBWIQeJi5hU/ST1\nluGC2DUYMR9TsKZ4U5mwNgcme7GRS7n6dE7mx6R4jcwJKk1Ey35w3N2IzVmH\nrIb7z9gcA6esPlalouUSW2qJfQVTqr9kQOBZMlHS6uGKANLxGQGGr16Lzpw0\nSp3vwmdJEjCjPfvjq5p0XbrV/HdcNV/en7Yfomn0GmASqqnmP9USs5E1jY/I\neO4HIsHILZn4vusMkTM870pRA8tvalgekvrWDTAwwEbu0a2bzh6SiF385lBJ\nDhdw\r\n=I+cc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7883b32c9c6a3280e801925b874df667e1055809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.13db34b34.0","@material/base":"13.0.0-canary.13db34b34.0","@material/shape":"13.0.0-canary.13db34b34.0","@material/theme":"13.0.0-canary.13db34b34.0","@material/floating-label":"13.0.0-canary.13db34b34.0","@material/feature-targeting":"13.0.0-canary.13db34b34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.13db34b34.0_1631211997154_0.41146931559912914","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/notched-outline","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.864798678.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbcf1caa27fd35c0a612264821a9e4d17f8e4eb8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.864798678.0.tgz","fileCount":33,"integrity":"sha512-an/Ne4KAVmmyC3roq2cOXe3GzVJ7NREctSop+9TdMeJDSCmKJofPKEx9L1othq2sUPB2a0h6Zhz+xzch/mHjCw==","signatures":[{"sig":"MEUCIFnR5gDGuuGs8cvpxPllay75HsAy5QSydG2ygRbJXOBvAiEAqpoHpLukuvpAcVk1oiH36EUScUwCbMuQJIHqgguc7hs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlR9CRA9TVsSAnZWagAAfW4P/0y9Je6qafuJLGRetjue\n5AwRmaDBczsrO34esgd1QB8DHPvUKgKiZdSBmv4XtQ9gVcgVFOEX0O7GUFCo\nYhODna1WhHLxdpfMJHkjIrd6yd2qzPq4bi7guhmQ5EA6wwjO3lWUbxhYN/sd\nwrNEHTL8UPuBeKoUck557YEVWrjBGd/jb50TO/FTdLml76Jx/Jzf86rOLGD/\n0fbOrN++EdNHyKnQbexm35ytRTgDJzY/HMfCxrc3t9t1HHomYEzljdeeG6de\nr77MY3Yxxlv1GnTWMeFd4zt/g5AbZNO2Bs1YBIli6D/4n5IIva6b5HYK0jtZ\nI89EaFXD+KwytaMJVU04f8kyQzsnVt2YeV1wN0Z6gNY0uilarbJAlBuu9W3Y\nataxI7l3Z7LyP0eD/LgW9cV5hOV/SPg48FQLOs34Z8Eke7JulkXLVVxUcjH7\n5qrpSGwwPIRG+zhc0mVNMy/nEfLHS7px0JmuyZeOQTgMMdMHCnaCJei8AgzJ\nfnpe445HGtoJ7JTC875t4Gbi88r20CFUOwCFbwiAsxCyG2nyzmcdW0YJjbNs\n6216WzNo/anfVOhkhfDVTjj5MPbzmKfB7npBELfXbUt5Y+H962q3E81UM6Gt\nVsPw12d4ngHGvHYc2FmsByhJoIwMgTic23/xFj19OTQC+BPu5ty8IBVUartY\naVuy\r\n=Cowj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"08d2ae683a56b5e86f7a54eaf5a2090fd4288df1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.864798678.0","@material/base":"13.0.0-canary.864798678.0","@material/shape":"13.0.0-canary.864798678.0","@material/theme":"13.0.0-canary.864798678.0","@material/floating-label":"13.0.0-canary.864798678.0","@material/feature-targeting":"13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.864798678.0_1631212669740_0.4523117760973794","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/notched-outline","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4b27040f5abb1f89b4bc0e124169a321e0f31e2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.d04bda3fb.0.tgz","fileCount":33,"integrity":"sha512-qOd0QEl9rBTtSjl0DiQIXTSGkr6ubMi93HhKOOa5Cll96k7yoxqGu/aDR8d+YPVclrJK6r2C/VjbKV3BKknxkA==","signatures":[{"sig":"MEYCIQCMEtTOX3NDBy17Z3qVbqDpzc67srQho4Svh5rvLDwX4wIhAKpA/jgrjOUvoLhbvT0Fvn2QkSSKQLqLhE6u8Wl5w50u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3hUCRA9TVsSAnZWagAA944P/RAfSUOgBEaTuKfQFpsF\nrbw1yvL9hdAccR61OCC4qWyR5EBQy7NC97jHUanW/lZg+27ZBlGDORtU5QH+\nIdu5X7VzVbcScNLRdSEt0ek7r/NT3xlDiIodMRQzO2H7yKKLMuKp6IcbiBBu\nIKjyM/9o0jOY1nc5k8Fli3BdXDxXON9BI8BXKZDWqszo/OklbV9AfZWC7dzD\nkBfd7Dovl7esR/WPgVUQZ8fq8DYgsrmuK4XyNSH3htT2eyd6ve6nXQEopv7d\nYWuQGAaR3ar/ns8LqCxEBJazj4RHDNxIMxrqIbbOophqoevkmlKSu936/KFM\nD4Wt8I/Siiv72GL6ySCgW0jtn/p7Q5p9mGDuUMi66SewhaJQJR47NpSXFfz/\nabuftfiAufmbbUP+i5HGIU50PhCnQnOyd0cm3sQqKFyj1KgnEEqWsUR5k2Cf\n3mWedW+aMJwSUsA0TYPplBGr3+zKhMEtIXOGloVnn2hVPmaxBCSVemwT5Fk0\n0jM02Ud6byig7+bC9Z781He27bF3em8ru4y7qtFlzKcpafRN8yY2abIyCDSZ\nL/rsHVc43TG5u8C+4RFzP/pb6mzM3ELHoinw/TwqZYB7lkrbF9aw102HqKm7\nJSza5gXLX+H3370ijW7nN1kzupUS3m1861SgUtrxVmRo2vM94MOcfTjIMsuw\nvltj\r\n=ChCC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7dcba6a47b77f0011a1f0e22b3540e2a70b285cd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d04bda3fb.0","@material/base":"13.0.0-canary.d04bda3fb.0","@material/shape":"13.0.0-canary.d04bda3fb.0","@material/theme":"13.0.0-canary.d04bda3fb.0","@material/floating-label":"13.0.0-canary.d04bda3fb.0","@material/feature-targeting":"13.0.0-canary.d04bda3fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.d04bda3fb.0_1631287380284_0.41035903729637324","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/notched-outline","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"376577678796e80cdaebc92faae542284fd15e1d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.5533f73d3.0.tgz","fileCount":33,"integrity":"sha512-K3KAvru/0kJRdQMRB+V9TS+w1tv3ryZzd73BwDD9Hqt7i+0MR201s0pzjdiEs7iet44s5cP7DmXug0ATKVqXcw==","signatures":[{"sig":"MEUCIQCjqEmDTUua8lI/elnezuWb1cKDeeSDFPAt3Kz9bCpZYAIgCj197moVrckXDFFRnHLjpagRC4ykt386z6JzUIcMBDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9kHCRA9TVsSAnZWagAAK74P/imDDbgFR6rpuu+PLhgo\nvQMGJA8uq4ljYumvIrQxXwufHa+cWmkboZ/zrdG1Nrvc7mwf80j9pIEX8+MI\nHMQk8ZfZdsTgt6xDfx2mL7vFyAYCb/ReYxNJpXzfjpqx/T6O22JxzJ7J1joU\nIrce21Q/xTBiMae8ekk+OlZXMs8n9GXvhY0Ltyp2wOFHVXD9KL390PNZ5d5s\nv1GO0bXoKoN7f/fj7LiHJj+h1I+6HiSWhbCds9E4wUDP65mqySIN6JlhXg7A\nB5KAmOko+iuPJX+xS3LDgJxB5M3MBUy3Xc3mf3KBmFfkzF7xP48XPErOZC49\nGT9NtW02vyvdKHP20tObZBWv6kWc/wLnh0Fhz71ClBIhpakiQkBQ/ImYAmOe\n5Yduk+c3msx4BK/mX2AUdMLgw45owQTq5+4fJ5AWwNg+FYBKpmHT10Ou5afE\nBszkDY+9RR4hMWaOiLhhxpnqGIq9RyOUn4PaXuphn7hwA2aQYWO92ykdYjiL\npb/v9y8GzbjfRpCxIpRWZycEDXzebuz2JyH4SNPn8jpOpoN0gBdpp9ECYIeL\nImaUEgAEmynI3fpLQTLePZCMj50XHF8D3xHEbe+MVkYuGNP7yEIGfqGxkgaJ\n/HJghIsNtSC3+Lvin3Vf25T/M4R96io/+mHW3IqmtZAdwLKglu9yeHPsFEVJ\nc4hO\r\n=yUlg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"20bf1d151f241eb77dfa3233eb61f4e35d5b2838","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.5533f73d3.0","@material/base":"13.0.0-canary.5533f73d3.0","@material/shape":"13.0.0-canary.5533f73d3.0","@material/theme":"13.0.0-canary.5533f73d3.0","@material/floating-label":"13.0.0-canary.5533f73d3.0","@material/feature-targeting":"13.0.0-canary.5533f73d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.5533f73d3.0_1631574279267_0.9279095559415935","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/notched-outline","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.08398f880.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bf73907b719f6cc72e258a0190bc9d098aae667","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.08398f880.0.tgz","fileCount":33,"integrity":"sha512-FdDzwvzNp+PfqV4S6PMLd0d0kj8vR66Q0RHHHrB3Ploj9C3cwSOTTc0Haaml/2dHI4vsh9/wLkTai+eq3/txoQ==","signatures":[{"sig":"MEUCIFguVzmCo+VhlkTHjfVGsOoJRyYlVUjBo5dJIX43aU45AiEAlYGtjuNheOFz9sZYe28aXEZHsFL6rhVpjZeI/cc1Pi0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP+BACRA9TVsSAnZWagAA8RoQAIaX0jqnYNev9YyYoDwX\nQfe26RpkqsRTZV/CIYZQ1xpLZQSEvLrr626Wj2xJEbFJmiXJXS8w8vyQcsSq\n6QzQDSP+1/c6FsjUOoVmRElOv/Vh1XaJ0TH14hRv5l3aKivtBQITt3Qqo9NW\n+DGhuXiMMdohWODlwAUo3RIhqmQALTV/6d86HDqVgyE+f+lIFfF0znl0Olj9\nHhlF359CK6lHH9XH15486ngOvS/+QsTIqnD4qRw6jgG4aORcebVTkLeP7FQi\nZZxQqRwnvgg3R+2sKS+BiVzeUnvEX9Jc1SGY7xjtLoz5ln8y/eml+slK99RN\nxIN4JjqsNhHuCEoXpyg7A+nOGWcWFfKUqJ2LC6h/qS5a1+7u3P0a+eON7xFp\nLsDwlAybCJOVFWAJz9U/Bsj+SKr+ZI9g6QVYABlB4y+i84KK0e3S/t1+BVBa\nMriMr8gzT1ugk9ZJX/mxN7jSJhGqOX6AEMEE53Tc04g11A2YredprsBzVSHm\naPZQ9rw5H7KjYmPG6zxYyHc20zflyI6a/IrbAlARnTbTPW7hZayOscftU40Q\n0xTnvS5qRBcH/Rl16yCRaz/03DBRcCJbQqb4dxhggtltMSWJXHBDJwI6AVvX\nvyx3jN5LKfdp0uVCRKsHbGbLOc8UatRRfJUci75tRd0AX8A936AKjiRAxLMv\nG546\r\n=C770\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1a993a7d6bd4a018cc4ae230bf1cc3fecfc16d1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.08398f880.0","@material/base":"13.0.0-canary.08398f880.0","@material/shape":"13.0.0-canary.08398f880.0","@material/theme":"13.0.0-canary.08398f880.0","@material/floating-label":"13.0.0-canary.08398f880.0","@material/feature-targeting":"13.0.0-canary.08398f880.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.08398f880.0_1631576128618_0.52531408389706","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/notched-outline","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a47be41a2e356a6f161920b027872c13309a7dbb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.818f4ee93.0.tgz","fileCount":33,"integrity":"sha512-RkC3DBDcb1tED+vr9YZ5WIPSlhcvwIEdF9NBBvtsAPhXW1Fv3dQ8sFOHb5FKBYtWG/UPDGCDGTQQs4fzkgGH3A==","signatures":[{"sig":"MEQCIGqHvi77dMOpUUvO8KtbxZ121IqN/BOX1tjXLKzTHwwMAiAkdUX2PyrsHcnr5B0WH3TTx9doit7tNSqzDHBXxQR7hw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjKiCRA9TVsSAnZWagAAOqUQAI4c341V2GwC67hgt5Bj\nVmCstTYDukrsBDG3fnqO95Ti6Dr7ilu0amajDaYV4X029LIzqH/jEEg8Df3P\nRZOH35b5wsVogr0Gbix3N0gG1LhA7+684AcNWXsPRSuaScbcdOWLl6H8XPrD\nkIBbLZG0U1bVjoEt3mrf9WMVIFLpQRqZVhqXlbm9I6jmDS862gVX7leuo5TU\nm2XssHl9KjBZOhUjK/e/Fa5fMMXXmsOhC4kMNNHhrEX0QteLIUgHzStx5ovr\nMcnCdMCOvHlhPRtyPI80rZYqo2hvm3bEXQYvT20AmTVZedZC3FdqmRylIaYQ\nMeAHW1kH0dC5sBI2oD15ZYS8IWjY2yb5iPJuOZVDuk9r4DZ9uiXJuJkTi4AE\nuI8gdS8Gd4gsxvXyJN0LV9ViMWHCsfrDNyRMvASC1b9E6c1uFpnoM1Hq+IZs\nsBhSxv0dro5SGRfQ9ty1jr6F/yh89GubLNqOnqhRbCbvcJyydsBxC/na4Ylf\nrt9t8RH7DytRw5NBz3U7AA8kwp+cA2WdbpWhlkSSh9QI518D5yFtwzRhvZr0\noMDMUWleaSf9bzZOZL4t8F5yhdm/kAcH9OFUcBBFl1mXwGXJFEONybvfGkhB\n2tQ1bQnZCbGty6pceDAVdo/81F/DH9QLioZPFRxEet1Bu4h9XEKpMqU2BdBm\nu4RH\r\n=jDaQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1d88a726d331a878c9a8721e3237e8cf6df49f1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.818f4ee93.0","@material/base":"13.0.0-canary.818f4ee93.0","@material/shape":"13.0.0-canary.818f4ee93.0","@material/theme":"13.0.0-canary.818f4ee93.0","@material/floating-label":"13.0.0-canary.818f4ee93.0","@material/feature-targeting":"13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.818f4ee93.0_1631728290587_0.16141741932685938","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/notched-outline","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fed510340f824375cb463f8b056c7f9b262e454","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.8355e14dc.0.tgz","fileCount":33,"integrity":"sha512-PKRzBBv2rgrIqrR9Nooqc5rCbcvoaT86ZC8Xeu76fRfQ9hgJoypMz7/USmzWgC3dD9JEwy4hqbVpC8YvWl+IBA==","signatures":[{"sig":"MEUCIE0NB+Vnfa1KZBZ2BEsfeAPsec/iCoOlVk1PxjoCFNMXAiEAxDnofOtIemqrbW+T0j0yDpT62J9Hg5/bnw3g9fcJL4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkXbCRA9TVsSAnZWagAAeToP/3zGL7DejE9diSQhv2mP\nf/99gzTN54GVasKY6QnqpDpcQiU91mrKc79PSf2Y9aq9/Mpdou73xe6w8zBe\naCTV2BHHuwSaW2sGfWATOUTqeAo2loAUTC25a3JU2cNTmjUGWNEJqMxZNj8z\n1N/4kRp6xTV+antS2hQLaNH7Fwozk+GiWsIrf9FVqdozy+fA3lzGGI6ZyQD0\nP/myFJg+ez+8PsqG/mKxQWWvWFsMokx9iUbTTST3j/2aJceamh0eQLPtfkg5\ntxRssFeY2FYlg3BPEDaEQYwsUs+lVg/Dn8TeAjrCdz9V0nMPRQCmUB0Oe0pt\nykZ1K6Z4FYVeAl5ZsxLpF4Gaq8wLWZYbT7/kFV0hXW4pRSYPFx8zMqQb23T8\ntP+BVlXAuPRpsLV+qWeN7HVLEpW+PSdH+K6BZt9uD9/ULMc5ZYm4/cpa2ckv\np22ZNO+e51bRlSMfKf7wCFykBUHeB5ShqbTV/JTxIViX3NOM0e8cjKsIFWrF\ntZSG8L5CnixX1sivsxpouRUIbM93u93MVU/EBwaTwk/M3IH8wGNBxK7cCMQa\nCxOTY3kMJuTcObXyYUr/fKUpQmSDf9t3nO9mZve9Nf+ctdyxEbZhNG7KCeB0\n3tzWLbkUnC1pmLsb8XtksCiYmd07z7QuudltxaI4yLS86ltFyYmuEmWJ2dS4\ny5MI\r\n=gHT6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"065f64e5cbd54d86f092d8d1406bbd0852b2a6a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.8355e14dc.0","@material/base":"13.0.0-canary.8355e14dc.0","@material/shape":"13.0.0-canary.8355e14dc.0","@material/theme":"13.0.0-canary.8355e14dc.0","@material/floating-label":"13.0.0-canary.8355e14dc.0","@material/feature-targeting":"13.0.0-canary.8355e14dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.8355e14dc.0_1631733211693_0.2373915812407399","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/notched-outline","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"428af8b736dbb6bf65d950667b12b8e54dcb6488","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":33,"integrity":"sha512-ykq9U+8JOOpCBZVWFx5gu1gS0Stk5+1wTwmhFJLAByzwoM2JLZjDOlnQFFGR/gq0gqGmPTrrOs1fh3WUW64l9Q==","signatures":[{"sig":"MEUCIHnJI1dB3DKCRusu4tdf/7y5BmoroM/D+Q43TSVNHKIAAiEA8hs8qiEfJgNLxXSYAziq+wQ2Izely6Mds/hZgxnjLNQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmzvCRA9TVsSAnZWagAAsqQP/28E9YBU+tA3miIfg9mu\nTR/RcxTJHhA9ri56h+smikPFOlH2TIboetCuadB8Peiwk7HMOohF68pQaA1f\nxL2ZgdL1U+NyE0AD4QZ6YRsSADe6Wmd04I0O6vhNMQIIA6trpgXmZYpsROSD\nFTdBVnOZEIWDUtmmREEkvwE3IG1U8hGuQ8VOA92CFiK1tX4DpZPcOxH1fpNp\nR1I/BSo0GbywULKUthP5a7XWP/ubrI6dw3O2L0tlWZacv6N8J9ewQNswE/Mv\nYbvllROa3EexH01V595HhTbhx9YiwraaRaTUJPYgB9Rcu5MrYkUXcI6E6IjN\nwZDlNXu3v+7nCRAHsJ4sION34qvv/wqe5I4O9ZVy/rU8Wx1VAdjMOpz/Zb8d\nsKLcA9v2Tnjh+Mmbdati/tGlpH4iz4trPKpQfiP0gbfY6tz+0VLYmvgC5vWX\nYb4vIx+uScL+qGEY9AuQoiCvu2V1BnLOmKZAT0ZkccExSeewSoM6h/+gRxT7\nWp4pKMzpz8R6GpdFSjWvEXs3Fi0mmYrE8JkoDCrUH0y2Uff6Kd+v8RD8Gyiw\no+4WljifpVBhJfFolTddbi7gUWJo+aSxVsJGdm0mjJkiY6Knuv7dgfreI/X4\nGaOOfusaCOfyrNnupxUaepSSEzHBlL7tTtM5fU0pR6258YTHwZpAEYrd1BPb\nWkgV\r\n=HNgb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2c2d0c3f7c18e3a2b581679df71df5e7a0e2fcb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d4e16a6c4.0","@material/base":"13.0.0-canary.d4e16a6c4.0","@material/shape":"13.0.0-canary.d4e16a6c4.0","@material/theme":"13.0.0-canary.d4e16a6c4.0","@material/floating-label":"13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"13.0.0-canary.d4e16a6c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.d4e16a6c4.0_1631743215326_0.6972893738053865","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/notched-outline","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"648a7e09d4a0a67adfab1d47dd9dd3f357fa508a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.65125b3a6.0.tgz","fileCount":33,"integrity":"sha512-dfOy7N/5KgRgIE3pIoJje8fTnuIh6JhQKb9CywkDtpvq/a0xEmWQDy3L4fIgkSkNF47s09sQ1r7AxNDbSLzMgQ==","signatures":[{"sig":"MEYCIQDqJjuqbHKi2HvBllgUYtDd9DOKcQhv9dlll7lNTTKZsAIhAJxoukR3BXbTSy0+jXu5lskagUD31gNounfnh/4zEWMD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7SaCRA9TVsSAnZWagAAZ7QQAIH4ZiutdYh5ASKssnfZ\nno3/VhigOAfTtGusuAGOUGyZZKrJ98P+7oTeCJCT3/hEWZWtXdS2tJEcfnX5\njb1d8W8yvfp54dDfx985KTKKEzCGOU0ZLIRYHx9JibU0G0hmPllh+2IcEYnI\nsY7a5wFd83sIWuP8qa1h5f2Fm5pIVMpkxRBqTfgejTuAoK2QY98bGh3sRLno\nfHu7IH29o2wp7LrNpZG+IJgqpuXXFyXgVlGvBIUl1/n5g4h7dVrZFQRW/Ptb\nSwKYHW/0lONWHDYN2WldRbZZRrX5ctpje0TagHrShh/20oCSFemjghLO1LJY\nepB0RntDeJY5jcTp6CrdVEHY/xWgAGYF5C9mLcgCiei4F5toENYGQdsLG7HS\nQpCdtnvL5eMd4JdHuStC/0pSVP38opTjlRZNH0DvdbqSX0zExawQJuwf54Q1\nOosnCSC8MQfInhmOP3kc4ACAzNzk8jxv7oC7wCSAhTyDH2xf+UFbC5yZE2G/\n4V2TOJE99tS0kI96y6pNK3zy6+OyNpolxijmFIqr4UnIZDRfpAbZ++zYS+HK\nRwsRu4OD2Y5yxuxKADDVrsZpPHE4cuivPxwRbHhi/M6WoFcPWm0ltFM+yhgE\nyugEF6KV041hswOVv8oN3fB3fh0PcrPv6xpya3znd5fTuxXX+tIa2TUjKoFB\niaad\r\n=fi9q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7f141fcd82e6061ac62fb457dad40c0ad70e52d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.65125b3a6.0","@material/base":"13.0.0-canary.65125b3a6.0","@material/shape":"13.0.0-canary.65125b3a6.0","@material/theme":"13.0.0-canary.65125b3a6.0","@material/floating-label":"13.0.0-canary.65125b3a6.0","@material/feature-targeting":"13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.65125b3a6.0_1631827098543_0.13717633223088432","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/notched-outline","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.80a583365.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f6b21259c836e9c3cba8ccd2fb16b0ff1b50611","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.80a583365.0.tgz","fileCount":33,"integrity":"sha512-VqdRQLtsTM1qwwjCd0A4AXA+4zUqxMUYwstymyp13vVgQUWVMsFPh/cAzSMQdZMM0/Wo+RAgGGOHdrlgRArH5w==","signatures":[{"sig":"MEUCIC1eyzN5SAOZZU0fpV/c48millrLLLqKoX10Vw6rTFRsAiEA7lRHcgXzm4MBqS+Subrbnstp7My3iD9yMIvUoCXKccg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c174baf193216601da7fe07831dd2152585c6beb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.80a583365.0","@material/base":"13.0.0-canary.80a583365.0","@material/shape":"13.0.0-canary.80a583365.0","@material/theme":"13.0.0-canary.80a583365.0","@material/floating-label":"13.0.0-canary.80a583365.0","@material/feature-targeting":"13.0.0-canary.80a583365.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.80a583365.0_1631910995087_0.20096836690573072","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/notched-outline","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.83900936a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ef763a3f5bae18d495b671ecd284c38804fd8b7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.83900936a.0.tgz","fileCount":33,"integrity":"sha512-se2wDNcDKEQqt7YjnFikuXlG++wVfTx+66ux1RxxBs7lv2l5L0tczZXX4V9VTedKxA75aEINppl1nJDL0xgglQ==","signatures":[{"sig":"MEQCIEhrtGABioiQAr1OtQCbFXgw0Glw2teM7Jcg3pH1y631AiA/6yzGuG/4kV428/8frLYfEkQNgH1b27D95tG7ri0p6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ca6026fb6b378ac9a4f14997612369fe29f31093","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.83900936a.0","@material/base":"13.0.0-canary.83900936a.0","@material/shape":"13.0.0-canary.83900936a.0","@material/theme":"13.0.0-canary.83900936a.0","@material/floating-label":"13.0.0-canary.83900936a.0","@material/feature-targeting":"13.0.0-canary.83900936a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.83900936a.0_1631921103591_0.3797475451611494","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/notched-outline","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c537e91669f21dcf858793081e2bf84034f0972e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.860ad06a1.0.tgz","fileCount":33,"integrity":"sha512-QmoixZ+l6kMVo2/X8Y3x5BjucZY0d6iL8WumsHIC9CL7ltaMeMpq9sm8ypxAiH+beBltljsHzdzVaP59/l7j0g==","signatures":[{"sig":"MEUCIQCWxOD66b5ElNhee3Y4D/lDmZ0QN78eAN/39Iyo0oGr8wIgSq7eYAqgHwsoB96v5WjUWzau5MFHPxe1ZfpQU//VfLQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8f156ac018a526d53d5f5077762518483bfa7dc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.860ad06a1.0","@material/base":"13.0.0-canary.860ad06a1.0","@material/shape":"13.0.0-canary.860ad06a1.0","@material/theme":"13.0.0-canary.860ad06a1.0","@material/floating-label":"13.0.0-canary.860ad06a1.0","@material/feature-targeting":"13.0.0-canary.860ad06a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.860ad06a1.0_1631921802167_0.5197251102562297","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/notched-outline","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a0e85763d8cc95d6662b035c22e6faae51ed13a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.3b8d4429e.0.tgz","fileCount":33,"integrity":"sha512-jt3oX1OaCTrEXVeChnmM5N77C1IXciR+kMObVTCuTmQtrIJyFBzCEEUf+cW0K4apE5e5H0ABL/XoUXpDIk8iHA==","signatures":[{"sig":"MEYCIQD64pn/zgfHyydpMsFFd82bnQwjsJ7eSgB/Nc5d7GAHMAIhALf9MENIDExwKEZeoXB8EXdVvHgXlqPch/8WnMaZ0xuI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c548d2fdb2731631683bc92955d6701cd0c2bd14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.3b8d4429e.0","@material/base":"13.0.0-canary.3b8d4429e.0","@material/shape":"13.0.0-canary.3b8d4429e.0","@material/theme":"13.0.0-canary.3b8d4429e.0","@material/floating-label":"13.0.0-canary.3b8d4429e.0","@material/feature-targeting":"13.0.0-canary.3b8d4429e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.3b8d4429e.0_1632160098133_0.40241096916940355","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/notched-outline","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37fe0ebf3db6d6c83be9e35b543310c569e34126","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.2da3606b9.0.tgz","fileCount":33,"integrity":"sha512-esQD1vZDGwsjZX6Mn+n3gNwj9hxN6fAjY9ce0oxZOYKX7oKrofYpYKBCNDqe+wvD7C41zNWlEg6aX4+FLg39Aw==","signatures":[{"sig":"MEQCICEYhL2an0UPVr+Nv0RA1OjDcYfirZLxkfWHHAKdKWtAAiBnvdeBhzX1jRCGGg3a4aNrNOZHISa6bKiZAPga/+CYSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c452408cf52d900869313ad573c1b84c9d6a3105","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.2da3606b9.0","@material/base":"13.0.0-canary.2da3606b9.0","@material/shape":"13.0.0-canary.2da3606b9.0","@material/theme":"13.0.0-canary.2da3606b9.0","@material/floating-label":"13.0.0-canary.2da3606b9.0","@material/feature-targeting":"13.0.0-canary.2da3606b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.2da3606b9.0_1632166706675_0.20957282541891686","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/notched-outline","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bb8c252a44db4b579f959bd4900c809f3f2b1d3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.e8c598d1e.0.tgz","fileCount":33,"integrity":"sha512-9fxjPR97UWGCVm6fIDyCnIvdvJ5F75kcaPQadGfmaDFmO6Mb2b5t9a/2WxgmF6H+TfnE0Mz1MbqufeWG0WoY1Q==","signatures":[{"sig":"MEUCIEvAwDnq1TOf4tgLPB8SYFCoiFt6f7BhgFD1jqqcaUFiAiEA732px7dv+SGSwBtttYFSwH/Sg6As5l5bcQP3KtVZkP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"11ab5557b275cc7f950ff2123684083e6245eafe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e8c598d1e.0","@material/base":"13.0.0-canary.e8c598d1e.0","@material/shape":"13.0.0-canary.e8c598d1e.0","@material/theme":"13.0.0-canary.e8c598d1e.0","@material/floating-label":"13.0.0-canary.e8c598d1e.0","@material/feature-targeting":"13.0.0-canary.e8c598d1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.e8c598d1e.0_1632172354256_0.07268024685281427","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/notched-outline","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ff75ce92b867d5bc64832ef536e87bd2e8eeed5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.1340ee9f7.0.tgz","fileCount":33,"integrity":"sha512-ARwhd0peX2Ww1nFPf49fFu5kqC5E1h7RSHG6mVN7OsMH0e6+4514odUGwh7ezuVgvs81ZjhicJ3J4ofqQYHEEg==","signatures":[{"sig":"MEQCICx9tAaD/jRBBdchJnYd6jxdhqSIExGHh3uvZox8wU+JAiAkXai84e+gi2qrg5BL5gUjfAQ8EB/SEqtJMutTi0PBGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c9cbdc93fd9954f12cb74ebaf2cfa5806d078879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.1340ee9f7.0","@material/base":"13.0.0-canary.1340ee9f7.0","@material/shape":"13.0.0-canary.1340ee9f7.0","@material/theme":"13.0.0-canary.1340ee9f7.0","@material/floating-label":"13.0.0-canary.1340ee9f7.0","@material/feature-targeting":"13.0.0-canary.1340ee9f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.1340ee9f7.0_1632333509568_0.6417026288034244","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/notched-outline","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.65084baff.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f7312255c9e20b84cec74bca65dd8682d112272","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.65084baff.0.tgz","fileCount":33,"integrity":"sha512-QhG4H3RFRde6R68HAeEuNW2cfbo9wIS4eI/N3ZRxEzhG/xd8NY5AXykHEPTghE1MY6dE/nQHmEHQJwutxhnYMg==","signatures":[{"sig":"MEYCIQC5+I1UAmc+QApmFzDfej5egMtfXV7MZFRqPgJodbT/1gIhALWvz+M213zxulixYrkS3HhsUX7ePtYYIB1o72QX2Gik","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"afe4cce0d8c7e5038058ea8198ffd72e99e1c941","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.65084baff.0","@material/base":"13.0.0-canary.65084baff.0","@material/shape":"13.0.0-canary.65084baff.0","@material/theme":"13.0.0-canary.65084baff.0","@material/floating-label":"13.0.0-canary.65084baff.0","@material/feature-targeting":"13.0.0-canary.65084baff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.65084baff.0_1632432374104_0.9525766453925242","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/notched-outline","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf2f562737d874765291969fb0cbb21bef3e9243","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":33,"integrity":"sha512-XPHD5DSuDZGILeBXSjYOtz/23gdLMjXcAwILjVUt7eiPrMiHrNaDlEeXAtU/If5G1PZtsZ8dcZ42wmz5+4UYlw==","signatures":[{"sig":"MEUCIQCL35xJ8q/TlBs7IgMy3V06aLlX84u3KaLg2vH8amSN/QIgK6xv6tNoPD+OUDiCkMAHLImFO0lzPSqRyR3Km2I0dIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2caa02d38f883966fd5f78948743dabdced9b689","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.c79aa0cdd.0","@material/base":"13.0.0-canary.c79aa0cdd.0","@material/shape":"13.0.0-canary.c79aa0cdd.0","@material/theme":"13.0.0-canary.c79aa0cdd.0","@material/floating-label":"13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0-canary.c79aa0cdd.0_1632490951286_0.6143050463261965","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/notched-outline","version":"13.0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@13.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a043cb87fc9aa19b00a1a9b7c010eab8250b820","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-13.0.0.tgz","fileCount":32,"integrity":"sha512-BHdxr1x2AN4oqycTNg0FGisG3rMHf50z3MuyUoQsJJ3WGjxBMWKd0yK/xl4m38nFKPg1vQnzyHIYTJdRpCaE7A==","signatures":[{"sig":"MEQCIBIOCFyagEb6MX+l4LELTjocjBJteXcqx6+fSCuZKHAPAiAsotDvyuUwxZJ9t/W/ul+1Un8fj/rKB0nxdqvE9PiJkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209706},"main":"dist/mdc.notchedOutline.js","module":"index.js","gitHead":"198431fcd8ff3028934d2cf3a5b292f8482a4570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"^13.0.0","@material/base":"^13.0.0","@material/shape":"^13.0.0","@material/theme":"^13.0.0","@material/floating-label":"^13.0.0","@material/feature-targeting":"^13.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_13.0.0_1632512796301_0.8454074692005531","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/notched-outline","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.198431fcd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb1fd8706c7d56cc5a91da67a4ccb6b0a00f00b5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.198431fcd.0.tgz","fileCount":33,"integrity":"sha512-jUEPKhT1GTJTWnUi4C+4iDlfgVItosW4O4ixlLC/QUE5RLKtgjDSlHJQ8hRZjYlFIjDtTj7j2Unnwfg9mFMHBg==","signatures":[{"sig":"MEUCIQCVV0aap/f4knuFOiblCEmrqP//P4AtyQG8j0AGQJ14hQIgJdPbchtqOcH9jylXyXeDonSPYmPlpUWPJtj0MQiRdWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"34242e3354729334618dc12d6bc959e0a8f14dd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.198431fcd.0","@material/base":"14.0.0-canary.198431fcd.0","@material/shape":"14.0.0-canary.198431fcd.0","@material/theme":"14.0.0-canary.198431fcd.0","@material/floating-label":"14.0.0-canary.198431fcd.0","@material/feature-targeting":"14.0.0-canary.198431fcd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.198431fcd.0_1632512840536_0.3087072046231949","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/notched-outline","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d344216b46fa739b29fbefab83ab6e6a3b9d7f13","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":33,"integrity":"sha512-w/vxAJ0wkPR6wmjZv0gnPhzJl8KpiLitHhKBXO8Y01o9Aqu1ufELQElLvqkMeqanDS92RSaTOQTTX950Gtl7TQ==","signatures":[{"sig":"MEQCIAiuPFESdVKbavr5xMXpkynpmt8IKWL3eDLtnx7BeT+hAiAsWfpBWOPd6J2ss7qhPh9EluReyGYyIf/ZXiyXL7E7QQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"13e91b1150d6339b15d71c44c8743eb9e2026eaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9a02b6ef8.0","@material/base":"14.0.0-canary.9a02b6ef8.0","@material/shape":"14.0.0-canary.9a02b6ef8.0","@material/theme":"14.0.0-canary.9a02b6ef8.0","@material/floating-label":"14.0.0-canary.9a02b6ef8.0","@material/feature-targeting":"14.0.0-canary.9a02b6ef8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.9a02b6ef8.0_1632575505620_0.07095534164274775","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/notched-outline","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dae3e43d9b3aa9e718f9deb169c56a1b0a967ed6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.758ce31d9.0.tgz","fileCount":33,"integrity":"sha512-0SsXFrj3AD71kYewmSK5nM13OWTIcJJD9D3JnrLBxNsNWJkNwfswDUXUh+qaZsOvg25itmve3g+4CXTSU20z7Q==","signatures":[{"sig":"MEUCIHI6fhDkXaX4GO8O9cfS5kiyqTkmtP4r81OoxAxxHQnaAiEA+50gHYpjgvxsjY0GVrNaPckSTSXzTf7iV3662M5hhzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"09083795b738aece76a37f8a1dcc8daf958204b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.758ce31d9.0","@material/base":"14.0.0-canary.758ce31d9.0","@material/shape":"14.0.0-canary.758ce31d9.0","@material/theme":"14.0.0-canary.758ce31d9.0","@material/floating-label":"14.0.0-canary.758ce31d9.0","@material/feature-targeting":"14.0.0-canary.758ce31d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.758ce31d9.0_1632763804736_0.9526894702659208","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/notched-outline","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36550a245db038324563f62ef5a23a3c4fb6ea8c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.86b50ef74.0.tgz","fileCount":33,"integrity":"sha512-S8BQ+K07MDOEJOKUoeGSBgIz3fZ1aXhP79rmKF1Dr4wJ0A8TqjaCpVyD4IYVVYFU9CT4a2f2T8N7DiEnlfJLTg==","signatures":[{"sig":"MEQCICaSlE8R010lxYHilsmYtBq4WIBpSke5oiHkCEkafyp/AiA/9+UZCt9A85VRjl0fFGZR2ittQjkebN7kwDNNuBLCfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5941ece7c1e494e720865be940d098a5556de149","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.86b50ef74.0","@material/base":"14.0.0-canary.86b50ef74.0","@material/shape":"14.0.0-canary.86b50ef74.0","@material/theme":"14.0.0-canary.86b50ef74.0","@material/floating-label":"14.0.0-canary.86b50ef74.0","@material/feature-targeting":"14.0.0-canary.86b50ef74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.86b50ef74.0_1632851019101_0.2478445874361468","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/notched-outline","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e01b19af7428d40eedc3340827f5592b062d18f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.b2fe3528b.0.tgz","fileCount":33,"integrity":"sha512-Qzg/uiiCAKxWo/59GfhHDwc9gdVx3gfOILZY3Lrr02Hu1mtTV0Vjrp/Eq+1Yj5OWXJfVrsM9U+HwtCyt1lNpxA==","signatures":[{"sig":"MEUCIG+nk+yKuua61FKKcEH2medCGisWbm/9z9n0oAyMGrB9AiEA9qa+OKMMvDRj5EA96UFwVo4gKtpeL6GE+jnm3waCW/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cce11b1c181ea84c0bfdbef26112377518afa98b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b2fe3528b.0","@material/base":"14.0.0-canary.b2fe3528b.0","@material/shape":"14.0.0-canary.b2fe3528b.0","@material/theme":"14.0.0-canary.b2fe3528b.0","@material/floating-label":"14.0.0-canary.b2fe3528b.0","@material/feature-targeting":"14.0.0-canary.b2fe3528b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.b2fe3528b.0_1632956259178_0.47962708870370907","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/notched-outline","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.586e740dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee314880ab5b9f44619b22f58d64da40bdb44a0e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.586e740dd.0.tgz","fileCount":33,"integrity":"sha512-xgfTy7WP34k6DR1tiVB7dQ5OE+BIjzmbAspGoErsaxy4tbhnhUktubXhdmpP7c9FgYPY4f5TrxBFSCm2tcnDBQ==","signatures":[{"sig":"MEQCIFwmlHI4c07vzZUYmiHPg60wQ+U/XDpvdB7+52tv9H5AAiAJHSbLnHydGiaayxovinK7YCjTsSiUOiDBWDbCtoXxlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6c765889db11456de00c45d7bb289b6c7cf3ec27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.586e740dd.0","@material/base":"14.0.0-canary.586e740dd.0","@material/shape":"14.0.0-canary.586e740dd.0","@material/theme":"14.0.0-canary.586e740dd.0","@material/floating-label":"14.0.0-canary.586e740dd.0","@material/feature-targeting":"14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.586e740dd.0_1633019523247_0.9430885100256556","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/notched-outline","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"994936617d0c3f145404f6b32fea4ce0e99bfc53","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.2ac92d766.0.tgz","fileCount":33,"integrity":"sha512-Wo7laLX+7idy2TmZcsRHEEn3cubMBxjZmxBTASYdKetR3dJGgjMS2S9tZoD29kiqsVeS3zdWBVBKSYHAXa0V7A==","signatures":[{"sig":"MEUCIQCxBIB5l41mr2CheO2r9D0+c8q0FH1HoT7mJNXhDG3c1AIgV6+s7AnsDbIeNxTXkz3H9jfQIxdvFux4tBC5LqciSNw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3a797e3a01110aeaf8270a13c2cc32d0871a8bd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.2ac92d766.0","@material/base":"14.0.0-canary.2ac92d766.0","@material/shape":"14.0.0-canary.2ac92d766.0","@material/theme":"14.0.0-canary.2ac92d766.0","@material/floating-label":"14.0.0-canary.2ac92d766.0","@material/feature-targeting":"14.0.0-canary.2ac92d766.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.2ac92d766.0_1633462156568_0.1640055089255701","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/notched-outline","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6aa4ca23f0f5cca995e2804b9b866989205d4ca","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.353ca7e9f.0.tgz","fileCount":33,"integrity":"sha512-Y3j/+9IE/8rWio7cUvvsXbDGR6cJ2YJC1x53ZaXHjt4ZhBtlWkGRDJ2/dIk5ZEsvTyaTZlbU8sYJeMBuI06xQA==","signatures":[{"sig":"MEQCIBAbcA58sKKemIgixSQpkUaQwm4W1ibyF8AYb6045Vt+AiAoMVZrxRSLnunTJv0whyKvVgQ8mLU6LZ3NN8bf0Cs2fg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4f091efbfcb52d523712f9b99808d737b06a60af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.353ca7e9f.0","@material/base":"14.0.0-canary.353ca7e9f.0","@material/shape":"14.0.0-canary.353ca7e9f.0","@material/theme":"14.0.0-canary.353ca7e9f.0","@material/floating-label":"14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.353ca7e9f.0_1633718860398_0.006703060960191909","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/notched-outline","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18727dc5020fd613ea02484380c12ce23cec5c62","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.c78ff0429.0.tgz","fileCount":33,"integrity":"sha512-f4Nx8KwqaqmR4n3h3H/kEOTMh74UYyc1yxtI/MQfrDiU2/+29ooZor1yRASWGg8lVG0VUy93vCLDRjNzVzoN0A==","signatures":[{"sig":"MEYCIQCeJr/xLFhyVZwQ6qd7sxHqnW2BQWcEKTP35Lt92jJQ8QIhAOO/VEUomTNLr1VdScGwMQDZm3quzBSGj/PXu3eiUq0V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"55d918ee5ce9842b93075fa0d0ffd2b64b5f3ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c78ff0429.0","@material/base":"14.0.0-canary.c78ff0429.0","@material/shape":"14.0.0-canary.c78ff0429.0","@material/theme":"14.0.0-canary.c78ff0429.0","@material/floating-label":"14.0.0-canary.c78ff0429.0","@material/feature-targeting":"14.0.0-canary.c78ff0429.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.c78ff0429.0_1633972964109_0.07943093210850805","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/notched-outline","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.261f2db59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49e31ba87a2bb1c4b00a12fc1dd7c82f1d8fc068","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.261f2db59.0.tgz","fileCount":33,"integrity":"sha512-gtn+IKAiX2rbfbX3a9aDlfUoKCEYrlAPOZifKXUaZ4UJYMNLzZuAqy7l5Ds30emtqUE22mySTEWqhzK6dePKsA==","signatures":[{"sig":"MEYCIQD807l7h4IVBBCkw2uXsHP1UAHBpuOBFNnHoNm+Z77bqAIhAPO15xuAEbEpatXkH3sLpQDfv5MNNZ9ImIGloa7TV+fw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"22c1cb4091a589b9a53b844da4e8d98309c75acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.261f2db59.0","@material/base":"14.0.0-canary.261f2db59.0","@material/shape":"14.0.0-canary.261f2db59.0","@material/theme":"14.0.0-canary.261f2db59.0","@material/floating-label":"14.0.0-canary.261f2db59.0","@material/feature-targeting":"14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.261f2db59.0_1634749224303_0.39840530248226336","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/notched-outline","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"874e650f0c85ffb7a1e505099df5b0b5e73d771b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.9803d2dc1.0.tgz","fileCount":33,"integrity":"sha512-bjRbuv3Z+zhL2QPCu8VtUZusZorhZ/xblGbmv6kssZlns1FkqISSnEuCsjKKpfaowz+qtjlEaTEHJCJTMmt1Og==","signatures":[{"sig":"MEQCIBvhWTO3Pt9HhAI2SIl1Z6W2XCS+7nuQF7xMZTCPpjEpAiA7nxE7fGhId6ZesQAeuM7n4S4L4czpEKkzK4KHsZgHSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4ef0574fd4b362b2609f5dc9bc002ef96f07fcc9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9803d2dc1.0","@material/base":"14.0.0-canary.9803d2dc1.0","@material/shape":"14.0.0-canary.9803d2dc1.0","@material/theme":"14.0.0-canary.9803d2dc1.0","@material/floating-label":"14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"14.0.0-canary.9803d2dc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.9803d2dc1.0_1634757746389_0.011264469113287712","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/notched-outline","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.348665978.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85e5ba3fd1bd43fe1ae86b8ebb890a8c69ef988e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.348665978.0.tgz","fileCount":33,"integrity":"sha512-2lXFqRgkmXhlr4R0QOxBErnF5ZsUnUPP86+rkLk3xgH8YoZuQlzJEMSaLgA7hTLzOsWtNF4Fy209TryYuJpVSw==","signatures":[{"sig":"MEYCIQC4upLAQsxpQNYLVzSwMOqxBltnC4hq1W5rj+fmVY5mwQIhAMdPEWHHxRj0+7JveyHg/STv1MDJFK8etzStbIwTPb7n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bf16d95c07dcfc371fc864fe30028299a2d5d0d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.348665978.0","@material/base":"14.0.0-canary.348665978.0","@material/shape":"14.0.0-canary.348665978.0","@material/theme":"14.0.0-canary.348665978.0","@material/floating-label":"14.0.0-canary.348665978.0","@material/feature-targeting":"14.0.0-canary.348665978.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.348665978.0_1634827881042_0.19001430624850513","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/notched-outline","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7295197f77d1338be14a2a49ef75c9f7565a34ec","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.b2b979a8a.0.tgz","fileCount":33,"integrity":"sha512-1gBeDwvoJMyTqV5eQc4Pw3qB2tk5BZbOS13SwsQfYXfy/5dzKfL4jLl2u+PvoDLn7T8aC01/JNzA8tdh4xX8PQ==","signatures":[{"sig":"MEUCIQCe7suz2yhB1f7hNs1EN6vGAzr6eGTzlNT0IEneMgNVhAIgcqrTc4MKGr9VAfc1SZI/Sf/wIWgOzxDhsZd/KTz166k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"08377359fe2dfa41ac960f776df2ba00e50e9819","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b2b979a8a.0","@material/base":"14.0.0-canary.b2b979a8a.0","@material/shape":"14.0.0-canary.b2b979a8a.0","@material/theme":"14.0.0-canary.b2b979a8a.0","@material/floating-label":"14.0.0-canary.b2b979a8a.0","@material/feature-targeting":"14.0.0-canary.b2b979a8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.b2b979a8a.0_1635433986127_0.2974376847473592","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/notched-outline","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63b95d148e34942a5c29b4058650e1892ab8938a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":33,"integrity":"sha512-duJ8KE2juuU1Vo8ia7zcHH2RCZUFaUMaCoSLbFbeUVRomDkxpi0DBRF+VSAaw4hvUFRaI0fM+IfmmlXr/gziKA==","signatures":[{"sig":"MEQCIE2ckcbcUtGn+T/+0rstUemseMu7Qjz7gO4YJOVSeoAjAiADuRam5l4tDro6R4RSC77Ei6EsXWJmMGa8JTU9hIP15Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3673ef3144cd47c5faba873a239454e11e3d72eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.1af7c1c4a.0","@material/base":"14.0.0-canary.1af7c1c4a.0","@material/shape":"14.0.0-canary.1af7c1c4a.0","@material/theme":"14.0.0-canary.1af7c1c4a.0","@material/floating-label":"14.0.0-canary.1af7c1c4a.0","@material/feature-targeting":"14.0.0-canary.1af7c1c4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.1af7c1c4a.0_1635443615843_0.7042416759129526","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/notched-outline","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0ec13f258a11055fbe7755191618d0caac75a6d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.4afd353cd.0.tgz","fileCount":33,"integrity":"sha512-FY4twyZHwAMta/Bhc4R8LL1kOcs+hW5D3VQkf5teJKeYKseC0rI/XezA52sjknO8D6s9DCh5/MHBVFE0I1eW4Q==","signatures":[{"sig":"MEUCIBlJkcARR3Uc+UH6QEilvFITNfJ8MNm9V06UgT3Kw+JrAiEArdhA6lNu3LUHMmKwqdYDxqu7wV8Cfq+Xejn41iCewxE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"491d940b4e97c65f274b1b4d42b3842e9bd3a4f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4afd353cd.0","@material/base":"14.0.0-canary.4afd353cd.0","@material/shape":"14.0.0-canary.4afd353cd.0","@material/theme":"14.0.0-canary.4afd353cd.0","@material/floating-label":"14.0.0-canary.4afd353cd.0","@material/feature-targeting":"14.0.0-canary.4afd353cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.4afd353cd.0_1635519729443_0.9007742765123603","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/notched-outline","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.a986df922.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abf9c1eebda0d730b20a59f84cfbf1d648d32509","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.a986df922.0.tgz","fileCount":33,"integrity":"sha512-Xgd9UzCZ507lLwgMxEZ748CJ7pIEzUH72/l+1AHaCYKJVJzN4mmpI/1foXqgbYW1WqoVAiWnpZC7rufwBHqCDA==","signatures":[{"sig":"MEQCIHljg9XGy0nm8xr/n59i8JqSABhNAxQf0ifAPtMKEAtBAiBpsBRsFcZPuhbt283kWAo6LNWUm9+WgZBkRi1axaZcdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6fd5c666012fea37f8a5a820b4979cc66e59fe9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.a986df922.0","@material/base":"14.0.0-canary.a986df922.0","@material/shape":"14.0.0-canary.a986df922.0","@material/theme":"14.0.0-canary.a986df922.0","@material/floating-label":"14.0.0-canary.a986df922.0","@material/feature-targeting":"14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.a986df922.0_1635543345986_0.6281083057813936","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/notched-outline","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38773c61233da7075c6d73721e4d56881494c95d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.c3cdff07b.0.tgz","fileCount":33,"integrity":"sha512-Mrmou2Is9JBRgolITnwKqPEg0EormEamix4zjwADRmKg9JkXJRDiba21WusfmkVfIgNtPuBXW13O7mSq+qJb9A==","signatures":[{"sig":"MEQCIAop9gAm9A0OO26Vlm9DyDgHdEVu3gI7zE9TyxQhmIwXAiBARNEYUNhu+8kv607HPiJO1Q44/S7Zk2xEOTl15I4ueg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"078c19c333e3161ad6b51a3fdc993d883bdc19c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c3cdff07b.0","@material/base":"14.0.0-canary.c3cdff07b.0","@material/shape":"14.0.0-canary.c3cdff07b.0","@material/theme":"14.0.0-canary.c3cdff07b.0","@material/floating-label":"14.0.0-canary.c3cdff07b.0","@material/feature-targeting":"14.0.0-canary.c3cdff07b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.c3cdff07b.0_1636484790722_0.20816852603802083","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/notched-outline","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.468392606.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09557ed520cc03173d0b23735538fbee11b73f57","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.468392606.0.tgz","fileCount":33,"integrity":"sha512-ojPNxtCGzVYFgiXmgjRRQ438bl0ouQF3Lg++raMTAcaqImRzh22CBlmHDCc/GwSS1sPs1n8MzQ6EUBttsMknBQ==","signatures":[{"sig":"MEUCIGekJoqQzrGccGtD9Wt5p3n7JvsfLQKQpY3S6BvTFgK6AiEAlGDdhKwTjCIQxwmySRLeC2oqg8U3/wjRhFS60mCv6do=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ac451ce035a924184caaae0df5252896a7392e33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.468392606.0","@material/base":"14.0.0-canary.468392606.0","@material/shape":"14.0.0-canary.468392606.0","@material/theme":"14.0.0-canary.468392606.0","@material/floating-label":"14.0.0-canary.468392606.0","@material/feature-targeting":"14.0.0-canary.468392606.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.468392606.0_1636659643330_0.2159912524338432","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/notched-outline","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.828f9803b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fc36e23385e3e9bf992d78685a10c04edc26b65","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.828f9803b.0.tgz","fileCount":33,"integrity":"sha512-vEUZB3JU3W/omkPO4Vdiodrq5n14eaCgyDGjuHIxwoR1tdfVaoYQD68DUbdjLyUQoAjEMT3fT9z2iA2H8RDUmg==","signatures":[{"sig":"MEQCIA0SQ9ozMLlsEvS7Zz8VMLnSM8u/Lh/AwdAICNBmOrwUAiAUdQkI1pLxg9fNfjnry+cm5ct45DmyqPE7IM5r7dcbIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c64e9f941d45dc823621c068481be90a0eaa0f39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.828f9803b.0","@material/base":"14.0.0-canary.828f9803b.0","@material/shape":"14.0.0-canary.828f9803b.0","@material/theme":"14.0.0-canary.828f9803b.0","@material/floating-label":"14.0.0-canary.828f9803b.0","@material/feature-targeting":"14.0.0-canary.828f9803b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.828f9803b.0_1636660293052_0.8747614119071421","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/notched-outline","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.8795cba87.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4731a7565fbdfdf0328d01597c228ccad66846f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.8795cba87.0.tgz","fileCount":33,"integrity":"sha512-/k2eMtzzV7HegbX6g+sIsSvJzLvdJjR6ydKlSZxERpngjLzpUEH2CEG17xCGrSyAm9iEC238iiJByIJTkvHH/g==","signatures":[{"sig":"MEQCIGAid8Su/PY6i8y9xUi7+gme6NrAiJkpaJsrDPaCj48zAiALSvbOnTtMAY6nPGoIERZDtd2U6g+pc8/uHj4wshXRxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"12c2e8ee797434819828bade998610af66a528ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8795cba87.0","@material/base":"14.0.0-canary.8795cba87.0","@material/shape":"14.0.0-canary.8795cba87.0","@material/theme":"14.0.0-canary.8795cba87.0","@material/floating-label":"14.0.0-canary.8795cba87.0","@material/feature-targeting":"14.0.0-canary.8795cba87.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.8795cba87.0_1636660649982_0.4876598091966611","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/notched-outline","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"970cfa25f447b41f890d146950edabffade65e82","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.cd7f8cace.0.tgz","fileCount":33,"integrity":"sha512-Fz7WrLrbNCsGjQoTb1h2XF6h4kRj0mgEZZU7X4qGjizq7A/5mLnZ/kOLg/fiIVnmuc/NWJiFvwawVJu9kbAI2g==","signatures":[{"sig":"MEQCIF63aoI5D4UGsPTDG+ZfQbCVqZd0O0d34fw+IL0s7cHfAiB2aJ1qq3+sKm73p28JQie+KeM5aViq6ZWsysjEgz/hFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6f1e9f39fe9a43e01e67b849cc2a96a5a31be67c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cd7f8cace.0","@material/base":"14.0.0-canary.cd7f8cace.0","@material/shape":"14.0.0-canary.cd7f8cace.0","@material/theme":"14.0.0-canary.cd7f8cace.0","@material/floating-label":"14.0.0-canary.cd7f8cace.0","@material/feature-targeting":"14.0.0-canary.cd7f8cace.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.cd7f8cace.0_1636660756205_0.7276563255120883","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/notched-outline","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.207230eb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0ffb8b81b6bba8233f0b7ba38df4770a4632e92","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.207230eb8.0.tgz","fileCount":33,"integrity":"sha512-378qAzeLhizKjGFmOQNBFPciICpi3J9ElQS/TDN47GdaT/plthpdICd4Ov67Iu0LjKOP6WsMbqC1IEFChPdIYw==","signatures":[{"sig":"MEYCIQCt+/t5sf265cS9ClV31BqB/TJscFcce03e0VMYSOCghQIhAI/PZiiu4I0xWuTNonnuqa2J7hfCeUFju6b1i3lnAYC7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"de1b12d24234ecfbfbf5a665f46c26b71016be2e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.207230eb8.0","@material/base":"14.0.0-canary.207230eb8.0","@material/shape":"14.0.0-canary.207230eb8.0","@material/theme":"14.0.0-canary.207230eb8.0","@material/floating-label":"14.0.0-canary.207230eb8.0","@material/feature-targeting":"14.0.0-canary.207230eb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.207230eb8.0_1636669517886_0.6186104765570468","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/notched-outline","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d61e9cb7c0e384b495d1e4554b8da54aa134d89e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.991fb99f7.0.tgz","fileCount":33,"integrity":"sha512-pnXPwXt3H+Sq5MI2r6NGCChGAO5rB/KfzT5xyZQ0FQeGcm5seD4BnPISHt+ZS+SlEhU7yden+9LoEA959BtLjQ==","signatures":[{"sig":"MEQCID3sbZtB8x2AkN716/Gee5UkYpUSvaSNsCoWjhBNsm9nAiAMFE5L3EYb1EGIN+Ba+mLsLRl2ppG+HmZur7APhxeMNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d13dee60c11cfef5bdcac33da4fff6f13626c05b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.991fb99f7.0","@material/base":"14.0.0-canary.991fb99f7.0","@material/shape":"14.0.0-canary.991fb99f7.0","@material/theme":"14.0.0-canary.991fb99f7.0","@material/floating-label":"14.0.0-canary.991fb99f7.0","@material/feature-targeting":"14.0.0-canary.991fb99f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.991fb99f7.0_1636670231175_0.7831217062036167","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/notched-outline","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.15db4f164.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0defdc8d039daca29ca50cae7856c8ac6a65ad0b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.15db4f164.0.tgz","fileCount":33,"integrity":"sha512-++wh2uWW7vfeQ5GgKdshWg3zCvkqCKgpKKWGEWN2Qj0te2WXd14Q0vX/LBHL8ehNKOQfXsIGHAa22hKGIAZ5qA==","signatures":[{"sig":"MEYCIQCWumgajG+3VriU5ycv8LL+5gIktZZ8QrPW8fJ7bFRUYAIhAIgUL3Zo6ZtIy4BUAB5TvY/TJlFdgBpr0ErEoHvtP+Cd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"562e11bb445a0e51783e848adc61b690a7a1ba3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.15db4f164.0","@material/base":"14.0.0-canary.15db4f164.0","@material/shape":"14.0.0-canary.15db4f164.0","@material/theme":"14.0.0-canary.15db4f164.0","@material/floating-label":"14.0.0-canary.15db4f164.0","@material/feature-targeting":"14.0.0-canary.15db4f164.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.15db4f164.0_1636738223544_0.6317136591585364","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/notched-outline","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fd05380bc68bd8c7d272a43189c537a06c7087d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":33,"integrity":"sha512-IfN5KbpSEhBbkfBdzpmg5PZWmENZZ7yG426kxvLxK/kGvHQDSDPIB4dwYYMKPeb0DQ5u8Nw89BYaA9KIKockOw==","signatures":[{"sig":"MEYCIQC9l+qxH85NiYq81fchyY70OUyll5pDQPfpJ/bJMXj7IQIhAOhl5q6h/pQEdRd9qVmWOck1OY0dMVBkPrZ2NUhwk5NE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"14b654013dacdda833d34b73c1a94811202298d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8fcad5a3c.0","@material/base":"14.0.0-canary.8fcad5a3c.0","@material/shape":"14.0.0-canary.8fcad5a3c.0","@material/theme":"14.0.0-canary.8fcad5a3c.0","@material/floating-label":"14.0.0-canary.8fcad5a3c.0","@material/feature-targeting":"14.0.0-canary.8fcad5a3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.8fcad5a3c.0_1636744474417_0.9064318373140776","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/notched-outline","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce27709203d8ea69ea9a229708665cd9f82fd6d6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.f81fb1d23.0.tgz","fileCount":33,"integrity":"sha512-Xo1NffLbLGoa6KApD7VzJs9PIA0FOlO2POfSQeDvR3+A5kd2auE09PAZL2KCOGRqsfbN87ohoEZuwJXuSwMc2w==","signatures":[{"sig":"MEUCIG2N9+h8D1OITZnTBV3nBYnAfiaV7Sx1wEzU1FRjTY1LAiEAjSk4XkpVc2YzNdrrqGEDkl/PhA7rH0INTzlmcWVuTAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"60600a1b8cf651dddedd6881a54b20db7b75cdc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.f81fb1d23.0","@material/base":"14.0.0-canary.f81fb1d23.0","@material/shape":"14.0.0-canary.f81fb1d23.0","@material/theme":"14.0.0-canary.f81fb1d23.0","@material/floating-label":"14.0.0-canary.f81fb1d23.0","@material/feature-targeting":"14.0.0-canary.f81fb1d23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.f81fb1d23.0_1636756864372_0.9883976730232673","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/notched-outline","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59bf7abbbba2fc843a746699e8ff1d5ed5be3558","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.783f6fd5a.0.tgz","fileCount":33,"integrity":"sha512-cJYFV73a4lHtbv6CLwxhIStNU3QOSdwfSQIDO2x8TjqqewbBwQHkopuR9xvYoXGR2TzHcudG/GhNgkL67o507w==","signatures":[{"sig":"MEYCIQCMBk9yaYsCXLX6XHQr9NpNRx32glMRLpmLtbTBHnF7HQIhAI9vXsol9Aq395QR/AV0RyGTOoVqvE7wV9vTGK7D5Ram","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0bHCRA9TVsSAnZWagAAOcEP+wUfDEFyvAGr4ikgrtxN\ngPM23dzgPLGjre8Eys3e1eReeeHXpq94wNF/LzXurTjQgIW7lDM8W2bvjggN\nzw8o3d8+9In16tp1OpzIuXP5sFuoSDZ4BpltcMyTCOPkZOyHlA4dApOC6vvu\ni3KX5Uis/Ba24Tpey8A9wGpPea5qY939cDdoDFgo/cYDt+NvmXXq7SY6YLv1\nTX6mjV/HruzIVbIsxE29tiQE1I0RPgmqIiT5G8VxRATKFDmoOhEEE8dvo+mD\n1bwqj9bL+LOsEBQXhUMf5M94gVeDrHs33lHTNxlhYBmIrfjfA8pTNcVxtKbX\nXuleGAdd96H94bIBDhbKQQiCiGqsvXArBTnWlEzIusFHSlFCH/U4xXAd13Tv\nl72vnH0R11ySvefQ98NCzQpXcjP+U/nJ8G9Xxy4Du/MdzOFeq6YODtepKXMt\nsgJbRBNMlInuIbkpDzhWzBrYqGPjQJRZZBlU/oLUnEgNDV2xsDFxwSaYw9uq\nx0DtRqqkg1N7NQyG1ZtTGz26oUdghcCJ8iE0l9xf/6ggk82babWFQeORb0t2\nBFT2mN95+QhrBHYRTRopkiD/G3l969FSDoF2yKLY9wnf0cAxqnaxBYdavMsx\naWE8DnJEyNP29Oe7hxpY+mlZ6/okstWw3H21jpKqvoad+noCGMaXDySrUwBB\nWMwo\r\n=T/qV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"29ba9297d5424f35d235c8ff87e393874c1b0a25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.783f6fd5a.0","@material/base":"14.0.0-canary.783f6fd5a.0","@material/shape":"14.0.0-canary.783f6fd5a.0","@material/theme":"14.0.0-canary.783f6fd5a.0","@material/floating-label":"14.0.0-canary.783f6fd5a.0","@material/feature-targeting":"14.0.0-canary.783f6fd5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.783f6fd5a.0_1637041863270_0.04567659517179634","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/notched-outline","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3a83626761b6c1ee050ebe9434d978a3ff9a8e4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.d57ec74c7.0.tgz","fileCount":33,"integrity":"sha512-v7JtqARsQjD/gt8j2qFED/5eYQWZTXOd8cAQ47AgJWkCZ1hTc+dX1aAc+vDpT3ifSk0eL73NFHo8WiCKYWb1UQ==","signatures":[{"sig":"MEUCIQCq5g3S7d4BeVJiunoQeJY50lYJMclJMsPZgg2ejtZ1VgIgD97GGfppJeHrt0RvNkOXfMHV25BDzzRvkFhmx1UPWek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9nKCRA9TVsSAnZWagAAJSgQAKDJtqiiUiKP/MC7dwbu\nJ2d9x6FtMR1GcEPwVmIdsCewOPgSkAwc8SO6UkaGJ1iGygTX8OG1E1usqO12\ns9C+drLwZ4lw/MvL7Z6BiD3ETU1IQsQC+PtVWnVNpkwvA7odHvmXxN3zVDeW\n5QA5oXvclIBaVhzbMej+xH7baZtFrRtKupGN06Enq/eTS9ES1UjLF0PAHyRS\nHlFXr1e3f/XxWxqqkI5p1DsZxeElzYaNZB09Bb5q4JQEF7WVvkKJRnpoQvNT\nlsFBY+Z2o4VjIPMfyrsP9xDD63wyANdb9j9mSgpwdYuAj+onR4uVdqSTqQtI\n5ULziXIC0JJqj4k5gwXcBbtYL04yK/qtmC/unp2RCnzD/9cX5Q/TxzXbBlVv\ngly3+eWXMjfGUC2vdgyPX+RmOivyxDJ1kv0cTUj8F9IdNE2h53kyBsxeuTYC\n4GbCP3zGZpBZKA4ro/CTlGW7J3nfRP2RvH44YPYqqxjJqRg8e/9i0w84dOu0\ni+iJMjyl8HYT/x4MqnzegDYeMrvUHPZFWMWhu2VQH5KAsinNv9SsODvm8xHs\nFvmnogvm4JPQSWVZ0NgM8lpGXv2mExJtCaog7+kgtHtLVtOQaSIH5/QnnspO\nWDuOtTm7/bSmFZO1RMNvX7klaKlKjaIJZLUSFvAVqG5ZlFHeYn8MUyRFr/X1\nPYLe\r\n=WjYk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dbbd8db21de66e88b3e713faa99419e6b2f53c68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.d57ec74c7.0","@material/base":"14.0.0-canary.d57ec74c7.0","@material/shape":"14.0.0-canary.d57ec74c7.0","@material/theme":"14.0.0-canary.d57ec74c7.0","@material/floating-label":"14.0.0-canary.d57ec74c7.0","@material/feature-targeting":"14.0.0-canary.d57ec74c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.d57ec74c7.0_1637079498670_0.937527890431854","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/notched-outline","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.554c71829.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f33f66fa4953eb840af5ec866677668636a8836d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.554c71829.0.tgz","fileCount":33,"integrity":"sha512-fXKzJLdOfBJnBe8b98we82v1YDiFKTFiDRNGH74LsSckjfO1CVd3ZmF7TcOnGkBlsOU+Tl7dlaT0XQ1TWNICXQ==","signatures":[{"sig":"MEQCIAuPBHzcYCxmvUFdNLWDQtRguNKIpOkIkFv84sEWRibaAiAaajRiakkcQYkaitBzuSd2o7keK5tF9eTZQsGrsnsNzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9o+CRA9TVsSAnZWagAAnUUP/3RFgfa12plsyAvCbfdF\n7G6ZxCayYnhb4z6yjleUzQWY+zmpvJqJqGqfmY11BHDNDD/3ezcl4UCWEmXg\n20J/MpUIq5S1WjIcmD++NL8vTyPN0KiQ9r9oQX3sw9hbE0bO1PvQLagz+XPn\nJf9dvmyb96SHyYm+BrtKVn3u9WyiYpQKJsiuaQwppMyBsnzqE1bWeJ3cPSS2\n/3W2eZnznUjoG0Afi8U9CfWkH7hrpQE5AW8scxcLsZ9j8ZoT9FjTLkWzDG4Z\nS/x6wuQnguFBtce22rc+KE6wSavhqDydgSUnCW7llnCGP22rblpjxblVRMfp\nbbktVIVob+z0k91GKLn5wyKsjFFPeJvhmWxw6ui77pmav5gbqQfktBb63E1H\n0C36oB9gyYlmFcH24SKX8K4/QpiaT9+bF1a9UfqPzoeSbK6OyQKkgQM6vHpF\nTqJ2Cc3QWNue8Nm56gH2oIEsAGZjs7le7e0/C+YrgTjgvpjq+uUdk/GxiDKk\nxp3pYUX/xsNOELcNoL+poOuZJu8TezMQc2Dg8rNONXRHtd9ZD2m1m2GV7+Kv\nEkBY3VGA3jqEXLo9+f5TwOsYbUBddYhIt6gR1uGQ/VoVa4ENH6hOwMEneum6\noqL8dFUcx4SMSuP9W3zDbjjikakDgFgJNRU1r632dl9e+10HeRgsgVUiG7RQ\ndwf0\r\n=HdOL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"be0799ddf10fc34b46ab20d754f7ef73d9efbefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.554c71829.0","@material/base":"14.0.0-canary.554c71829.0","@material/shape":"14.0.0-canary.554c71829.0","@material/theme":"14.0.0-canary.554c71829.0","@material/floating-label":"14.0.0-canary.554c71829.0","@material/feature-targeting":"14.0.0-canary.554c71829.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.554c71829.0_1637079614578_0.1720276577058193","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/notched-outline","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"561d8702483a0d124bdc20f0bfb1991c024ce6c3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.3ef470efe.0.tgz","fileCount":33,"integrity":"sha512-tD6eY1r/+ZhgLyARVc33h07sHS0XswHpNgdIhtSRq8ao+R9RB8TsWU8OIFqIUZvemCHQnrMZCtMb9UCJiE/9kw==","signatures":[{"sig":"MEUCIQDAD8Rch0r9SjCXH8T2OEyVz+VhNIrUDcm+lCQy4PWedwIgbAWrX0TjgzBBezh9lx/xrGHCWKq+0LcdUxNWKpNqwaU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9tgCRA9TVsSAnZWagAA84AP/j2TH1QK/zls46Fcz8Pd\niNuMpG/6e4lwawg/7F1bqYHdHVQ/Y9Jij8DnqFvIPbVlRsrJIn2kKAuXi993\nKFwH3sHRvHKGbupvUdjTSIbcqk1GyEFvVN8A4PPQZ6ySw3sw0k6mYqwG3LQb\nbSmrPRjgEFxmt9yx9pt6VK36104fqOzht6+ObSiLyD1QiwRoWVF7+N0lQMfn\n9NoLBGigOpJGvh088zGQIBmHyYU0DZKflpzWTl2EibM63vuZzrVYqr/Zbci0\ntlsTF39++dH63ICkHgi+swrJACqztgP9ZDe5ILHl8Y8ikrDMMsreySBejsbh\njv2xvIfF/RQxkzrzQVZR9D4ZsLvnHWFnb2i9Z9GSVl03kzhcH7v1yv3Sul9d\ngfvlmE6RxvGfGdIHFABktzf3mbpI6m/q1LF8y+d1TrBDajOu+r4IaRN27ZPP\ntKfFwj0tfyijssnEImYAjNikENXex0wZ1blf5oZK+zQj+RdeoBBlfWfwBMlk\nlD4BeVrKwSJRN7Y1aXNyJ9LU+xz8w4C0y0On33RGc2VKHgmnQwmnMV9eKQ1Z\ngIk7EqjnwOplKKwVEnfLhasVvDLKyLYbWpN3ECK+Urn1dHoxEQ57eanUA5UZ\nNzas8OdhgW2RsIc/QTtGsGsRyuU3qW5zcT0FCyQ97HdNL6s2R1GYMpPhUthc\nayds\r\n=yM7t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"49429a109e0c13bb4f9d8fce0142cc5f142a6afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3ef470efe.0","@material/base":"14.0.0-canary.3ef470efe.0","@material/shape":"14.0.0-canary.3ef470efe.0","@material/theme":"14.0.0-canary.3ef470efe.0","@material/floating-label":"14.0.0-canary.3ef470efe.0","@material/feature-targeting":"14.0.0-canary.3ef470efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.3ef470efe.0_1637079903892_0.5689208818959279","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/notched-outline","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11f9e7325cacb752e0553533eb3646c9fe632e97","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.61a28b2b5.0.tgz","fileCount":33,"integrity":"sha512-8Apo5TLjckpM/busIPy5SgMxv/I/7Li+/5uxfoFPjBUp1s4bjh4SCr1XFPmT5sK2Swdlr3xj5v1iE6gfQ7CyVA==","signatures":[{"sig":"MEUCIB+m1ACeZt4b9EQE+VKJGzKgo1E1cRO2BIOx81TS6mQXAiEA1C7Zr+6ZBBBlfOeVrCupCrRXiBQ2Mn+DFYYH/vuM4CE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"314b98aa8ec5a35ba8a45706765f4cd7496dd803","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.61a28b2b5.0","@material/base":"14.0.0-canary.61a28b2b5.0","@material/shape":"14.0.0-canary.61a28b2b5.0","@material/theme":"14.0.0-canary.61a28b2b5.0","@material/floating-label":"14.0.0-canary.61a28b2b5.0","@material/feature-targeting":"14.0.0-canary.61a28b2b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.61a28b2b5.0_1637175609655_0.14676508148653977","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/notched-outline","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.fae6c652d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcdaf126da1c6a019b0cbce8b6f5928bbe89206c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.fae6c652d.0.tgz","fileCount":33,"integrity":"sha512-KiF18/1X9nlnUTBm+l7Fj0+f802odiVvzBss4sYgHyrt6J787WQBSvwKdsIfA1gZMS3jMAUPH7mI/ee2AcV62w==","signatures":[{"sig":"MEQCIAHCPO6Q6+HhuzuZQ7jt2V/Ya4o7eIk8MExoDEtt0bL9AiAVuXEHV4YKJIEeEbFYPrelpicEg/EqvSMuO4SvZ4C3LQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln6bCRA9TVsSAnZWagAApoMP/1gZJj0QwY8A+XcWHTmg\nfPZYxOYvd9ZFi5QOWgN1yAZBSMNxtLyAfAJ8KPNuFhn9LJZj5wouaDIsy1LZ\nMHZpqDCwcqzMILwEzPG2X9zXD4hVSOA3zebr/h+51owRXTcCPvvcmzTPSbLE\nx9BEegsrOkunFSioYXDnESANQaHzQRVpZ7is27iIuZIpwWLBIMcq/YKscwku\nBv2UB99wDJ0dFwsgNvu+m5QshAeOCtTLWawvNaT7JW/oXAO5InFDzooildkB\nsk8ezm7W7yReXDI24JtJke1f+v1g9+UzKzGgHJ1bVvsq8svrh7HQQkkAON8z\n70jPiCwLkFrLs/z9WdvHkflNPQfBcUy89R4vg/0IS5ugNyYwATH0U0jRpMIV\nHnzi4axtSbhFhJ5QF4/3rLTG1RBNeP3tFUfmSLGHuLpCzYQKT/zwrsSX5xCQ\nQvMvclwYy9nwOmKliwpDuGc+qj2pfaaddbdMLeJOxCfkJ/8Y5eCs1gQkQ8+N\n8eUNphhiZECl9c7TbsofHqVkNbt0SZXYybNeOXWaByr4N5nbLfiFK805k4yL\nvx7szEMnQ8Ob5dk/MlzjaubFFbRIfopsODdMV7XzZ4S699s6FES1PTKAXZmD\nkCwn1BvztNCiwSFqxgMCiBThEUFfV5kkwrZCFK3Y/QFOYSl1Vyh8UwdMxh9F\nWeA8\r\n=4lnF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d27c4bc9db002b9009b70cb7437b393ce59b9992","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.fae6c652d.0","@material/base":"14.0.0-canary.fae6c652d.0","@material/shape":"14.0.0-canary.fae6c652d.0","@material/theme":"14.0.0-canary.fae6c652d.0","@material/floating-label":"14.0.0-canary.fae6c652d.0","@material/feature-targeting":"14.0.0-canary.fae6c652d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.fae6c652d.0_1637252762752_0.1298114365710159","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/notched-outline","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.978a3b5bb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"252d4a7648a0477556345bf280e45d1faa2a3998","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.978a3b5bb.0.tgz","fileCount":33,"integrity":"sha512-Az9X5ge6Zp5dUMccM+jE+SD+41u/ldonQb5hOmKEft1DUNxenLP6vhRmpSH0v7w2beGPJg3JKlORSZqSEHV71Q==","signatures":[{"sig":"MEUCIHl/IW2GFFV/5cXsCV389e7G0FxGWOvgj0/Sp0y1RxcSAiEA5H+ClghHQUrdtlYDp/a//sKZwDyVtsiv4dfgpg1q7Gc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/2bCRA9TVsSAnZWagAAM1QP/A0lDitzci0QrkiB5Eyn\n9zNYO16YLsMZ6aNwIDDYeKewxfJrphiLpFUmvngfojjAGsTtmuM18MNwqP63\nxHOK6I0BpEYVxpNRa73drCRDqrD4tpVIqwYutx8fbKzvUenCI6MkhOKUQX3q\nJdI7ur93FxbzSVbW5IYaVNfLGoXHHXDGrjA1UuJznZMdedbj8lVmCvPl961O\niPtyToszKqroTZK8/WZ7ifVNnSDoZ8kUfEYOyyAebGLuREQE1PX+/CaGA4Q3\nomWZEkZ38xAzmQGagu+3aTI1m0pBzhLNYHS5CvbkkAIRXoFHgohCHX3duVAW\neln4WkzD4U0UnB1w8AyeyvGTN+vMr/DlIGJ7qczze10yFnxHgrpL4tR4Ojwo\nr5ijh7BOXU1tLEvpdv/G2K5tx4Nfu7vwrvq8B5XQj170poPi9owY3fOdzMN9\ncCb6aPmYPSXsgQSY1y0YjNQ1kkQxj4m0r0f6BDOC1eQyBUMMdb4G9koI4yjd\n6dw+qOIJerbEERa7HOZf0d8IF4/23DARj7hq7r0qo3axfi/FjjHiWgrUve8W\nhMN63npSlCJ9HgqRpMSBp3rm1BM1K1Bm8F1diitjb7NYKdIWJlnGSiy7tK53\nGnbEZqFh97mbhwlFStVErbRrsN7yoT1+TjA+uc5p0WkDtRAop31bWj9qN/hM\nyGGN\r\n=Pgnp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0d21a3472967f5ff791662e03961fb034a9227d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.978a3b5bb.0","@material/base":"14.0.0-canary.978a3b5bb.0","@material/shape":"14.0.0-canary.978a3b5bb.0","@material/theme":"14.0.0-canary.978a3b5bb.0","@material/floating-label":"14.0.0-canary.978a3b5bb.0","@material/feature-targeting":"14.0.0-canary.978a3b5bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.978a3b5bb.0_1637350810908_0.06369285052650886","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/notched-outline","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.e6f43cf44.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a006a1eb058de98390776899cb7f3587230df6d8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.e6f43cf44.0.tgz","fileCount":33,"integrity":"sha512-SjJ5o2SiG0NJzNi2qIdEpYOjlfY1zpIbTw7XpR7ete65QFYW5m2iI0jJZeAWTBWKRFFzvjPdiI7ZIlDUJJ8ANw==","signatures":[{"sig":"MEUCIC/qB02B1BCiWiaMPXf2qbCLQrbxDEKDD3f3HMMHedQQAiEA16oFd9zk9hHMnAJuN6zKOds8hQJkrtGWMiNiXUfmiWU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9UECRA9TVsSAnZWagAAh9QP/2PRgzlmCnW4p64OlXid\nVb3do+Qs4OJU6ouWAy4TW7JH3ztpSolw3RI3cmSnEg2sFdH5QPzD853CShzX\nnA2Gbx8/FWCDruCBTl2qvN3oOpCJeRvJxyYSNCBYlbB4F96BU5BPYe54WYD9\nGReJOs1Rg5odHGrgG9HYx2eXkuPKkdOrfa9AnzKLWuIcnTFvpX6Hkivaawi4\nJkFs2WW+QMRagGNEbKH5E5KLuu7sipd5JbqIMZLUSAw/Pn1gybcsgPZ2cDFQ\n5OUme/4qywLI1BEIuruafPG7jdw2bRONZODe2HyTn97aZ+9MTQnhsBR9B5NS\nRSJIuMivEUneEC1fRJJxus3DhEqn1KLJ5Mg1LUnBZREELN5oizx7QcFmHQzO\nxXY2rXcWUoHwLBx0VOIiCHRn0YQ9iAeMh5UHgLow0lA5eBDgZBrEAnuc3NMI\njlaWM48XuQiapBPZUu251oZvSBrJFUCl7X2psSma3kwGG3zATfRrfzHjxyTN\nAjcZX5D4usiU0e87+PxfIBXpBoiae4OBMieCFyljJ7XYTmocUjZzWpj66102\njuRSS0SlmKwVoy32fJRnowE3R/Ny1cda2DK7TD/pudf0854j9xEeebD8jwrV\nmxlEU3jBU3hGyo0/4jo+CJJRJHAvzIZR0XHw4kaJRd7NX4u1PvTMoaSr8rUI\n8TQX\r\n=Xg3w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"36200e7acad50905888cd5fbe17075663a96ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e6f43cf44.0","@material/base":"14.0.0-canary.e6f43cf44.0","@material/shape":"14.0.0-canary.e6f43cf44.0","@material/theme":"14.0.0-canary.e6f43cf44.0","@material/floating-label":"14.0.0-canary.e6f43cf44.0","@material/feature-targeting":"14.0.0-canary.e6f43cf44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.e6f43cf44.0_1637602564043_0.5755128808335592","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/notched-outline","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.39cf14bc3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"167f60d51c21924ec297bed31fedd5882b4daba0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.39cf14bc3.0.tgz","fileCount":33,"integrity":"sha512-Oyx52m2FslrJs7b1id/VSrfP3kufLOfV5hm4+YMq1G+3Yv9Dff4E9DT40sM8pTGkz08YlXw9rrhyfiguDyKu+g==","signatures":[{"sig":"MEUCIAUbduzbeZtO6EhJ+j4o4KEyxyDU52uKbTogeRlN4QguAiEA0tD+5oWZk20DxIV3/sSHQ9LCETAInTC3DAlJqg+1CBs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCI1CRA9TVsSAnZWagAA3uwP+wdBk9yIJxRVR6VmFPLw\nwiuFpI5U9MYZvmXPhHIJxiTn8e3rBJbWKJQzv564bxvya2eMGhOx0zw9H03r\nVmxvi5Qur9zFamqMvvAv8O4sSqTssg4ZYNR56ZcqHWtKHW2qxI02bFrzzyjO\nmJPpflBUPhK/86OrZ4IZQJGYcr3y+ElS8ZAYctOxEZS23iQC+WvilsjS5eq6\nvmifdTRv9GR+Acr88tPUIiAu3SbgPY/E7qHrjSyBCT5vWLPSkEVaxg0SpYvc\nEtBiXor2Fm8k36BWMW58vivq3d2PZcWHsUArewgQzES6UDPyR+NIGjvsey9G\nSoW/Vjq/M0RfLksDZ4uBwQMZhoj6+86vN1N6gK1yCpjNMJK097E9bX+8jyrT\nfDQeNrpH5sLVq8nzL1g5Jt3HEjn8sAzjAd9ZFD93Xyz+8Vff3A4gREkvwxyr\nTdw0gYySo0jIm6UH2DkvxnyWMWXDDBQnTgoeEtCpX8PFN2B5wmmnbXBI6bfr\nx1D2BsU/pg1Bf2v+2qRs3pO5wcKhRVNtXZmTWogNZUxOiTXdYPFA8ku49++Q\nXQzMmFnFAcRaxryKWr8HIrn+k6Ar2cyEtETVZCi6qQV1eCGk+MkjF7atwWsn\nZh7irdJXH+D0VvmqpbiAo9jRVcHBI4nBSYk+4bVBW/T2FXJR5VZ4OQ6cOZw4\n3uCo\r\n=l+GA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7a4dadfef1095fc344517a394b0286ecb59751dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.39cf14bc3.0","@material/base":"14.0.0-canary.39cf14bc3.0","@material/shape":"14.0.0-canary.39cf14bc3.0","@material/theme":"14.0.0-canary.39cf14bc3.0","@material/floating-label":"14.0.0-canary.39cf14bc3.0","@material/feature-targeting":"14.0.0-canary.39cf14bc3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.39cf14bc3.0_1637622325740_0.20795460314705005","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/notched-outline","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.93134d453.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64413a2e99d3804bc29b704ebe02d19230acf7bd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.93134d453.0.tgz","fileCount":33,"integrity":"sha512-jNVZ5FdB3kE7EbL4/PjrJ01z0VjaRUpxHuc6n9lhw1arS41NJomuowC1BCyJySPSmsCR2wVEDQpnLe328MsEfg==","signatures":[{"sig":"MEQCIE2njh9S/QnzYGok659kutrG6/G4DfaL2cHa6Kc5+9GjAiBDYtWkkNOSOXgzN5ccwWbFvL/xD2SSydrBQDOChLB1yQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQtrCRA9TVsSAnZWagAAlr0P/0zHVrI6sgvnnD1eWsmd\n26nrxh2d4bgOQQKrwXhxLU36jX/Tt3yU6y3u1HO8vP7+KmYn0N/AtmMtrLF3\nTTXQxeB1kV3ZHeF2yXmnwk70YiKGyE+UKrWQpDCE9rBtW82VsBeOQCI8lOaC\nIUApBozsSnSvUOIS4bvwEWDTlAgqOF3tmo0bKlH/v+AYlBqrcZCHZ95KE9xk\nxcdar4ht0A491vzZYEUhjsykQ4QZnt7lnGRDtvGvSMG/0MSGd3ZdMxz7Mwbs\n0pu55bK5qbD06iREMn5r0HbvD6PDAbfDKg4MlzZ/AGqzYjZFjJFnQVSEBtFP\nEyrN2XsCPkBeY4+uXiQYY1LkDJ0bwSEyT/50liwWOMfqXH9AQdtYMPeED+MC\nrZHtOY3J36V5hvJvC66hu/gmu/XFlobilQEa/WpKLhYr/sGZFXfKkTErubnT\nDo0EwUusoWYTD1mOFc27etSsUevwICVdqSA+hEkwplYg/ZK4kTRSPHrd0pUr\nF/rcRbBhVpF4bDmKHAfA2ISvwg/QlJ/RDvJfB77Sk8ErR9FUi0A1KN539MN6\na6lCDZ5w7RarTFDjOFSkmKpXl5tRVp0HEr3unJKBc2PRVTDshIqSONOOqiFp\nFIFTIWtr0c3VcIVpRf6eVqdJOVNoQSwR5UTDsNOXBQPGLcYD+/qTENnnCGPZ\nG76U\r\n=6qCl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f37d4e46e027a3258621f6950e12796013661afc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.93134d453.0","@material/base":"14.0.0-canary.93134d453.0","@material/shape":"14.0.0-canary.93134d453.0","@material/theme":"14.0.0-canary.93134d453.0","@material/floating-label":"14.0.0-canary.93134d453.0","@material/feature-targeting":"14.0.0-canary.93134d453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.93134d453.0_1637682027626_0.17407478185035652","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/notched-outline","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.bbd11268f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6218d9f47a4ae748114d20909fd27ed3aea7a2fc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.bbd11268f.0.tgz","fileCount":33,"integrity":"sha512-p6Z1SGAoGkj3kltnC4mXEaEDzMbSatuPZvDmYcrbZu0NDNx5Y4jZ99OLkPQWcOUnoW6vmTxN21U6gu4v0LQYIg==","signatures":[{"sig":"MEUCIHD1svZi1etC4XdpJeMjQ4BQEs1tGVNnBEKHR07iOXYlAiEA3/G/hz8qWSwTkNrnM4FetvvJXImeUQeuwd8wW43a8qs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWw0CRA9TVsSAnZWagAAAfAQAJyJzGPImAjhX3KAqA86\nmUDhGl7Q6cQPzTzXaujSIpQztv9w04jtKUiqebnjOcNlEVoe8C/KlWLtY5eN\nPiey1vdJ4POp42UaQ0aNqqDOcrXQl9hEHXK87GkI2Vw3+SSPMszHJw+QPrw1\nOCGIkrxsV/HQeinruEKaPHBQI3s2VMq+BM/TQzgkBE6t+rhOPDJAS0UdzXS1\nNu5KFsNdUBGrRTIljmd2WhBeV9IHAEWInFqoiqywb/BiFOrtNxyBiJ4XFhFl\nfhU+9t8p505gk7lj5A3PZii870DVY8P/nZslthPzh8XuKXZoy0ZCx31ipWFO\nfRsFqHy1bosFYBlSQKKt8knmP7AUFSArbuKLuX/ABOVIwTVG07r7fRG9fVqE\npiPeODWHmg0ElS8SkTCkovl64AYbOTI4po1U5MDKRCrUlKmv/R3+RBbCZsQc\nIpdsdckxE3LYxGhGEEhYkZsfi9fcfh+OSVcK2Q3tHHFiUJVu9j+Ckdp6btrn\nKxgaV7Pl4XMiG1mX9MR/qImCmnC8CqtWekKg3afcl0MGzEc7kx/qBbilrrOI\nxsCA/TzF84GEdRedRAcOvtYyAtZsvM8f6uET9y8chehk5EtzhTTTrZ212+Mf\n43T0jyEofq9+BZXP1FT5Rg80zRDfS1ZKl5jdbzkYbYAp5qJQlhwV2TAcC1RD\noiUl\r\n=H4Go\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"46484a77ecd0c6d7b548301f4e92325ffc4f8010","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.bbd11268f.0","@material/base":"14.0.0-canary.bbd11268f.0","@material/shape":"14.0.0-canary.bbd11268f.0","@material/theme":"14.0.0-canary.bbd11268f.0","@material/floating-label":"14.0.0-canary.bbd11268f.0","@material/feature-targeting":"14.0.0-canary.bbd11268f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.bbd11268f.0_1637706804350_0.02101388171582408","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/notched-outline","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.3db9c4d3d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1484801fcbedea21715f15e452c5e8f9cf0525fd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":33,"integrity":"sha512-qevKnrXbewSxVzOzRw3m3tGGFxsS+c/ZJa63mC6VWwm/FnlNJFD9lY1aj2kiSHdAkJqfgrPKWHkxh5qpQU5/Ug==","signatures":[{"sig":"MEQCIECNydgdGJcti1gqSqxvo2VeBM/kriBOXTIe9UEZX9sJAiBspOQIslZ/nKjSo/bsLnumLuzBAp9SQGs8UIpQomtK4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlx3CRA9TVsSAnZWagAAJJ8QAI5L/UnrCS6bX+p2aPPM\nNAVUfSzqUfT3qsAOAbw/kPEWlODlUN59JFSiUlxgmvo4qLqPmWA932kL1jTa\n2I4y8COH5Ur32lNuyPdOCiXptDhacuHi8jNc7LqsK+Fw/F6YOn4AhK5SzTEK\n/9/Y73bZ8YwcZ36Ri07p5RDA3CcfjQOMGiH+aM4qq2htZCZBRu81czLcqjpq\nGgmUF4vXUT/44vLKubr7kJPv5O1FMBp6Jxp+SiyWvTOwtEa3EQT8kaVwv5DD\n6iBHpvu/dvsnIa3aIqOqUvwBqBxTHWNGs4HQX0KVeZp9+JJ+bs89sNlaKNX/\napaqjfTQFvCIbfQEQ2BF119yuLpTCmF6HFYHnMCzGVVI1h1bmByTj5Ult6/D\nI1Lzy2GNrRVyswBr8xMs0HkUw+ud7y1hNag7z/9DqD2B/mZsxezLVX9hLQnK\nNq0VJ3Uo3NFoJ+ho5lJVin/iXQOAElYzC/OvpfXM4dDBlLBpuv5Ot/owFVP6\nB1PZsMRT40mMtLvGCrfgerOg7hsqtUBRLU5dAaGPGVfGSh+uTr0GnMlHZS7D\nr4rQvwS4pi9dVrtNh6h2+G1lBg5jSULJ8IL7xuPuW5eFMBfT57Gv2tUSV81L\nnzTT+dKhCV75f7chMHpR8/+a9YO5ZkEU5FMgmHMwPZAmZ5SNZQuOUhrptQZQ\nf75D\r\n=7C2i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"61e9de8c9bd6ef83a5f0949cf53ce4a8b689f158","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3db9c4d3d.0","@material/base":"14.0.0-canary.3db9c4d3d.0","@material/shape":"14.0.0-canary.3db9c4d3d.0","@material/theme":"14.0.0-canary.3db9c4d3d.0","@material/floating-label":"14.0.0-canary.3db9c4d3d.0","@material/feature-targeting":"14.0.0-canary.3db9c4d3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.3db9c4d3d.0_1637768311647_0.5408331438251259","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/notched-outline","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.78305b6d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19a728be584aa03f5a64ab984dbd6d595d142982","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.78305b6d5.0.tgz","fileCount":33,"integrity":"sha512-KQLvV2T+z/eZJrv15RVXt3v4lYnQl/TsmvuE5jxkUqr+9pMpfllUT6zHXY+WWx49FIQsoAwexFScsm9J148SiQ==","signatures":[{"sig":"MEUCIELDlP+hd7s/qfptwnosAaZ8sCJbsaPrjQ9/nAy2zW1jAiEAnMLe4Mr8Ij8qeAEgg4Sfo62aqAAAhWJH1wbQjemJZ5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpfUCRA9TVsSAnZWagAAfVwP/0r3oyjOTI0JiCj9Mmeb\nwSLeMZYYkcfmHijxweOhZKAxfbklAhBiXfGAPI6FwBQxevBd9cF5ljQHKeLV\nV9tRW0qHWSSxVBwJMqYNHE66IxqoDWQQ7H0uQjjHHa5jBb/H8+pkJOrP3Jjx\nyTfBY7OBsyVRO/Op8fdtRCdAmZZsXRidmJkvYtqxs1pVqpiYGcaSQo2DaeVN\n501okIFOTiubczZFJhBIZYlJbvPO82qjaPoA9rRBuN/uX2zpWehLKV4wPvJH\nbKWDKRP3aHi/EhAFVkoB1HJWA0fX678UFHMDPB/G10LN76p+0wdaSKXudTmL\nTMqWePuEnxQ4bDo5V5oqiWOuJexbN+B0LaZdTgFCYO2XreBWjsMSjymBKYmC\niZPLySHD/Tk6cP/CewbI8aZn8/xFiMMptDu2x5I47PIhb83Yt/uMaU2OJtQJ\nqLM9o7ntDkM5eIJSEHakTnPEYqDXSe6SlA2X6hFTDvmBB+4h1BxwljJT2gJm\nOnAUbO/A3bFZV0RDO6xV1AJ/rulcvS907tzhIoGmR+QU6hpQwvLX6+ySUe/d\n10Y5oF6fwFpPTP3rH/jFpfPxrADyTzN9PPiLArunBf/9v8R5o2hXCD+sGkLq\nK8iwzoaynLikBmcKkTmTs4ZmPrMWQWHA4vGDBARSD3xhgKFRPsQ0DCxYr7kO\ncToK\r\n=mFTu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2885de69eab36903fec52b85e7001eb561624eff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.78305b6d5.0","@material/base":"14.0.0-canary.78305b6d5.0","@material/shape":"14.0.0-canary.78305b6d5.0","@material/theme":"14.0.0-canary.78305b6d5.0","@material/floating-label":"14.0.0-canary.78305b6d5.0","@material/feature-targeting":"14.0.0-canary.78305b6d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.78305b6d5.0_1637783507853_0.7879703959732924","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/notched-outline","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.43d08ba77.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf6ff68f3caac5dec1136b8b69f45a39ca0d6766","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.43d08ba77.0.tgz","fileCount":33,"integrity":"sha512-S/boxGEL3aOimuIEZ3GC54tFT9s853Ow2xxE0myfjgxV7+1XphO5/huOF6NIqS7qBK5JaFQgPsNUCT2YNEVJvg==","signatures":[{"sig":"MEUCIQDhsKXY9su/FiqKZ0F1tbXsEIr5Jeo+8oT/cpGVR4h59gIgRbAyrd7UwkC2SYzQvg8iI97kF9UuyACNXapQ9uYuXPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqxHCRA9TVsSAnZWagAAM7MP/iCzKrODunfvrP6SCsVA\nOk3fD49BpoyJNVVTLhYwlj380MEFT5vDDiDjba5W6xGRHkewFnV9ncGFnsLl\n9rGR0lJnyVpQSOJdgC3/djBZK3VyF6rmgTlAl/nv0aOFgh+hmPijcnoimtrV\nQJzsv4kJm9Eb2TyuDSJxG4tbP/R2i2I2tQzkqx/bEqBD21hvh3RpmmGJD500\ngU1LDQ/yX85elDYxgfdLKuwFo/prlhZyT/YT+R5J1f4toxwijs5VCRT+ftrj\nFm7C0euQujzGVz/SYnP9i2BgSwTp7pBSp0dlxFbbJDmkPWbF79/fgnh6SOQ8\nG7CcgnZD5eDjHawSpuwmURj4vaWMxV8cPtIhtfUhIb5rLax3ZULsuheXqDL+\n8GBBYHv76Z+oW1vQ3y3g+ZPvPM2IrJRYbRf/agXhuU0dUSjSf+qF540oJAjm\nDjwH9iPg6GggO91xJw63DxdhVeEh9XigAJVKQtyPK34naSXS7OijmOTDy1Kk\njwQdKtDjbEzI+yhwVh5v5MijtGsWsQkd3WekKqHr6OCuvj3IB3tt4urwyvvQ\nnXVNuSboNEVmqOgJOrcy5b2r8S52paWI5KauQBYPtDROGHiBVbn1OKOee9CU\nXSteLWNJTpl6jGU4q5u/yjL5JFCUQuV8D73OCLDtydfrvLwHMX5pQBS1rWv3\nfFX5\r\n=RyFx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d1929fe60ad2c7ba249562f1c1702898df8f04d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.43d08ba77.0","@material/base":"14.0.0-canary.43d08ba77.0","@material/shape":"14.0.0-canary.43d08ba77.0","@material/theme":"14.0.0-canary.43d08ba77.0","@material/floating-label":"14.0.0-canary.43d08ba77.0","@material/feature-targeting":"14.0.0-canary.43d08ba77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.43d08ba77.0_1638313031344_0.9073493938817017","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/notched-outline","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.17a072535.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8eeb63d538bc85d6d3f30c37e07c41c8558714a9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.17a072535.0.tgz","fileCount":33,"integrity":"sha512-U5jrgMUHavgxF8K83OKSmJ+JSWK2n+VCiWtyIlgcs24vCk2mT/Yk2pQriC8oY31sP7wn9seM8ZmSKeZv+ZxrcQ==","signatures":[{"sig":"MEUCIQCbc0tLNpNVgVvD33k94uJyfdjB71JR7lz2zcLjm1Xu+AIgRZ6AmM0q5oytMCRZgLwq0KzaY+IiIKslEvSxJIhj16o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQsSCRA9TVsSAnZWagAAXGUP/19AdypasEIl8Vz0Qhrq\naoLHB0wWPbkk0hL4rsBHtmsqwDdrxmNRqieToskxAu6pP44P4+TBw9lR6dzS\n5ojiuf7jHXlUeLydjrXlz9xTpwHE/tGBbFkoLCF75Qdo3KsO7sylA22gPJKz\nZyh8u21z8kSIOexxW0bWjg5/9k/uIUB5I1HHyBnFx9QHFabKvPQRy6n/xcTZ\n8CcZ45QkvPtbTd+ttUgACqelXEng3EXfwo9TpFnzd/fONqA/0lQu59gJS1BX\n6ktZJ3psJ9YWYNuJX4To54yrpBzXxFP9VZDQDiIS4MXg/O4vbouwkE6RcFw+\nnkx7qOsdUQ/TcTakmuNLTjz+SIpibRTqLbpc++CnqQWaTIUBOMUFcFij13vy\n/uY33YEu6AwgPZCzJrzIwPdzLyUYhyC+MCCH5WGbETcK/kBloifLZntpcrhk\nhd1B19NYEsJdcy3E1jhSFEP7JPYkjBceB5KfVQhd/c93nRguAljou0hmIwCG\nTxBbyWMylZPgu84mtGN2P3Je1QuSEKdaz3TOGgGaGvc19f4w73qo2JEcqFjo\nFf+k/eEaQ6rYzMQ+bnvqBdIj8h7xypfvigIW8MnQDZGFJmfUplmIWV0kdAwf\n+kmaPQKEqAPRmhWvZfQ4lcjQArvnZOlWUxO8SEAofVBW/9N9YtpkmOUJQLDr\nM1lk\r\n=0F/M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"317cda93b55159038a12575fec5c35e9ff5460a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.17a072535.0","@material/base":"14.0.0-canary.17a072535.0","@material/shape":"14.0.0-canary.17a072535.0","@material/theme":"14.0.0-canary.17a072535.0","@material/floating-label":"14.0.0-canary.17a072535.0","@material/feature-targeting":"14.0.0-canary.17a072535.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.17a072535.0_1638468370143_0.7260577083063742","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/notched-outline","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.5d809696c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9aba329edd4e176d5bfc41fd2b5bbbf55e33564","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.5d809696c.0.tgz","fileCount":33,"integrity":"sha512-MdFeUmcpEhpHJ2lryBma36lJCJN0dVI6zbeC8x8vgADvY+QdbcQIAUnmXRse7GE+NtGvMWmDOIRDGQjDs3ld0g==","signatures":[{"sig":"MEUCICrsEiOvLcUDiJMedhD2WHRlW9/D3iyfRqAXxbd3+BStAiEA3AcanDqZRlQ+JGTX7fTCxZvrJIX3D6lh3rMYjee5fpY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO8vCRA9TVsSAnZWagAAPckQAJ6k6n2U/UXxSToCjFNY\nEp8AB/183lQeVKO4d4f2kAi9NEEU/0/rKL0YajEClRjiH6hszQnyOg8qM6Q7\nt1shLea/FdCznZrBrE2zPXjdnAuhCE+wKJVg7SyZpx+JFm4fXw2Zm2BZI79g\n4vD0NfPOVSic9uOfN3ZAHUSMPnZFuphs4YcdEbcNVrJzdThkvESDYpapKjJn\nFceT638P2OFnxT1JKFlgMQZJODg5ELgxGw5QSAIj52XwDjp50WmYtP9qWUJH\nyWW8mIGSKDOF91KM++BtCP5GpF7+DROwkge2j1CwZAnn9JcxSKvJ8kJLlGr4\noyIidiaM/qcXHbusaMqXKgjHITbMhbkLV+mTjBebHWCpAmMlrp1jGlxH6zSY\nrxJI2fmIJBalhh6duhw1EJcFeHNNLJ3byT5v0dnNcvbSo9xq2fj3TaIhf/qr\nuz5PuclLAML6nx2tcJQwjLAOkbqv2ZayuQt7hR1dRePo/ETVtxxdc9cGoEfb\nbKYWGwp/TjVZ5qOfdzoETAd+d4mQ0wyA6S1ZZRYFNUH7ZiwIo2jvar4mY+7k\nhuZ9woo5Rt8eT74aKCiaPxwdBjgNywoRl64FVZBcArwKVA2AaXWi8wsG6vPn\npyf0ErDhsgPv5+eCYqDx9RTUMEDwsLld2ZWlVS3HGt7glqoeANzydiSCtIMg\nD/jf\r\n=vsGI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"955aa3e4252f722f096ceef387b285a197760b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.5d809696c.0","@material/base":"14.0.0-canary.5d809696c.0","@material/shape":"14.0.0-canary.5d809696c.0","@material/theme":"14.0.0-canary.5d809696c.0","@material/floating-label":"14.0.0-canary.5d809696c.0","@material/feature-targeting":"14.0.0-canary.5d809696c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.5d809696c.0_1638985519181_0.5054670441067763","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/notched-outline","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.b6510c8c1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab6a31a7e2d4b28782fa194e2e82002c308596ab","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.b6510c8c1.0.tgz","fileCount":33,"integrity":"sha512-SW7HQsb5vdgbVL+GdkMsAqUyAqmy/01zmTSPv9YEqgm212NssKhc4ezbVrxN+RhLtX8eZHNjpWTw9PaPI8njdQ==","signatures":[{"sig":"MEYCIQCpifBOfgT9AfqKn6U9dwd1Cz070xkdH7zsS7t9TOay2QIhAJdCZxco1UQ80XW05kOBYMaq9VoM2qgijJX0QnIERcrr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPRwCRA9TVsSAnZWagAAnSUP/ieJ8ltMab+QKlAvHP0W\nGiIYlX1ApoPrgWXwB8ZmpY30e7Uvxqzx4t+k17kf/Mfx5pR4lbFgV0RYNjZn\nGv2JeRqCl/hSaEvzg/qZU09aqpVNuiO6e4mn5Gr3L8sdZ8xUj5S3Z9e/c6vP\nCpugxyF19nP08Lf+et9duBRg0laD9fP8S0Z9pkG4lFW86g8ry6ULdX3k28mT\nG8gP9kd1PA3cFpFlOwOr55LeFL8LEHL3YsdxVQ4lURP8341JQmtkTYvNol9j\nKLKPVCgoT+tRXWFxv/XnKtGCnMOLV5i+OWtsLlzYRDeoDDEPkBt4xhUeR7gE\noOI6wCD8d6iyeE7Ucpm/pA01A57nZTUUXn2kLIvUohbuL4R6HnAlFy7SpMqn\nu0yNYQu2kHejH/0jVelrQEybSfCaYLyboA5MuXL69cikxY8CQQ1IdcB3xj3U\nlMGUZHzyvqeU09rhTTrE8WGSJIudHbKzpu3WN1AEfE41cACVwmzu0FSl7XvG\nBIScxIreTpuYsShnf+9oZIxBHxRvKtn+/Pe8nkxaL4Wv8/WvdZVAGJUiMyzK\n3TIRUgp33yJFFGnWz969CGuJDt+Illwwao+gBARTpNfKxtCt4iOThmEEBkmg\nJ6PIzP68POHveiAsw7EWW2p4OuUz4+d1FMdqqrAbcD3/jQ4AqMO5f2Aq5ACt\nkOk3\r\n=YoZt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7b9b6695d55be857206c67de94ea9741aa48bb38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b6510c8c1.0","@material/base":"14.0.0-canary.b6510c8c1.0","@material/shape":"14.0.0-canary.b6510c8c1.0","@material/theme":"14.0.0-canary.b6510c8c1.0","@material/floating-label":"14.0.0-canary.b6510c8c1.0","@material/feature-targeting":"14.0.0-canary.b6510c8c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.b6510c8c1.0_1638986864336_0.7787757909686834","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/notched-outline","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.f460e23da.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"524ce7a4f2832ee4954375eb131ee78461c7655b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.f460e23da.0.tgz","fileCount":33,"integrity":"sha512-dDk68xuDVqV94XApBLmoHVaY/Yap/baO2D12ZUw+sJ+eQmGyQ3fhz24Ta7k1ze+gg7uclQHcdL/C05UsQvYE6A==","signatures":[{"sig":"MEUCIQD3FU1hUObleCNZLRThk9yP2a1RivwhDK1LeYRySShy4wIgQIOeA/LQlT3ng/Om+HUmNTfQjiip3dS2zBgyIqDDLUc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3GnCRA9TVsSAnZWagAA2CAQAITJSlpjo3Qd7JwWE9+T\nw1rkwJyn32HnorXPl6T/T7j/a6xp/Nf8unJmvGq0JGyIjAGbUXf9z/yWWdhS\nJRyXrAF8wLqp6ZQiQyk9lugLvgpz8qk0bsqKCL72J6l+M7eFt6kLjPxKg2pS\nGfhiEEAWoiGkBfZGhHyXe/NGi7Dk4WwSNga2fwr3jI1e2xNIRoU9rV1ZsKeL\nn8HoDRg4MmeUq6djueohFGFf0I4ORP9lev2bT35FD7qxTzUlrnTaDAZOhKKj\nkt6y8bycoYpUguJ7o0V0xu7Mi+CGbB86XuQdQcaczAL34ZX56SaCK7B8IGeY\nXNU1kGG7NVfxrR/DPONUKejazmc10v26lpGqIXiPql9WbAi90JQ+PIh5V5+2\nx9DcxVxds9mbfehF8SL6XRwmbwboCMgpo5X9MQTMDhM32s/caIq51Ud1NsrI\nCRM1ZHZZYo9W6zXjmyg9YS7F4dqqfMKW62teentdEaNKVckog8PTjEH3a0zA\n2VEmi3249pc0BA39/ERWRZTlqfyeMYYiQZmV1QA3ObTWI/sN3vxrYqwzNK1q\nd39tDUaTL4aD9f78sst8qGO1IB4zHP8d/NJTRjtVmf86w44NK1HSM9sI0/lw\nfD2btHDzK2cQ71VP4ptBYZvxeHgX3qE4OVS1M3SrFvzE0clZcIT5G/KhM68W\n5Mjo\r\n=2CHM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6d994090cf732fc4f1fb93f91d64e265cada1b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.f460e23da.0","@material/base":"14.0.0-canary.f460e23da.0","@material/shape":"14.0.0-canary.f460e23da.0","@material/theme":"14.0.0-canary.f460e23da.0","@material/floating-label":"14.0.0-canary.f460e23da.0","@material/feature-targeting":"14.0.0-canary.f460e23da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.f460e23da.0_1639149991758_0.7080124778573327","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/notched-outline","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.7d8ea4624.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"967cea3737a744bb28add033e517b568ee0d0b4c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.7d8ea4624.0.tgz","fileCount":33,"integrity":"sha512-JtgUueVZnfFalYHmUemMf7CANZIpudxRB3ZZkWqNPTGCK7ATTvKMUyTvs/cgXfUsEzmD9xVboupIn3vsiq7yOQ==","signatures":[{"sig":"MEQCIFd16m4AL4BdIffBDCzp/1QNdlIPTFm6jv1uzxLZw0BoAiBoT89wnt8JdlkFzPMD6u/K1MqMbE7FA59xltajh7NOIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6rBCRA9TVsSAnZWagAATVcP+QEixy2oPYBaNFWkDIyt\nz5Ab8GGkshO78MVLI8ZUdYdOyhDIWwa0JnTiAVzGsCcjikv0vkLanZV95GtF\nOaogCw71qb7EfTIQWUuv7QM3Sq5Mpp8HfVTmImg/G5aj6kq7YU9W+j4aiB+7\ntK20Qlc0w6MXXA8Jv0dCurmaXeot3tyGyeClJOgRt55O05CQZyTfJi1dOvKd\njjWb/YHnnJNJSiVTPpQhKaeZbs0gxvc1ZyhJFE9qA7zd2C2qNKVv+WoXhFPH\nax/3RGifhUcpITfWhp8qB23YwnShvIWUOk6B0xAKp/iJXxiztzAfz1fvujXI\n/q3lDzlnARpDZAhu7hTktoq+xRI9yMUYLcoo4rezDzYawpc6FQvM01/BaO1T\nv4ZFjfGvyUoh9g9GXLmHOoa6EiD/5YIxwgdSLLnp2FECNRCheDefNVkJ1ckn\nKHOkOlTIZT6VY/S8VDCaFFm1XeEPXcCLacIK5A0LLBlFbtXrTctxE9zQjvWV\nsLWt+XBLQW8XJm+YYBOgTPy2yo2tJOt1q09EP22Nq4/wBwMDPMPpQhvlZTpG\n9EyIqG9yKVPl/rK8bm5NqRoQ1F8fPhE65X0B1hdyHxqmT/V8IMBBgqFDDr+Y\n6oEJQSC1BV6OUVwECffY9ofx30vMUNZHw50/nG+cypfgVut+j/ohLuBD8HON\nvPFp\r\n=W5Pz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c5733baaefa11aaca3bd6f32fb2ac29c20894738","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.7d8ea4624.0","@material/base":"14.0.0-canary.7d8ea4624.0","@material/shape":"14.0.0-canary.7d8ea4624.0","@material/theme":"14.0.0-canary.7d8ea4624.0","@material/floating-label":"14.0.0-canary.7d8ea4624.0","@material/feature-targeting":"14.0.0-canary.7d8ea4624.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.7d8ea4624.0_1639164608898_0.7909364015724794","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/notched-outline","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.8fffcb5dd.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0e044c6327dfa33f4102c41188ef3ccfa6b5840","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":33,"integrity":"sha512-h2Ux+PD/Ginnss2pDE9n+lKtH68ei5ycOwYSr9Hi6iFKTKkABKOsFRA1YlbGKv0Fc4wy0r2GrwSEHLFSz9/Myg==","signatures":[{"sig":"MEUCIDp2vdQj7dMNELRhWA+NgA+4D7UbjBbrSdYLqn7t+yTbAiEA47rEt/mmyL1cS+4ZQkbR96gkosrSf/98WV+qxoZTAHM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFwmCRA9TVsSAnZWagAAxK0P/1C7kKbUdmAxN6F+wrJN\n8gZxPObMdrnYcfXpardSPYcY1FJss+CRISCXAQoA5DHlhkLrogmPOX2CyVoH\nzj53sWxQv1G4G286TqcRn3ro9YfgeDjyhgi/NHC1JnKVtNeSbc88xe5Jl8d2\ndtYHQOE2IPxhJtXB6varhypGOMtti8KGyhNRsI6N1vWlDYWlfZeNeALBFKqy\nWA3//Eut+Ze+ll7zjSHpa5ZVId3jcBmB7e6Fe7ifEUbwlUltTo0Ucv1GdAhW\n0liWSMM/mWEY+b7KHqld4XYrxqaHeDrANEUA96cS6JiILk7x/lGe9wDRInUr\nb57zxanvozNvEZEg05Fus0An/iGJRlq6H34ERDVByD8V+y1fPMkfiTaIg/2R\noq/n7drS4wC1Rgjt0NwRjtNFDH63ACEldxQzBRWnmKvW5Tj/lg/0cnZ8lygb\ngfrMSoPJDJprS71TL5wbPATSqMg4+3dkgatKTtAyA9wwvvFip75A590F1AZE\nznZ3vnEDfczAtS2LwGXaccyMwEZ8DIBCxDfFoA2r9S6MN0HlEfj5kfOFCsdm\n7FC/GcN7KC4S45Dw2QUKbsPh/fenABBNh22Pz5mCoUaGF6SU7FqzJIpe80l+\nH895hJzu/sMyzzT6hgEuz6JCH1Hlr53Ub0Q9H6vTf5v3pT40cVQWlJ8Fqt8u\nskks\r\n=QwH3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ed22e4daefd7bb5e95668ab484a3a4a65793437f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8fffcb5dd.0","@material/base":"14.0.0-canary.8fffcb5dd.0","@material/shape":"14.0.0-canary.8fffcb5dd.0","@material/theme":"14.0.0-canary.8fffcb5dd.0","@material/floating-label":"14.0.0-canary.8fffcb5dd.0","@material/feature-targeting":"14.0.0-canary.8fffcb5dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.8fffcb5dd.0_1639472166722_0.15506105179537877","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/notched-outline","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.21e1cb9be.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cf8a106cb179d232926243d8578c5a05d77eeeb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.21e1cb9be.0.tgz","fileCount":33,"integrity":"sha512-xmPDJRkzrPGb5xxH/VOdMIBgWS9WKKstRCOgxbthBtp6YXwqdyb2a0szd7sp6BPNa1NdSCywk1jOqk5ixIWIIQ==","signatures":[{"sig":"MEQCIA6x+Ls8ApvHsoOmG7R9AQxmUjjXmpGkpiXqYAsvaWiNAiBtFsBwbu9uv/dnTBkcsOjnHeHmXNhUnuJ+iI5xNDlXTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPM7CRA9TVsSAnZWagAAzkUQAIJpmaBFnV4rul+yLi8i\n58aJLV6xrz67NWRCl76fs0PDHwCgk9q72Pl1CGTCE2xJM8lSItE9omGT6P53\n9cxSqjneMZpcw0ejILxL/4o5RCXlWo97Wq971K4gcTlk8OGkaiEHAl2v5UsY\ng9hb6h9oil97iKVjSdxtSBi8E10uQwXwXvi2ZsVQjNaQbURUVs8p+thxnMjx\ny4t+WYi9z0imTUSCOWtBYPfS8BjK7ouXEeLY5XNKvcgM9Y1y2BCQBXW3CtN6\nJeCTHy2OBoaFMXSUcfLzE0SGC/Lu1jNtq6MTx2fFzXofs4Gantlc0YspcbBc\ngW6uuz84A91tid4z5/Cqa9TTzzxikDZ5FVrmmGKpgQiLlLuW7avozJKCeztr\nYheIKiWeR8VcprwDrQ8og2XoE0uOqbQUPF9uDv00TwAQv0zjTBgQHa9Ebzt7\nmeopoGbOXL0ssks7YJVx67fqA/hx7tKWxEz8mPBbVtkx2yatPO13P5BHulos\ndoXd+cAXd4+xAnHFq3Y3fu/eP7RSqLFlPIrP+nB7+25vvs9WwXTIp31nQbrp\nDkcaQGhNtiGqf3y4Js7tnnBuoYZ/F2b+JRcc8+tbNMdalYKoqI6PgYB98Mgz\nH0NXhFJvJDX6/BUhtY/aWQN263ojfkY5OpHCpE/SAGK+zes4mCmeA2ishzVb\nDk38\r\n=5b3t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"091bafb203d13305d394af0cb6817b1bf05c64af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.21e1cb9be.0","@material/base":"14.0.0-canary.21e1cb9be.0","@material/shape":"14.0.0-canary.21e1cb9be.0","@material/theme":"14.0.0-canary.21e1cb9be.0","@material/floating-label":"14.0.0-canary.21e1cb9be.0","@material/feature-targeting":"14.0.0-canary.21e1cb9be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.21e1cb9be.0_1639510843271_0.7992150853393569","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/notched-outline","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.ba78e8724.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b001308ff2bf93585cc33a4502c6089c025e7e5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.ba78e8724.0.tgz","fileCount":33,"integrity":"sha512-3JKs3CN9FJ6jg9onUOAChvlJ9NCnxNKyIWCb/zL+iWNF8Ctj2LGfPORxSphaIPifd7bhW5vjdFsh26Yhv1tFCA==","signatures":[{"sig":"MEUCIQC2eR+oTw9YR0QitbJLcCPT8qUZ9S9OU8XK6K5vjkOZMwIgbEMSmw9rh8GgHDAcHUMvgnf6XYwjCdA442c5R4aA7gM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumiwCRA9TVsSAnZWagAAdMkP/3XTeyvUM0OdPVBwgVoo\nWxr2WX8EnSd64t4giQQl6HSqycIbvRJBS1xHAFYDZxEalDUSgfuxA5labyBo\n4tfhnUs8T1TGNwfHw8Rb9P9Ex767malUmyrbTjUZ7eonlN78d5jPpfA/LcIp\nANCPAGh4vCqMxYPdaH8pIQAOOusmFPPuqCGZvFLjWxgJT8otBI7AP9pua1ez\neC8WXdH3yUTWX57rrkVJwLDmkS59uj21vbSuh5+y+NfNv3PmczEmIl+DQLRH\nM8fEJxOrID3vxpfd057gFtdamV2zXfZYwLJK/51cyjHABFAIv6zK9W48eGsE\nwYv6tvMI9UeF1j1ZEd6Z9xDxwd/35aAlSQyOmjnqu2KttMrmcJ+qyUHBS0uG\nBg2XutDUq76ZYkvZvSU2kd/rxWG70yg7TnhCcxpLCGVQy6ROz+3rlNjj8bur\nz8xuaZ0zrAGjot8PoJA0fXIf2ZRKk5L4rNFwcBPLFRKG4DaM57oktDf+4m7Q\nrVgQElEnSrM+vD0GWAh8JeFniBO3G+Y31CNYD9f1imwvTvBpv73WvF2DuMBH\nW0YPoY1kKR0DpTJFJdllnY31sMD8h6zfwRC4Z2wUPbvGTqXiy0qWaN/nfn+n\nz4CSI+9HtVnAwkc9TPqhrDytJR6drvpWnFwAhjygJk6xf/35IDwtGhDp7l2g\nW16X\r\n=774H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"396b66ccff73478ac662f95bc36087e71ae8d980","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ba78e8724.0","@material/base":"14.0.0-canary.ba78e8724.0","@material/shape":"14.0.0-canary.ba78e8724.0","@material/theme":"14.0.0-canary.ba78e8724.0","@material/floating-label":"14.0.0-canary.ba78e8724.0","@material/feature-targeting":"14.0.0-canary.ba78e8724.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.ba78e8724.0_1639606447984_0.9152825068559969","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/notched-outline","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.e3e073c00.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"744d5b6fca22e57a00b54bf114807b508ddabec9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.e3e073c00.0.tgz","fileCount":33,"integrity":"sha512-X4mL4gPwAN9Kq27AvULShhEdevZKf2Dx/0ZSSUs+/CAd+CjZmSrMTPeQVqNF085JbmFuhSgKDpKO6he9xRH9gw==","signatures":[{"sig":"MEUCIQDh6St/eQEQmC2ckj4csmMFnHCAVuf1D57N3Sr63C8wwQIgQewqjKD5RtUTVoUYsmlB5lQzaJ+V3MhvZYK0jSrlL2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPFLCRA9TVsSAnZWagAAI8IP/Rvfnl5k4zYcgpDflMVW\nrBgmgyQzajuY4jhnhkAxXaQJIBXEIa6hWPfj3dwgBCdqN+6ETAyD2692v3hr\nH+nasCNRPfp86F8gFOewULfcB+TvqMwKAiO/xK7u22T9+RZEXnHp4ufe68D4\ny6+qvlZW7HA9MzGRVJi/ZQ9hXBAKMYDpRnDdiP8N8kLYo/qJf0acOYluuiRT\nrlDLtJpxAecj4ulc3kYUE9YID63PRx58sXt3f0YSzJS9NidK7/KcJvStmT2c\nUU25RhdK1KEKvEGOMgrYG6DSTe/6Xx3mUAJBL0YPxvQCm6QMwNEv1/X6TDO4\ntSrlsrGfeBPWCe6rx4JCKm6jweUVFHYN4fJFxOQd1lU0ssGI+i603U8I1bF8\nsXiTPYXn3dWtokB/P+/MxTSEMU5JDxCDoTI69U6arVy3FxYE5bIjvWc3V/4K\ntLj6a+3s9BhfXAG6FPswJoCmxRvKML0ir6SPAqqS17jOYtpSJBotcP4Ov9Op\nLyMOcPrIZiWshyNZL3aDLQFTuymkGg6smElFiYF2Hlm/DaRBcUScl3r+V5zQ\nZINUcLolMOPCHucoTGm/jIr/NCW8CR37yka3UcP8NMGt9NT1xLUSQq/Pz5v5\nGhjCW5EXqpmEztYIlmaR34w5v8ReWoOZH8h9/lIe2tBVUCHviil5Dk0n0Cf3\ndnj6\r\n=KeJf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6ed0d4833cc10e9b5406989bcd66b072aaa259d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e3e073c00.0","@material/base":"14.0.0-canary.e3e073c00.0","@material/shape":"14.0.0-canary.e3e073c00.0","@material/theme":"14.0.0-canary.e3e073c00.0","@material/floating-label":"14.0.0-canary.e3e073c00.0","@material/feature-targeting":"14.0.0-canary.e3e073c00.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.e3e073c00.0_1640034635806_0.4181150855383733","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/notched-outline","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.3366a71d7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"addd03e05dec1be4a96e78ea6f0f3561c40f7234","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.3366a71d7.0.tgz","fileCount":33,"integrity":"sha512-Toa1AGOQvpPlUHktHPEF0JWz+HYHq4or2Q4NAU7fKPZX4xBARAcPcBOxePJxDX5O6GjKfUidq1eFAL7t8MgfIQ==","signatures":[{"sig":"MEUCIQChnSM5fpdp1+rnLhJak2MZLjv6DXkDbohjPgxnKZ+8HAIgWkBvrmAmlE1is/vF8PyyHip25SF2GgzkV1fKZQNBG4M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxsRCRA9TVsSAnZWagAANKQP/3zJ04T4qHc3frieGv+O\nGWj4FZDDxpWgnzrpKprJLSdsgfeuEVr49XBeCHuHHt0LfcBUGFtPjPlUdbth\nVfBj9+LnNJvm3lDbBnngzpG+K06LOhx8o5oiyeyqQTZGk2Bkx4PkgZknm5QO\nOYbvFZbWE2chK5ia8SUT7rnaJ/0CVRdXoM1I93BKYTwuZdl8dn1x/KcZYOI4\nnykO4+s4iSN5seaibw57PHOp5/UnohXnyE8PMtEpsuZc/5/fb5BbzMmB9RYF\nJE0+9+elJQ1a5J1TkOMZlRHiq95mN5lzDc5cOql4tGkzkHhQ3JEkgt91lTmd\nalzztSlaAk9/h6DjCf27rlTh+ESAvkxz9mF6SrroMczmkw//lCz05w+PPs/A\nFWeQRP8JnUx1xwcrWi0qHYUA9/P+ElfIrBaV/HbBbZy4ZuK6DJ3l3KGbgcRB\nUzOCMRyUpRt8XNbQCXdvxOJLqrpljs7p5RNl/jQ1ZgNUCQht9AnLd6kXpUyY\nM6V6n4wnJYfZC5dBr8allYYt0+JXo8vbWJr4LKR0pua+YAggWKSbxB2F9QGK\nb89i34mIOhcImV9kKisVSt2Lb71TtCIJl0L8nE1RZfZRclldhCClFgMfqsF9\nzstCXS1aN9LghUlersUkLegwZXw0MryQ4oCKgYuIwL8TB40brx0EUqp36oF6\nQzM5\r\n=4E+J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"36f8040c2829cecee06f5c8f52e08e9cabc9004c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3366a71d7.0","@material/base":"14.0.0-canary.3366a71d7.0","@material/shape":"14.0.0-canary.3366a71d7.0","@material/theme":"14.0.0-canary.3366a71d7.0","@material/floating-label":"14.0.0-canary.3366a71d7.0","@material/feature-targeting":"14.0.0-canary.3366a71d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.3366a71d7.0_1640176400996_0.4171004268446823","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/notched-outline","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.c047f7c19.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be78e03b1171c29e1018dc0977bb30bfeb3c83e0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.c047f7c19.0.tgz","fileCount":33,"integrity":"sha512-VT71ROAyvqIVq2Gy+sConIxW0TIERVwjY7HV7pkmNtcUKQVAkufg5Pm4UF9whHs/lj7kgr6NUdirqoEfVwKzKw==","signatures":[{"sig":"MEUCIEvUmN/CRPVYTDnGux5D/9kJaAxQFjm5AoCNBwKXkg/KAiEA32MtySeK8982RViJEgZTP/jVF8sMiPZDEI+/7CpIVbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1cuHCRA9TVsSAnZWagAAKEoP/0uSJhTp45uL2WKJsp6J\nyAChQpVjhDMW2cjNkQMrBmaLTrBthe+qVRq0ArQe9E6aCbERw/PyZVKFXByS\nxuS0I1oho4HlgHlSQgkjQP0vAe0Vho9B6z+a/7TlpdLC/bwE3e9e59v485AA\nJjpBY0HlEvY/fu19DIw3sMvj1Uc5fACjKaKAiOeZJyOrzuRJdCWIeIF63lv8\nTpXNutoF+lxyiDnFMJu/fhA3hwZW80KCRhyMLjbLtV0tUN8gZqcCW8bAtL1C\niOQoCUJFRuU5VpbRs2mJFlTzwJplWSjVfdUta4dg47M1cvCZQHP53JFXQQns\nLW2JV4vzuGW0OQ2cIkUAknlRNqDQT0bZRo9RWwWDzGFCGT/WUopQXEEDXO25\nTMyyeVdl0RG+/b33iPRho8pyhaFU3OGpWxTf6yBXQIwAYJrjq+MT4luLQMH8\nja2JY7HiNVcSTAckAWo9L3Awbs4GZmXzAV3PckLku5S0vWp0nHcwrPpj3SJJ\nHpOGp9USf8f+QHK03qvFqRasf84tBxTqb8nz1HaQ6QoQse+8wGWcnTGpe+Ab\nugJqJulrWx8XT5bZ6Mtkv+WnSgf4V2MfeJZ+oup3xrIWeXPlXu5Q7tXgABhI\n/cXhP8Vutj83h/q9dmWgdE4ZcqxFyQA4wILWe5HXm9Ioa6lVvVZJHPCDpAma\n0LbY\r\n=nLfN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f89c0e152ba1bb64d7b262b279d38cf5d93dd788","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c047f7c19.0","@material/base":"14.0.0-canary.c047f7c19.0","@material/shape":"14.0.0-canary.c047f7c19.0","@material/theme":"14.0.0-canary.c047f7c19.0","@material/floating-label":"14.0.0-canary.c047f7c19.0","@material/feature-targeting":"14.0.0-canary.c047f7c19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.c047f7c19.0_1641401222914_0.11737199351971905","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/notched-outline","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.05db65ec0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3f39e96528b700482e296cd892039c4e881f68c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.05db65ec0.0.tgz","fileCount":33,"integrity":"sha512-rERwTTPaML+gd0dMCsStkKnNUhZCWvA1rWaMC1CfezTcu8D+VPmOuT+30e7NgYp4OIu1ZDzXbsLkP5XmES6sGg==","signatures":[{"sig":"MEUCIQCbQMkI/HdWvL7q7gJVSBNnfvBC1XaBN4JIusvOpf7XqQIgYuWcs2hZeY3I2c179cDm7qtZJLuWtsbU8VTaV/FIPeA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yOqCRA9TVsSAnZWagAA6H4P/jRRw9w6ycgj9zqUlUzv\n0Qv4+a9OHfDdlvgxJhzUVVpDjpkuvS2tHaq7j1fS1glv0raW30ncnJ5jGowZ\nyNBMBWVnAHF48lt4zQy/kAx5lEoFj1XULiynzPwzojgooFFOoH2Pxfpt/Uhv\nbtqJbGSm/fQn1dNzFjk6XRix9Ezpt7ifb/RdhqXQvvGH5KenFxBC3AiggEsN\nsOJtU3dE/vpPcUJb7VAE3Z+lKrBfFCKQFgRYtHVn1+NPcxVLNaEvJ444JVAN\ntqe9uJyx0Ls+jWsn/UmyxXRNhqGtrXBUTy+W6eC2QIAEL6SRpT0bt/pDVB6w\nkxlh4xQg0CDFOZiozNH+mdIJDHu6MFJiThyYBD54l0ApDhq2AAXBhgMiKpik\nUTQ2vzxcVFgSFnzy0tmqALRxRgMFtGt/qaySP47QIAomfHCE9ULC2w1tAX5M\nA94kdZgV9lhU3Gg8GS/KdsSPqExNtCXmKPWXhkqr0sASS4ZLoDx8tVthW1fo\n5XG984rJsuw+SvpnEU3xjHFVi/NbJBUHqsiA/SkxGN0b8RK+Q6SqPXynzhL2\n972bzW3pvBppe0hbJtmA+381RAO6I1gFHgtA/jfVbOLvq47RkTvRB9T5N/PV\nPmVB+UZTVkXz46BHocW/53pzpotXkzByM1VtddizOPWfB0qrcnYJ+ZXy6Jzs\nCIl3\r\n=GmBL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4ee3c4fadb795ccabc127e2a968744c5bed23d38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.05db65ec0.0","@material/base":"14.0.0-canary.05db65ec0.0","@material/shape":"14.0.0-canary.05db65ec0.0","@material/theme":"14.0.0-canary.05db65ec0.0","@material/floating-label":"14.0.0-canary.05db65ec0.0","@material/feature-targeting":"14.0.0-canary.05db65ec0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.05db65ec0.0_1641489322587_0.022032932240774628","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/notched-outline","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.6ca8b8f85.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1ff757945eac6cce471a0853e9c36e6b2e8390b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":33,"integrity":"sha512-c9UYwRwaPYyjDjHSlZ93lkoyw/ve9N2F78o+fVXSJw67wp1G8qxhGNLi8BsBpzBd7HaqpxQ4wltxfBu6/f394w==","signatures":[{"sig":"MEYCIQDChhb7l+2+CTaFiWK/rUiceInifXFv6Nvm75qHZrwH3QIhAOyMahjgWiBpM6uD85wvxvfSexACJIDlxsPVJrwkSI/G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GQTCRA9TVsSAnZWagAAm8kP/0UFwwfcQ/+pwjJQMGvS\nHWPkoe3+h7tR6xu0g7BpYs3xqKf3VQ4sZQ4ExAYYZN6tHKKZ28mtiHFDJ7HL\nJMcJuFxnefcPAsdx28cGPziq6XIiFX5Ir3elfonASlrvJeCNfz3sVVAk89jr\nVYsA2trq9EO7uKQhWMbMDlLCO9aep/yRB2EY4CiJodPW/1BCBpW3x67g+K2b\n+8H3RwgiVMimqkn7QOhN4/0nUH993HkcfPOrkWxh29LU5YToab7uMTo8iGdF\njlIUbOTvG1gNjF0VTVD5lUu1EbtXb/KLVMmoYwlISvt68kdWIB5nzl2ZLsM5\nw/g6Gtc1JZiuOKTO1OZfIqwU9Ow3QSiiFASrdsweuRB/KdUNi/gYZpU6HPnv\nSc/0Fm0150nUkGAek32xOmM5fT+Vq6nJ9u5nlIZQIVBFs+YogVcz5vaLyJWU\nFzs/JvwQgq1XknCyspbjpxegw+ZNSDnPzot0oTsJGBFdZy13PhAwH7kJLe+G\nUFCCtEI/8kn7v3a301kTuFFc3lSmHfkpWlvKIp21mylfpDKg0cLznTm5ohBG\nqzPI3kMl84iHbb1dSL+YqylsaP2xtw9qjU/dxSvmt/dk5BH8cbL2jrzgjlze\njBTGHOrJNEd9/876r533xBqMBQcdj30JSPRWTOXwI1wv4R6GQ5mmNwIEs1vr\nD1q9\r\n=dPdc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b3237bcea052016fff824f201904a358e2cbeeaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.6ca8b8f85.0","@material/base":"14.0.0-canary.6ca8b8f85.0","@material/shape":"14.0.0-canary.6ca8b8f85.0","@material/theme":"14.0.0-canary.6ca8b8f85.0","@material/floating-label":"14.0.0-canary.6ca8b8f85.0","@material/feature-targeting":"14.0.0-canary.6ca8b8f85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.6ca8b8f85.0_1641571347711_0.8489434474010977","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/notched-outline","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.173ee7a7a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fe8a56c13c2968221aa4041e7e80c79f67d3e95","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.173ee7a7a.0.tgz","fileCount":33,"integrity":"sha512-hfxm6NFOp1u18gk3eyk7yn8s3KfRlcPMy+ZpZEdV6Q+o0HCElVyjv9eLsziPrkEOJB9BjvY2w8x7nFZmwhualw==","signatures":[{"sig":"MEUCIFIvdAxvuM9RCcHxmSEgUp5ragjLWZCd/Skk3ilc/M2uAiEAo83dWLq8h3OuwxGfxnhhP9MJdUevM9pGwaSc7Wifdns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GTzCRA9TVsSAnZWagAAQH4P/3YF6ShoZa1ISqut2pKT\nPgya+nMm1eNNr8FGlWm5dAjy49Ep5Pn4XAIOJkc70ucNbIEDq8mDj8wKNTkc\niz9+xfj6sO+WJOVQDc8RCa66K7X9PVlpiaSH2EngA9bdEHglfcMXcWRRZv5u\ny9S6aMx6+37ie0QRya7NJcvRKNMr+FOnN+/hxiQxAQc6wrrVjWKLnH/4fGko\nwRVKQZz8w/EoZvCb9SRWXXmLd9cg/SxhCVrkHlUG0eQObLpJ/XCBaB6udEkq\nsClXJtKX/NA8oLsN0C++UYvEHIb3iss4TjFW5T5pIBn5dqIGfiePjUJk7tXK\n96JNPXiwywEIVu6Irk/SjDtnJqA5d/Gg+yYqjolZw7TZC7f0hgW99/lr1NDH\nNZXB8x6PfoPMM1wu/AFI0+QEujovhJ1fcLdXHeCEcniNC93sD2rHWz1QVAE7\nP3le7n6mnBzsFLb0QnmFQDuN59FC235ZX2HKL5zdQLnIWIbKydSjZ2TSuWIK\nmI0UCGFGNrEbWWBdfcEOPQJG6F3WNQnpylbbFmEOwYD5MpRH5Ml4jiGYp7ow\nT2YqIAuA070a86rELUyZrup1bJpE5NsG/aNsGSX2yzjYip/Fr8sRlkZETEaL\nKQvx4vqbu+dOy/KPEy9v02aLQQCc+1tWG7MLneHJziCwAcPlzzH8zMHXQ6KS\nKHAw\r\n=Y6kD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f034f9d63d29784b9608c7c25ea586070efbd27a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.173ee7a7a.0","@material/base":"14.0.0-canary.173ee7a7a.0","@material/shape":"14.0.0-canary.173ee7a7a.0","@material/theme":"14.0.0-canary.173ee7a7a.0","@material/floating-label":"14.0.0-canary.173ee7a7a.0","@material/feature-targeting":"14.0.0-canary.173ee7a7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.173ee7a7a.0_1641833715326_0.2981635476592659","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/notched-outline","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.b704e4dfc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee74392d95502842c32ddeb7e794917857c805e3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.b704e4dfc.0.tgz","fileCount":33,"integrity":"sha512-0YMn9E184CSFoAit2bLvhuBf8RevFBrgFOCR9CdRUqsDPj6fKCW0fMYOmi5u+CJkA6aJWYp68qn2HwZmIm878w==","signatures":[{"sig":"MEUCIA0rDXJiALBS0vk9xX5BSLh0is3BQBPZxVu+qvcBE3h6AiEAxzPwkK7caHlims0Ppdd53RXeqhuFbFux+OT4Pv6re9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3HwjCRA9TVsSAnZWagAA2fgP/1PXEel1+nYpkRBNP6Ii\n1JwBoM4lfU+hx/q5v+rXpdo3HWSvLEdxP8uIUxL6X7XS+cATB9obSqAZmt8+\nz5b31NvDOqviohPP8Yq9noTZ+DeWZ42yEJURt3aRWoVhoVPTezZwGsZXoC01\nvoEKGvQgwl9B8N9+hkFVjQaTZDrlHuJCOEVuWaplcyQAijQ7DEjoe62RMs3b\nAL2e/zsLYw+rWU6Iq91AJEPBGqZj8B8hTFkzJ7zCftK2rEzgL6CF5xgQYh+q\nmOWbmjnxJKfRC+lfQvJji8mJe7zCgrXtOjDey+alL+2j70rtK/SchYkb+Bby\nyuZXJXtNnFLtYtx6wGUYJuOe5fvfRIK23zSeHnCSqNHfQ8awTm9DqAdJ1y1/\nbJ0B5uwpn+3E6boAxbAkhfC61XJGv6F0jQnfnQip4Q3Zj5S3TAgsqs41GDRU\nl8GO5jP7caDDvDEJXapEzfwEmtRn968mCkB0lEk2yLU3GiTXulZYnZU97i8S\ncU0p+7TAb9u31QlC2aw8GIQPAJVfT6BcElqdVzOotgQLEhsdrKppQ0oWIaup\nXMemi2BKu05cpb9E+Y5yKYLhylLP5HIIv/G3+BPpiXI/fFTfNJ8zuZPbbueD\ntkv5RPFN/rn+hCVy7GyduHixwrmZndPxzwKQMzgl1dw8EA/d8Eysnz/zNdeT\nUPip\r\n=V4hx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7aa8626c10b7e0fe9826c55e7f08c4ab0aa493bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b704e4dfc.0","@material/base":"14.0.0-canary.b704e4dfc.0","@material/shape":"14.0.0-canary.b704e4dfc.0","@material/theme":"14.0.0-canary.b704e4dfc.0","@material/floating-label":"14.0.0-canary.b704e4dfc.0","@material/feature-targeting":"14.0.0-canary.b704e4dfc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.b704e4dfc.0_1641839651426_0.8679719455104156","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/notched-outline","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.c14e977ee.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf5a593f50eabd2a9fe749b309f6498efe4469fd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.c14e977ee.0.tgz","fileCount":33,"integrity":"sha512-ccue6RRh5aBFXWoJa8beEzAT5s2HAcTpLVNb78EVOXgGI6M42konTD68MAdEd85iaPn9eiszkmwiXUEwnioHlQ==","signatures":[{"sig":"MEYCIQD5G+7xiJcU/z5sffJoSwcoB4C27RC5cXfXKCdknw/CrAIhAI1bO7OB0UNnGz5wLzfypaAFzT9z2BflSV9MLe8Iu6/R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3adMCRA9TVsSAnZWagAAarwP/jauyQ3RbuAwy04ZH+bH\nTdSvMkVfnzgtuDiIQtDAcDFyww2POmFRwWKzFsBseTuiDii3Hiow+/3MPqj+\nxD04Oq5Q3rfzfdUPzxWVbK0APjlNRR1M2eQhX0/eTLO+k9xKHJIkS3furmPA\n/3+KpckwM4SLvn4O3xQ+DbWpaxs4OPKVgRFjAdiLxaerHss8JOrCZAh7SL1X\nqqUjGFtoNhCQK1fzO3tcrBMlmJ7f9UzrfckuVoSsyGXUsweM5bbhz9avbmwN\nYL7vtb7hXTs8Re6iUU5j/HIJqdXs5E803bMCBl7iQ12rtSqIMJdpCNQFRXb1\n6YDHqeg94Q/CBG3lyDmAHt5KdfIrHS8Uw0K/eT+6Nqsr1NXLEAEzRKm+cLpl\n855KybZtGhVcI0qNgahxB7zf1k1AcmWPGDvpqiHuJsVPGfRgvAPyVzucqTxN\n62p7SinfC/vGKpuFwYIeTu5GyZFJ8plAkHM5usfxg575K6W8B06OBs6vMtvb\nR6teVhWnOp8oMpug0J2sQsJhGn7yk6nGcDqvtOn34lES8EXWoBnvl1YB0Ecy\nzc8Vwcis+/4uIj622gd2LPGFtGgeETy15GxcCecE1aCnUi//Aczu03mzMndF\nScrHWEoCM8dQoQh9o2hC7mOPMpoINucWlTjOEZ0k4M7S9aQ2zv6j3PmW+bo2\nkiAr\r\n=qA1V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9f7e1b7371c604a5d4692bdbe25aecc578fb16f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c14e977ee.0","@material/base":"14.0.0-canary.c14e977ee.0","@material/shape":"14.0.0-canary.c14e977ee.0","@material/theme":"14.0.0-canary.c14e977ee.0","@material/floating-label":"14.0.0-canary.c14e977ee.0","@material/feature-targeting":"14.0.0-canary.c14e977ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.c14e977ee.0_1641916236414_0.07263466155309328","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/notched-outline","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.b094eaa4e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b89e1ddac63dcfe025343137e5c292f49f261484","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.b094eaa4e.0.tgz","fileCount":33,"integrity":"sha512-QVj8nfjdJnmSLF6C0/ebChvFVNZWhvx9+iXWDlgvfYOVI1h3a2/vX5zVlBqaql2pXLoaOaz5L5q+cpUlHFUa4A==","signatures":[{"sig":"MEUCIQCKKn+ErKpjTOm8jiwlr67RMsSI7OiYwG3xCs5d5BSmzQIgA0Sv4VKvJ6tY85Fr1v/KhHOmZ2/jxYIZqqBWUtxTHPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cRICRA9TVsSAnZWagAAA/QQAKH+2daBmfXAbp2z5oVf\nkEnhg/QJXpHleQCvo79rafJi7udnMXuLQrpLCB0XVDOP7/CPRrlomXDgiIA3\nZovOSuhVV2cJZIwvKSV2tK00mQmbXGWYldHHtkkQN9W0hrGK39152IHXDJbw\nY1H3ZdJznlhK6/ffaBS66flITVPvKv3fIzlHWnrk+e7H7PJYnSOEG2yqp4OS\nXx/r3Uy7FbPA5c8f+WWZOxuWX+p2EDofPnjNlVzHFNCs5r9vGTKRMcH8HBU/\nWsQzy8PzNggaA+UHQskeYQPTNbq/B1t+bmMzxh+V9hjPdmOz6QAGvUAHL3zp\nNYdXKpG+vNef5PT2+KV0KZxqRUv/eWsprN7X4S3o1E6sk5jt6QlLzR5mDe3L\nb2cV0Xr29mQZ8Q7tIjb8iz/EA2SX4sBw1giMCYDM5tzVIqN6CpqYAncnBEXF\nI1YC9lHSGV6qEpW+PMSvcxiyZI1scflpoUOGGlxi91pS0mX0EpuuqRIUMaqa\n/aUwhQLIBfmgDlMiLXTH6qsULSsl0uthbi0Pxk6fUK0N/cNgeunkf+Mwwp2l\nkb/bc/14DYdu6wp1sWuJDUoet6pV3B1rdP2r5KGA0slPYxA1WNlT+eHD5Rja\n0dhwehS8aqLCKdxm/IVPWU7lE4G5AmU44V++mdYB9d7cXLeMQmo4abP8vUjb\nKNf3\r\n=3d/O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6b11b48b933746de14be90d79974d10e1fd48289","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b094eaa4e.0","@material/base":"14.0.0-canary.b094eaa4e.0","@material/shape":"14.0.0-canary.b094eaa4e.0","@material/theme":"14.0.0-canary.b094eaa4e.0","@material/floating-label":"14.0.0-canary.b094eaa4e.0","@material/feature-targeting":"14.0.0-canary.b094eaa4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.b094eaa4e.0_1642185799893_0.18118419634346217","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/notched-outline","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.390220e42.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd135025c203933445abae5b89bac636f66900e2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.390220e42.0.tgz","fileCount":33,"integrity":"sha512-ZZSRtOygUmOGS6hslz1RjoJA8QOH3c3VN14BtFsirV8rVuElkAW9nMITyMUyfdexLFW+wki3ORbcYN1zQo3cRw==","signatures":[{"sig":"MEQCIDAfiJK60lLpdRmf0EggG7JlD4F5iCEg/MT1FEHZE/dJAiAPmXEVCjt69skHkTE+R1koOSwmeq94qifEszmuD3Sl2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z2MCRA9TVsSAnZWagAA48QP/1dCNPxT7S8vEClF1Klo\nNtad2w2xPi5ro1SQsHBa+RZJjdrajGXb6kOOt637uKqtfm/oCBX8wqalKKYg\nkfOryZAuHg0JvAAGCPy2cpgjMcCWpqPr3txpUAaTDYm7oKrR9C4eNdczPkzO\nmZLbOEYTL0BEbCjv1mT9bRBfGQ7qd4lZaL+jjqpScuUzV7aWpGlRjyBWF/v8\nIJ0riLDBWGqe2kBbEhL+BTKeSC35rrAU6eBqoZG3YS5iTDrJTjXbMFgy4qga\nK+be0LXbHt8sxOJhx2IlBaLN5s3FTXrZhjuRccwtPu38DtHfek1vkCKwFHI7\nnnoQ5XYsQt1tYcCJI7U1to1qAWH7TnNoZsyKic4psIxSsWIOSYiDKMGbpP5n\nmZARVGkSXDmiGk2xuXZLTgwLb4SlvtnPvoTUOh0w+VJ62R4MW0+kPwLlR2wu\nNDtN7S0nnjjZjx0AAjuBX/ogAAlZZ5SVxcz5WroB4k7Z+LlTZ4+UYG7cpUB2\n9ewyga0d9jHwOooNMQfv6dekaHetxkl29xNcw1CnRTI43NXx6pNItCIlI6wg\nAjW4nK1rKVW0rgcaIpBmHq2EA6EfHPflLE2C3YpD44/7p0IRpI10mtKxiFct\nAMV+AVH3f7d2VUgeTIU7M8T88FeIPpoTX0RzFvJ0bRjr+g7ltuzQL/ZAC2hR\nBqpm\r\n=CgGQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dd9f4e499bf257838f40df3957ee3c321500fe37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.390220e42.0","@material/base":"14.0.0-canary.390220e42.0","@material/shape":"14.0.0-canary.390220e42.0","@material/theme":"14.0.0-canary.390220e42.0","@material/floating-label":"14.0.0-canary.390220e42.0","@material/feature-targeting":"14.0.0-canary.390220e42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.390220e42.0_1642438028600_0.6778316880666329","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/notched-outline","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.4b5391f8b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4eac5b31a33b608e18a6ca421ff66fbb98bcf72f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.4b5391f8b.0.tgz","fileCount":33,"integrity":"sha512-+I4CWznky/GkHQ4v2YSegtcFYbq7riDSRy/tPUaBesAgh7VEktwPxko8xRu1VwXiW6zgwyYVMTBbEpg8JoeN+Q==","signatures":[{"sig":"MEYCIQCH1ejhMM8nTO0dp+1OtaGTQK56dkHFSv2xHk0eQC8OcAIhAKcU+2AbTQPvtXzdbHxBgC1kMkfyrDE1Dn/Whzk8gFnO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KSUCRA9TVsSAnZWagAAMhUP/RAC+8j3cJuFKmq+OnDy\nl9yuPE5g36wbAcMnNz8FfcpGNZvsb2l+DlmUckujX3PvFPiPd4A3j9cZH2Nk\nU9A6HIvVd5gPJXZuhh6h5IsVse4P/yiqxZAqEXcqmyFihFybU5g1z15/kOfF\nOTw1r1A7hiZqYClAANxo4riNTd+7C8xPXQqD2/W+4V7703dvVb1SDZDIHK/4\nm67T2rw+wcnt5AiXcIOdeo2u1RquM9ElXl4jgpNFaDJ2vVB+1mcVZhUfYLLy\nLHJ4XsVBm5Bz5GPWQaB6o9177WurvFqwCiUIYPV8QqkhZumF0D/UK1xf7kSR\nqiqU0IhYMbP/GELCrG6dWon676MXyHv3kLnGasy0pvQuLOPs4bHS1A/ZjrV1\nJ2lG9bvHXqzgmRPM4SCyYtn5SZ7+ylprfZGDT8ixDfNwlvLfjYntxuP4jkJ4\nkaUixpaTS9Kulujq4/ew6pc5hsqfvDRLjrZAPuJhBbOm1IwSwGrEi7Kn1E+L\njew8HptgV6aIOBkAuNaxKvmRACMi7fcN2WYwT5kAtgtBPLFDDF234IdiWnkr\nTdrBXYDZjXuQiMbAlA3OYM+VcAMnfJz2cCSR2I0+apOcwtxErNB1iOtJUYnT\nOvTxtYrooCgHoW021JU9a5OOw9T8D0blpS1hDn9pr59AAnn8Ors7nkaR/ER8\n89YR\r\n=CCZK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"09410b4524a4005be30dd18c47d4214d6eeffca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4b5391f8b.0","@material/base":"14.0.0-canary.4b5391f8b.0","@material/shape":"14.0.0-canary.4b5391f8b.0","@material/theme":"14.0.0-canary.4b5391f8b.0","@material/floating-label":"14.0.0-canary.4b5391f8b.0","@material/feature-targeting":"14.0.0-canary.4b5391f8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.4b5391f8b.0_1642636436152_0.21363247372990934","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/notched-outline","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.cef6bc623.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"731c3652f74b6ca94fc518435736fa3c4259f181","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.cef6bc623.0.tgz","fileCount":33,"integrity":"sha512-1t1pjRq+tbrPhdwdsEpgcTziXnnlqHLN8PY9anwhNcaT9ksMywQtfsGpUP8mjzJ4nHIAjbiwzx7WbIdSQ2Ldvw==","signatures":[{"sig":"MEQCIHiZBjUCK4MvoKdpFBeU63prJBTLWKcnY1RrLbWT9oCpAiAJWE1ABQEsJmsI8VtiQAKEjyIYuj0aS3DFBmniWR38Uw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KpgCRA9TVsSAnZWagAAkhgP/1hulpbLXBQclIB/EHWk\nA2MlG4RfSnYvDmbkB7lARgAOBiPXfGQ9YEOdx7erngaO9SM9jFXvHehZwCvh\n/9MVB83/wAeqsmfD48HHNZtPccN0PekGZpZXictZzvd+nmYwq99n+UK0GwEm\n0zd+cXFzDU2tsRV4usmyNZ18puykEU9IHj/TE/8osJwXeS+Qo5fhqVkytJXd\nH302FdoYyGVeDxqr1igAoy99Qra3krQ+RMfCuPjiGRy588Cmy72gVngMI1tB\nhddHYrztYzZbQY5yTbUct+rdyBPoIQCqXhkUR7kasphVT12NyAO1f0kdR+U9\nQL38Gpj77mk26ukDv3XhxZJRcJz1SBi48UKWIcrZv/kAtei5jEFe1zO7Jmwt\nqZdkRhYh41h/1IuYnC14c53muUnzY7TwnlQeZ0N0QJwacUcpNR+K2J7PDZ5J\nqo6pQ2LhhtWz1RCKrUhfroi4m1nBE87uY5BeGIFWuNy0Qc9IkrAGsOeBYEX0\nLB6T31lm0xL1mwFxhc0uFpvdEfg6myuYokkQyrDyIYZyhcQBeoUfIr/zIUPS\nqfV35cpncIJoIhU6yalV5YaqLvvdFJlT/YaRcCaog/FChxaFf+9NFj+jQxoc\nitCKPSU2zrjrdNBpo1mZAJSTiUyRxW88Ws2BDBJy/mvUuhhR1c3/XgZgVN8E\n3t25\r\n=QXym\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6bfb214d1f6768cd968026313c7de32009b2da1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cef6bc623.0","@material/base":"14.0.0-canary.cef6bc623.0","@material/shape":"14.0.0-canary.cef6bc623.0","@material/theme":"14.0.0-canary.cef6bc623.0","@material/floating-label":"14.0.0-canary.cef6bc623.0","@material/feature-targeting":"14.0.0-canary.cef6bc623.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.cef6bc623.0_1642637920397_0.9154061917578891","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/notched-outline","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.0379179c4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27173da5fcb1b2455ab01b41896c2079aa8c7d47","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.0379179c4.0.tgz","fileCount":33,"integrity":"sha512-JS/apuBqFt4qYofSfOAdrQVjVR6/IA9VdRF3Jk6NyzVhr+6r3C0ozP4LnoNHXWRMzHvV8V3VEXhGaDhXay4KLQ==","signatures":[{"sig":"MEUCIQDnY0EHU0U9abLiM+c56L/SP9qAg3T1yOgsLyonayufbwIgF7SzvBT4rT+iR8BOghoX9Q9aHxttuhg6GUDZ2WyXhck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6bAWCRA9TVsSAnZWagAA9s8P/0R218/adR3XGkrPNiaA\nQ5u1rllhY1MVv2KHNm9wDzvljsK3i/+7FggJrmTQsk8rhoGQsXZh/4pZBdXv\noYscEf16ZRW7qBSet7fhpbUQDLHoN+iWsjRHGrrv5l+jo9MXS8nhN/SSWMqy\nIYuT/Cwv6/3itYIfIGIHyacJj/a4opTMWf8hNuvDgkXOLw8ArJGD8ecV4XtP\nLlqHMPpAel1X8Q8i352r5x1hXakaS2jVDk5FjTVDiVW6ABJhE/6feJpsv/F+\nZxEnzeZXVf0fB0z7c9sHt1Nw2xGPFuUOXg3CbTWGRrCZaR7DbmEW6JWwFn0f\niMqrATs2lbHfETm1wBgGEyMh1nqDwpjHAq2D0k+6ACxN1KKQaBHgHhX3Uqk8\nGiOlwrkYR8vPhnP+/tijGjX0kIszKqT0jz4tgN6q6bRuMp1hpCheV4Fy8lJr\nOjF/7g7dWsTlKmSQx3xeF9gnX+X9IXG8lgLzL1YVyOmLZTrCk+WVMtEHvS16\nuZJBUiprft8dWGDOMgNsNsGh8Go5BJecusF/bXdFuX4eUouB9eqSCRqC+p/l\nHrejvdiV+S/Hklxh1BVK5B99h78JDTU3RLw9QE7bWzGvMbMEBDubIEBWNXze\n/gccRWGLzK8xtclO/LF4m4t2cMoiy+l5MJOte1STuOofUROOYMZQTeEM0hDa\nDiLm\r\n=iPN5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fd62b4e352900f807c8308b282906b51227baeac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.0379179c4.0","@material/base":"14.0.0-canary.0379179c4.0","@material/shape":"14.0.0-canary.0379179c4.0","@material/theme":"14.0.0-canary.0379179c4.0","@material/floating-label":"14.0.0-canary.0379179c4.0","@material/feature-targeting":"14.0.0-canary.0379179c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.0379179c4.0_1642704918566_0.002118035566128995","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/notched-outline","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.e62f3dabf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f649ef7fa014aee8e122e14b1e2af16f8d19925e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.e62f3dabf.0.tgz","fileCount":33,"integrity":"sha512-HzByJWj3LPmvU2EgWfkhT/QeP7jBjKmZJEzO2TckSJapqLP4aDyrc3Ub9JRll5BiEg/R/SoK4di7Gq9u4s3a9A==","signatures":[{"sig":"MEUCIC2mQtpn2h0S6kXwb0wLRhdaYB924zEqmkdZeuwOmKEeAiEAx6riXG/iRl564SNwodmaQqDA8FNygET6Q1Wjg4CsAfU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zv/CRA9TVsSAnZWagAAvc0P+gPAKcBUHU9kqtStHvWf\nQa1+cj14lYkxfHrOs3cBXtkCgtTWceciOCf4wN0ze611yTCe7qVQ01fTNR+j\nO0HRrn0QMUOS0AEKInxKGAXMs+9y/+WzUopwCFp1++jpmXmfoIrwpWBkGFGN\nE6Z5zDmbxt8J9HoThRbRE5gB5VXu5ZQi6tSWmJ3IlyMdKNXZ+m4uK+lv5jkv\n0kzGmwQVJVLN+68h5iGB59NmxJTbCSJ475KO4ikEqvhrlOMbgzKinHeCOQn2\ngaogOnhTu27AOBTojHnsO/5ShA0sQ5L1+Cd39wtZ72pHc594WB+p/56rg/eX\nni1M0ggqsp454exxmMNrtmqtQmVYHL/Zzbku68dPEhRpGNK78QZ22ZLX5831\nIHVfQcguUaBB3JntxsXGAM6omE67y0j5Ak9j33tewRQkZAXY8y/b/gASeeB1\n8xG0UMg3SORNTBAnXUtNLgnrXSqoVDsI3Ea7Zf4vN7EdNVfSVCHaOrzj3MIz\nDt4bMAYVL3TtfUunijfRTCHx08k2QBUf7s3uopykDs6+SNW70kL+REsRa0i0\n+BRCdZAGmPuli7aXrGQQwORU+0NTGomsTOiYLn6y9kOJM7xqGE4N/0E0OaTr\n6BlnDk9GDee/ANncjHjWzlWqdp14A/1fFnE5nbmCNmP+4FB6dfMzDIQ6diTs\nahu1\r\n=EQtT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7f7d12458af5eaac6bd913db605b5afc3753906d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e62f3dabf.0","@material/base":"14.0.0-canary.e62f3dabf.0","@material/shape":"14.0.0-canary.e62f3dabf.0","@material/theme":"14.0.0-canary.e62f3dabf.0","@material/floating-label":"14.0.0-canary.e62f3dabf.0","@material/feature-targeting":"14.0.0-canary.e62f3dabf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.e62f3dabf.0_1642806271389_0.4892120853728892","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/notched-outline","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.3e20c1de8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44fa0cab973982aa84479ef73c47db1a088d96bb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.3e20c1de8.0.tgz","fileCount":33,"integrity":"sha512-JiIgQts9s0jndQqroCgAHpXmvb+i5aE/S2k/NlpGl5By1hujzuWjeu1na6Wu03hmf/L6xfuweyfTe1PPMOGe6Q==","signatures":[{"sig":"MEUCIQDr5LSwrPPPnot8tRcXZywPXSo/Dzg1cnQ22VHo29bV5wIgXv+IFXELcyl98tEjlTV0MXMyNyK9ANyiz7iFOaqztBI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8BgkCRA9TVsSAnZWagAAqaQQAIRmRiBO5oziSzVyQ1eO\nzav5gqcLh6kj6AAiTRFTuZ68NOV7tLWt+j0w4RqtrgwhjD7FSlTBLsOE+WiW\n+WphiuZEVLazHgm3HyU+AWKVfjkD4miyxrkqCXmbE8cjj03IIHfqiIPkICxO\nO/iife5OHuxi4xNS4KBTuN0+/F0Y7i9ahDujFxk5A08L44u844mJcy/E+IyH\nAezscJJYUDQUFqqwpSxh+sX5BrG2EyQkIZ45M/j0eBH7rMPGlXdD9GIJc0WM\nCwWeW8exX6pshoUHRluo/tKdVojqn+5JIhK9wGg5mSgXjLVYPu52Myqnwt8B\nqok6w4JuILEoGQAD4zhvRjDoUEoal03TCCLFKT7satvNHYkqwI2rvtgazj6i\ntTi2kAWlmmO06YpgiqjO50RoI1nciVT+bYU1nIzaev94H/x42jE1MgEKJpUw\n4k+8thU4ppR8giVy6WLQywyHgZiTQzL452Zypk5GCjUev59Z0x6dIg0BCvFQ\nEIy5iO3aKm4cS+5Qe6se1zfovImTddDaU13QLJNcpeAP4AUTWEuV97C/u8qP\n8mU1d7XS71dITmdP7cV+wwwFnzVD1O+fFfrjR1KFi+AuJ9wgv4X+aSo+vDIR\niiAjPZJfGcqw0Tk9i/CSu6cucIl8xR2Njv5mBxIl9o6QHC9AM6TwWgQzsrI0\nOhMG\r\n=MEvT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"29fe61f3aef5a85c7a462638b6c2b809a3be57c3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3e20c1de8.0","@material/base":"14.0.0-canary.3e20c1de8.0","@material/shape":"14.0.0-canary.3e20c1de8.0","@material/theme":"14.0.0-canary.3e20c1de8.0","@material/floating-label":"14.0.0-canary.3e20c1de8.0","@material/feature-targeting":"14.0.0-canary.3e20c1de8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.3e20c1de8.0_1643124772180_0.054240033920741615","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/notched-outline","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.9f9d928b2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f67e0c03703c4b5b903492b96b9085cc36e6ce6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.9f9d928b2.0.tgz","fileCount":33,"integrity":"sha512-ug1akeLUJjFL7E3fICcQh1uPF5hu0qkjNy9RqWGzk3NtVtOFVMqo6zIPAeeomqPs6PjBP1oxSI46+J1DO60BhA==","signatures":[{"sig":"MEQCIEmuX9oqIPOkv5ycHjE5e06aRsn8dKt0Q6sjIcsDBSkiAiAhEEj315lK643v9jrb4CwM2RKI1HwexbuRbcLPjZocLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uD8CRA9TVsSAnZWagAAc+gP/j39mab2VvitWyP0n1KV\nzF2HPXVW96OPsRhLnHdrAViO+BrKyyvXcYTsEmxuexmV6o3QFAOxM7OlRnUq\nCDNyYWpp88oWQxJF8bfr2z8Nlrn0OaZytgxV7nLHGpCiclNN+zwQZJq4FeTe\nsp4EIgb5W0UAkWUo2WHDjZVhz3jNvPPNyqqQs9Sf+fpOfFCCFdzFpZq6L6HA\nUMpOj1bjG2ucVlbNciHztSpfNFBEfGJiaDnIHGG6wYzG8L901soFht9002C8\nhGRH171ExyenAm9mCErBPESw220EIfT0yyjXkxkNvzF4KC3bPb29okKs3nUX\nKqmdpkesnLZjFrE9uqFlnH1aXHuvZivoJVFuuSAmG8U78mpVDPJ22QLgTNiI\nJmFfj6jAeS2OhXU9nmJ3E43JTrr3NsRyQJ0iQs5lnB0gl2Y/el47MniDMwa/\ndGz0qjtMVgNmSBHGSXHUzDSIRZcIl7/q2zU2gk0maZsz/3ReqVwtOnngTAkQ\nhP5Wv0Fg1kC0Ym0fJy3HDuogyCp3SacQXoyOjWzdGKAIm/lJsC0Hlu/t8dcw\n7jOsygl0SaTL1n9ClZGmJwJQQRfBQPquUa15cJPpVzf8Ni/foWm2EDhclOxE\nkMQrRTh68nx6uXQk9K3u00pVvqEcEDSAuZZaqZ5+oJ4UmRLAv7i+H48yZ+X2\nmc6u\r\n=0X0Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2983c7f2f01e1912809d6004e47ff0c7c27de38b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9f9d928b2.0","@material/base":"14.0.0-canary.9f9d928b2.0","@material/shape":"14.0.0-canary.9f9d928b2.0","@material/theme":"14.0.0-canary.9f9d928b2.0","@material/floating-label":"14.0.0-canary.9f9d928b2.0","@material/feature-targeting":"14.0.0-canary.9f9d928b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.9f9d928b2.0_1643307259796_0.36986729698079723","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/notched-outline","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.a2bcb065c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f71ba31428ac6afc0455052387a811860ba1f8f2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.a2bcb065c.0.tgz","fileCount":33,"integrity":"sha512-rsFUK6osSRRTCNHy5W9jkL/CA5L/20qMBFxzOaCbxBqPBf6sthrv/8f99TIsbIfcn3GimKP5GV5eNfX5KTUM8w==","signatures":[{"sig":"MEUCICr0ePm7iesgSBX6faTk6hcRm8mzjF22CKuVOM1UvThmAiEA4Fc3Nw8TM9VCgqO2SmPzc4Hw4RakPK4c574RMiQI4Z4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EYeCRA9TVsSAnZWagAA+iYP/1ygkVKv9E2r7P0o/KLG\nuycUdknAKBkikEdEwb091KBCvuwSDK7/PJ8s3UUBVmpRrnl7EGKQNScR3uYS\n0R11m6Klc8UO4fdjr4v5CH79reXIuJvsAfk8TEyUO7/WxESEwCmugatkk/f7\nSO590UYw4ltiVvP/GLxlDyANriEi7+EN4kP2RlW9I0A4tCHNvsJ+B165UQeP\nQGzXk30C42RzwwMKct2YWN70xwMFvTl3nZjFwDax143OdZsaWuIg/b9SrXjf\nhFeRgyUe6+apmD6RyrDCo/m9cknq2mXYjpwU5fniMUO4qDE6wR8NBxp2+zGd\n2eg2rKxPBwje3hRxTigL3iYaqT5VYLaQNI/I3Ih6IGQ8/h6Xap4/x+5Vcutu\nBuTsq0l7OviQ/KMVe9jOFa1X/B7kKHh+99TX7MGONh5iYCA+ZQcOvUACjH6J\nV+e1U7XxZkW8W8YJ9eGDCvrcbMAXfdl2ufNh851g8OBBOa4Np8CncX7s/oUj\n2SHcSSC+By/JbRC+DV5uPoHUUo00avpbCxYM9aygAHpVDEwsfK0r6mLGYsSO\n+rZBU1eQRrE9xsxniAkKqDJtP7ron40aNrXB/0ZLLjOS25ruSWiJcCAKL9mW\nM2LWRWObBNp3QIsdLf+QGcRrUqBwE0YBW3A7Gd+8n7yT5+xqNh7U1B8NAXiZ\nB+sB\r\n=fKHm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7f175ca37545bf0bacc2b94f7a18a2a3fbd5eec5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.a2bcb065c.0","@material/base":"14.0.0-canary.a2bcb065c.0","@material/shape":"14.0.0-canary.a2bcb065c.0","@material/theme":"14.0.0-canary.a2bcb065c.0","@material/floating-label":"14.0.0-canary.a2bcb065c.0","@material/feature-targeting":"14.0.0-canary.a2bcb065c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.a2bcb065c.0_1643398685875_0.061841446541361256","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/notched-outline","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.4e66fb2e1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e35014da6c272091a8aa2d14a5cd7438326fc7f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":33,"integrity":"sha512-NnmUFajsHgSR9APoszLW+IM5RWJFcMmFftncMcLH7HldfJc6tJy1+ORJEETFAzjks+BNzhqwpVPh1qNvgwHhog==","signatures":[{"sig":"MEYCIQDRT+Vf/Kbkt9N1NcYWa1aPum4Zx1yFrHQZbgSPS78PtAIhANOkmtjG5g7kZSpuGAHe2kN5jGDnJBSjtmFPDanyhPl2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EcoCRA9TVsSAnZWagAASA0P/RwIkHp/d3sgnCdg3Te5\n8EMCVPveJQmnXkUckdn+hfoub2BUd473Pd3Xp51oS/h8W+NMwkY0RIDmoMt8\n/DtqgjFiWK+IvufKc6w5YKBW0Nz4ZLST6Ce7xhEms2VM/zG0HhkI2SZEOORm\nCbXMPDG6P7caTDc8+9uzy1/Ej+5NV7hZw2YMsfAjkROo2DFPJUlfABqw7unk\nXiYKT4Mhyp/IO2fNadxtQS+c7KB2XbHJzs8Vw0s6O6PwJ9aOR0I1w7YvHbsU\n/r1EB9pA6jFhGylVSomGimWADaf0TI89dSpEV3ZJn0iXMkbzQgo6CzActcf3\nppW4m7SarJk+TxTQ/Em2EvG42ne+k2kgveQRaadRP/rB9ckYQo2F/oTcxQ2m\nyNSFq2I/0ZebQ7B+obZ5+Y9ES9P6gW1RdavWNZXk/kBuLwRmc1uHL7+vlYrd\nLsmv8JRQ8N5WF9YS4WLLL6/R/tEMt8BYjOqNJYitZOz2127z9BvCNULnX9VF\nlsd+XbN+1JUhUfw5PQd7YHZtAqdCyzHBjf5aVWDKCy/0ubz+p1xx/4wJ8L4x\nOKSk+qkn7Gx5Og1LZrPJB4yn5IZeCEIv7YFOPl1PNg7LMmpJifTQ68AmMXUl\no0I0776QSMKT4+vFBrOlZT6uurnVzYD0DqOxaOofJsQNIetv3J5wn8wBiZvb\nlWJA\r\n=5wEz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"edee6a64c210815507bd8460fea3df2591cf0d65","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4e66fb2e1.0","@material/base":"14.0.0-canary.4e66fb2e1.0","@material/shape":"14.0.0-canary.4e66fb2e1.0","@material/theme":"14.0.0-canary.4e66fb2e1.0","@material/floating-label":"14.0.0-canary.4e66fb2e1.0","@material/feature-targeting":"14.0.0-canary.4e66fb2e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.4e66fb2e1.0_1643398952053_0.15923332101521526","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/notched-outline","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.9736ddce9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e87ea03366fd6eb51b71c4c4a40c6dbab54dc86","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.9736ddce9.0.tgz","fileCount":33,"integrity":"sha512-JmMjEY018FX5atL5kSroDJN3zav7BOWLVai44tRPwUEn/MJn0YFoXRmESnnTfHOgfljMUhDBhCnOwLXbjVczZQ==","signatures":[{"sig":"MEQCICEEGSh3ml0xF8Qr0o1va70Gw5eHqkl3jyvzo/+Hq9PHAiB132gYAerEvXgMNwq6iAUQA5MyXkGvA/SR3z6ThXZ6hg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q34CRA9TVsSAnZWagAAJFUP/jQqjE3doH6/MI2nwUJm\nLSL5Vbeo/5mvMQzURhwOavLDEJwsl3iiYlOwirT/nSIjvoteSSLWMR4sLPkc\nbPGKjr55syN3819dwK8zjs52fiaQ09NayPiGP/Qy7RtAjCHR++S/PqqpDefA\nX+gbqajt4fZR7WDFLwZv/BcRT7XXMrDerYfLrGLe3cwT3z2Yxc5Njb5na8Gs\nbiue2F53H5YsmdSNBz+wdrKg5l/oHeBr7T05OF90O3YGXflxlt0P18UZvx5w\n8mPRGd4mOTNGekRBo3rS9fF8P16/225tTPlZa74GiVYaTQyVYJyI6tbuTkHz\ndn0yos5CSVzVZ2uWR97taSwl0chfBib4GVrfyBWdMUjJ6MqZ3vXqfZ69ZM2H\nkHfcnuB1aA8oHOgnOl+pEsYERFDAvPRO9wZwuU9tjmC++4t2JYt+tcdj3r8g\nEvKzqn3pJ7xNvtmGh2Qh8usyo2r1N5V8WYkzKzvFxjIVd4K/7KnZe8lrPLt4\n9yG7nt9zG2v+KsGjAY0qi5AxDnGJALe5ykvwBL9oMNYok+T7OyilBwvV8aYk\nECWHiHCxRPTG7pdjdtHU+QCH1EcGam1+toxBslHQJ9macKu8HcytrUGlF9qr\nWNKRmIZVL1fw+mZewWZIhm5cuWdXhLP81P1rkXEXYfzo/s/r56nqNx1yMQZu\n0ZMi\r\n=4ppn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d76de36ce796a981bf5e48388104bdb581d17529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9736ddce9.0","@material/base":"14.0.0-canary.9736ddce9.0","@material/shape":"14.0.0-canary.9736ddce9.0","@material/theme":"14.0.0-canary.9736ddce9.0","@material/floating-label":"14.0.0-canary.9736ddce9.0","@material/feature-targeting":"14.0.0-canary.9736ddce9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.9736ddce9.0_1643449847964_0.6735678405105359","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/notched-outline","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.cc4ed13cc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f6364d6f35509c0fc58fab5c62f33ff8052cf4b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":33,"integrity":"sha512-gNDBXKRga9ylPAVgjsNbsdB5cd/irby58eYX0TbNA0TVouYl7lGUlt2B+K6YQQi3e98f+aX45+AcfxCJOqcfJQ==","signatures":[{"sig":"MEQCIHp7UBq/o7LMKMrf/7prpJfSgbb+qQKPrxDLhhDMyU/VAiBoZnmsuH+/bUmkq14NmWgkehMuoQGAChlFB7DPfqNi6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W8xCRA9TVsSAnZWagAAmMMP+QEwwcqrIb/udfUmv5dt\n4vuT4CPD54+dToLbrXi0MVqCdFJs6D6AfEKPXvw9icblMhZxYx6yUNzE10Q2\niuqtzCX4IZyi1wprw9f/ky1LCUU+XM/0TbGlEm+yMtQxprCB2ck+kHHTeffg\nPj39c/FhqSrhSrime0WxERQUs8CWtNNECcTxYK8+dpU6FC+jf0FPbwrkY3S4\nZ9u0BYPjNlTpWuNQtfKUZJLboc8ouHVcWxyI4mpdZDXYJoOb0xeI+JHJLYyi\nMMGBlvYC0IZqrAGfUCzrcirlhpyRrSMNa1gCPeYq4BXCIH1ax0C9atfj1UQm\nFz6uHFJ0kHQiiOdo36ltyLl0RQSmCVuJk6gWhk9B0VzM+Rb/4jctz1weAxIb\nR0uBcpmV2ogSy6c8X2l/Ovl63lkTcycSOxvrupPDBKG3+AQcPUMkI0fkPSRg\nZwlcm5cHeojhwOP9b5tHJ1RN4bV+2+U/02ekxmhb9+kn9amUywmGf9SmPLpx\nSXRgi7+TebIxP108K6SvVbYZSV00XLc8PvA8yAgC8V9QLbR0hL1+0nZKJwgJ\naV66nPEa3PeAdb5uCElMjrA1a//DFSrTO/8cTdNs6nDzcD7kxwyTUHDmM7Qm\nZV9yNkBLQgV6qLetWYHUMHsexHyk4C8UYcnHce90YV0NZFD7XWG3Zjz+S5EQ\noVBb\r\n=9ou5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"15c769412cb0230363c372a7d45bc6bc10eff8e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cc4ed13cc.0","@material/base":"14.0.0-canary.cc4ed13cc.0","@material/shape":"14.0.0-canary.cc4ed13cc.0","@material/theme":"14.0.0-canary.cc4ed13cc.0","@material/floating-label":"14.0.0-canary.cc4ed13cc.0","@material/feature-targeting":"14.0.0-canary.cc4ed13cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.cc4ed13cc.0_1643999024919_0.2843659995824577","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/notched-outline","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.dcba26fe1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"245869252e2405bb601014a4a408b9276ae00c75","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.dcba26fe1.0.tgz","fileCount":33,"integrity":"sha512-gEwJLtfZ2/0cD2Yzllsg7I3RdRYnYaX8malehpxP7cf3/gqeVUWd4YFmuxvGH/vHtavEjoDwU09Z5ubfaTDlVg==","signatures":[{"sig":"MEUCIA30oExOVP1zsxDXlYcnljdXeYP5WRMzt9iwfre39n7nAiEA3hb2x7O+BhGRo19SgJ10SplPqF4CgsT3ouvTk+jX7bU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aF8CRA9TVsSAnZWagAAXOMP/0KQQGrx8CglzgPw9IA5\nwZoLZgSr2htMhOUA3k4wlwWAEGS17Aa5ZghNYxAinmeBzswUDUnTiaAWMqbS\n67xDOBxvaGsOSWD8kj0GSb/899RDCqko7iOS9nryrAfJphzVCl8zmPGa47J+\nurvNHCTLUrntDTXwvedubEWCOI4VNKeokcFs+LNGaeziqpFeu69SXOjzmKQV\nTSrZzQt8O2XohO7rdv15Z9lt3fqjEdjRyftZimazwV+ehrU+4Bm4Hx/ukcAG\nlscjkyAJluXHsKazxl71CZIWivJRDENEpF2XTMhgmDcbKvKOb0Y+t0A786z1\nJsToPWP4pmCp71vFi+A6l8f/hmro92N3JXQdxVY0jwMnBpxTha9NBNzk27U5\nnMfTtJCEWr9T8pgM7AymA6uentaMP/bhav484LQUJNaTNTBHbirGVExkd546\ngtrjWOhY1A3c+wDLf3neopkG7rf7NQ4BfyUTXmW717/qrPrWiTeyM/VwkPsU\nIxR+zIojGyK9JfdCDmuVnOf9HWcKkukZzwSy+Kwzol6qMjXukdJcXP5D+79K\nz4v0Xm7KugIuPi+mfmByZ0Qvkvj11KSIqhPHjTAgufwMyiq/C7oioQT9G43O\nB+SOMMNqN3ZKd3QQlpPsTPKjwamdihIe3M4OrBAWNfhz9Xk+1wPY6slEiBnK\nXoZT\r\n=KqZ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ced7dd56d5d3b017288f0575d6e773c03f01d0ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.dcba26fe1.0","@material/base":"14.0.0-canary.dcba26fe1.0","@material/shape":"14.0.0-canary.dcba26fe1.0","@material/theme":"14.0.0-canary.dcba26fe1.0","@material/floating-label":"14.0.0-canary.dcba26fe1.0","@material/feature-targeting":"14.0.0-canary.dcba26fe1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.dcba26fe1.0_1644011900011_0.5630073676200027","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/notched-outline","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.ec54d9046.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88d8d42704073ce0db6bea9624a78d655c2dc48f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.ec54d9046.0.tgz","fileCount":33,"integrity":"sha512-fc9jwDyzDI6l4IURTrCwcul+PYSpJsy6UflgZbfvQKLk+gCJ/50IzRWHgGhZ9V6ew0lZdeCKVpB5Td+SxVNvZQ==","signatures":[{"sig":"MEYCIQCUGXvGDEVxv2TcirF5jMOcSm41RVQfAjzA+5aeGJ18XQIhAN87VJLQoU574TthY493sViniustrNqXAhLyN6hq7Lmt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT8eCRA9TVsSAnZWagAAdm0QAI7XpgoXjOL7oLupKPaq\nb+/sxBUMpeUPBPxmL4DFoIWrlj91yOle9WRRdg0kMRu2Uno0k4xo+z/N9YE6\n1wofgSpMDBjCbXl6mdSnL09IRrDCUZxy4IUKvIeyCploXKE0306R2i1MxhmK\n5K9dwWT64j1nkdGOu6ghNEh3UxaIjmYL1+qjdgJnx3BmIQrhCI/9SF+5Ibn6\nnRqXTZa/BmRIzW8yULJI4U2HDz/fzGyTPwfg38qmCLe+KsKnKZ0rDckF8D0S\nZDPiw6XlrDEURhDH4ldvobHKfx+ZtG0Ig8wjLwkr0yNmMs71OFOhmuufCr7u\nLcGREG/nnj1STQjxLtSdHs5VBeAVE84LLS7Gt12VjyMH3C9pgbvlDowtx8Jp\njMayrXS2BesKZA4XqJo90eVpyXkjUxfJxiMg7z1ebhl2/B58oXMq1hbCSa+w\nvv5miJsebXt+ad8t5o3bCTtPZAm8jNz7wyvzlQTDPIW6x59ntY5v2nNdmKTK\nS7nK9b9auKZSbxPa4HBPv/crkkoQnU3CCiG8yQO/Zmn++gyncuakww3JdjPK\nOGqeorU1sLw8FJSwzBi2RJ+izhWyci32Zm9eW3bB8wVgwqL1qgxYcDXYFFZ6\ng6lSxvpT4DqAwvE3AeXhrkjCiY4OGsGTc5UVbA1U1OjWrJNhlC1KpWG208P+\nRtek\r\n=j+ry\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"68f6bb151595e8790d7092842d6c137ef93ed770","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ec54d9046.0","@material/base":"14.0.0-canary.ec54d9046.0","@material/shape":"14.0.0-canary.ec54d9046.0","@material/theme":"14.0.0-canary.ec54d9046.0","@material/floating-label":"14.0.0-canary.ec54d9046.0","@material/feature-targeting":"14.0.0-canary.ec54d9046.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.ec54d9046.0_1644248862149_0.7167533068789178","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/notched-outline","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.ea9b5b463.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"417af40e300fe8f4ae745867e8db2b23a4f22f68","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.ea9b5b463.0.tgz","fileCount":33,"integrity":"sha512-JNsHoOm2rcV2vrHtNrh8s7Vi5QN1F3+5C6v3pz+q44+wMmFnBVsZtvH9OGNGmt1F3y57mAaqdXzawRZyZvOlKA==","signatures":[{"sig":"MEUCIHj9Fm3LEOPg50Fqg7NLG3q+4H/7582Ki25716BdrpJhAiEAtZLuFx1xiOofk+rALs7cnD2Z5fyc/U7xluVfoQB0i/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA//dCRA9TVsSAnZWagAAKbQQAKQpK4JxOm/sxIrn8qYk\nbw2P6VzYsgb9EDiAri6tD/w7v+odms99kiPAj0ydeCfNFjmAVzrkMtqXFE+P\nbfZkoGk9rD4FnJj+QSQNXM30U+dh9+Fg431Qi19xIXjXIF7sQdCClcFKqRDh\nqRyEBTtGMVgVy5motbfS/2MjIF4GXwuNvUBoYwnrQ8a8kIWHl6dkDIo+8Gwp\nLaP2WE0rVT+PFvS4T2OCavarokwhxtmUaTJvNlh7UMHJ5wDn+SpPD2rPAY5S\ngJmrIcMQiNrmPV6zHSoa27UlJEzNH+tK7fZ8GiQSxT5tgNJetiNE1gbUYI1X\nsMJ2gB6RmtpmwfaWpuVJ2D3z2VixCh3L4QzMhv7h/meHHe0qpgAzySm0pmyS\nXyU/bmvcN/xn/rXiHkR3wZ3FiYzk4ebqYQDIOuOaooZUwlVHOPUEpSUo5SDe\ndWyaRpq4/xaDdlaGzAdnHWe6PHfjFI1Hh1Y/mPFrKhb6e0zK1VddGy5Jv48d\n6QzUcx2S/c5gduU/ORRVKQ37pXo/qgtt3fqlhbnuXXH8RfyB7FlBQK0636A/\nvpkX3RnjqWL0hIKfGdZkm/s9np0+DKrfM1Apy6zSQBwzZ4BkFgQKHjQVghuf\n5yQeDSuiQg0Z5fyshFE51glj/J4KvRcgtQEko2DoW145QVsXDz3MSCJbwHFf\n9p3F\r\n=4iHo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ee827dceb9fd1c47516461b8ddc28b66702f2c04","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ea9b5b463.0","@material/base":"14.0.0-canary.ea9b5b463.0","@material/shape":"14.0.0-canary.ea9b5b463.0","@material/theme":"14.0.0-canary.ea9b5b463.0","@material/floating-label":"14.0.0-canary.ea9b5b463.0","@material/feature-targeting":"14.0.0-canary.ea9b5b463.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.ea9b5b463.0_1644429277597_0.9747447418038468","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/notched-outline","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.96ea061c1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4328b66306435c71cfdcdc7c6974b4ee953c70bd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.96ea061c1.0.tgz","fileCount":33,"integrity":"sha512-SZ+kevEz3olLlJ+a4j+8d2uBP+VJ2rZCTV5l448ZovW0gW1ZUuI9DktVmIbJJXaAiiwRtSC2qT8rk97ZcLJ0QQ==","signatures":[{"sig":"MEYCIQCICMH+rZlThy7O32lax9QmWlp5tLQvmEDZACDJxHFzqAIhAJYamL9859pD60Op1yRqDwFwvWhhQ7ZcauQqcgnBB+yT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA9BCRA9TVsSAnZWagAAnKUP/3ktIkVkuLOwO4gkaXhd\nUQfamoeFv0jETvSS/oaLwbLCxS4tAw6DWt2vBqrPZ5BEkGTMqVS+VCYZFtMG\niW3JOMhR5gTsMgknJC2t9/VUmUUClPhkM1CHr0x6PwyVnhPacba4O7Y+I2ZQ\nx2V+PhzEk1hoggF5biNUOQP0FsZP5zBlUOzd3uxSdqbLLNVI5dcPoUK/S1RV\nQ36SzXVT2qME/CJ14ebZr1W/ptjclh2XlnMGznDMc1nPP3RlsAi71hHYvTM0\nr92PhVbbT9Zq2VSM54pkrw5y17NvEhyzWuA2yY85c7mk1gNFPuiq+/dsptjW\nDFrXZdSb0qJlhJ1sAmbXDIV1U3uNtaGzgZQZ+gpRk0TPR0oLw+3gFtqd7pI+\nvUvqCt1UDsOktL0bb5zjUvbovzkiTVQrf27bbR/slHQLvfy7So9cTCeTxnKA\nO7GTb8nMjatJeiOWLF0zxYt2ExE4RunEwWYAmXLyozVhCmrc++Qg7S6lhE/o\ne0OSlAFT69zfSIl1qVHyb47BM8GmXxXmz3lb7cEumHDffr0SHp0PrDKB1j5G\nqZCQQ518znE7CK2jlgnK5T714WDgF8Jl/a/GtE4pqCokxnFw7QLdkiuMIWQm\nmQbFsLcdGEMt9RwQWMlHjNAL+JoGpLgS8uI8ceeDaLMN/psPoVVeL8VCz01l\nxdif\r\n=n51y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b1a410c21f8ac6405b364e437b5af7eec06a2020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.96ea061c1.0","@material/base":"14.0.0-canary.96ea061c1.0","@material/shape":"14.0.0-canary.96ea061c1.0","@material/theme":"14.0.0-canary.96ea061c1.0","@material/floating-label":"14.0.0-canary.96ea061c1.0","@material/feature-targeting":"14.0.0-canary.96ea061c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.96ea061c1.0_1644433217372_0.9407523373202582","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/notched-outline","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.e00181e59.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04cbf166d396f73ca4efa5b9e96f69b3b0427a02","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.e00181e59.0.tgz","fileCount":33,"integrity":"sha512-cOmxE1SN1Zu1TLYhIKa2c3OzhAo9Gyns871wJlGc+ZSLc4Ej2Ri5+wrjJSBwdluGLXoXP2N7mX/UVWgi9/dt1g==","signatures":[{"sig":"MEUCIGKNTYAKFoOu+F35rOFrBpAqcxc+kdROu+6vAgA3QP4HAiEAlMkELhTyrn/6l0EppUheN2PUBKFBg6FCxuVT4wRW7QQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXB/CRA9TVsSAnZWagAA5vwQAKQnGyoLDFcsztIy8diq\nPhWGSH12vtMl5mVArsfLMDRxI45+fYx6Z/pWx7sHyjjAslAZtjcvmzYmppcr\ns/Yv0PtyfpaWhDk+H5ZEnLCkhtiw4fuzXU2TESybgt0/A1jAWTmDGSC4wTDB\nvVredd5QU2OCOLeLWyfU3mFWp/28TFTP/qU6x9rYMVp0qvisCvdbXpaT8aU/\nkTL6qhHZaqIbQ1HRMw1DWZ/y+Kbg7PCco1zzxY/jQkZEVFp0BaaC+0jN2AOL\nmDv8vHI4JI61R7fpvVewazEWq70i08ugi34Dhd69cp/iD8NicM8fPl966jTi\niYS9zhT8jChfbtMn31nclFT9Nf2cKo7nVtmC7HVoFf2ckOWttIG3buIo5xA3\nUa33APxKNYdTJ7DxFr5LYBW/ur1wi99VXzRLVsBh+urBU94s3EYBpEsqHVAh\n+E/+CCPOIbGHQ/zg29eFORyggQ/nlXkTotUKaDtfdpTLLEClqewLCr2RHRT8\nXTZEJB+BJtL2FSkyfKggdB/DMMNiAl+JTxJr0M9l/taI0fXQmNFAxHsUt/yd\nlpK6QWgp98rySq55oLZaGlx1ggvRclthnSY5ZpPQjWRlLvtil/6U5zSsQ4nZ\neUtbqv09CBm8VURugUUuc5Kt9Ucq56xXF9kCXBYr1/zrvZ/qU83nOeu9wheP\ndfDm\r\n=gUwv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7e9ce072e9ec1ce5820d347b59d99209542a2bfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e00181e59.0","@material/base":"14.0.0-canary.e00181e59.0","@material/shape":"14.0.0-canary.e00181e59.0","@material/theme":"14.0.0-canary.e00181e59.0","@material/floating-label":"14.0.0-canary.e00181e59.0","@material/feature-targeting":"14.0.0-canary.e00181e59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.e00181e59.0_1644523647594_0.38679733345915635","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/notched-outline","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.037285f9b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c8e3f7dd169e6bf34dfb5a3bd6bda9a79f71b2a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.037285f9b.0.tgz","fileCount":33,"integrity":"sha512-ZJRlKDxv55qwh3Hd4BG4+VXNI08JMZuhi0zwUgmboLG8b/NMWMX/5KSpNtXCQK6CGUhzU+vZl1beZrnGxBINtA==","signatures":[{"sig":"MEUCIQC55i0ydbLaqMiDrzZXYNF+McT+OY6HFAOC9+67+cv++AIgXqOvvY2Uj0rE2zvOCMKdTWP2fK3eYhCrVevp6Meq2wg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqtPCRA9TVsSAnZWagAAUa0P/27htncm0sMQ6q6Bs6OZ\nb08F5obb08JfifJ+rMprQ6vyEKc4Mtb2nTYmbTbmo/J6ZsNfMgE4cU0KxcO3\niV3pBWb7tLjJM2n2XZ1t6fIOXDrB9qHGIUT/+XLKAmSQBu1URaDNqmO3wNa8\n9i7Dfn/OVaxv0QkrML2dwO7HVce+lSx2kuTVwxWIedliN/VMIR2YOp694x5s\nbKA+On3VoiW+VP3YQVZr5mPVxsgetsM3T+R2hvXrsBACPeYwC/mb1Nfm252G\nt9C+A7VVH3URSCsfnRP9GPFPluX3G1vs6MSRN9Z5MJE+VnVUBhcRzxEavh46\n9WYCs9wfyjip7Zj5FDf7d/Lmq4hxEpgsZHTGcq6EgfRdiBlXBOAyp524bZNG\nkkDKibWI48qPWHQgjxwHHCA36k+vl1lfqAtQoypJe1ULMNKR5Dz9FSjQJ+Cg\nEGQD4ZcS0W9H2qZwiYombKln+cJKJdAocL1R29Hq4rywoHRdvUM/IfBBSAwZ\nn5VEYbgZwQSSpUNshzGoavATrzaCiFi1/11iARwpNfDHjwsdtJRRdblfCTB3\nssFIKWMauMmQDwk63BawrsV59kv9LER+ErSLy4fZXt/ZepvBeaq1xRv9LHfE\n1ujOv8NYfafm9P9QGX6emsicHSk7G7s5OFH3K+6LaD35YhvNOQ3Kiy0ilXjd\nn/LL\r\n=1nFK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a9bca201560da3f96e435e6e070baee148bcabe2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.037285f9b.0","@material/base":"14.0.0-canary.037285f9b.0","@material/shape":"14.0.0-canary.037285f9b.0","@material/theme":"14.0.0-canary.037285f9b.0","@material/floating-label":"14.0.0-canary.037285f9b.0","@material/feature-targeting":"14.0.0-canary.037285f9b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.037285f9b.0_1644604238803_0.4422389255803083","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/notched-outline","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.1aaa68dda.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0c97adbc4bb99ceb3083e5f3d55040bfcfdf2f7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.1aaa68dda.0.tgz","fileCount":33,"integrity":"sha512-kfi9R7OOm5YFgXNG5uTcIi3RqPgTkE93+vLr8j14DR0rmjLlFe8VdUv7guiqHJGw9io8lI0D28xs3X9r2Gmppw==","signatures":[{"sig":"MEYCIQDVW/ne47jvGzYIrZKenZRUb4d9UwqsGSaGoloa6XHJPQIhAKiSWiLXsLdbLpF6tJdXmueCBiPv8HOQgUEej7pKXRKN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVVyCRA9TVsSAnZWagAAZ20P/1XE6OJiz9FEpIQg/Ef9\nlj78pe4kD59vqoD8TjDyBe0LZviQMlnTqlqIj22D4cxZiMkT1WyI9PkBLQvo\n6+w3V/T8hTPEo02zNdbn/A/yKY8ib6nwbGQYcCGQp6YbwOGX954f5sLUwb5L\nKZCaLbd999onmfsRqaU+/a0ufWVsVbsatKE6LpHiQ2f0/KBdaOFar9mKjJSa\njHH6q9gXusvemRE3mCNbLuiOyzl0XWPx63qKdnYfiAS75plDRg14PnooD89p\nbJiaUdIeHmgIJ14JjM8x+ODvjg47IayVcS5pC9mavypVELlwgdKI39fgZeR5\nSWVEu96K4/39L8jeMCNNPtF2tJ1KUbxOU3oyLd7Zhntt+ofa5+rCP0VMe8d9\nM6w8SUkBlVQvkfXaCNyIhsgnP2RzYQ3ueO7S43pstUYJcnugnKF73JDrSKD7\nw3Lor1ulIhHYIo1wRsqnqMSnI3n8KnZw5fq06BiEML3KqTDTPwHReX2TEAjw\nOvgq9FxfvZ91LO6WIj4CCa3aInu88ee1OwZYIj+0ZW5QM+t+/pOCo9/EHtwh\ngKku2/+EXc9jwPdeQnRhN3Ce6HSgdMqyx5C2aRtKDzs/VmKqCyVG6PZphWlv\nwq3dgXa6hl0zr1/YoAcR+hb8BEBOpls0jUluZ/MOhM2Ss6sjmhpfQ/ogGNFA\nFnZl\r\n=8qrg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"49eaedc3ce6f1f8db6a6929143c077e8f65694f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.1aaa68dda.0","@material/base":"14.0.0-canary.1aaa68dda.0","@material/shape":"14.0.0-canary.1aaa68dda.0","@material/theme":"14.0.0-canary.1aaa68dda.0","@material/floating-label":"14.0.0-canary.1aaa68dda.0","@material/feature-targeting":"14.0.0-canary.1aaa68dda.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.1aaa68dda.0_1645041009831_0.05103069071630273","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/notched-outline","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.ab4aba1af.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecbddf0ed478739f60725e4636a5b67563dcaefa","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.ab4aba1af.0.tgz","fileCount":33,"integrity":"sha512-9rR3ktBRmTilQeE012ytXnjjFh9aFbS+gg2TWIXr/QzK/LCTFjLfd7kd6K/BAO5EQqE7Q1qd33ZJAyPUYaUh7w==","signatures":[{"sig":"MEUCIQD1Lx93QgUSWs2iFpzpxyk2y4WI82CBXcwVuRQwonzsIgIgFeiiaB/2mgNNHsTP66ZhNEfPKdZRQREI258NCj4i50c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpEtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIdw//YrW6gcND0E9FWC9YOPlItTGmmfHaq49em56oascervTseue2\r\nOBWjlDQK8/aQbbgU3LcBZf6xj/4tvHmF64FE8EznbNDLft28NgIlQOSjpJ9f\r\nzhOlVsHZGkfx4yny1lBh+xZ2RoV5ry9tEzd2lxhdYahGBSCzMUMhLF6YLFIH\r\n13QUG4/E2tADlODsFQlhfNnn3eDQLCm1ui7XgEE8zRwgB7qXBvd3oIvlGSEo\r\nZ0aViBo7Bj2RLNAeYhaSP+5PM/573sLIgffaXfozBKhD4x3Rqdt5kV5QdBZx\r\nIVPDw7OmsK6o4EOMf17+aYQpDettrYV9cEVxSRov28P/OVBPlEkw47fxJmXa\r\nkjJOQyhbxNDrogUYlNGWgjzqr7K9GY+Dyzy4qajPrifqGw6JayWbzt2OWJVp\r\ni4GcbYdhFbTzBlzKd5Pc9qknmU41wVjDdRfZ6teZh/5gazmPcrnEV9P2TC0X\r\nYOHR8QxIH11ktvCTJTFJSVlExCzPKiz94yd2vJ+cvqXxRhEvsM11zxWIU9K4\r\nHTnK1skwAVd4tk7eHUKX4WN+mcDwvUUqA8+xt7eYgn0M8naAajbbzQx0JitX\r\n2Rm5hq1h9SsHV0wFlUwn89Pz6wAkX27PELc2nrHhhRexYXhlvaUe3P9h1l+k\r\neQlTbKWpIhUovXppXl9cbo7AfCQVq6JBon0=\r\n=D/7v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"89aa095a35d4a006012f1de893cf181c5725f676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ab4aba1af.0","@material/base":"14.0.0-canary.ab4aba1af.0","@material/shape":"14.0.0-canary.ab4aba1af.0","@material/theme":"14.0.0-canary.ab4aba1af.0","@material/floating-label":"14.0.0-canary.ab4aba1af.0","@material/feature-targeting":"14.0.0-canary.ab4aba1af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.ab4aba1af.0_1645121837113_0.7098172309395152","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/notched-outline","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.e58552c6e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3544d462f9b46eb3d40196fc45e0bd9ce24bac6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.e58552c6e.0.tgz","fileCount":33,"integrity":"sha512-TZan4k7N8aHvqO9lVcaDwONdrhf4WmHEQc7VIvM+4g010OSpubWGdzolBXKTX5x2YjQ2F8M7XhKrd/9iz1e4Xw==","signatures":[{"sig":"MEYCIQDwprZm0KdmaWNKCeRUOr1RyvihXS6e20AZKs5+cQdHYQIhAJpqTHOg/aWYKIIL1UKrDtPlNsJzGHXg39airozbjKqP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9/PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAEg/7BvcHkx3ZQBuWafcAzbVZ/BTkevyBAd4LS5/ixped7ARfXKIV\r\n4q3uixrN75nB8ZSAapRElGMT8TGDw7kJyz3oUqM5gm40ThKC3Via3otK/XEm\r\n9i6zY7263IwHHCo9zvHto2DwGYCQVJIAgtNedW+xddmrvSBLMvJR4UFgYI7J\r\nQfdjxjr663KgUpGIzCkhhYgKHTEmugNwoTgunPzXTZ9oxPD6ugWwnbiBALkc\r\nCkPHEgaKC03DHSya3yWccLMbShTOKE0OAwvFpAXC9DzULyig7Uh29A/qG3Gf\r\nmNWoiKVfnBR6DZw1JHiD7ArVPJtgI+DjuGdj6ogiV2BaeDlVCav58bJc6QH3\r\n6ur2ylbbFoE5/NvPVJmF61mniZyQy0PJEHgVTJdbxYjGbNVFeRJSpHAI8GmZ\r\nYtdQMNUOgCTr6wlnW0gY3QCSY1/7P1cH9IP0SmdCAbGY81+nnB3rA9qed/Bp\r\nZ9GysxceOJW3SceMf5pPXGXodATdxzWBKrn3hykmVaGQg2CVQ53jgskRcZyw\r\nUTkqrRZYYrVseCotInWn6mDRoxnYUZ4Xe0wX3GOj43ro5YbJ7KfKwu76w1dV\r\nkvWu5EbYqorpxpUVllvz2MNPpkvASXAaGdHPIy1s847cPGqKujzH5mm0GxMb\r\niQhtGnSCsa5AtcpF60VuDrmJkTd2Z6Xbi4Y=\r\n=vvOP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6d5c1a026de93c3896f05529594e5b025f79a060","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e58552c6e.0","@material/base":"14.0.0-canary.e58552c6e.0","@material/shape":"14.0.0-canary.e58552c6e.0","@material/theme":"14.0.0-canary.e58552c6e.0","@material/floating-label":"14.0.0-canary.e58552c6e.0","@material/feature-targeting":"14.0.0-canary.e58552c6e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.e58552c6e.0_1645207503083_0.5615960437615952","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/notched-outline","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.868793776.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03e557530f6bf6bfdecaa6d710ede9343bd3d01e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.868793776.0.tgz","fileCount":33,"integrity":"sha512-0RKKeQqC9yCdU0K3sbat5/j3HYcCo5eS67No+Uigahkviu6G41AttcHX6KIZDLZCOXTConI/kl+aoa3okeVyrw==","signatures":[{"sig":"MEQCICR+reOCBXgzRDmj2ciFqXerL93NpsiE5gdIMzbB+7k6AiBXCl5TlpQiLA4gWSR8I5bDX6dGaM2d5QazdAVwnQJHaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTtaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqtA//fZxdEiknnoSX2QnevQnh7IaHc5T0XIAnKlKXrNj0PPYK3Zjp\r\nBCfBWSRe9kNHsWXz80mehsI83xt5ap9n1aB58BwgbgoPskQXJefRzgkD2puU\r\nV1Uc2BHZHcB31cUKTgCWPMHJcHhHYpgt06eyWD+aE2NcOiXA5bESjnerdkso\r\n/NJ+XofPzlOBghAhfA6CRBPB8YIHNl0pyz4Jhp3EwG/Xs50Xb6VD4QabNduo\r\nHPAGsSjBd3N5ZQeqXkdrpbU5oPiKSVjmyQmX8ump0nzAZFUlxLLvXwCrqcAo\r\n9MJnbY/LS4on6gU08hH2msVC5p9KO8QKmEhLRfONI+BDmtWRUyMiMZTOB9eV\r\n7fqwFwE8V1GGZYSt91e2aLjrminEKpjRwoGp+1xF0Q9ti+8quP0ZCA28rHYw\r\nf2j+wbFD6IuOFTHDXo5WrF2NiQYoCZ9MlSIASmflKqSpzqMdC+Yq0dyeUJHE\r\njiYN3BnGdyWBgDsx+ocGRDWgYv/W43/ZYqqOVcEAYt5IeiTF5BNJFDDyvgbS\r\n7Kv8CozMWNfsMk2Az7gGsutNGRf2Al52Sjsknc+S/v6DqC2Ov1WUiKyQsWS7\r\nbvUXCiMaoi4VqMR+LO6VuZaZc8Z9ZNAxMnhCmSAHceZ1HtjJXyTMstjKwj+C\r\nTcet6xoD2Bx7AkWKsWeCb6MjwIS9LU7cCck=\r\n=igxW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"78272b55e375cfc80b8f288ad4bcd4bba3d8493c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.868793776.0","@material/base":"14.0.0-canary.868793776.0","@material/shape":"14.0.0-canary.868793776.0","@material/theme":"14.0.0-canary.868793776.0","@material/floating-label":"14.0.0-canary.868793776.0","@material/feature-targeting":"14.0.0-canary.868793776.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.868793776.0_1645558618226_0.12752182987727134","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/notched-outline","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.fdc37a445.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58f995f37bfcf0aefead12344ca6764ca95724a1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.fdc37a445.0.tgz","fileCount":33,"integrity":"sha512-ts8VhczISxsoLgCpVSTGEee80fETYi8zOGHrCTKg5yRrXFsJD2zBGwpo5AGSb/7gkiCCE87XRkt0QaV0s/EXMQ==","signatures":[{"sig":"MEUCIQCzrDz7ornSe2BmObFkZCvpvSSk4Vui7nJyIu58i4CMnwIgPt7H9xU3uneMrTNjDkvaPYEVxFzZezBOTCi5EL4eljQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRilACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowJw//eJ7UJaXXI3DK0GMzgGL3M4H3smk3OrjqQs2Cx30Y5NlVNzqn\r\nM/nhj3IE4gVUAzhkkBqAcC/jcHLQOnk6ayXNPeLvPXQRvUS9UnuqCdCx4659\r\ni7y+yDA0TW6nfSnmcxDBn8LSQzSJ6hm8I1X6clTGScqD6GZ5JE9wZbpxFeV9\r\nLk2ZuNbd6uHZUg0sc0tfCmn4tm56hSifK9I6j6WoI+IhQBjwIFgKAX55SKZk\r\nLRGh2n40/+lJqlDGA+tFgk+tdYwWS4VSvtH8RK7Tybr4N4YQPe/Fvlm1ZVEt\r\n+Zzk10+YGl7QvlS+q1xN/K7XjMNtJmNnLdi/zF2t4HJYJ3lIBunJGSue8xxW\r\nIHstjUlNU+ZvgTRw+BBecZ65ZchvlZcueHWYz2ZipCln254fzcH9G+hJx47V\r\nX7ljam1IErUg5qYYdojU7QmAcWWKc+Hwb5v40seYTT5FO3xro5LvhttnPk7Q\r\n4b9JTZERofQH4x9JsbNa7Ctu1IcZGsho0cFfP0VkI2p5RE1wDcYMlFXoyIDH\r\nEM/GjW5iH3L4vp1HW4NebS+Pt4uC38SUapLwDWKdFQENfQhZehWPBeHf/DX/\r\njY3pXVh+mUWAf7UkDN7uWQVHurBSZQEYDGK2AQ3AMSV5Zyh3bHLO37h4lfu6\r\ntsnpYuQm6/sbtkLx0Kokj0c33tNCLBeoaPA=\r\n=KKk6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5a8fd2fd927d036e44b0b22f48d858fb848e504d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.fdc37a445.0","@material/base":"14.0.0-canary.fdc37a445.0","@material/shape":"14.0.0-canary.fdc37a445.0","@material/theme":"14.0.0-canary.fdc37a445.0","@material/floating-label":"14.0.0-canary.fdc37a445.0","@material/feature-targeting":"14.0.0-canary.fdc37a445.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.fdc37a445.0_1646074020956_0.18725871524094595","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/notched-outline","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.43c7d87dc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df7e25c2ead8e03c83dcbd0be081fcda2ac7727a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.43c7d87dc.0.tgz","fileCount":33,"integrity":"sha512-6RgXt1Qxh4UXlSA+0zfRFl+dK2dfsFy6SNDKkIwsbT6Vdu1XGvf1F2XKoBV0mJ5s6c53Q+igsXUP54a8T7HISg==","signatures":[{"sig":"MEYCIQCW2VLYlQ/83Vy4DAHhmrxA0rysrPZOjdnE4ystA4S/WAIhAK0QCEhqdJQgJilzeBOYeRbimiiueCiaawkRiKY2qD75","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjzsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4PxAAod0HN59dfGlyxB4zgcLldQWZgY01rZkRiilFI+safqrgfItU\r\n3zAMYP68NHgvqU2eBpVac2mFpPQnI9Cis8+gyq8L8Y9ZR501qrvUuWzbnlWq\r\ncqUrDCOBBYCghI2/YodbnUdRZEorTmF/wSI4LgWm1inScc2+COEWgHYx1Lni\r\nhZHTY7iCTCVldPSpZdKaM0NZnRWu0LwIamsnS7DW1zmmd5oSoggcmFbu4Ezx\r\n/8Vb+Qyv9toZNY4+myjNcZ+hGp5I14KCsLMs3+CZmWdF3Osyiub0eYdpNEzM\r\nOcNuIFseWXGpJg5TajCAs5E75b0sMjj0/u6Wrhfa2VYPaRMzux6AKHhizBQL\r\ncc+fXU1vxqpqihNhsBV49LUbuOwW1ed5ZyJejn/ket/dXjYTPYzXkelnZOun\r\nXRGPm6VsESoMnXiWBiD3mGNMwgJZHhrVBpHcxAYbzaJOaJhNhF17ftELALJN\r\n/W/llwvFlb1SzLluhiAQwEsyysBFlDUxFUTnOtN7bbAW8FKviXBkmw1XyZwI\r\nf1Uw7/+XKWjIC7k5TMGhh4RM+7p5ooo15k4htCNvfoi3TaV7I7QK1Ee5/ZP0\r\n/clc4uTaB7vkdMT6bfYWox4VTeFTW5HsviWkWikWOyev/qNp1uaMMhXWaQR3\r\nkLkBY1mQcSE2JqBfiKyAsoxN4vjA4F9XHT0=\r\n=YtL8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c03dfa84e200bc6d570c73762d7ce507d0659e76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.43c7d87dc.0","@material/base":"14.0.0-canary.43c7d87dc.0","@material/shape":"14.0.0-canary.43c7d87dc.0","@material/theme":"14.0.0-canary.43c7d87dc.0","@material/floating-label":"14.0.0-canary.43c7d87dc.0","@material/feature-targeting":"14.0.0-canary.43c7d87dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.43c7d87dc.0_1646148844106_0.6738418268728681","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/notched-outline","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.23043acd0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ac73a79a68d59ba00905eda0518c308dae50ba3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.23043acd0.0.tgz","fileCount":33,"integrity":"sha512-wAgQeHrEx/p3WrcAGx5henGb9F7yRcJHVQIZGRO0rsJcCQY2ZiHjQeWnHWmWr1O6qTpSxI01a0PNd39ptP7dwA==","signatures":[{"sig":"MEUCIBa0e8fsv+JwWB/KFZM+62ZG5mXhe9LJlYFHYud14B1fAiEAqzP6Lrul6MpGKX/vND6Br42xcCSLxSrJ+GjePkZ3qJw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9NfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxsxAAkzsZxQwD/GfGsImD0EBLB0YoV+3n1WgR8f0vJ5cnYVXMf+3i\r\nfadA3AIUCmdkVl5isatVYNdfAaI/JM93BgCTlA5PyymoadYuiPxRtJsrU+y3\r\nOLGUFrYmo2/m7GIkcVF+1FetotY4xDTc+1gViU5LaJ9j0EkmcizYS9pwvUZs\r\nhRnof5USFyJL1bU/17knGbh9e2nd5ONEDy+iNXP1v0i3Se5dRyZZYnaOQvyZ\r\nKyUcscRIzjZk6zDG96P0M4jU/xTxxQx8CJE0iBXoZIeXkvEMpQqAA77c7on5\r\ndGCNo2X99K9YSHDQgxyP6zh0fC+eJULaCMgNk4wuuQ3Fv29oV/rzRWuVV9CC\r\na2Hh7innGLLRCGE5+JM1/yT9bJvG/9+BI57wOyRgM4Vc1tS0NOzO9HidvLrs\r\n0GxKYpG33yWYmfgFhY/pM14D421N/yhrKQhyRUisc9FUVFmeQqxthtIPYgLA\r\nyb9EsZ/UJNRL9zadNe54TWWYaHGItYVDJBZA8zR4Be4ajfQf/4v1RIcsvLNh\r\nL+0ztACasYDZKkfvPybJGmPEmIlVprzM/rCGZGaerlMoDnWLjzmsFjQyibsr\r\nA2ey/TLDALrGHUoTzHtWCm/VgFcuZZeOwuJbgIew/ml5HklXvC0KSEiBCEve\r\nAQqQq23yuuyxQMsyb8LxmIFcMzGKgm7h2n4=\r\n=OUi+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b1cfc3908c111a04a69dbaa90966642093f79e86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.23043acd0.0","@material/base":"14.0.0-canary.23043acd0.0","@material/shape":"14.0.0-canary.23043acd0.0","@material/theme":"14.0.0-canary.23043acd0.0","@material/floating-label":"14.0.0-canary.23043acd0.0","@material/feature-targeting":"14.0.0-canary.23043acd0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.23043acd0.0_1646252895456_0.29672510439113475","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/notched-outline","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.6505e61c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62c18787f19a7fab711c4f92b64b005ec1c57c1d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.6505e61c5.0.tgz","fileCount":33,"integrity":"sha512-uvkRBg6VFhGSEfgzLTsJdp0nzShMyCsb0rK0k6QLkHpajKN5bouLfDC+4JLN0CPNycnKw638qP/l5OZ7zQFnuw==","signatures":[{"sig":"MEUCIQCXuc3E86n8D1nMeEr+OemJ1IJYcCu4yq3XMrlucfBsdwIgJO5sW1VRYSNb5+HsWXSCsRCNLmLDnZhql/CZ48n32cY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR6mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvfBAAgunytPCW3geJKcBV23fE5/lPMrzPN9PmMNyriOHNmN+n4eqp\r\nV3/GTskMPhCHo0ZDmgruQUgWzm0JJukpKZ6SDTleyG+CO+4PVlj/QsWs7xF9\r\nbphPbVGbOiIM6s0LVBn9RG3Tg4Pjg2auXd9nwJ0n3qkJQsm4GBfPmuM4VWAb\r\n0ftYHAjtKTvej13Sm7WhNCyziFMUtXrZEm6+JDqaulFBKMr4cTJRggy72vBn\r\nXg5C4yNvFA3gUPm00IqVqR5kJY162zRdfjRr76TxIbp+7HVuMAO41KuRUgLa\r\nuXVk/pEbwNPutJ64/H+QtLGgukLHfU5Sf+I6zm+5gW4NcmDSrJbdoFUni730\r\npSPGLTbJrdTfnh3oQDrK/G+f8qi/u+igNxszMJgBikILupSDTgiDjn/5n/EV\r\nFwHoQ0U88ZAEz4ThTOzIRwOr5gAtSZwKNJI+f8zFP5KwyTdBCxOwUYomh9vj\r\nBQHLyVSh247/MLsmNQxG9GzlfkhMD7ZXSFuH0qgmPWEM0B98z/IdDHoRWgrt\r\nYdB98RbdNPbbvm8t5VeApkAujcn+uzHAgWUtI9L320A7OjL9VVy90R8J+Gmy\r\nRcsEgDS//qSSxXCwyeBv9j20i4ACnwW3N3g9lYjiXrzg96u0Kvrlb0+/3kXk\r\n/quBwrT5RFjHD5NBWFK3FdIvhgQ2cUABfs8=\r\n=+hJN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c9070f0099aa35dc2460994d2d83a8330b996c5c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.6505e61c5.0","@material/base":"14.0.0-canary.6505e61c5.0","@material/shape":"14.0.0-canary.6505e61c5.0","@material/theme":"14.0.0-canary.6505e61c5.0","@material/floating-label":"14.0.0-canary.6505e61c5.0","@material/feature-targeting":"14.0.0-canary.6505e61c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.6505e61c5.0_1646337701485_0.9443909829248547","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/notched-outline","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.16c166154.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67ff63fc3219f4ebb80eb0396a7eaac5d34ee065","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.16c166154.0.tgz","fileCount":33,"integrity":"sha512-oNm06InAlbmhoxzuJtBz2BF4W4YEZN+ce3F0bVPWa1CX7f03hN1xCohmVgypBo3R433/dPympTr5DITt+I4tVg==","signatures":[{"sig":"MEUCIQDyAGuPHl3xFj9MW3I3YmUVZmGhW0HrjDyQ4lQylmeV6AIgOuI6852VnH4FpYavJImI6cXi4W38V2letzN0bmnue/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+VhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmonjg//d4UMe49Hnp2p1wFlzwqaYry3F8vGPt1xiy9sfDpPLlulelye\r\nZLw9Gp+M/j3g9GWe4NlM6UE8AMzRsAIR/mMO2BroFi08Cz5HnuQL59nPqTja\r\nNjWjEMhg9p2kuEG9+3HlIrInTijIqhmDO1akZ3JOJ170DT2FM3YPXn2MCKsC\r\n5/aqiApKuthbdayINZ2oBJF7Y5gmNMZtcvh0Yv8xVYaIOuyElQt0aGGcb65C\r\nu7n5Mx/2GctgY8xgnWHnAYDoTelekrF/wBYyouHr/PxSd7T+6PrfBSGBzAtk\r\nzWWxEVafYY2XfPQLFqXpMnpj9pybOIgFRIHLgxMhFZGDIy6bQeWhU2v36Sm7\r\nQhAx/CQvF2TKg52QTpQTnXPF3IKn6ClQ18yQrl1uHyT27HkjLb6mp+IXEnas\r\nHeE49Vdp81ypveW/xZVHdIYbJ6So2MOs4q2dirVO2Pz+SYZLgM2TMuIstv1P\r\niN7GO+uxoD3j3YLCpR+07XJEvs8GkYiJoYprj+WESdxRAYJXAdSutrKNQSOO\r\nod5uPcGXCOGyLJS+qjjart9sm/+NqB0NuU/GGG3+0J2N5T1CnlAQDAKOG7VD\r\nBCTvqsu2aoiWsEQLAp3yH5mewu/voxEotzdvdfChNZOdWxj1/GZ/Ehug8xRC\r\nXkYq3X0YD1W3JERP79d5R6q++1GjGocFxvk=\r\n=JHFu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dd1bb8b4a67220dc0120ba2dbdac900e51002949","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.16c166154.0","@material/base":"14.0.0-canary.16c166154.0","@material/shape":"14.0.0-canary.16c166154.0","@material/theme":"14.0.0-canary.16c166154.0","@material/floating-label":"14.0.0-canary.16c166154.0","@material/feature-targeting":"14.0.0-canary.16c166154.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.16c166154.0_1646781793691_0.7412654050308514","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/notched-outline","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.bdf1d3771.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44a549fe1857d1aaa68844f1af2765dc4d47a04b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.bdf1d3771.0.tgz","fileCount":33,"integrity":"sha512-44ZP+tGUu07k4PyijnyuxzfKvq57KxkG+zWip5jt9ces6AEOt5s2rer9PIvismiQgXovdGBVnANnQaDFjofj1A==","signatures":[{"sig":"MEUCIBUUbxjEQZVGrTF+SLG+52UVzRckL29oWTzcWeJIsjnLAiEA8Ti1AEd0PBalp4VaraY/1zmYlAiSE/viPDobo6skIuc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1E+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDcg/9E+ASEG4Agu75UvTzAwf1MIilGBcSAE7jbznSCnwFiquTc5HZ\r\nkwHkABSkwARW9O/JurX3995Zu0qy7BXbVVebmIiER3YORmcVmbXW/FydqB95\r\nRcHYXit3re0sgprOviphiegVP3UXUBMjyLQoSjK1ktoAR3TzghoHEfLv4WQb\r\nMePaznoB7SKKQQm10moglVSVHvSybduIt5zYN+iYpZolg02eQbeIgFGmhR1J\r\nEhcpqf7F6pjIu3aCr1OLOvtGZxGvh9BntgJEeOeRezdeidOIpJKvmYO8J/Qd\r\nvCbH51eUM/q+rI1SU2SOzrQM7EAfFPPAt4SQRx0CyZi5ZwGs/uuEPFRYcxJn\r\n9OoVLFRX649KyC/Rk85JmbmnD4m8DoRv59576w2GLeLu2qaWpIIosRh3aLRl\r\nedO7koqFv0znSCeC0MXdVARaEm4BwHTN3g2ExCv6Bghj5mXaAMnt8xI4LT3E\r\n9QfIxfpNR0DRLYzZaP9WG/K1gAZpixz1ZW9huUKK835Vk3gz1QKYKOAmfBND\r\ntMECyDeyrbJ4K0oeBXSW5NMxi0mJQZmFfhkDOiSAKipAfeR8JwS3O4iqtkg6\r\nL4BoDkEzcT4YsUIx2G14jrhUPyfEvytgLTJuzREhK/MeaG11TD0XOSrkdwCH\r\nyPMAoyera6ZpcY1/IRRNWdvg9h/SzOsXaGI=\r\n=eW4u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bf598649c7389f49207c410e58144f75a67cc4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.bdf1d3771.0","@material/base":"14.0.0-canary.bdf1d3771.0","@material/shape":"14.0.0-canary.bdf1d3771.0","@material/theme":"14.0.0-canary.bdf1d3771.0","@material/floating-label":"14.0.0-canary.bdf1d3771.0","@material/feature-targeting":"14.0.0-canary.bdf1d3771.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.bdf1d3771.0_1647268158781_0.22250322393367283","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/notched-outline","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.cf4292778.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c6d03bd6ac770816dc380dd1e3a35dccc8db5cb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.cf4292778.0.tgz","fileCount":33,"integrity":"sha512-qM2/KeF647QM0Q8S0nh843NLkIYfxRQecr5sLiAwcapSOEUPFfqvV5HLFncrSifPbBJUNlO7uQAk79HMTBlr7Q==","signatures":[{"sig":"MEYCIQDlTP3u6za6hBgeGsUqnqQCGC6Cvpq0BzPoXLLqC6v3SwIhAISvqCjSXvTt9wONOO+23QTuddoWV91WzI5wszJb8QpW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL94lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfSBAAobCqo8qvvgaQ+H9tF76M9eYbVR72dMzadiHssUyVI+waH2at\r\nAql/9IxDGJnGU3afABxdSR3YfrA7c+qnq7Gl1/8WOtIix7EJAtjbncsDCk5U\r\n1N2yMJEthw51XDtbO8MM0qQXTtilPBhv9jRmyDaQZujO7BVBMfJNM4zYRLF9\r\nn0kYlldv0ouq026ocpLdQbnW/sR6DpicevtnvysGrcUOzUEw8M4C49uHjVTo\r\n5VPZWWs61jrANSCFMeD7flsHwsLFlKbpwRayQTWvgi0rWYHCcymphwJxPhLj\r\nq6hFdyBkZsUWn/c9eNJGTwpKptzty9Y7EOQa0+alQDSb+ldIy7e4AbyVej8z\r\nwqXPh0Ox3hHULmdr2na/28ZbaujkJleN99hjUq3Z610jcmPWGBQt04vZgVrN\r\nCHcJZogGLin+ZS7cTqOIdTdQ9giIYkoFZtm4XsJHEfkTT4QANJ+qoWM4K/i9\r\nokDYXc8miDDlKBb9kDkEGfDOs/tz0ZQ8Ql0vTtNR6t43bc7XpugY9vziGvMR\r\nUWszQGjBwHRh0tHOTHv90N+uC2JFJ16WYsd/zXB7sU0K2OxD84kQJYmUOXss\r\noxUn6xsKK4uSOPh6ydVWS5AcVPU5kYM+1SxZ8TcTOL6mpEZAyY1lZyXccJ73\r\nMR8cuOoP20UiJ3EJg6rcvKZ5cpEOfPpqPHE=\r\n=cM4Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"85b1d5db9650586ff51d999fc12531d07489d13b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cf4292778.0","@material/base":"14.0.0-canary.cf4292778.0","@material/shape":"14.0.0-canary.cf4292778.0","@material/theme":"14.0.0-canary.cf4292778.0","@material/floating-label":"14.0.0-canary.cf4292778.0","@material/feature-targeting":"14.0.0-canary.cf4292778.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.cf4292778.0_1647304229723_0.17984643062142047","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/notched-outline","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.bbd43e0e0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43887dfe9ae00f623145a38e6b31c2564c17ad4d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":33,"integrity":"sha512-YHFl1lnMfbxnZa7i1pyWPGtfovHqwShxVG8hgExHDcbgm4ITH0fHxFBsw7K9pptOcv/2PUc0NvMhrFdH6DEEpQ==","signatures":[{"sig":"MEQCIGhhfzUY0BtdS41TdNrLfldBQDULK/98Nyk6dzVACsWUAiA3qsXQoPvpcTA+ZYs5btJrn3oHNiNtWJoa/y0ahohNJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk2uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoONxAAmvkSmki+IiatxYYzb897dJu2LHEFeox75kEEMwdZvhjyitH8\r\nyyj1+3fko/vRLzvVFQV0Rekt6r/GalM1czGyiYWlXg18knHiy+Z5xgE+mVtL\r\niM53LVj/FGINLiDGgQs5G5vHyzbJiQKWBsbSHxkdfdCDPZhkt/ML9UZ/Npww\r\nfdHnejk+gSPoW/bg7de3a3SrIsINCJW76VkXuGJBQHR7wYOQ3g80Uq66jE/Q\r\nu2x1mB6X+/e4bu3ZBVQlWtpKB38W57UMaH3SHUJedhRFGhkGKD+Msr2MAkIa\r\nTW8CPPddBx/BDDBnAU6iJebdNFKoT4j3XJBtGBfjhyFtM1HFTrir8XP7q0Wh\r\nTb/mAi3+49QcjD9ro7WJ9piUXPsxKF+/DjebFDb9UjODMoMWqRiSblXLefBF\r\ngM7hY5mwPpO4p1oojgYMV5WAnlmETkTM77Vu9/Dnxd83mtaauET5Ci39JsKO\r\nBrDhHbLre7RHgwBQZnQgNwE78+xP3YDk2e+9jdjFFK3aXkX5czu+hTGpaPxU\r\nkidz5ab1/5rST2Ls2aVns8ty4/GJQDTtzLtPAbEUTjJfGv3sYhSC9h+1EPC1\r\nLOREJQZTchFs5bGatib0h1ZsNiVwyOcZHM91GHOaxMWQwaoNYuZL+KemPh/2\r\n0pEGWujHQG+rE8Z6RmAPe9UhnA//7Yo4roA=\r\n=PVf2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bd60ebc6c6267688058726d6f98421b0e815336d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.bbd43e0e0.0","@material/base":"14.0.0-canary.bbd43e0e0.0","@material/shape":"14.0.0-canary.bbd43e0e0.0","@material/theme":"14.0.0-canary.bbd43e0e0.0","@material/floating-label":"14.0.0-canary.bbd43e0e0.0","@material/feature-targeting":"14.0.0-canary.bbd43e0e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.bbd43e0e0.0_1647463854250_0.8742455995467482","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/notched-outline","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.1b6afad86.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80c5a95b8230284bfa81442c6aee32a8e7109e65","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.1b6afad86.0.tgz","fileCount":33,"integrity":"sha512-yIY3+XUmlBHjg6/3+58BX3m1Dn81HKMvHFQJS2uGe/3opCDVdEHJXoCBHKSSQFsuyIGs/1Z2uMKL7csY002q4w==","signatures":[{"sig":"MEUCIHhktOKxfxLK1byHCVL5yhWotXtVJXuuCvM7a0JPBsbGAiEArbG67Ha7IlqqN1H5s8gquFrFkwbjKmyWs1GFDm8rEfU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlDaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphLw//RJu/LdryLtlH8Pgbh97vHWzJjYgZMTGXgpWugaOUKcL40ddz\r\n2PO2w2lKPZGyUyTsDZghhKKBBa2f5P+2CiFuIS1YI5ij3KNndTWlYiku7KB3\r\nrHvC/tKVhR/+mm1mX6YWWkKf/LMjl73snkps1yonXKNoRgCZqeH96HwyNiHF\r\nYvK5rwLQTH/ZKksoNngaiHGwO3wxEwJ1K0QZfroFJvFkAfdwUVuekMgoH7SP\r\nzprBt7HT+cA2x/8PbNI5R4WpGyQnNRGT0wkPRdsKU5VngKNqc4jdV2ThrAm6\r\nZ5lXs58rkK4LW/HEZxgf8TJPsxrrZ6mhjm5vXQNFIwgShkitmdilrQOjEBYh\r\ng0kHANZN4zLoRNJMiv+6YEh9gdoH44W+IP5/Qmt7uBUfe/KUY1TVV+Jhncmn\r\n20dp4i2eROltHteJkDn92zn94EPoLhoGVRIe6k32C0TJnGoq2RxuHZg30hwE\r\nfPkjGhQpLsZrz9elBd2/kKH5uUvP75F/FJkz7PYUrt51ADxWWYv7Q6qZEQMs\r\n4J8Fo/cBcRHTEVFP+6Bmg6lZjfXXg0D6VHQUfULZIu3qJs+AlXnXMPOmfCVS\r\nj7/9APURJr5MOD063WxJdiokj4B4+0eXEe4s9g7URfvxfEw+nQXWQMpChFh2\r\nbKMW2rOplhZXEor+JPcuQMtR0S1SngdPJF0=\r\n=NYmd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5e32cc72145fa47fd2155c83c81cfa7ba5e27db8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.1b6afad86.0","@material/base":"14.0.0-canary.1b6afad86.0","@material/shape":"14.0.0-canary.1b6afad86.0","@material/theme":"14.0.0-canary.1b6afad86.0","@material/floating-label":"14.0.0-canary.1b6afad86.0","@material/feature-targeting":"14.0.0-canary.1b6afad86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.1b6afad86.0_1647464666507_0.32162826619546725","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/notched-outline","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.bdf9d4af9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8198b8f287f0901d2cd2ac14674820e9bbe92db7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":33,"integrity":"sha512-CQBFxECZwe2K7MiSordFSFpChB8k6bSBFoF77+jas33cdR41K10i9mJzxT1/3JhMDN7Zl1Pehj3Dx4ZzhxUlUg==","signatures":[{"sig":"MEUCIQDWQ64mUGCJAlPgg3MBf5ByIxH28gBtl9nBdUbQwXn8iQIgJSnmTJF4E1Y68/0vtD50WFalAMKQiw4EdTD8kwlMnow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlQyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr53Q/+Oq9olVqgQJvF9YNLBEAUHG32njsL69V/QfXwRKubd5v09kX3\r\n2gufKHRV58OqZz5vCKXa0aIyIwdU/SFEC6M2QcAkWdp4gAh0pz6r6CtzsaWK\r\n29DxlIdNNRmMtYCum0PlrDqX0SS5bvUf0zzwl5NnavnedtYaI4vpAEWDzCIy\r\nGhK2rMC5lLhBNtbTylZy+b6WX6AmBvctGjQmd0gqYNqZ7UhTpjom5JSsm4BX\r\n0p4637QsURsGOKAfralJNgvE5TCmP/5fYcvMyDR+8kRBLYUKMZzphdcxKSr7\r\nqnEHwD0FHgPlcyPkW2w+43JXS9O/uLlnLs+FFWR2+oDj7sJ5vZuiKoIgZqWT\r\nF2Wz+TeuYFd8T+0FIKLGiqrnzig+VHpQVJ13GrMaT11kMy51uFLhiGfU6z3B\r\no/h9U9QrpD57QB0QAsdRxD+ULP+A8M+51//JcJP3KSOo5ZZ9/wBa9BIrIZ02\r\nSl70ymsr2ZuQquXibb2Pos9xbpI7iaT62tcaznwBU45XnhtKuqyHcm9eiA/u\r\ngA1xQ9IINvm5vguVadEAk423VmkMPT9+DwfWTQvUf3o29hxs98Nxuc9C2Ad7\r\nXwmT//oWAbkXq73poj1Ua4oAv4qGwzWe+90vwF5bAPI7fNg4Ah9lci6mkdsM\r\nqZaWBE4HwkBN2BGfqHG6cTlHpcGP3izuFek=\r\n=FPoe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"413f4cd271111f1b118401821eb4bb38e7fcbad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.bdf9d4af9.0","@material/base":"14.0.0-canary.bdf9d4af9.0","@material/shape":"14.0.0-canary.bdf9d4af9.0","@material/theme":"14.0.0-canary.bdf9d4af9.0","@material/floating-label":"14.0.0-canary.bdf9d4af9.0","@material/feature-targeting":"14.0.0-canary.bdf9d4af9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.bdf9d4af9.0_1647465522715_0.642303390647684","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/notched-outline","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.32b391398.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9487174397da7beb0096945a133d6367b4eac88","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.32b391398.0.tgz","fileCount":33,"integrity":"sha512-n+6BnpUmqSt86YuDVmwa2fG4u3IlDuMA28wJVNibHY3JpLyb5WfErbMuRGD0AaDMQ+6UnTClh44uHTtgr750eA==","signatures":[{"sig":"MEQCIDu7hffDxzzIaepSpndQqdrMAN4Y3LOFXHjWHapQvg2FAiBrT9zOzr385N8C3o5JyEHFbaWTIwzzUhW4rcx8clQu2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3ceACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0ixAAmDJ9rip1KQIiOf2AKWzCqP70K7LnHAuOBXH39E/KnMVArFp5\r\nfHJms6cXM6dqW/qLonBAQkYHFgnJ53ppfXWcpZjy1JPoJNJ2j8Rg3qK7Hw8Q\r\n+dIiTOg+U2fVShaLZJl0fMEusHg1AbXt2JupD6uzNITM2MKjwac9Hsj+sS43\r\nhbnAHjp6I+mb/YzK/utcfi+LJd3lyk4w2nDNfiSOedVHuGNzM18H7DB6cfoo\r\nLLOZHW4gqaiv1bvKycVghX1tyzRa6LLaCXPVGoeJIshhiSp/7r/8MhZYb0LM\r\nNkRZvwmKxPKMBKhnjZrNgoAU+tbDsA0Be4VqZGCRh6J+9dTo0Rwk3xONZkPI\r\nT3R75Nq40fCJrloYkkF85/wxgWlKn1tZo2CSXIrUq+URoE/vKPgUYS0OpO+k\r\n6gCAKdqZmXSzuzeWwedHddxftzpG75NHcCOcjMIjdgK3oR636jmcJxY9Wo+N\r\nI1TClBQWHhfNIb0jiQeONKXSR8vQt9pd5HuarKWZ6zz/VwrvPE2kn/UUXaHm\r\nL7oIk8YDN7gP91CmR4scimMOtZt4WBaU25a5Z/8Cq+l2eQgOg1vW+Iw4tRkh\r\nwkQJOhEP99wss3nrooFEOmeOhsJ5LOLpPOWDszY2RlgPnn4yQZawSYb/NGIS\r\nvc/a3jOzIaNVzB48NJX7AiST7RWY+hKYibg=\r\n=vHmm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8a457bda7a5cedbfaee9da752ba2dbc093b45ac6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.32b391398.0","@material/base":"14.0.0-canary.32b391398.0","@material/shape":"14.0.0-canary.32b391398.0","@material/theme":"14.0.0-canary.32b391398.0","@material/floating-label":"14.0.0-canary.32b391398.0","@material/feature-targeting":"14.0.0-canary.32b391398.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.32b391398.0_1647539998304_0.5543383717586547","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/notched-outline","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.ae8a6a3a3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bec0777f8011c82cd6f99ff9bbfc9a1aee14b2d9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":33,"integrity":"sha512-76RzqAUleivlalP3u9waqV2Ym2DY/VejN/+O20lg1IlWX5nMjlbGSul7hPoB3ddN0E+rrYYinv7WzjeOMpcB8w==","signatures":[{"sig":"MEYCIQDneEx2SJy11mrchDJm6MrKlDCZbKP2jbtoI5+i0LCVtwIhAIjDNAz9snRDXKZegGrIlq34eOtgU6Cm4sMOhVZiWono","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLXlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoT5RAAjlUkpaPVFzr3xBe0DMcSNhbrpodyGcvjqr/QYe7lzr1A/isP\r\nOTpTfI8Pom+22HSuEQu7FL97z0bzsN5V+2Mvd0TzqfjNaKlOV1HYfCt/APoi\r\nRQPu3jrQOANfupifzk3mdLqGCQO2vsSA8FaYfhb8d1om7EMOIVXetXkcts2n\r\nA92FH15KtU1zTpG+kgzHPbYAQXqssIxBMtVBuk2nXCqmeEcus6dgFqCwfTWp\r\nXqBrbmNTU1DNhO0OvabHToux1IuAkg55NNUaC0nApawGwlQaURVLBjBBVLxC\r\nnhcvhr7y7EJ4b1BWjfHn2spWfbbfurfusckrFC6YaxK4VN1nhTHGJz0oCevE\r\nY4iSFFahtEflE8pI54nWtlchIOs3/eyarboHUk8jRnK+Hu0FOLmBWP0+vZzt\r\nwMee+F0W6884Xyt2pInxRzchp97037hdjEj6XP5MsgFrtScMzUALpEBSJfWM\r\nQvkk1dDs5dY3xIjFJSDd4V6GaxlLz6Kqlm4vAsjzRXTzHj7HtlzdrFgnkdbI\r\njdAwer6v7+RyLXocrJRVkakJxVlGwtic4Sz86Hb062bcWYqz5ArO6qiTSGiv\r\naPkHkIy+VgmiWObsq26hy2B9z68maBokLML3TaLPwLKZ0WkbatIykpowaowD\r\nf7wf4M6iVv0PfQQw23CDRxEIEp9rG6kbhqQ=\r\n=Ig5+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"783283a1304f941e05b3ef25b9a589158368c595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ae8a6a3a3.0","@material/base":"14.0.0-canary.ae8a6a3a3.0","@material/shape":"14.0.0-canary.ae8a6a3a3.0","@material/theme":"14.0.0-canary.ae8a6a3a3.0","@material/floating-label":"14.0.0-canary.ae8a6a3a3.0","@material/feature-targeting":"14.0.0-canary.ae8a6a3a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.ae8a6a3a3.0_1647621605423_0.04089215581647121","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/notched-outline","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.cbd9358a6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be97c9b6db6e81904f28c107ca5d95215217c1ad","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.cbd9358a6.0.tgz","fileCount":33,"integrity":"sha512-bB1LsaCBBJAqA8XkD1NNc1wn9BWycC/hlxNCqb/vEmbNHFczwgBWkphcbaYD9K6Cjk6Symrx8yGiZg+sO6qoEw==","signatures":[{"sig":"MEQCICt0nKwOBZyx9mXPfWL2HTUZiucBPriNjfUQZIg/XMXbAiBieOVax4exI2r4nkO44B5AXAqVlpCHt65NFkEVOZbfbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ1IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTqQ/+JcEyJPLHHEy67+Ehot/yYZdWkNH17lfLvu9D2CaOnwCgdoRr\r\nBnSdnFTzij+076BHjn2eA6EjpQpjIbImcKaLD1MbvWJFs3SYnDFS4SfBi9oW\r\nfp8vL/2l0Uga+L43Bp8JqFvDVDkbDiOoZjSNKbNmpItYkGF44VZv3pFBgnTb\r\nxo/SjTKkOpfWln+U6ht+hw2g4kR5DUWADKW3dw59M6jzakj7ehT63VB8CSTt\r\n93Q+M82wllcDTKaJkMCoLdp+K72tmZDsDWdylOEbkdaNyWrnXqDrcJ4V/uko\r\n+1hGNhfQ4tq69GqsDyC4dKI69ezEzhbYcsqM+gy1VNQ+MZefqyvJyn/GWAkh\r\no4c98NHgFGUMr4eG+ha/plmweF6TC9o9TovwK6pj9VIvN6KEiLnEp9pjm+a1\r\nWX6UrbyBikMDiWCz9OP6SEb0gUn8N8x6vHSCaPN7VpV781fR0cFyFYQZy0eg\r\nejyDsf1AiLwtHewqmVZfjgSR3U30zsIgtVLnHU+ZZAmx2xEy8n4z7bJmz2Cm\r\nBxHvaF/rBP+vz4A1KafTzcdXNY/vMFr77FDQhiOgzab8OG5E4pBpCSfJV84/\r\nexcG44gd0evdBUjwTgSQpWG9VeqUApcngw4P1NocdlqzKFk7xlDMXuDN9rdN\r\nlnAIBTx15WOo00+bGLHHyQe47Spsfkn/gio=\r\n=vWcW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a4296a048e6aa0c1ab8e8d2cc6cb8321c24dab9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cbd9358a6.0","@material/base":"14.0.0-canary.cbd9358a6.0","@material/shape":"14.0.0-canary.cbd9358a6.0","@material/theme":"14.0.0-canary.cbd9358a6.0","@material/floating-label":"14.0.0-canary.cbd9358a6.0","@material/feature-targeting":"14.0.0-canary.cbd9358a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.cbd9358a6.0_1647643976642_0.3361119036966571","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/notched-outline","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.dcfe49c98.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5159d09eadc4de98f465752400b0d27b74b1ec0c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.dcfe49c98.0.tgz","fileCount":33,"integrity":"sha512-6ITXHT2fY4WJsyEqqgSUcGXf9a214GebNctiERwB/xOS8KTI509uYxVHXEhPyMOLy8itXDDERG77esMchajb1Q==","signatures":[{"sig":"MEUCIQDbpixl1XE1ik1igRT8HnaNAuOnxpujv+5+2BQLiCRHcQIgHp/zXk//c2UBZT3WLiMj+dVWIGfOxvO841H6t+oLWmA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMeoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/og//dOlEMMk7UYksi8meqtflS7FJqIaUfHKKOLlHhmziGnzA55ik\r\nhIZ/CS48HeqhIBUNlY9vYUHtZxBrW+guTGKLrP3lPqLWnfpDEmb0qsvGh/k/\r\nRY+rSyE1zY3iAdA4TNJdtBZmU5IdPqfZcPntBbnd9Sk827bF20mdOC8A4D3M\r\nnCRNNME9qE38OJVft3Wki7CKhkqgEh6RlntoAtscZ5bg6PBIXtYGoeHootPo\r\nbS5LVCbTrGjA8KCy3s2Y7DSzIIDRlQLsihNVbYSvKFh2Bip00qtzhR3h574y\r\n/WDP5Q4DF/Anm+MtzZ0NjuFkRbg/pi91QVoT3OseenSvNPTR612XcWxVDqqP\r\nM7mKFBLgVdpLaZW15gUYpsRqf1vlru4d+avcEfgjHcfM+iMo8uiomMLIGXTS\r\nWrShn/MLprcN0P46+OyYNGyfvWEFtO3d2fM5CeRu1D53mPez300zfcc2H9y0\r\nmrKvEAs/p1YSgf0IajljGKVM3E/mcC0QqJN1jLZqzeVJmPZpn2r/nANuuWHo\r\nHIxlpyhTWWHZIIHFMQKxKM1Wj9hyNry2r3kvj8asF3Ln4dXyqEjquAojZp7s\r\nFHCUM428pJlabjZG4CuzXnYkp4Wzb68q186++wMXynLg+eIn79pCqnZgcBPD\r\nbLeiEA0jnAC1f7rmSjICpPwkuRhFB0QH1ro=\r\n=uY5m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5b68455eaf6aaf2f571eb64a1d8a5edaba58d37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.dcfe49c98.0","@material/base":"14.0.0-canary.dcfe49c98.0","@material/shape":"14.0.0-canary.dcfe49c98.0","@material/theme":"14.0.0-canary.dcfe49c98.0","@material/floating-label":"14.0.0-canary.dcfe49c98.0","@material/feature-targeting":"14.0.0-canary.dcfe49c98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.dcfe49c98.0_1647888296509_0.26066902277563586","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/notched-outline","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.f31a833fa.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87ffe23b8074bfc65c68dc6d8f596b28dd732f75","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.f31a833fa.0.tgz","fileCount":33,"integrity":"sha512-d9ZRS/8g4dGQfqlN9HnR6abcpjvkmJZ7lNnQwUtxJzrWjVRJlIeWXFoTUGajJnLnv/k5SkhaXWc4E2FzXXjj4A==","signatures":[{"sig":"MEUCIQCLVj/TDVH1BJRbQR5k7yQosPnDYAwIMIjaplkgI68YOgIgU/MxiViwjpiNYHlN+gilYVTxt348mSqeIV6uRQ69o5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm8aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+PA//bCdrPZBgr4UudOSzhyJFihfj/b1iCbkvqmbTQE0JDLrnCd/J\r\nhrgy4iz7TZQX/qnxOhXIdnqQSvV4fLKVvGmKPYeI58BJIISKC1eY76zOEO53\r\njyhrtFfJbmet3f71E2Jfph0zrkeoOLZ/mZhU/7rbRJF6IjFCq6YelX+tWRiH\r\nPo2jTBVTnKjAc7vUql7UyWF9UkX4Hgstk2EMBUW2ooSrKkWoCxYTbeoxFK3i\r\nHoFSZWk8JErvPpq1W2I+ZLS7Wb85uCh5V/nkIgg4leOhYaT5ML7w9HGbN9Lt\r\nHmkC1MMJ73r7jHkGp/1CI6Ana1cCNB0bp1gDiNKE7T1XH4fGTUhYrKYn0zSu\r\nhStxFlcHqpnruJFQJOx2wMqp6umWt67UMYOW1HzSkaQoSDKA+QQQNovzRUpU\r\nPo8cIFEw+gN0URyMoAbqvAamCWSA1bVYAQ+CNKovLS2s4BN5rYoaPgXaNF7i\r\nI1YeKLI2Gc4GvV3yGPdbnXMiVHkdJSaqzVQ+xIb6kMYC2uDUeWE7o09Zg6pa\r\ndNe7vykLq80zlv22obQQtsaQjL3MexrYUOs4vWlT4eK6b+M0sqc+etl8fz6/\r\nID/oA+g8pIyC1rFmklM6QmEhufnjv+e0RckocrAq+BUEsg+ps/JtLNj3d+9a\r\n0HwtwdiBxv3I3EeM4vjnKyTFXWLs3RJL2zI=\r\n=02ML\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"28572f217366c634964a133bbf0ee0b8e88b8126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.f31a833fa.0","@material/base":"14.0.0-canary.f31a833fa.0","@material/shape":"14.0.0-canary.f31a833fa.0","@material/theme":"14.0.0-canary.f31a833fa.0","@material/floating-label":"14.0.0-canary.f31a833fa.0","@material/feature-targeting":"14.0.0-canary.f31a833fa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.f31a833fa.0_1647996698516_0.3938528187135615","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/notched-outline","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.4b92e210a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed67b45c54267636c1cdc123ca9eedcfdd36c031","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.4b92e210a.0.tgz","fileCount":33,"integrity":"sha512-+2cnm9HTWP1Wy8WZHLyV+A6Jersx8KZJfb+nIk98vxmq7+InPfIH5ghCeTTcMM+/UD8WNNTkUSbUDVTJEa8gPQ==","signatures":[{"sig":"MEQCIBzUE9l6TDuCsFn2Tzdh71mOMP02LQJ+DW3ZQVtcbR0LAiBt221t9Q87w+ZvuUCkgSZhHFPPAQwI7GP3dw3/2WLhdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNJNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrX8Q//SwgVNaoqGbgElsP0hoFFxGOJG0RvYbgCeP7OS+r7v7Jqwami\r\nrK1uFq6Py9/HT2E8GsP5DDojwMRU9uEAxe51pVebGJUriyPyhaYVfaMx34k8\r\nqn9ZTq4V4jVgiXVPtqY+eiOKIQOs5qUNydKjYsgjbAf1nqwLAiqrOsFVJB8a\r\nTOYxYx7FkJ3fc/v+lrCghi4H8GldRXZqjfdzTHR0pM+VGCnPOTRH9VHMHJG5\r\nsEeoaEskoRTvo/Smzgz7C1TNXYWUNuW4/yoHV0Ypzy3HS2vqZQkjlfbMTC5m\r\nsYcsZweDX8ah6WqjsVmYJV+wiheAL+xoNMP6Y/uWV4O943WrkwmHfIdK9xTE\r\n8uRWaFRwW9t3vzZbCrAumlgo9RwDBGiUv6ISmWJmb2tCiFRpe12jxD1Q1ClR\r\n7Z1qiydD6U04/n+4lvRznHzx4ja9ltDl/UpBBIYig+kfG02iZOS7foKlEsab\r\nZw8pwDCTDDpy9wgyiwgxQ1WfktMsUxmbfRRiUah5jEOXZDkEHcgaCcrAizmp\r\nLEans+XoFmyGWoSwPAdp5QkQltK6eqollG+fOLgzS0JvtTN93Y8hRSLwpHrm\r\nuuZM5RAPsVLk+2ynnDoCdmXzL2aT/wRDQ1W/3crE3VAtk8x8IApWg+1ceCeC\r\nQ7MyypwRdrUqQ41e+w5XT6cNxIeymoXeIpA=\r\n=Q8Ng\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e9fc48f242a1815183c2b4c74ea1f8bb9967004b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4b92e210a.0","@material/base":"14.0.0-canary.4b92e210a.0","@material/shape":"14.0.0-canary.4b92e210a.0","@material/theme":"14.0.0-canary.4b92e210a.0","@material/floating-label":"14.0.0-canary.4b92e210a.0","@material/feature-targeting":"14.0.0-canary.4b92e210a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.4b92e210a.0_1648153164989_0.28691502555357484","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/notched-outline","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.a657abb61.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5c2195a1da029269285211d89cf0ef344401dca","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.a657abb61.0.tgz","fileCount":33,"integrity":"sha512-fW4CnKzjyNmhLee5eZ5vHSNx9ekXYRG55x4h9Ub1MLltDEwk+3agNlQiTMio7Ed7IGefVYXc1iy4bj/uOi5e3Q==","signatures":[{"sig":"MEYCIQCMxHTMmS8G8JQqeT/Lczt129AwO53JVEIosHwMCYl5ggIhAPAda8U8uuSODF0M2zn5+TlActjLQt74vJyyV3MhmERe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNdQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQig/+Jo70wcjcsRZroJ8LwrN5ss7ywk9qSuvOnZrQ8hKJrBI9B3jw\r\nHDy54xNYil/YUFOhm/YHzE3kA6pqnJ4hJy295o9p55MqzV1ROsEfxsMFHLAI\r\nPsb0lTUhksyML0NhaP79cCXc3cbMv7QDPfRNiGbJ3kVWiG3sbzvYk2YcHRSo\r\n7ZQqb8glnLjvjdjNkKqFBfFvj7PdXM2DUt8G2whsSIZ4SSAtwdkjbQp5HuF9\r\nS9C2SfHlq4THfxK8zoL1Rtr/b+Q8+b28mXiE9+bERPXUKFYtGHMQWIjrgUU9\r\nrGFX6LetQKoqqsk/Q/TPM4/re38SRu2zAxLmoOlsR/thp5HbxvJPMzN5lA68\r\nIt1Dk/T1l1OXYFWUmlWtxTwYyZLgpbGaVxcZxyclgpOjSavYat5xLp/xFprV\r\nvmHt8fEPAAeaMjuMqJ9L70swi+BTCMas2mm5iw06Vmv6FBJ+yhfjSR6cY8eh\r\nIINR+j+BaV3TqV/MObsYt/XHrtijnP89v5IuBFwPfcVvAOdl2lg+5YjKs9A+\r\nXUKFJCGQ0ARI9a+o3zLBRf5ZgvPmZjQ0jRg8Mu/WxD+OTdVVYqW153oCgbW9\r\n6lSuyTur1extRMBYVvoLYCSCxrsXFleS4vKdxwIMgz4FHYr8M0q+91yudyh1\r\nNpgRE/dV8Lsu7Cmoa6k41lx7v2l+k/pBfic=\r\n=2PLy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b17ff714094456afc14ac1ac896e38f85e300743","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.a657abb61.0","@material/base":"14.0.0-canary.a657abb61.0","@material/shape":"14.0.0-canary.a657abb61.0","@material/theme":"14.0.0-canary.a657abb61.0","@material/floating-label":"14.0.0-canary.a657abb61.0","@material/feature-targeting":"14.0.0-canary.a657abb61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.a657abb61.0_1648154448408_0.6908010666768023","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/notched-outline","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.443f63f50.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adcfa0ff03f50e0f9404ec361418a9f7e451815b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.443f63f50.0.tgz","fileCount":33,"integrity":"sha512-cFMuRioBThVpcTmVkVBfkhl0hqQxx/JfyW2pXjQLHydgadVnRrfV3kl9VTWvBMSpbt76Sy0BvHF7A6pjGkt18w==","signatures":[{"sig":"MEYCIQDrDiMjDSDr++mAh2Xz0prq6vNGpks8VrQExWeT1eKcggIhAPWzY+4VONAt5F38Nn2fmMSUvKTNUvGnhUlOTFrSUKjO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkq2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofOg/+I16JhGBUkTBgVKmqaqroHscBiI4P2zYODUOsCSBoNdbIWNPI\r\nP71HIWDIqn4CS84VgjYff31lwgbjEzuSOJlQDL0LXVmXHuALQpNXi9aHXBFG\r\nSRzFidftIdUZ4+ji4Qu2E2BWUTGEr+pNQU74IwNlEBuRvALJ1+ElVeNd4KQi\r\nfbdznbR2TTgYFgc6yUXUK1OkxfRtj4EbcQwMizbNsqZaL5/VBe90LXKq4Ki+\r\nRqP1APZpRBN06uVE+8hhauN6HzxYuN9SptymJ11B94FmRASAJaDVrftK8TZ4\r\ngh/739YrmH+FE21lfuUj/dJMnjLdvQYf3JuPYZkQzBYxmTOOYfEUHxUjaueb\r\nD+oBsl87fWtlKjKp+vVihjAcbEGlWlEloQFNM4xRvVryy8nsas6VItoHkWHL\r\n4Jaxn2/yblKIIYe4+d51ZvQOWd0q5yjW6fbXKwtmMd7Y6V0h3vByJx50RTKf\r\nbaM1XV3TV6J/Xe8PFz5HSN5StoyEOqyCfk6EmsarL3xPwVQrIwQRF17X04Ko\r\nIgK3O8j3YEpgRcVRKxVd0wQJ0eO2rzgkxM7aZ71DLmDYKcEi96lPJOCiWvFN\r\nlQr2782JFU9uz4OSjFpvAdY7H0/J4BT1Qlt9eGfl6EJFtqgd3gDxRKtdduPP\r\nzgv6tHfsj/+fh/bdu3hkLAjNKtizD0QfWP8=\r\n=65HL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0a9e4a4d027bc972dd036582cbc94abd30d3cd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.443f63f50.0","@material/base":"14.0.0-canary.443f63f50.0","@material/shape":"14.0.0-canary.443f63f50.0","@material/theme":"14.0.0-canary.443f63f50.0","@material/floating-label":"14.0.0-canary.443f63f50.0","@material/feature-targeting":"14.0.0-canary.443f63f50.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.443f63f50.0_1648249525955_0.5982691157908826","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/notched-outline","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.eb382f318.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3260dacc4a0d25636888ffd41e2ad47e0bb65e7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.eb382f318.0.tgz","fileCount":33,"integrity":"sha512-QDklr0IQFivP8825r4JSwG/vkSSS14LPvAn6TUjp77tC54yO9T+qdFfDaCkuQzdgmkyClwsK5l5AW5iYp3y/Hg==","signatures":[{"sig":"MEUCIQDlkI8eyjXD802Q8c5RGvi4ygTyH7fE6xToCKeuF+YPIQIgGAhpd1A5UZEoaMA4lv5fS+TVCa0dacQPIb/v9JlOtdM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0N1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQnQ//QWSzTuCMIdvT7mGu8G3phb/YweS60zXA1rscpDwmY/jI3j9w\r\ncEi47pOEH7zf0f+lnVJMKotBB0iYnnz8bDtj+J9xYCeaUwM46kxGObo/1rcm\r\nQ3CEjO8qXv/hIKUwH5LgWeHpSVdTsOyqE5yrcj8rQUMxA1XBeDKU7cFkxOLy\r\nz3VAeY0Ec6yap/89JBBAr66cIjqD5Cspw+Ic8bjMBp7dMwT5+DKTjto6bV97\r\naVAEdE5HrGyJ3zrw906lEyjQUcNcuoUHLP2C0PcSn6UiHXT7Cie9EDSNIE8j\r\nFjK4gI1vSDH7ekddgEz67/vagO9uOJ+0w4D56jVwUN4XUi42d19sVek1BUjO\r\nRUvZIlPHBSiN1cgN/cZZaDpSyaxIXE2F+wZQIYHtSbs/EmFL1NrRUd7UZt4+\r\n9KPxwYxwWB13y8gKmIMgHSKXsPQWJZfNXKhEScibboKonPw5VCZ+I6aSrdFs\r\n6dXiRRVJ4bGzfy0EB5axIGxry7KTgHsiybKwyEqX+Ms6QRw20C+VxU4ER+4U\r\nRKrCpOeU9YNC1QL0gCjuZhPAEItKGy+M8N5ginn+g82TKJZLRCKVtrjzCcZz\r\nC5IOMV7nXolaT7yrb4NxA9J5IZ+HJIC6pcrBW6X479avh7BnJqPI+Yqy9CCS\r\nws989J+JBfkS5C6GiulIvz0FKUlngvsaoI0=\r\n=Nin7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9aaa59e82abd1f56fdb3d963213242fe4f989c89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.eb382f318.0","@material/base":"14.0.0-canary.eb382f318.0","@material/shape":"14.0.0-canary.eb382f318.0","@material/theme":"14.0.0-canary.eb382f318.0","@material/floating-label":"14.0.0-canary.eb382f318.0","@material/feature-targeting":"14.0.0-canary.eb382f318.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.eb382f318.0_1648575349088_0.8834144303409972","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/notched-outline","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.344d52823.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"732ba9d2c63e5269e64505d299f71663a76dd66e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.344d52823.0.tgz","fileCount":33,"integrity":"sha512-a50lhw6ESZbtnWCckUh4SDoZh5sS9871Ca/BG0ySkOnjPDY3n1lzzemD+cm4BUNpZNXwBXVzM7h24TaNgGAbGg==","signatures":[{"sig":"MEQCIH6N3ZE5LZ2gUhSB2l4PH7JbNlw/Ucx8YcHxs8PH0z9aAiB7r3mlkPSOvU+Pm6ZS8K17wlwT+AnKrtMPYrCId6Z4/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1N5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBQBAAmql5h4abwIBjQABYPd6YuwYShh1lAjSbc0kLkXylV3N+x7jb\r\nGIF2zr6APHMgzNU4KnMeD2p7cRHmBoEFQmoZsOGJU+48zsjfO1Xl9Y/05JIx\r\ntrNRHkQDryjQYx77/F1N47ZFkerLtijS4Rj5luPJwComRCfu2MQOLhp3yxxq\r\nzL/AZB7aXoRzC/NqrHIRgBu3o+Us1SoIQz96MZOO3qRJAQMW3qD31RZmsRGD\r\nAoKRNyZa/GbkgLyRIBOdkyztOqd/go7K4GPEoc+1/cNIXAflDq/0O6AtQfC7\r\nRcCfevlQIMCAQGHQfLwX27Ih9ER8+qGEBRh0LqiBH5HKBYYux5ax5eNdm1sr\r\nsYrL8Mma/BNpSgufsc65BrRh9kuODhD1jXPFxmUx7F6ZIP9uuH6zN13kpRaT\r\nlaZAy+DjfEjqPqWQ57DCQpSNqnoTKexRj+FqwdUTgldjJ4dEQw1rcphu5iSo\r\ngspFXpnaGUNY7StxxaX1YITKbgsg32bT2luJdGSQ04lZs4eDm4fWXThxGsff\r\nfXH1k5Gr7LlvuFO+U2Aq0Ymf745U3bWFrTcEOc+9tgXvHQY9H/nuR9xcVsGp\r\nJmXDuY60Hj92U3thr5dHb6G2KANjtfIi4l5n021eHalxusYtSCB9TNEBzbRI\r\nUUhZLsOXUP/d97P/l0tFyD1FTFY77m0P5JE=\r\n=ex3h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1d0b3e3b77ca281daab88499a03131363e8ce97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.344d52823.0","@material/base":"14.0.0-canary.344d52823.0","@material/shape":"14.0.0-canary.344d52823.0","@material/theme":"14.0.0-canary.344d52823.0","@material/floating-label":"14.0.0-canary.344d52823.0","@material/feature-targeting":"14.0.0-canary.344d52823.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.344d52823.0_1648579449181_0.5027035254423851","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/notched-outline","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.4e372fb49.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e5b795564d87fe9aeed3a5691311a73d227effe","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.4e372fb49.0.tgz","fileCount":33,"integrity":"sha512-GeGSIL0v8NCyJ0SGunJQtMGI//P9I2yRPeka2O4VotHgObq+ZVoHpWB6bkaK9SQtwfsJn9Ub0eKtLoTCJa/Rfw==","signatures":[{"sig":"MEUCIFjgM5xL4t1FC7X8dpCPrtZbroUvblt1X52Cli7PQj1uAiEApkfsJWe8UqLkOrmJpgH3yFeT/4fY70vtg1X0kch2Nyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0qtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYNw//fKVMu/2TB3FWboPtw/6wxx8V2ejwdf4XL1O4N3BHZwZx8s9h\r\nUBCQccMyQFEbghXnX+zhv6sJb+dWZwxofmS9EMqEuAsCn5e+CRdn99cZ7HZ8\r\n2eDFRMMIhRpC/m5702k/dss6+3+8biZyWtirIsi5WEUvNuT489iNp6TSBIy7\r\nwZaRaWHi/Vbow9ijacH9R0mEMtNo38Pj46DPYUqBW3M2feE8fm4TRoXDaNep\r\nj+/uS5r+pCaIA1o9S53HLgTu0Rle6zKQeKxqYa2S8H8BMPZmpp9iSn1qVt4W\r\nUgruZBjWoZ+B8bim2P/p2/IaJK6GoGSox8FJVdMBs/e3YkgpbfKuVKDBhzs0\r\n1jTqBcB2+X06dgn5BJqEN4AnVZLZz1/irTIFVH2NteqA+glA99QTpsUppNeh\r\nyHbWQ1PotPF+KnM8dmG5WWbC3Jgsgjlo8A9OZ7nbHVqPppbPnC55y/4jF+rK\r\nLvTkwFy7Su9In0+w7ujmSStDZCBsoVUUeethJQiYc9FBgbsDRrE7kh02WlH/\r\nJNtl/Myh+tb8YKSyLYFwZEG8PvLxVQsw5A2FhHc59FE9t9IR3a4m8XZFQCu5\r\niWN9c7p4m6Br/LwBEqD7+k5EdrpXt8uLR2yS+64pN9fmZUZzK9XTC+rjapVG\r\n0Y6LDwX2BGUXHhFp399WK5BwQ1n8l33kpBE=\r\n=cU5M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"013d3cd7cc6d83c59581f40ea832529343f43047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4e372fb49.0","@material/base":"14.0.0-canary.4e372fb49.0","@material/shape":"14.0.0-canary.4e372fb49.0","@material/theme":"14.0.0-canary.4e372fb49.0","@material/floating-label":"14.0.0-canary.4e372fb49.0","@material/feature-targeting":"14.0.0-canary.4e372fb49.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.4e372fb49.0_1649363628954_0.5519694109901536","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/notched-outline","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.3e30054fb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25c36a2e3896521a08639d19645ead4c07578b56","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.3e30054fb.0.tgz","fileCount":33,"integrity":"sha512-PzBcDjiLHlCO2wsjvxE7rwKIO8G6oSs+bntyHhxIDVyrkcs5AHsFXI0uehBjH3jLgxgExpmva/cbO/EXeZwRsg==","signatures":[{"sig":"MEUCIHFn4xzdTPOW3IPO/86qK/5cUWvvaFYFNqFfa2+1t5zyAiEAjl5gTdpfSX5dw3Kh+plfcRPJUqOMbAurN9HRtkMbOCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0tsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXYQ/+Mz6nYbqUS+rAW256f5EiMtURX/ec/W04j8NES0WysWwUlLYH\r\nrdP+3DG7++i671Zzja7QZcGCY8epbk6cLJm64TXUSm1W7emzjvPPBXBfRCS9\r\nztP8trtm6KxFzPGQWOJ0/cDi9e07/+mVBYyP9GHJrdbL8OZv95kSRRLtTXig\r\nDa2MpYaqJu7CVoBSEbsumyHn5MVWsfe4azYE2c0QmZoprE/YEoCnL4E+u5HC\r\nOwv7/8y7U56VlYmNexKVJmhnGezCNk7Q20wq2+/KplUOwYExOLA2Mv/2BvwM\r\ngYl8CIa1p7cmGIoxVC6IBmAHuqErRzGSZiliwgD+xkLdsa2GL0kvUbe+xcES\r\nnJAt2uVRgrCdqEAHLUTuQ4dCTl7bclKX7jRf52wT5NpXpklHkA7sLxku3VkB\r\nsaroanjE+BZ5VBh0Mqtviaw45hspupLCg6qC+65G/Uo6/Njo4LDqQFaxsQUQ\r\nBILxBXWJ3iULCM5ijm4gaJNKvUd6QrQ1SiVfDCRJnbHcu6kiYxz8CJS+0tiX\r\nAYksCODWAUuxZtUFsGrk2jLSFgfikoPBxCe4FVl6DLT2g1LPNHNnnMSscyqj\r\nTTA6HWD4PYv0p2OnOCJ4QV9lFgf5e2dE/XMDpwg2MUAyhjurPhNzMjchANyY\r\nhrZFsDEwwMWMPhoxh0lJ5eFHd+6Sut3FXkc=\r\n=vK73\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"04d79139861b90bf3488ab3f74e4bc33e6af1c8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3e30054fb.0","@material/base":"14.0.0-canary.3e30054fb.0","@material/shape":"14.0.0-canary.3e30054fb.0","@material/theme":"14.0.0-canary.3e30054fb.0","@material/floating-label":"14.0.0-canary.3e30054fb.0","@material/feature-targeting":"14.0.0-canary.3e30054fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.3e30054fb.0_1649888108307_0.8821443683620023","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/notched-outline","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.8c4da223a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5904d24b66a7b0c8af11ae319e5470b1371c273","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.8c4da223a.0.tgz","fileCount":33,"integrity":"sha512-djcf91jI5pC167ypGrnKgcqwoCD2KwXRwV6asf5sjp+9beSETtipMMRRCDcJ0RLphlaEoKPwNouzu8A+XmNctA==","signatures":[{"sig":"MEUCICIARYD2kLmtytfjtBs6EKfkr83EDzTaEAkQKvtZzZhAAiEA3Euohc+7hIzuPpJhr970zwEY9gxaFnC0usvHa/6qkqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtRRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvQhAAmXRvfJ0HcwhFaUtEAglrNZCyfQ4VAU4Oby2hszKlN8jsrkUj\r\ntEk4/5WruLZ+dWAuOPgD7D91eI8YE4ssTjEOYb3++t6tX1oV2tAujGNPpPAR\r\n4FIv7l4royR4Zqn/vxqi59Xhvs+5Efb+9g6HvKrKVoxn4ls2Gb7PcQhZhtRg\r\nilifBd2ZMoFurhRmOpvcfNQtxzddloWOkFmg9TRqYPVh0JSx+pY/RlXum2YB\r\nGRewEwzWBcevAog8sA3LBjHVsZsjprWhpFVBez7GJsAbzaTwvL5ebj3cdo1r\r\n54l1lyeTQtkBiNpUpRa4bs2iccaRPdZimcVy58h6wr0dB92kXMHWU6CgG1FM\r\nYK6qvbTuSlfO1Fu60n+Uv0pebmqlUJv2zWWp4UX7KSNZCjqHP8ROub4+ZZwM\r\niNPPqv+rakingTvDwyR9UF+EOC/pXV2of64tbUWX60y4vcQn1hu0PgbLghHS\r\ng3T+bPlswayA7uXj857uXwze1g+xJnvnd+dIf2qi97vhvKO4Gh+Hu7T6q9Gx\r\ns4ev9TKTU351s2xEYJ/muGmW5YDSQFWjSAkumpGBauXTOoD6/+axR6HMTgzn\r\nJTtQFigPh7pb3HfvyV4z/eL5kGpX2cCzq5QA/2a/p1hxD7hNBQmeuncp3KKS\r\nzqcV+i0+r5s5S31mTuxO0Brf0HkoG49DwEM=\r\n=mmn0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a5f798a752de150dd0a004bdfc90979ab4185d1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8c4da223a.0","@material/base":"14.0.0-canary.8c4da223a.0","@material/shape":"14.0.0-canary.8c4da223a.0","@material/theme":"14.0.0-canary.8c4da223a.0","@material/floating-label":"14.0.0-canary.8c4da223a.0","@material/feature-targeting":"14.0.0-canary.8c4da223a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.8c4da223a.0_1650381904962_0.8176654607654941","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/notched-outline","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.7de8965cc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb5575b6857691f93ee4dd32ac2c826a748c0379","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.7de8965cc.0.tgz","fileCount":33,"integrity":"sha512-iH4/079HX2+Gl7EqjvqemZwzPHNypeWd+lUOJ4sjho5h24RPE4fiqGq5KMS026oGrXPpF/bEAddCzCWaF1x1HA==","signatures":[{"sig":"MEYCIQDOOWEzAMlW5CqU33ty0RQKRsUWLU9yUvocCxhXfuL6QgIhAIKB+zbrNriTJ0XYBDj4/Q4RoblaE2eQWq2A0W/A5yp2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxplACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqa5A//fjKCrc0UEA1qKqtHq/Pkx2skNP7kRTamYWPU0sMlWQSzoxB7\r\n30XbydXpNUijheGzTW6Db7ufU7PsvoQckTxJ4FjgFiDL3pQXhUnxj7+mPjTb\r\nk3Xd2LwKeFat3WdoVY2ya7vng9DCYhX7rfPpQ/S/3IVXgJS0xWYU7Mz4bW5d\r\noYXs61/ykUkqye8pUL/whYYyzM7jDBbqXXWu3PHIEXBMFMk3t/jFn53v7Omv\r\naynorwzbOOWwXxysTzN9rCzRAHvHStbwnHG/d9TyiWmbuz4K/G6CmuvCake0\r\nZ11v98ICtH24KF6FlS7XuElbc+U765zv0ymlCu2OxX1Aey5NyIoxZA+fCHic\r\nefEYDCMzL0yEUJ6z4OGle3ubfC12L5ywVEG+wq9kuKpBjla1lUkQDh0nUu7+\r\nlUs7mf6q61cYvzATkQ//tPVatoEeor8JD3Wc18qXjrnhSZ3Er2lrra3h7lba\r\nqExF0fZikn3rHkerE+N14zdCHQRJS0erHe5Bri4q3PuwOXt5vV191h5kVd/m\r\nmYUj2nt+jVLrBjLEy2hANas7+RUYisp+X+g9MiHmJU3CDTvEvb8ess44zB5a\r\ne7YRlZdtTjoqHaB0yjryNnHF4yD6uaDm7i9OPAmtGbzqi4c5dd1+YCfcl7E9\r\nuRklbsIz0ZydjN6TPt3T34sgBp2fdavkQBY=\r\n=Mq51\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"538ae755c197f0d9a1fd3a2cab5000c498987584","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.7de8965cc.0","@material/base":"14.0.0-canary.7de8965cc.0","@material/shape":"14.0.0-canary.7de8965cc.0","@material/theme":"14.0.0-canary.7de8965cc.0","@material/floating-label":"14.0.0-canary.7de8965cc.0","@material/feature-targeting":"14.0.0-canary.7de8965cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.7de8965cc.0_1650399845753_0.18184296756752838","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/notched-outline","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.641ed0851.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee99e46be0c00f657dd26c328aee35c40aed08f1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.641ed0851.0.tgz","fileCount":33,"integrity":"sha512-ja81lShtzs4vDzHcflOz6LpPdtCWD1KZtb5Tu+LwgjY2N6dCDVHI4fraAGScLJEDYFApw0Hu63gLp5E1C1IBsA==","signatures":[{"sig":"MEQCIHpZaGJAlB8cA7tnBasUckyqxfarB4orI630gAXdmPGrAiAkKYupFk7BgkfQ0F4/b4eHKTNYGA1fHeZA7FqVqr5g4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC+MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFqw/9F5js7T95ve2pDJpIlwvMJY9pBv+vO2FRaA7JOSFGy6WmRDyu\r\nEJxF3ZCaf2jWZyhk1SVVkVhFo6nYzv6sfZy5TXYEhjMlZtTYxRcTNukS/DsH\r\nZjf5wVpYWTviIqH4mpNr/NO24bupGmpRmZBJ17WrWGzlgluzq4T2nYFRtsvx\r\nePtuBE97/0CYrk8BO+Isno5TqwGEUJurMWF5x+9JxByR2ruhWzNLGqLAXSm8\r\nDAkQvdwt+Z6zT5eKtHFgEVw/zLK/YkH1Ka1I4EWJUjuqd49gYni4o8785UW7\r\na7DraJ+QDWFX/upf401FyUo9jyGfITNUX6x95p+eEXjDYwIrMiWzLZ7lI74q\r\nijOl7KBcZwfzq7zv/8wRaWXQ4Vs/9+pdOQXhgu2rB3I3Fei5f+ahDjmxUR1l\r\nuPVFxwc486nbnYmHShjYvrFYn/x++o0uBbZy8DyaEuJZEIOj10822XDQGnMf\r\nGQrIe/9Pqc1m8L+MppL9jyNJHLYCaFihb3VnHvcGWuQTf5lWvw0mFZaaFm+o\r\nGOJR3SOlGB4AmKUc6GaF8NjdlhtWJW525EuLzezZEHngxiFXmG7/GPKLwkYy\r\nHLO2vpieumjeNRukYjWy9icsZPh2OhIXEWb3InjgWT5I+FdXMX4Rsxlhhwhs\r\nu1JHh0ryWel7wlpz5TB9tAXD9pPz+6qlhio=\r\n=JJl/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b45ef0f6764b2048f5027d4990cd48d6bdce11ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.641ed0851.0","@material/base":"14.0.0-canary.641ed0851.0","@material/shape":"14.0.0-canary.641ed0851.0","@material/theme":"14.0.0-canary.641ed0851.0","@material/floating-label":"14.0.0-canary.641ed0851.0","@material/feature-targeting":"14.0.0-canary.641ed0851.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.641ed0851.0_1650470796399_0.26702666576741474","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/notched-outline","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.e88f83024.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88cd43feced7879e330bdc9a0d5b0378c4b71bbd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.e88f83024.0.tgz","fileCount":33,"integrity":"sha512-qBIE49JEkZp5gFMZGz6FjUN0Vqb8pMLFDPXJKeZak0A4pWtZl46gAeUaPxN96SdGLb7tDLcqtVYZRrlX67A42w==","signatures":[{"sig":"MEUCIC3HD6f7b3OJMHEwBinoYWNfiKhXn1PYxopiAKE1R9b8AiEA6rZTvWAfa2TLiWDhGCwbdV1TQkCQ6/+uc6FSwrkGu5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEd0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoi8A/+IYY89OH78Qr5NLffZbpa4lrQAW2nsWr03QEvRPq/EemhiyhT\r\n0dpHy+Xtydq7unoHCQPVeqyVh69tUk4Gq+N5HtJqVLu1uB50lHTq1Dk7+BnJ\r\nNL0pTcTM6tc4ARjr8x8Z+kqkXbDKoSJJMhyJc89qda6Gh/7dcsLg6yWtTWUw\r\nwOfk6zsd0ufX+q4iF+Kg7ADSHJkOSsRZ5c/ksh6jLIhZ2lL49NBG66lSc41T\r\ng8hfyM6tcoCwm7hcnnL2ni/bxA5oA3aBeEka6oHuHq8ewh+d33rQ6FRqx6r1\r\nns7c8cvTxa/yH5mk90f085bTcv1JGdGDGoHLBmoUEsaIhZ9Hkq06BjBzGE/A\r\nC1aRutUI57Azo9ELjVlt+5nF7EqI2QRO526E5PBwzJimevJU2jbCPKVe1ISY\r\nWk2bw/qBvbsBj32pFRSREp7VM0vSBKvlRmSiLzRGFaBRS8O3v4biT44SA5T7\r\nvI4a5bBHCJOumfjvAG2Q9D/mobZNdggfsa7QqaJ42v4ow8RVFedZHZ6KBOuP\r\nRz26dcpao4G3S9Jd8UeibX1JSypkEXJ+IIayAVX0lPcBFsildsQmBdgPpZdE\r\n882jBgyDMQOXFYirzYlATCZDK43BmFFdBake/oNH4naT8jH1mcD4gFedXY4X\r\nSTjgftvY/Gmy3D1yzWBdpnFHdGJRLybhUo4=\r\n=mnTl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e9fdf51ad2ddd3dba754b98348bc356126b5640e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e88f83024.0","@material/base":"14.0.0-canary.e88f83024.0","@material/shape":"14.0.0-canary.e88f83024.0","@material/theme":"14.0.0-canary.e88f83024.0","@material/floating-label":"14.0.0-canary.e88f83024.0","@material/feature-targeting":"14.0.0-canary.e88f83024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.e88f83024.0_1650476916532_0.3216062078111501","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/notched-outline","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.7321d6254.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"976bd3f42b79d17c4e8fc4c113c80707c68bc0b1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.7321d6254.0.tgz","fileCount":33,"integrity":"sha512-CZUoV6ZoQKDAfm4iPZBFxp0XLjcFe20GIjOgBlCgMPkpCa63iGA2U7vtdNt8NOaw/h84A3FMf25R7W6gnivW8A==","signatures":[{"sig":"MEQCIHLJYHOtK0QgIydos3DjSSYK5kA3RA6pf4w5pVlWVrwVAiABG6QcUxwRch/eM5HYa0U3dbJ678YeQlmPILV/CFk7YQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGkcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6Og/9Epg2Uv/t1mgoCwQkxOW5TlD9LzvK7ntAzdpxwLKNTgaTA9As\r\ntfa2oday4xs0YBe9+uLV42QF5y5/dWlURBSE5c7prmSwUQ5n5t0IZmGJgSVi\r\nx84j9mUoM02/XR3OpJzElSNIByveQm4muOPw5j7VEUA/Ju8nAU2hbvKlQbxm\r\nqYg+/vEnfk3wWx+V/1Vet5KNOCr7JYY8TsxDC7IY+/sWRcBhHEqxop9milAz\r\n6JH6yzZ0LJ0CETe2ebO7T/K75demqFq8PvdLFZ1Mv7lnFrQ8sW7EdExvHvKy\r\n4ORTXWngt4xhiKSi6o+cbQx93mB2jk/fVCmyH6v/bt4pO3sp6GrAVkWxaqxP\r\nMZWGMoof6qv5mFSx+KXv0MfDvP8eyeKnhHSMvb8HMw88pUBTBefDtb9OCmUq\r\nC9ptdqiivgBOEB1QRKkqzARQ1V1YGGLeQqWJAa02FEUYXk+lO4LleFMvyXba\r\n+oH5jSSBrs8HhcqgQAXiQsBRW9yrIUNLCeA/1oaZbX08tsyTY6bmaLkeTy7Q\r\nqx9r6Z5V116njheTrynudgU+wm4m9epPKmmo8y6sAnDWmXDvkWYH40mR7PbM\r\nhKJ12TF9Pc8a+QOpzJAQZ1GCPeQ81Nr/i34rGPVqbdYfCjeeI+0f27YwZqtc\r\nEmJw6hQm8qI0ZHV1kYgeMiwqFoabf6fNq6k=\r\n=xCam\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"981be270463043c4b45845cdc3efce353eb53b30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.7321d6254.0","@material/base":"14.0.0-canary.7321d6254.0","@material/shape":"14.0.0-canary.7321d6254.0","@material/theme":"14.0.0-canary.7321d6254.0","@material/floating-label":"14.0.0-canary.7321d6254.0","@material/feature-targeting":"14.0.0-canary.7321d6254.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.7321d6254.0_1650485531805_0.709693604290264","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/notched-outline","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.3ab956515.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e38bb9b20f6a26c444dd5ea908d06f1b481c3e79","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.3ab956515.0.tgz","fileCount":33,"integrity":"sha512-H4U0eziSOt56bumnE50s9Ll9EQnHg6GF/3hYqW+c2ns01XtMRLZGFhGXvhCrao0CTg9VmMpuvSVg/tJ/VT+GKw==","signatures":[{"sig":"MEUCIQDfoWJM6bdP8ZWDhj2jWASHYGTftXSXcT/aGgi+wMKfsAIgAO6wKuY0AwCTrkKZ3LQkKjluxi5wfU515URXuaRAKKA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrgXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7Hw//SxaRfKmb/w7WLqxo11IxdJ5kqGSQwEvh+XvWWU3Imvk/yi0p\r\n2ySDy4pRey4RuO8Mu5Xr3JozJlM37AtCRgO3iTQUxbx4JxUEBdwPkDjYvsdW\r\nQqQ2ya1sRRU5c3A2j24xYT8THkvoPBnbszKGndpYi/+6nS1ZtjMRL9BzLM1G\r\nUamk2cHFEqGRHc5g5Kpy/EtGtYQu08qHvuKjKgWAwjr9nj4GqCYHksO1tob4\r\nNeXLD0TEt8hr9UuC9iWKh0/iGFKwlogg28CvDTiVq0Got8+HePOT3WJLDfkK\r\n3Yax27e0sQf3cPKzhE2tNlI8KWgSx080gF7KJ9x/x64xl0vAUxWE+IuQSIzA\r\n5ofY7/pHQ/vf27Mv+WtrKZ5uSjdM92KW79zpe8jRoczAD/+qiQUeRXvb2k/c\r\nPmR6589LViabMoD3kZeh0ondS77VJOLSIMDcw7s8Jtyz0XZB8hymisyQ7+ev\r\n8HMunP/ukgFtBU1BbitgMve0jc6607oeEu8ymFfXMEm0ys0DJphdAZE5DPcg\r\neepKJZaRlmYMlsUnrhQv8oVm8/Y0Sds+U/uDPJlFRADPK0o+k6cJRlaF+0CS\r\no4f9L4D07EFjCIVq93U21jbafMY+w5e6Lliz1ojcSzbVp9fxIW6oG+xk2xVF\r\n6uawT/y30xJUZ3Gudje4x9XuZvSTwNA8+y4=\r\n=lAhD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a09484c5e8d50e8b042d5367972a9111e0432c38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3ab956515.0","@material/base":"14.0.0-canary.3ab956515.0","@material/shape":"14.0.0-canary.3ab956515.0","@material/theme":"14.0.0-canary.3ab956515.0","@material/floating-label":"14.0.0-canary.3ab956515.0","@material/feature-targeting":"14.0.0-canary.3ab956515.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.3ab956515.0_1650898967252_0.37511044969951257","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/notched-outline","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0-canary.53b3cad2f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1959462acb4b94038e6aac598e45f9098c5d3da","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0-canary.53b3cad2f.0.tgz","fileCount":33,"integrity":"sha512-3ByiPOC/wWQmFKfgJS98kb5/6v92n7uIfJ6v6sryKJlJCJn39qfpGcCM5RpRIws1RET1s1zBJT2JDwYeu/hM5A==","signatures":[{"sig":"MEUCIFcjWAPX9Rm9cCIhOB+sWG/zlr4qvDFx+JKEEysD49bdAiEA3fBosNy3Ny2oiA/8cFM5pPCPAYQID0SZwZl7r2CIBWM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTsNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6YQ/9FUb+OxZmZyuQKo4c0dkVVy67W0QROLhAlgpDCzryx3qLg0tu\r\n6sBaI3QMkz+aihbp/dKBtog0OwqDjhW9RXspTjgmJdjC+vfQ4xNJ2cDOuvgo\r\nYIXklQ3OLV2KZ0hIh0Cz3cfLkHTUGVo8yldJoutDIT3MnlhyWw7mo6Q78x8+\r\np3YBUIY5pQ2WK7RqUiWlXytbX/Hb7+ZTdXa9pSOPYp6FTXNsKfQCE2RYL+I7\r\n4IkGiegdYUJYOF865qQzSySO5kap/1oaAir/tHE2Yx9aWizBrrPIxI3ErK5f\r\nKg6S3O9XI8jEarxPyOD/1hYX9sLEgtwr8q63SjWRmzNeQxz6DUyuVZXavFq6\r\n5RQ4wHHy/UPixeRe47g6SVKNPvZlwAJItzwaZ2fW2tDayhgYVu1Hg17CyKQD\r\njjxZlipdLvIqpJWuJOewkO3zrgkx2qQdKkkjY/kmkWJ05ZrtlwadjLbGYh4/\r\n+RCN2xSP9faSWXB4nbJzHhMSvKP5t+W8HERy9E2JKDpMGmvWJwYrZUbd5ocu\r\n6NYny50Vl95qPxpKXrbzpCsIFZ7a3trBO+/P3MeXLnNQncnAXKkX3t9AG1To\r\nMCvQ+4JPnIJqDrPJtw/g9IQAH0T1J0Q0J3Cpx+hcQ7QlGWwANErhYPZjZApQ\r\nQBpw4PtztXtf3d9o6NjY6V/BjAT/NIDf8Pc=\r\n=YL/Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ebeda2e23436103241b0e82afd57b60f74599133","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.53b3cad2f.0","@material/base":"14.0.0-canary.53b3cad2f.0","@material/shape":"14.0.0-canary.53b3cad2f.0","@material/theme":"14.0.0-canary.53b3cad2f.0","@material/floating-label":"14.0.0-canary.53b3cad2f.0","@material/feature-targeting":"14.0.0-canary.53b3cad2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0-canary.53b3cad2f.0_1651063565714_0.4001942039945121","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/notched-outline","version":"14.0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@14.0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b315e2cfaf8226c557f253362ea4167f87a241ce","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-14.0.0.tgz","fileCount":32,"integrity":"sha512-6S58DlWmhCDr4RQF2RuwqANxlmLdHtWy2mF4JQLD9WOiCg4qY9eCQnMXu3Tbhr7f/nOZ0vzc7AtA3vfJoZmCSw==","signatures":[{"sig":"MEUCIFj8vEVdo0YAcBgvLxGrG+axu/ZoE/EvaJKx62YwrGgDAiEAxYcnNOsHsZtyUZ84hV7QDwUCqdB6eZPT3WzcjKMsXNo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasdWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxMA/5AFijG8QycCQGRBHVInNa/BsrHgq26EyH40/cD/LHICsQGjCc\r\nMhU8JkNmgJXP2I0g7HfZqtDVWkb4PTUbzgSxUimctMs4JHLcxGl1WHaoPKhj\r\nzL5PNeJT0ffw7ONgvagJkmB6QfQBcTro5Sqzuz1e5UGcQG4ZL0MU0TshTgV7\r\ngsqb9yk2D9T83Pya4wHePcdGL/zuwF4eEGodIDQVLwErY3znjq5jfx+bW46/\r\nLC5njCNT8aJ23GWsmg4pwmUFJpwXJuJUDtM+dTJt8EHTNQ3d1GRXLcbc04R/\r\nm3c1JVOKwQx2Uiwa9lYS27BsKVlWB52UzDAHFCQoJn/B0r+YjL9E0aXNClhP\r\nPwCibT+Wp5M9N4fXICTNWAxPOwQztTWF99zeWY27at8hNx9XfvAnRmB4a3wt\r\nq5gyZZ4VeRwFYFvPZBYCvKTvSOHAUbEH4BcTMnp3AE3OFpaAIyZrVZ9GGArb\r\nTZAIhvE06uAlLdCiz0E6PEw8X9+GpwfuHjrf+a1RtLFxJOk1cXZao+9mxtUN\r\nciftGnB7HyFWEgkt1tAHOO9VQh0ck+al8UFoCwSh1Snhx4wDXVytgKH9FtOm\r\nLYkk4vDACkAXZku2iDryOwHemcSFGqqIa/qW3WZ2e9f9oWn7JgPXE8XxmXQm\r\nS3dRfGS3CNLxlZePcvyi+rKF4UKCsyOSZ2w=\r\n=s7jQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","gitHead":"432c815e58d61a257742836f816cf95e271e6ea1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"^14.0.0","@material/base":"^14.0.0","@material/shape":"^14.0.0","@material/theme":"^14.0.0","@material/floating-label":"^14.0.0","@material/feature-targeting":"^14.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/notched-outline_14.0.0_1651165014309_0.9870058509903399","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/notched-outline","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.432c815e5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c46afb32b04e0652b87caf629aeac3b44fa122a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.432c815e5.0.tgz","fileCount":33,"integrity":"sha512-Q0/jMSwcf+DW0z5B8725o4SFxo1EzrYZwCD9HZFCSimzPswto1dIfWkBJK52Am6FkE4ZzxYMLRGSq37AXL2Ucg==","signatures":[{"sig":"MEUCIQCxjxFmvVb+AT+8HTkiljoIfM/NStVnvQFUn6tPdcsHxQIgX2jDoMu09otGyH9HrToj+OVKaKmF20t8/6C/eXvnaJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaseTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGZg/+KPDjpz0/I9IVWgaWFZnug9ivh/6yuSw0yG9d+AexBujGrgH0\r\nlWqML9l+dWJ+Qh60ve8lpPyHA/z9u8DKh4IJmlE2bpQ7BLON2fODJf7JoPEq\r\n5NUXxC7r8e0GabG6tdFjqA2+kfH/rrujJfxc/LY52D+T0SqYaJs6IofWudPe\r\na9c8jXHqZkhX6Nkgwo5uuvdA4m86dkDJski0MTas6zIcpb75RTOKeS6+3kO8\r\nMT2oC+4PYCdIIOkhJk8NW0Jx6gmbMeAGQ7uGWmkZsgm3B+a+fcHAiwQ+XV1t\r\nFcTEz53+ud+968uaqOnae/nli/aEcsgbgLZ3MuOqMNet6kqBxXkagueWQYu2\r\nmOL0hpXh8hemDPM6burO1TvgJT6sQ8kQB665GTjeASEVPx8veCbWGGl5osul\r\n+BjrvYTwAXJv4tAMJ+NxvRA4e83JID5DxX6fRey0caAEXrRh6CXSlMvr0Pkp\r\nhYbgPdOvRABBkYHWdcacbuGmcf6GLFq36WjovQwORjj8aVRIMQ7xKPZB4spT\r\nGSH/z+yK54yvPXDoKiCbjbsw82lx1q/pRPFJlKN7uq9vDybDTn0W4rBU85sQ\r\nvSVY3hSHTbY+yHw0et+kF2p0nePfXBJ25lIUGH7ROJwONZPnUWpDxVGF4/Cr\r\nzeJjXv9JgQlSf5rFMUnOzyQuYPLuOJG+qRg=\r\n=WfK0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"df8af7a4f190284cd9f3bb1756b2f443509424df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.432c815e5.0","@material/base":"15.0.0-canary.432c815e5.0","@material/shape":"15.0.0-canary.432c815e5.0","@material/theme":"15.0.0-canary.432c815e5.0","@material/floating-label":"15.0.0-canary.432c815e5.0","@material/feature-targeting":"15.0.0-canary.432c815e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.432c815e5.0_1651165075318_0.39226685076659296","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a0f01f669.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c5c8cf6a91cf70434e7eca498cf386349e9afa8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a0f01f669.0.tgz","fileCount":33,"integrity":"sha512-vn7n9n8q4poMcqQTmclcYJn6EwvXDAlLH1ec+bXiRXu9ti9p6s0RRtrPXw87eg6pyyzCina2T0bqQN6WmyFqnw==","signatures":[{"sig":"MEUCIByYxx2VQPXt7f7eZ88F079FfPe6GWu6emgew/6Y80NwAiEA3AThARjDidIT98P8+Ufk//csMKZE/fv8Ykhu0q6esGU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYHoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpU9A//S1Reyod87ks+eBwOjD+oyW5rAbdiDWmFq9gGWH850Ujm/VOK\r\nDg1I173BFvEYOR3h6Tm1Xw+pDNdOGdFZaY0met7ZJhRK6gd/ifw67qfx9f3v\r\no55O9NZTqc2pEvzdx2nGFxqzwkcArw0rx5+QfEVngN8tog2CfZw5PFr9A4Nv\r\nAZAZHpsoj7uVfWrSa5BnokIaOS90k0uO5MG56uIyihhrdyzx8ZKm4SOaSkEZ\r\nHvW5CMvMZ4TWXa9mRxqHYmOVvYDvwOFC3hKYYxqWpDgl4hMMznzS1WSi7UZI\r\ne1i2OdoWEvWVXSwBh8/gwEhhlf9i1aqwJF4Ac2u844mKYnkHOJbD/IEF0We0\r\nPMkYqof1kne9jWrH2fop3rpw7C0J2uGwRezkNnQQCvaTps9GyMFYvss3Zoy7\r\n8m8RXVyBUdbup+pxi/beh0wen6Sc7Fl+1wWm2dAx6rWJ5yGdKbgSNB0IPa8+\r\nSpo4K0JjEm/K3Du8W0B2j7MayJYVCSpkTliHA/x/YIxWjqQYOhQEr8ElpRxZ\r\nbHieb7izHFomr6qFlY4OMlp7Admy8phH7AZaC2vDfHVTdWi2XIDUMno+moBi\r\nPYRF2L3iY/iGxxkbTUZ11rPTcHAFuHYEug8SEI2DMuuTHWwMOWU5EEIxeQBN\r\nA/DC0oEQXrkS7ewO/W5KnoiMa1R47OUS2Pg=\r\n=8TL9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"51daa70df3212a8d73c545c86ed1c57273d41688","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a0f01f669.0","@material/base":"15.0.0-canary.a0f01f669.0","@material/shape":"15.0.0-canary.a0f01f669.0","@material/theme":"15.0.0-canary.a0f01f669.0","@material/floating-label":"15.0.0-canary.a0f01f669.0","@material/feature-targeting":"15.0.0-canary.a0f01f669.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a0f01f669.0_1651868136188_0.30793080812460416","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/notched-outline","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.276cb39a4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8902e855f70e64644d56fdb4ab95db9d83642e97","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.276cb39a4.0.tgz","fileCount":33,"integrity":"sha512-3Ayigak4lJKdeW2DLuQFxQGdkfrSO+O5DBn2nLjW9rUu57nJsgUnj2zjOuOZtHBbFuaZ/CvyuneD9+HodN/ifg==","signatures":[{"sig":"MEQCIA+sTAjEcpgS1RH3fHsHMHgJgvE2Dic/jw2Fg9Z6OKByAiB+/dx4KkacFasMT0o2NYC7idELNxF5W4VbixfSTg6usw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZPqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIeA//bgUksDUOGGbs/4asJojpEz1eRwImEqyuLye6WS7JWuEkgvwi\r\ndjlWWTNbNK1LKMxaNa2mLUsluG3TXWuXI++r9eIwODTygpWlSE8hze74ltGy\r\nd64wJt8FMJRBAChyt5H7XXV2dHJl7yYj0EJXJbHmYjYgSb7SArevjcx2DPqc\r\njVrytDNiCS+2mTfBU8rcE76qQx3Jpkju7uGUU9pVkg61DIgnmFyKVjf3Dgc6\r\nq2mrwj78d2zZTZ9OW2DgPq97QbLB3f+oM07Rw/zVOli5tLBLn6yQHO3lBwAS\r\nAPZk6EiomHxO5uASw+V1brll7FcWyTgXBtq4ic4WiVTxdFeWuwDiplYGzfT1\r\nAduTABU/Aazc1z2jYYXeoHWU5rqzlObwAK7sBAru3G0XZYQkug2r3SKIZzFY\r\nuQIxgpXp/Tb+cvp9nP/Ql1QYu22mAG3Iw8h2jUSsXCJ8hquI7ZukoEV1giia\r\nFeTBPfmBkagRhaALwujhI7nukond1X1X+SfnQfo7mJXyKL9FTx1CaFa2LHFC\r\nilCXbc1ObycArIOi1K4fJthEixgz7ryFLtWPrANKULTfs6tPoGmBHs2sPJHM\r\nhjvefZXJq7No24X+HKKayy5PAKzSyipgNtPPpCUjgiHa7E4Ozj4Is7WIwQvh\r\nG02d+TaucvTsIAkj78dq/1paRrfjRxcUSD8=\r\n=vVZK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c57cd64760098925aff1fbf0bc2a73d32dd2bed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.276cb39a4.0","@material/base":"15.0.0-canary.276cb39a4.0","@material/shape":"15.0.0-canary.276cb39a4.0","@material/theme":"15.0.0-canary.276cb39a4.0","@material/floating-label":"15.0.0-canary.276cb39a4.0","@material/feature-targeting":"15.0.0-canary.276cb39a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.276cb39a4.0_1651872745793_0.9603101602281794","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/notched-outline","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.4fe98ed70.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bee86a926c79fba7c101ae67293a289f10202dd9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.4fe98ed70.0.tgz","fileCount":33,"integrity":"sha512-+bjq2fSKsdtUohs33QC8Y49PUi/7oyGo4rj+i2EzTtxLfOx1OqBBLmbSNMH0EKXte0W/NkX0XZYlLqHyeOsToA==","signatures":[{"sig":"MEYCIQC5jqX5+8hZy7s/aa1udO9hwziTImHwX6JM/TKKfCeMlQIhAP9mCZroyQoQQNJ8yGs8RTxDu8xgHIIelWCHoa12mYvn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZmoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOiBAAhkA1EoCWvFpIwzPAAQA7Vf5okMZOPAQuds5Sw4RZR8rhtyuD\r\nJml2/nn3ElTyxujtjK8EhTuVzqRpocSmy+hdc+z1bKxJ/YxE8qJcSYWy76ds\r\ndAglRLXcem9pURQf4Yc37QjpP3suuXBCrPgDx0qmwffaE/QPsI44BOWANHyy\r\nGeB2/ftNeACZYb+skrOuKNIqHYAZtyf5LmZQZxRwY68sKbO1vXQh38LXehWr\r\nZSiCcANoo1iF43YrwX+Vli52xIeIUUllenXzOJoeRavwMuS4w+XATVUg6Dxf\r\nDuYo8JaNBxqSFo82KyQjntPvmvlkC5gSXcqcje3SUJ6X6wdLyulhwIAO+2TU\r\nCYygrsnz5s+fAyfXQlJXT9xy4QpvA6JifJJF6UposSV6QqhMDIsGyOLR5R+u\r\nB7fIZRfLFqBYv0Jdo5CVPNUPvaGyggciure9S4F4vloh4Aw46v9ROGJ/v79y\r\nvOgJTARNydmKLYdIvrrqcHQCHuR6Du4RaLjMSoSRSwvIB8m+hcoI5oojTyDy\r\nNBwiAgwvAQPkMsuGH1uGhFXeRZk5iAWs456Fd38CEbTomi30uJS1+ofbr0ZW\r\n3T07S1rVmK+CIuhemNqWrX3VNGzDXP11uPtdljJ9iGLWRfF8n265u1JZ8fH7\r\nRyyLkMbUxhOjb6BAsjMZlSBqymBp+OlxsCg=\r\n=GvTP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"353fde061dd090ede4416fc2477bc050587d6367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4fe98ed70.0","@material/base":"15.0.0-canary.4fe98ed70.0","@material/shape":"15.0.0-canary.4fe98ed70.0","@material/theme":"15.0.0-canary.4fe98ed70.0","@material/floating-label":"15.0.0-canary.4fe98ed70.0","@material/feature-targeting":"15.0.0-canary.4fe98ed70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.4fe98ed70.0_1651874216081_0.7647221424404218","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/notched-outline","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.58b130a3d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c150aa5a0d0175bcb5e7baebd8e4f6921a80a74a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.58b130a3d.0.tgz","fileCount":33,"integrity":"sha512-SSorxQj4NzlSZFaDJVHycjDrNiUrdet/PaNYJbNUktmTYDeWLCuThDRZrQo7GSdgIiNMUtSvO5AWww569kI1qQ==","signatures":[{"sig":"MEUCIQDHWvTBEUb3AWVb8LQXaUwGqP6cxWNy8If77bbnS8N2AwIgacPqgbWs1PNftz+ZwKd1yyGZiqD1DBPRUfBd3z9a6mI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZoyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp56w/6Aw9k9fmbeU6Ha+Wrxz8ftY/bEwUoKya40g8MrQUzik6fds/q\r\nlVUjDP8E9abwuNuMdifl1uPLdUDn8p/l2GL05pmZNZOZNTab3YbEM7WTfziX\r\nEwlT0oCtkYYmYjhb4mhLSq9P9rrOdegdwEeChST79GeY55AvbHB/nPj8TiYf\r\nb5ppROR1fLqpllfr8uSSbBenqqeq/pczTcxX5t8N+BF2200jxsR9k9B2W+Cp\r\n1RFB9I35ZzhkiCtvmBxy6GQ0qGAOdhZ8gx08V1OloL6I1mrE7OAeOmaR8V0C\r\n+gKVlrAjWXczPYajuK0OaAhxMCD7lISCZIa9Q5ZbsPXX5FpdAsE2khtDRRbT\r\nvOOTh4LR67x3NxLAYk2imYVUWy4HZX33oEx9IsW5nhdV3S4avAohoDe0KA3y\r\nrWfshNqytT+muPaN9jm0yy8jQrWpEDMGwYvDF6yglROxIyoTkwy7Ba369t/l\r\nRS2oRaWPhZeM+XKnPojzV3mFtotGt2uzROjQpYICWnKh6ZbudJvLwLcpT4YK\r\nTjkjooHnkNAnxOtK8Vq14asA3cJmCB+MLxHQ3tCz8OCRUyAom9dn799zFsAx\r\nslxkFd/EWKCKRpOVjwx3ldRFC3RQTrjJTXwngDkabay3gjUaD522i6+lPiAS\r\n1OMHOXPqpS7EY12bjkJk0BN9bfkCIO4yVc0=\r\n=pKcS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"58c8ada7946689a0a59acd63cbd49b6c987c9853","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.58b130a3d.0","@material/base":"15.0.0-canary.58b130a3d.0","@material/shape":"15.0.0-canary.58b130a3d.0","@material/theme":"15.0.0-canary.58b130a3d.0","@material/floating-label":"15.0.0-canary.58b130a3d.0","@material/feature-targeting":"15.0.0-canary.58b130a3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.58b130a3d.0_1651874353838_0.5440202750112406","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/notched-outline","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.ae278a2fe.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13f7b9dde49b045ad7a23ed144e8e53aee8ee8a0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.ae278a2fe.0.tgz","fileCount":33,"integrity":"sha512-n3/QmpTkaig/IY9JlcworgMEewWB2EsOphwRpC9wXJOLE+Cu/ZlSgbX+XT+vtumPD2/lPJdu7xehGNYECvaWLg==","signatures":[{"sig":"MEQCIDVhRplLuTakSF2QsSHYcR+dOfys1ZilExQujW05cqsQAiBB1mKQH6MOWvbjd5LKUZKT6JbiZDW4aUDL/itH7ISKHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTJ7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqMw//bb5iVgjDLW0FJOWOlXr+ruZxcGumtpZHBhn1fhmYlngM6q8L\r\nPK0sC734k0mfxr0/1rsb0m64b0Qm9Ze0cSJt7/TzhtAaVzpYQUxgzj1sLW8d\r\nZqHN4l+RKbn4VKsEqWLJXv3BZGj2vf9aaDvCEBOLxSyqV4oJ54iwt7u1PL7w\r\nPBrTEsCXK/moIwJe701B5hYAXP7HwrNlsl/ETjEHOFSGiPVEwx1ob6EMeQPB\r\ndX2sf8n5Ioy0mwwwneMvCymPKUGXj6y2cVgysvPAd5Yu5jxMhkXmf0/CtS8C\r\nBz6kaFiis0RvlTAa1/rQBbcWYNoqN/0O20ZfNs8A5L7DeexKghqTW5TC02DO\r\nKWN2GSiH5eQrZKY5g5veKVtz2t+KlhBeAxV1wGQod0pVPuH9vh3x0S06xfpy\r\npsd2vxIsiYJRNcPGtFn0E9T0iaw6HNlUhHGNO8I3kgzBRSh9KWR25l9UMKs3\r\naktjTeHKlH7ue2NYiRgBeX6yJT9w07G9Y1fg2sGdwwMAamXVRfnFAZq1AIoo\r\npiQ7wA43kutbzuVu8k17CyJr1h3xEc6N0PslGa5im/aPGxhOtNSgZZMWdAVF\r\nNCF8Y/xJ31EzJ+jQR5yxerInOunZJ1ErmEUBD5OSAbJgp0Z2VA11WWIILkjF\r\nPdBwcGIErisn2lXJyaTvCXtNJZP5p4xjfdQ=\r\n=qwpv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bfd08e232a3a514dd5a38dcd77d17df365502ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ae278a2fe.0","@material/base":"15.0.0-canary.ae278a2fe.0","@material/shape":"15.0.0-canary.ae278a2fe.0","@material/theme":"15.0.0-canary.ae278a2fe.0","@material/floating-label":"15.0.0-canary.ae278a2fe.0","@material/feature-targeting":"15.0.0-canary.ae278a2fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.ae278a2fe.0_1652109947134_0.9490769962814671","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/notched-outline","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.bebf5bfdf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d2677498e6391631e24a030e330004171b55e17","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":33,"integrity":"sha512-8yqAP2SMS5rYWhYg9D0Ev9sqbKN3+kZOhR/QGzRHnuVFj2N0gLb3AH/vAMuDCL4Kp/WaNN7sDC8YS7vfET8XSw==","signatures":[{"sig":"MEYCIQCMw6tMMQES0loUZ1/TxahmlaQmd39hETFQ+Qnog+tz+wIhAJHOOYzlR4pWnXONOvLzTD6Oh4JGls0mV/kz51qliiiy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyJLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhwA/+K1RMCJLfLdED9JQIO5Hu8T2C7FPqfEuiHdmMnc0kALqNvv27\r\nCOvLpyGdLXRK698o2AGjB14qsUwh1/Zz4hep97qBYDjXoCFm9EtoUC0VMfgS\r\nw5BYgheP7nPxpBtPAFpB7NX3imPH3vYu7cTkDKLRBazXv9/uvytzmkUiO2px\r\nABRTLLpq+jwNYYvWZda+6SYUQxnxgByPKF1hsLceENaa+3EwPaDUxY+VPM71\r\npqFR/WXILY6VzHYxNJCmkxeuubxxcWTTpErm7DteQGLGnHoNRmGOdATuyNou\r\n1EvlBWmP+EiOuBbRLQVwOBcpncs/0ODB7mbymSdL72gOn1b5yZA+lZIjb5o9\r\nHjanUVMF+kZiE6e4K1YQ/jpB2qXQkjsp2tG9axJ6AXUg2uXyDWy/Hxr8cZ4t\r\nvZJd1a8B8TMPxg6qfdVHqeM2wwoJ8mP6aSm33lzQd90ADwzWzRWUhHsWHxXL\r\nAHzz/zmad1RcR+ox87TPJROJuv3wayJ7/X05+9EdvU1IG/4r9WSat5XHKZYh\r\noIcnX0DejmPCeKOqkaNGm8zNFeqyzYS8Bny2rJ7T+R3/1hJGatdc6m4Bku8k\r\nj3L6IKCloFjWCKUKmZ/hDGaj9uV3ZGXKkVe5Do4uL9vRIKvDUyrPOnoL19xn\r\nKAdt6oHp5wPzd36AW86ppPKfqASBOZ4g8o8=\r\n=n+2J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"61d3971a411616375c31cb3fb763fafc120c9570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bebf5bfdf.0","@material/base":"15.0.0-canary.bebf5bfdf.0","@material/shape":"15.0.0-canary.bebf5bfdf.0","@material/theme":"15.0.0-canary.bebf5bfdf.0","@material/floating-label":"15.0.0-canary.bebf5bfdf.0","@material/feature-targeting":"15.0.0-canary.bebf5bfdf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.bebf5bfdf.0_1652236875540_0.19087318283328103","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/notched-outline","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.e6072cd6a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"338fe8a18e5cf81e8b42e609a5279a869be55f5e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.e6072cd6a.0.tgz","fileCount":33,"integrity":"sha512-NsgxIRJ04CbG6F1shrK5aXfWw6rEuJVWqQIBDH8pVahP4Ph5LXSnBz/EVSnG+Y3WjBLLA+3JzstNy0N3iwZywg==","signatures":[{"sig":"MEYCIQCoLVENMACCjDVJmsRzPESJW8UW0jQEYaNb1CEuVhc2LAIhAKLvbuQLFoJ+j6pmTPkLotfM0J8cq32nmUVQWcoceaV8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBpAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocJg/+L1qbaxgEJKMPdIiFE75yM5so9O4Rij6Vd6VIIHzn14/TN6H+\r\nh3LRf/MR6vTSJ5KmC0E2gKUDFHdMlr10SNZ3jicveScE0I9vqpI8bATVSeqQ\r\nyRCiI6gk6m/yTWebm1B3upLyJ41v00SG6AG7SSNFJlEVd7p7LGbwwhgoO1Zb\r\n9JB0Y1fftwLruxUmbAclr5+mje84lfepSF2ShUbYMP3W17Vz3hFxV/yK95sN\r\nCSSoghvCYfYj9jGNA0ChYI5KO+ieZd1X3HpNboNLN8Ri1ck9yqwPHwwbWu09\r\nhbdg1AJe1t6/qEG1E/lWUe+xwGiBFv289Xj00olV0ltX/626vsWUxAAGQnxm\r\nRm3idZ3eNiZYBmyaL2fnsGIBEyrRNoMH2DXGbnLsg+U0F3YrvDLkAqeCmQHm\r\nBeODE5gPvhUM4Nh/AtiEOjUxSxJsp8jjEP6XJ5kP2PQzXD6Rl8VkAZ8Bv+u5\r\nS0o2dxp6MEA37cKDjr9Dhgm9XWodUSD5XqvSjwqvqn3cAn5AdK/kHB9+wZj5\r\nM/v1EoztZGYJiMi3CjU3WtOyz1KpaJrrQ9iomcWgxP9yGeEEYCD1tJ2KmyjU\r\neudBhA8fiEzBl3fEwQyW9VYR23yV8QA4Gy0MmXSYRWonMmjNaRs96H5ROuAp\r\nvLoCj9eVjDjfK/hdh0qS1OS3jv1uEW9n4cI=\r\n=eZmQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ef2da678e66576709be19aed16a880b00e73a039","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e6072cd6a.0","@material/base":"15.0.0-canary.e6072cd6a.0","@material/shape":"15.0.0-canary.e6072cd6a.0","@material/theme":"15.0.0-canary.e6072cd6a.0","@material/floating-label":"15.0.0-canary.e6072cd6a.0","@material/feature-targeting":"15.0.0-canary.e6072cd6a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.e6072cd6a.0_1652300352345_0.9179099837271099","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/notched-outline","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.5b40eb988.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39faabdef878e331ed2095f2b500438037dd62c9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.5b40eb988.0.tgz","fileCount":33,"integrity":"sha512-2fI4OIbCgjMFHl/POe+LHowUGBuDUxQPxJE26BQ2yPxY06qbHUoWvlVNbnOtAb+FasjLbimWKYaGiBBWfkFLMQ==","signatures":[{"sig":"MEYCIQDEC9IcI3s43wD6YpT79/1mf7Xyx58cEo2wTQCgf8HBLAIhAMa8LkRTAs22zMwNPmejE34KHNkSJwHeGPqUxX6uDyfj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHS1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3QQ/9GAl5hxwxoXbWwAHaFVSzR0KGJdbyPvIUiLrmh3dTQ5m4nZHa\r\nXRNlQ6peeNJ7LEgl7FMZSyE6k+tYma8QrJPoyV4cXrOo+kc/uBP0bzWFODkG\r\nA5x/eTsZgVR4lPtd3pjR6O+OCCCjG4ANkwJEkjeD9A5hYF5RSYm2MVAIC8Pc\r\n6Ncmr8OsBeBOPoKuc8juVW/ixbaqSglWuHaX1MybI30uz9Yf+M9x8jLnmaT0\r\nFyjESvq4bXC8Sr/1O84kuYrAVBHVJ0IbRsRurt3LOtd8A+norihrVzpQL5q0\r\nVLFDLchMVxw4d4b1n5UUDDES4ldwhqdWn7oJJciTl5xzs7du0NEEmIaOW+o7\r\n4XpIPhWERUb5T80n45vKPDykr5oW3IaekcHEajhQ9po+N6njMlR9mNn5d9e2\r\ne9CUow2t6ZpclsaenDkAf6yj7jlaIpwFg+lbS0avPfS9hEDOkmawVzcMbfLY\r\nhheooJ34r99+8d5y9CJMP5Hl4hedxj4bsN/w/san1eMCRqEc9P5E5K9LZSR/\r\nf2alN+f8RmC19ZpuwKQoFQo1V9xvUGE5NsQG1WZ9BeMkVjfQXhndIsmtsehb\r\nsJMa+KQo2YxsSmPkNvFR+4n4nVRYPxKGjTyOko64uUSXjjmPUYczi8YCiK+6\r\nAL4qz2lIx7b5YNz1H2bL3bmSYXTyeZDJYNA=\r\n=exL1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c30f2a613c97ecb48fd3f9ad7b0677e51a156449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5b40eb988.0","@material/base":"15.0.0-canary.5b40eb988.0","@material/shape":"15.0.0-canary.5b40eb988.0","@material/theme":"15.0.0-canary.5b40eb988.0","@material/floating-label":"15.0.0-canary.5b40eb988.0","@material/feature-targeting":"15.0.0-canary.5b40eb988.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.5b40eb988.0_1652323508958_0.6288412618572865","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/notched-outline","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.6a61d62f6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08c9c6640412c272d769b9ecb993e9a16c50f327","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.6a61d62f6.0.tgz","fileCount":33,"integrity":"sha512-p6H0sVjyZlzsE9nEJC8fgVnWNwdwHCjLaH2U3vk4M8xlPnmFALeoSpA2eq+qHw9fZDCg1WUsGRjUD+l4fKDKxg==","signatures":[{"sig":"MEQCIBwWhDsL3xYcJ+aZXl0EGvZirhby1bzBUsqQs2r01yn2AiATKMaTrRH0upE4TMFG/Z72oy0RSYfQlmfenM7PRrV8/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW3HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/Gg//c+ivH3ncx334XxK++l0DR6q4OVSt7z6S9XQ7c8Wfi82DxvOI\r\nQrxmBOG7KKu6pcZTiOarADnjU/vY13h991moMJ/aBt6jCCP6QXuvFBUEwfpK\r\nExXmQAtufIigfCy461e9Dzx5BtG2d/EpjSBK0hQwMlYlDCsLWnlrclvvODPH\r\nAnUgeSFb2W9DVyeNbS6Y+L5drcF2KF/orIFS2Zc8xhnsD6XdoSDlq6XlS4Sn\r\nwz/z4D2QKfhzoVZ31k06ix6cbxWVjLru04J/vxxtHWPg8/6Z7Hn8NcUtDzjc\r\nJUZmjjaPSugRNGL4MGD0CyAN9OoEUw0wfud1uNEayeEJKtZmUsNgofC5lOim\r\n61zR4J3cNrYmRCgFlnpp4Z7r7nZYWQdF7x/YNc2d5wtiGuELLJpZh0CI5MIB\r\nZSX6SZ9MPgLnS3t2GItQw93aFcIVLVcmHxn65DSqSxYEmLe4KRAFIPyPGnHm\r\n6vYOlAO7O4WxnGxQI6F/ZtdcVhyvEL5No7rB51rlkc7Dm6dU5ftmFDL6LGRv\r\nymr9vCWVg38jlzC5QRcC4sEFB8mB/o0rXbKFJF+Az1ZdDonpyrQMA/YVUStU\r\n93ISDdmGjRfgnw0/1f13kWreKUqvUDuGO5JLOtLj3VohCHP2eBueUsc/Mgc0\r\ntXAd3IWZLbG+SvPAYwsZipO3Hyp82rZDOo8=\r\n=Go1X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1d46f0951ee9f725b870919613271f00fcb1b521","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6a61d62f6.0","@material/base":"15.0.0-canary.6a61d62f6.0","@material/shape":"15.0.0-canary.6a61d62f6.0","@material/theme":"15.0.0-canary.6a61d62f6.0","@material/floating-label":"15.0.0-canary.6a61d62f6.0","@material/feature-targeting":"15.0.0-canary.6a61d62f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.6a61d62f6.0_1652387270867_0.6847531349305571","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/notched-outline","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.05930a453.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"936868ac2b6b6d0cdfa9a0533e969e0eb56a9d14","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.05930a453.0.tgz","fileCount":33,"integrity":"sha512-+dnKLtn32XfwONc2sUxy1d7v9u8Pwt3dG3NQ1I5B9X6r3NKmNwUrP9yvMJgrn545i7HLjknT6mk1lrXg3UFgkw==","signatures":[{"sig":"MEQCIETN//hNv8kqXlCgwIy7Ce/IGWtfjfA6FO2yMG57E/19AiBOmi+eVDQ5ux3pPYIG5/l5mcP798bd+GjqROqUZVUGHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqf3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTEw/9EAh0S9JlDcGWuE6rPy8sdANArsgyFzLakM9qKdP7rJfbkQ5q\r\nx/q4ywV99TX2+oxN1uy0D1nGx/kaAaTmafuhjAbzMPbYqG75luJEeyDJIxUv\r\nWTLv7NNIgGLZiORP4j/9qErMoBqW/UwiSd1fh7/WFxF1bjuFPkppOz9+zUWl\r\niso2ibjiwVrWk3caWcu6I0nSiL8+pz4YVXDGE9AKM0ErR7TXB3ntyRLVfi0e\r\nAFwzgbuH8a9/irnI3FLhMut5mkNbf5AUeENZ7R2E75zdvak4a2J9dn0aIey1\r\nAKs0eVRVXu+I+F91WXsFmO50Bz1EMYFYE/qt9vcMkqmBWc8oRKXbu4HZaWn5\r\n0Rk0zDDY3SiEGZhGIwVSOKUXCJwojmXDo7z9x22SxSsymYBWdm0CsvUj8ZGb\r\nx5BWN3wROjMMHXQnZxtOusYUoBzZ9YeBuZ1laeDVBdEMfM8JeWgGGMfKGCRc\r\nTSk6wGHGi15eba7Fv4IZVph+QFajZ6gd7cPoMvDKshRXPE4UaZxT0alMtw5x\r\nvtZqINxc+TKqguDfdlZ4RQQSHj4AGCxaCMXYrB2fBrfosVNRONBt3EQtevSO\r\niwrpcOydIBikgyiQAvcP8FylUv+cyi9ut8/x6Op0Wa0btxqApICzBC3qYK4p\r\ntWy8CpHyZfkuFO9zPH/+pRel8V0qZS57ZMQ=\r\n=7XRw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e6dfc2d0553321fbe47e71fb414cfc1152b0ef8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.05930a453.0","@material/base":"15.0.0-canary.05930a453.0","@material/shape":"15.0.0-canary.05930a453.0","@material/theme":"15.0.0-canary.05930a453.0","@material/floating-label":"15.0.0-canary.05930a453.0","@material/feature-targeting":"15.0.0-canary.05930a453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.05930a453.0_1652467703354_0.6184224090624997","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/notched-outline","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.c0a11ef0d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c8beb4150d67dd180523aa1514699ebf3684838","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":33,"integrity":"sha512-VVDclFuog2k6Hnp7iwiLlU0XaPJkXj99aSUEvFk8Ce0UHaAgTolYpaLaph3kmQs9d3VugUEyGLR6LaM8AqN+5Q==","signatures":[{"sig":"MEUCIQCvIS1M5SOmLS4840qpvihrf2kvThkW87ONIiMLBnqqBAIgLekBplUtxoBrV/BC8xzLa1SRPVk2BmHPQq+hzwWeh4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWzTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyRA/+I+swdRxlOM8Ubvvl9c8rGjh+5e9TlHfATZjfj+71Uq7c5Sls\r\nsB5KlYxivgGAleWqQL3TaF9iVYiUu7wQok+Rehf0EEa/nyko57HvfqPEicgd\r\nxs57fptkhyk6Ooh+avapQuGgnt4Fg1UNNKkM+pRUATV2A0IcTRHdzOwcrBR3\r\nyK8eEhkM/NOsylgQ3oDeiSkLIOlzSQdiJ1OZQVvi7ZJN11r8TWnnzzEUDAgh\r\nnKKH9U7M+QpSIkZobDPxjn6GK/uQhNlcqTRI2PfU+YQsVKgzi1d7AjP86VC4\r\nCuddXfZ3T49V0nRXa5XAtkykfr/SkdZtvtDIl+Oa4kpJVG46ab3XAJCao0+6\r\ncma/PAkXA3al251S9uiJq4/I9YS4ZXVnhtEJ5ILDnKf82B5v8qdPgguM7qtQ\r\nqNktG81sThQUnuiSFZ57gEN52dRm/TjT3EWf1UJGY0A/xqxSsDAnew68DkXO\r\nGfd0gwHyzOxqGVvk8tt2boY1Xp/RPPd2zB/1ry6ikK1irDrjbzBcjd1V5zMS\r\n5jYWNiwYTo85P54Tabeg3aOgRMtRP3lCJ276aJ5UNB93NdptgxEQPrzKKhek\r\nhonyNsQJQEWgP3g3lAJ8SAJBc7pFTNJOPU7hU7JShY8uKEvSv+InXi0OFZum\r\nTYEjAiSp0QTri3SWXx4gc07D6lMHTvoO+YE=\r\n=5qzn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a97df68c1dadba0530f5fcda79fb8bc3082d963a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c0a11ef0d.0","@material/base":"15.0.0-canary.c0a11ef0d.0","@material/shape":"15.0.0-canary.c0a11ef0d.0","@material/theme":"15.0.0-canary.c0a11ef0d.0","@material/floating-label":"15.0.0-canary.c0a11ef0d.0","@material/feature-targeting":"15.0.0-canary.c0a11ef0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.c0a11ef0d.0_1652911315353_0.9089835461567246","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/notched-outline","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.2f9b268c0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b90123741a960525ae3b53d61dbf864e342b98e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.2f9b268c0.0.tgz","fileCount":33,"integrity":"sha512-Nmw2Pgt9k5TClqe60D0HezOmj5pjeYdrHtDITvoCm/+U5xXBpDm28ZLMxhLwz95WJ5AD5gLfIeca2xT4D/h6CQ==","signatures":[{"sig":"MEQCIAugtM0LRgaDxjtMn2nyZK3dYcma1cZqbpZ6kNPHFgeWAiBr2ivm85KAGDtb9NSjZIsW5NiLgMrONECNGOISbDLWGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+0PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFKw//VUz7Ajk/EFIdGTCjn2F5EAEhtFUTrJqvovaBYKSBNLbz1VtY\r\nukhwwrBWy9IsYKCjTCm322KWnDUkyrtzD+d4248MbrihH9Afk2JbHZpmDKXC\r\nBKvmiFhSxgsJGDW5vZmpmpt1rn9etMYYaMYjvwPcLV6xSCHx/TF1XbqK4mbI\r\n6uaDQXxApI9oZiOVitKYjK3wWfvMwlTxJZ177KulD7yPzUOhAxm5Qei0cxkB\r\nHSUUXLo1OmjlMxDjyEAVeHDZcH7afrmFLHr9F4ib7G39SYu10eiOmAeySSI9\r\nWe+QCAS8ysQU/BlmhJ95EqaDK08GPh2LNa9cWogYaw9MFj2UYtE3/zlbUUj1\r\nx0hW8uQZydO9CvAApaKfooVbV4bZUyaFd0/4wAOKGVbLQg+d81HFf2ScNZKU\r\nZi+VtCoT7WyCFKwHkJL5Ze7RP5tpDnwaXDwaDDLt6S+YMRF4HJR0lf1smxSZ\r\n1kFPUOyPnhTl3autC439B3dO955U7PQxjeCdxsMpSgiq+9DdtSXhkBttPElA\r\nxcGas1YBcDfIWPmF9DNiuFB3WIQuCHkz29iTPy/M2cJ22498NTu/q8B/cMH0\r\nIfkqvp8KJdVL3FnAQTDXIWNdEQKu7GHo10WRmfhnDAPTmhvTkcTOqaiYT7mk\r\n2WEhyh7fRZ/9uBqZheHdOfSiMqvlRNckwHo=\r\n=GMMD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"29832a4f010df39515e01d98656d2e77ac1e47e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2f9b268c0.0","@material/base":"15.0.0-canary.2f9b268c0.0","@material/shape":"15.0.0-canary.2f9b268c0.0","@material/theme":"15.0.0-canary.2f9b268c0.0","@material/floating-label":"15.0.0-canary.2f9b268c0.0","@material/feature-targeting":"15.0.0-canary.2f9b268c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.2f9b268c0.0_1653075215640_0.9396680157585597","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/notched-outline","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.7741345b8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"857c3a952982c5a191499c049212923cbfe5c610","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.7741345b8.0.tgz","fileCount":33,"integrity":"sha512-RhnOdnKDkxy5xabV+kAS6bNQEWiWcS1eqzLpVYgs8I6ruwE3Zl864qpwvzly8uaKQz+MC8KoaWAlsvWMorSnrA==","signatures":[{"sig":"MEQCIAucJrf1kDTuR2acSFFXuzqEkdgRlhvTfPf8NrMUYdbaAiBe2nRizSfqgXRaYf5JkCwcC3D+0cb6BQLgX/8XbWbDiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/QcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjHw//S/ve4JZ1fHWESir01ioYm/PwnQzwSxV/94NgIPigO8335C41\r\nsqt4945Xbn/56xzluQ6lZN7J+op/zBDfubcwXWreYT4arJGDQbQO1wCS8Ylr\r\nDDf+NARemZOtTdiYItIWzmxScsmPDwDOj8vLQ9nIpMBAfXJwor6NJNtSfeMv\r\nVS4LuZ3q+23ijUiSqvg7rqELdE+maJGOBXzKYDqvyt9TfFd/5+PZfkuFbNJI\r\ndA2yPD2kaFLz43gOIOP6pdpXc3FASm+AHcrDUJexx9XIYWXsNIK9gde+4rlQ\r\n0HcN1ic6YRMoH5ACzrO77PuHrTPaTe1GaQjc30ny1IdVnkO1e25Ro5YvNxP1\r\nJGtWXQLDQVjlhoeaUbRw2PqJGULEZErvQ9LY9EjliN71koPsRxC9MY59dKmv\r\nxgf5AECxHOCYIX/qTGG+iSbSLW5ren+ak0LxQnfaniAa19585VV2RxaDMOoj\r\nRBvSyw6ST62qODpMOQ21hn+fpYHIUaaR9OCiUR+8QV0114WNZrCkNVdQxfBc\r\nmiiaf+AQCK/LDso2ZuqmZeIqubUCg4eR8sEyLbTj9O4uJhf1JAQBcFG5xPJI\r\nTpLTDluWIqYgR5pFBfcdqsnbTBZzzLe5hqmVCy/hgLbSQPkRw0n3MXz7/lVi\r\nnpvXEzA6tk6+KfRGeip37K5XfcoGEeFoKKQ=\r\n=T90V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2e61e5e8196d28c1bd4d1c7a12c242276c1d8ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7741345b8.0","@material/base":"15.0.0-canary.7741345b8.0","@material/shape":"15.0.0-canary.7741345b8.0","@material/theme":"15.0.0-canary.7741345b8.0","@material/floating-label":"15.0.0-canary.7741345b8.0","@material/feature-targeting":"15.0.0-canary.7741345b8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.7741345b8.0_1653077019934_0.9269284521073307","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/notched-outline","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.f807e793f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"165def08ceb9dd82a9fd5a15ebedfaaac5b8187b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.f807e793f.0.tgz","fileCount":33,"integrity":"sha512-/ardILHnX3OtxJg7/Yk1gdXrzAbj7vq0MXdmfe4rFdyvGQhyo5IWHsoDZQMgEUYkbdnWd9ANLm7FMvND/ylfLg==","signatures":[{"sig":"MEUCIQCrHaCIfptL28PkgiIbR7ryTzDdJ+yJ2qc9SYhyUbL6ngIgA6Psv8ZGXXB5ezwqw+KwiURDJMPVTdVXLdHX8eagHF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBS0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+3w//UTG16B0eVA2LeTMJCvaPzTQkpZzpkCWt+FMGxIbn8JwuCyip\r\ntEbH+hVZFqha7IwzlHpu5Ycje9dSpUrex0FeHmGwsUrMMLe9So75e1bjfpS3\r\nmOvW5H0tt7jyWTlaszN6Cp+WUI2WmwLnvD3L1hoxYQUfRI4T65oxcStu4m0c\r\nvDtUWqeCp8fN5cRGg9WHCGx2nlBuiBOZOvcZW9CI8hnBiGpE2P7yMjlNIzd8\r\nBLdjhwhPirFqBWkOolgWWXySme+bkKPvuQefRawskll76x1RyjgYvLURo12P\r\njaw38rz5WiwKrl6tpyZ/M+jGPJP3hEbwj29ccjZxfLQRWUqsPhPArxFhhNnT\r\nVUAsl4M7qsd/cyRGpwtkScx7SdCYXFTS4TyyUcsZe12Fn2K7wotKra2U9zni\r\n5p89rZZbNq/LFoGDgGNHWcCTqhgszqoL1DJzFbXod+yKnbQB4sIwFn5vkxPZ\r\n1BwvjyGk+ff1qGXoT9Rge1hOXREi/X3kkCIgkrD29KxQ2i6jD8JzX09iUHDg\r\nJv+GoUWCLw9+VQxrKXEAVYZusA9Yf3RbkVVAbhrRp/w03abkpbUmRv3nmoE4\r\nhPzqB+4MDjJaKP36TQ0Zp5lz6yXtY+ITIzSAQttHyelZv+bUKspajOPNnvd4\r\nrXsjv8W+jg7BqSCLFXNBJSDUKl/4XbKZGAk=\r\n=R8pI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b4ac5ff59e90b4770de9f689d9b09381fe2cacd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f807e793f.0","@material/base":"15.0.0-canary.f807e793f.0","@material/shape":"15.0.0-canary.f807e793f.0","@material/theme":"15.0.0-canary.f807e793f.0","@material/floating-label":"15.0.0-canary.f807e793f.0","@material/feature-targeting":"15.0.0-canary.f807e793f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.f807e793f.0_1653085364508_0.7196713998595592","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/notched-outline","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.9f53d4a8a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e0f7f65e5b94b19843c1a8f509b9a1fb9afc67c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":33,"integrity":"sha512-DqATEZ+pgONuCkaDIGJo4GEPNDE30KJXGbZnL9DsMgnSUsu2cSQGes5WN07oZPBUq3LQqzwFCzyoYhx7T7dhJw==","signatures":[{"sig":"MEUCIQDM5RKUB7WtWPtWcCtJye4sRB4vk2eSfmG6qs0jCsf5DwIgX1mGs4dr3IWfC224nEgRIIFzzwzJhEWuU3WajAWogwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6EjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFXhAAnOLU+IPdCPezqMRsbjo62C3QhP1lpF5WlJGvR43hXz/2ZMk1\r\niR1AONDYRuXSVPGUeCt6b2FWdEaS13pOXlGbVIWH/COE/MzcxOM4ViEIzezU\r\niAu3PfhvQ34f7/49OKkr1vooEoNAqlcaDlaEZpRHrVhasCcuBFTwByLwUb4b\r\n8KFwSUaEqBGiRfL+VLoRlWBr+8yPZcKw34jspjeCICvt82kdQLl/5CWAAh3/\r\nz4tOPETNazRqB8goSwfmVWQ+CdzHL0Hj7Hk24szVVt30Nu/bL1buKOnKCYVn\r\ncvaXWLLvUGHzNrUW9WmN6Rx0Uih1r2QJRicBdPv/Wm2PEhb2WP2eEm7DHoII\r\nayLzlfQnacSyggAGBbkedST1cGP5eMJshr8l8pebvAIiX3vCIxsW7ayH8GLH\r\nztkMOf74OVxXjVcseoTEKablRS4nbdPdhXk5unM+eBp0OZE2iLO7DkpAuxa/\r\n7Yg0KCJUamaqu06aaZ7XgI5B/wyaG2SIQwpD6Lv47CqiBY5S7xCCTBHLeYIH\r\n15AvmD6j7L2/358K8568Hd9DD2Iisw10fUc3iZTfMPlhH/ZshE+kK5adA/3Y\r\nrtznJFCIt1IGFlx4ATfL4yEPU+HRiXDDxeFfUjdx10ZQtYypMfZ10zbOKf7v\r\nlHyDzIvncMSc2rbmALtFOOFmfh3rIx0gQN8=\r\n=9JTo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5db1bd7747bde68bc956d054f2e939e62c78df6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9f53d4a8a.0","@material/base":"15.0.0-canary.9f53d4a8a.0","@material/shape":"15.0.0-canary.9f53d4a8a.0","@material/theme":"15.0.0-canary.9f53d4a8a.0","@material/floating-label":"15.0.0-canary.9f53d4a8a.0","@material/feature-targeting":"15.0.0-canary.9f53d4a8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.9f53d4a8a.0_1653317923237_0.5177410576672217","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/notched-outline","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.77cf00e37.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"460a968159ffcbaf01c7fb0ef23415b3e4ea2e35","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.77cf00e37.0.tgz","fileCount":33,"integrity":"sha512-MY1vJL7ma27mCn8gl4iYaEuLw9kli8CaoJwOEcwEayLfUCPN1BmTYD6X4jn/Irkj6RTDjUdAw+YiaYfYvVWZZg==","signatures":[{"sig":"MEUCIEm8Ldk3oJLRyR8fDeEKxNxNy2jcNNqo5ZHCCP+xRfaHAiEAoacpNAIwIbT0UQZIOx0wFpN+s2Uem8MsoZmrg1jh5q8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillMyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWVhAAlgO6g23kBtD2txvNU7dUt00oQYiBqEYAezxPNH3phcz+y7Ob\r\nR/o9EDhirn/AER0lur52I0p7l4yMZN+F0wmigZ3nW/a71L1nh2sLNH+yLIEV\r\n7RMG/WhgbjHbKsuezizjV8dd6RvB1wwGTXNdLHgybfXbkk90b53e4Z7jshKO\r\ncOQaXOrk7aNasWUjvhNXClIKg8gqzVjguPOpF80+gBBD+A0Nsy7gC15C0CFP\r\nKKoWqGAQ6dIxNbqFw1ZE2Rbavpf+2/43LvNyEQyn7jbedEuXUTTVQ7ZGj7WA\r\nW2d5/CTMU7g1nNeNwt23CLhdFjcnzzU+Aa0A2x2FV7S7e/Jz3SotARCo9D1C\r\n2JfotuEw8ECAn2iyCIjU2w3hV29xXfIu4VMegXEo5ZBAuWh0+kDAhiCMcIIu\r\ndY169co7VlohPWD0q2YEU25DbSM62RgQNd8qTg4TYH+G0ra+yAmy6HQL2ObC\r\nWGRlASW86Jc9lMhk6VQPCq/gt+hjn7nB5rY0pr1zvNIKUG73WyOsGvTHhdfd\r\n/er7yR2c3eq+cM6GHN/M7YHJmQSPW7ZpW3rPrhnQ4BkyZ6KgwOrXv2dvLQos\r\nvfVeSX2HqjCw6rTOdFTDRV1YzI5uIV06HB5m85XuoS9ebKwjtFlKNRyDxJC/\r\nXX4Jf2xQOo3ZPMJ39ZGIlZdwodbLcJFh1e4=\r\n=CL3/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1a68e64a5e78b8bdc529142c18c028aaf1b15b9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.77cf00e37.0","@material/base":"15.0.0-canary.77cf00e37.0","@material/shape":"15.0.0-canary.77cf00e37.0","@material/theme":"15.0.0-canary.77cf00e37.0","@material/floating-label":"15.0.0-canary.77cf00e37.0","@material/feature-targeting":"15.0.0-canary.77cf00e37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.77cf00e37.0_1654018866437_0.576072874039596","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/notched-outline","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.3c7b844c2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cfe58c61a9810f12b241cd5fbdb4140c390db3a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.3c7b844c2.0.tgz","fileCount":33,"integrity":"sha512-ZL9k1Pwk+31HPJ5SoLD5Hii7Ud9OlR00W+/3YowtfTBZihXhgoebm4eteosl0Cz0CKiloWeig2x/vOibJo8iJg==","signatures":[{"sig":"MEQCICErdOIoxW0tW80BrpzsIGUN8a5ykqjTdMclad/Vn8UnAiB/jFLz5ODwkj+0e2tgDxWtQlW1FvSoMZ5hidoffDgntg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin8+QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVTw//Yaok2dpEa32yVzokFl1Zo49NupqzjIMCHIgJaZsBSkwL2oc3\r\njCQY3SlJMUVEgDGjDatZZGuQjY5OCklnbpNCnwol2o8Qe4bFQ3uKgTKQX5xL\r\nsaxpgUD3Kpjh65ku7fhhFIik8AK3Fgy3w+np0jJuUdTC29c6K6bsnC6yFSmJ\r\n0OdHsWmr6SKvmvFeSOSf3icdiXLO93Z5xSPU+EhoOkzZn+2ehq7TLyqtwVoW\r\nSNg1Gmnp+MpMfPMPh4Wt7jVxzPfePRfdqjxhqfQYCyYQ+SoKc7KBRiq/qT/5\r\nsZIzJRgf6Y+pGszGMMMogHYHqTrH/RiCkmdZyGcGtcATBOf5oHONwXvsqlF1\r\n1IJ+ArHEW6hJWbNhMjBLLd7pLtoSgv16iscQt63aiKn9Zw/Iv0u7SUp4Y5sQ\r\nb9fmSibGlTuIKQonekv/kLGjY97LRzdZBFDsvpPsly4Rf3VVTwPjfmC35upn\r\nkFHD2g0Bih3B+UEzIzi8PVcMrGgqX6+FqwOuqM7rKsOZ4MQbccehDNqKSmrJ\r\nSV4vkWb14TvpwPNUpPVJd7+kQt0hZiqsG0pW4j+Ke+nqWEDiLH6PexQTp9nd\r\nTTJxnsC6wH2RXzVpMWQa5zq70kbC+Fg5gz9B+gIN97mPmrNddsUzPIqHBtca\r\nmfRS+K5peuOQ5Z1s7QUfEBuaA/z7jc/sscE=\r\n=0VC1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e9422b2e6573001fae4c8aeb7cc75741000e0034","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3c7b844c2.0","@material/base":"15.0.0-canary.3c7b844c2.0","@material/shape":"15.0.0-canary.3c7b844c2.0","@material/theme":"15.0.0-canary.3c7b844c2.0","@material/floating-label":"15.0.0-canary.3c7b844c2.0","@material/feature-targeting":"15.0.0-canary.3c7b844c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.3c7b844c2.0_1654640528092_0.5171375993737841","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/notched-outline","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.df47894db.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9945e27fcbae293b94f1dba2cd5f90c2310af02","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.df47894db.0.tgz","fileCount":33,"integrity":"sha512-d7eaytjJt+OWFfmtmyffqox81an3kTm/s70FnC+jz/UFSrL74fd9wzKGX73FKzL/1tIg0FQox/Vu0WnCAgl2TA==","signatures":[{"sig":"MEYCIQCWEB6QlQfWzCj8AJ5yrkqhJCbXrLXxTO3VbauUbvhaSgIhAJY6gYBWJIiHOTbEQfpMFPax48nsrXIBwvzlh8sDiYFU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip28+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqwA//XtiP7OgDBHZpQ2GUDqj2TGGFo0UbZOlNEkFDDnrdOhmi/SQi\r\n3inZGAdWGit1DxOjjtpN6BFbgWwgArrk0ZHKKUyX1fD1p04CJRUoP995+GgP\r\nIXIMHogp3GuF+oRg3V0sddk2/ajMesxoTOD0KFNP1RxjERYrsg9K7NYAY+o7\r\nDjGXKxCpDgKaTlS53Ysa0Goq5/Qs15C0ZL0qcMb3XBVIda7rR+7G5wHxtYxe\r\nqVTQfJUjQYJnlnUe4ArliP47l210pqgRzITOOAI11YtH1qSe7wiRHiQuJ9+P\r\niwXaK6/JPGeu4OD9jzj7JY59oPLVro1yGYkw94d4QVv59s1o+x6v2hPeQTo1\r\nEL5Rpn8lbOSqFNtNnwt0IaX1qXBrUCRt6dG7aLeKNJhLzZikDUH6hoJvuepx\r\npbaW0SUBsik17nLhKGpN4Ip8tlS5vWPtnM0Jy74+boowJ39vTBx3Ic8Tu4lw\r\nwgoH9uVeSBd3bcOLNfqTx2fyc9hmv277AWSuR3fhd1dejsy23XAxpd0WopZZ\r\n5eJOatJfhLToIooX8B1oDOiB6HMhbUxkaov9sItbmVN6HtFy9vM6rWmaLyh+\r\nw+Bjt3Sfz0TbPJWUAD+nvP6wfArcbYDdpx8y+TWOBUNUNHUd65f2cHtdulf/\r\naA0PmR8MhOiVDbJCtu2SPWCeaNyGpRyCRQU=\r\n=Sscx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"42be62e51a7c150444c5b32b2d2acee03d09e6f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.df47894db.0","@material/base":"15.0.0-canary.df47894db.0","@material/shape":"15.0.0-canary.df47894db.0","@material/theme":"15.0.0-canary.df47894db.0","@material/floating-label":"15.0.0-canary.df47894db.0","@material/feature-targeting":"15.0.0-canary.df47894db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.df47894db.0_1655140158390_0.7692867825892777","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b18a873dc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd2f10dba111f1fda71712013cbc0c244d973189","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b18a873dc.0.tgz","fileCount":33,"integrity":"sha512-4tvIpi1wCGps7F0VE2+YHLcce4A6FmUYNNLBvajF0KniVxnNbFyrCcyvBJhgH+G04Alw46lVyOTA6vvWCWpWjQ==","signatures":[{"sig":"MEYCIQDkMZRszSjyxRDNQGPs1EShsUoysoBXukNnbyuGMpTMVgIhAMR5NiTrBylzK3l2ii33j2a9tt7mdEszvQH75iIDZC+5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCsZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRZg//fkbNl/A5S1F56b3msJl8DQnTudydlzupYiImUMdEMl1pD/FS\r\nQgLzKmPSdzm9B1Ys7pkVcl0MiuSn+vOGUHpwQ4NU2xV1L8Y7aZXSlCCn3Tuj\r\nk2dwoE9UP7V0/5IgswOKh5+1jeQLS+ojtXxSGVb/IR1h7gqfHqv4zIikpRDb\r\nXqGjOvJWLos0EGp5Vq48ttIPwhnc1vFeUhYZBuxPQlseHf+60EG1BtjVrdz6\r\n9/VHjcKJHOBjGg3mwMDqgcSCXhUVwC0AaTggQIALEWqCIPtaqqnzjWbmm7QQ\r\nuFx/G85dVq7RAR1CkJ4KUAXkUot4H4s90rrnVAusWG+MPZViIcpAiVW6pPVF\r\n4UuSyPvG5kzLBkZBSvQvobK/w9uGGTEwuiYfToHGbNYzI6m5iGYI/opeLGkB\r\ncT9VhK1frcuN7vUDv2RRuodODGYGNNqR+303kUPa7EyqNMymsaIEIM8HYzB5\r\nq8cLNwH19ZSB2nCLPw8Lso4T17twXanxQTuvd7ERJWY4VKAGtSYITa7eFxyQ\r\nbKicAYWA2gK6sKQ+QiioYUtzdls7IbUJeU2snil5uguKBRG0H0OqayIidVzR\r\nes9yGr/ju5xmgLgH/FB4BzLbf+pwy9SUHeTPz5zRZbD6XaEHyI7iAb/NzI3E\r\nfvOa3Tm5uyZGMhVoG5gVedi8WcpN+Dahg64=\r\n=IPTr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b35dadfc99a3788643d8762f8afda3f2d6e76d5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b18a873dc.0","@material/base":"15.0.0-canary.b18a873dc.0","@material/shape":"15.0.0-canary.b18a873dc.0","@material/theme":"15.0.0-canary.b18a873dc.0","@material/floating-label":"15.0.0-canary.b18a873dc.0","@material/feature-targeting":"15.0.0-canary.b18a873dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b18a873dc.0_1655188249341_0.737474109974138","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/notched-outline","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.ba9c29637.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"219e1d7abba4309e55a1e8ac725ee6de97ee76d7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.ba9c29637.0.tgz","fileCount":33,"integrity":"sha512-heIdC3QF9lh1Wwqwk1FLjd7tty86gAo+AiWJR8CQ92QBzuNXDUGA5qxfTUhhvS35ZV7w/BzKs8xG0gP7krZWMg==","signatures":[{"sig":"MEQCIHVKKe0DlgcwDrf+N7CcF30swxaUPvvQtAqYP+eLOKfuAiBLdsYXV+A3mOIasiTryRwXaY7y1zO/X++YKu48ElfBvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNpPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo89Q//d/Y55DDFTRyvcku+Gdo9zCLFnNRj6pNj9S3K5Koc5J3SebRq\r\nHwixYUVjyzVrX2mwuyjK89xXWxR6mhNV0IPLdeb23Kg3NeaTnCFez072KLwk\r\nIFC9hNtgV9Y4P9EG0tivcLiXQvDDMGH1vas1iXMcrVPEzNvBbSOdCObhEDIi\r\nLZthb0j6Ci/HNPKYT3CnQVUqx395pbgCj0H0tWimqHmt4J+AYfNYNGO4Re40\r\nPfZbVvq64Jtu0cOh2HifS8aPXx0Ih6EBVffUiMab00pA7JD9/VHfvVe3Kolp\r\nyS6SksJ8JoQYOTkAMX8wp0gMUtcVPtR7aRSJ19kb5AYHecOYvYjW1AijGXGg\r\nmCsr2YMwObiecs6tE7ODVlhssUSnaXD56HzML1PM3v3vzEWBAAz9SJYSEtug\r\nd4QzHADs1xeYJpNOueHrXM4cH4m2X5VXHo+W5YaG82QlC26FOdD8Zv1nUA7X\r\nqlAYoANO3y2y81Gd9oxQ4pN8/DBiksuw6dSuWln9P5TwOGli/dcYVJNmizDs\r\nK2gVq+FxroLKTcmDhuzKr2bY7lz5sTE+qeNFfiM8ArYkwMqPgezgP2EBI4j7\r\ntvycqCxPivnfeWtPPOYKavegYevH6KD1FScI0cmPp2sa//AK4XmzMBMx0oGg\r\nQvA2IFblO8CrmmQ7B0pwD2djYklKy8ztmN8=\r\n=OJUi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2bf89a291dc4aecd82cf7a6432d198374cfea69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ba9c29637.0","@material/base":"15.0.0-canary.ba9c29637.0","@material/shape":"15.0.0-canary.ba9c29637.0","@material/theme":"15.0.0-canary.ba9c29637.0","@material/floating-label":"15.0.0-canary.ba9c29637.0","@material/feature-targeting":"15.0.0-canary.ba9c29637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.ba9c29637.0_1655233103244_0.7841058635517404","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/notched-outline","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.9bfd12f01.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2eed9922d9b0c83de0d675d06026477a5741f23","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.9bfd12f01.0.tgz","fileCount":33,"integrity":"sha512-h+XUWBhtQ1mjHaxaAJZ7kGKs1wZA3qRmzE6+PNsq7Vuyo8eT9dJ/Rqh4nqIZUq9MsCBs41U6YyiEJfphbNxfsA==","signatures":[{"sig":"MEQCICLtMliTykYtoRgFVG9vTFK9rkIqJ5VjnSE43JgQIPfUAiAHrj5x0RDJCc5Efajn4wrsI4ZJS5+vEWo/u7h6vHqBXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2w0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpU7w/9HaIBG7sjOj0T1K8qzHGCy45rkkayJ/lvDUH7Vos7UVvXyDC8\r\nKm3gsaVYZ+qXwveHAtljtfqARtmu11F/u0cENT0oK+dzi0rKAPk2imSBvhUB\r\nY8EUQiRl9paOo8M0QZTCeDQtNSe2cNes8GdqFB43bIgpx+jGHHSZEZ5ytkFr\r\n+gNeIDIRtbVAcBo7CXhtiSpMBJOUIF5WY9Kl7ylmYoNSRA/5DhziHGovciuK\r\nydKRp4y9zZ+rq7JipyLkJucW3HRcJclr41XwVmdpzwyuFcM0VfL0RvO1bKhp\r\nPJyj5VBE6opTinBN2GfKWbTDYQhOqC+MRvL3rchYaIbZEA2DzPVXrIGGUl+N\r\nQybx0/3fzFQBvQ7YO4Dkiysm+ftftiQNGNLObRtcod7EbN75oY3EVeuGl8GL\r\nPxl5BtQYXH2GDn/3ADdo0ePueX/JHd3Wq6bsdJvs3V73S3hqMn5/XBnL5FAT\r\nT8PDkZcdjJoMnCJ4urvn7PJNcmZrpLtvyAlNnl+frD8LrrM0h63YnVAmtjpn\r\np689RbgvIYyqmaKv8nl8X1E8OkpSQ1tfoTSaPWMrzldig2suFJrDlL7eiJOi\r\nkqTM0gcfa7CS/H2dZpacie/d8gqIqUJIcDBWDQHqMDI41BFjCJR4vkJWLee+\r\nRHrb9XPOTA32dSM30wIJw65yQeUMXMfQM3Q=\r\n=1Gr0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ba7b0d01530df70f39142820ab69babfc9cf5b8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9bfd12f01.0","@material/base":"15.0.0-canary.9bfd12f01.0","@material/shape":"15.0.0-canary.9bfd12f01.0","@material/theme":"15.0.0-canary.9bfd12f01.0","@material/floating-label":"15.0.0-canary.9bfd12f01.0","@material/feature-targeting":"15.0.0-canary.9bfd12f01.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.9bfd12f01.0_1655925812110_0.8242028117949394","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/notched-outline","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.764de225d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d923e4b061305766378b15eac7412c6aca097e36","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.764de225d.0.tgz","fileCount":33,"integrity":"sha512-DDVe5+EoJhbimhNfcatUcvV74xhcaNDRsMT5wRAdmMqZe+4Ny19g+wQPl/xMYaUcUrE3mDTz/MSIctlpVXCB3Q==","signatures":[{"sig":"MEUCIFE0EANQFRe7OO7HoAwfAWfGCA8ikxdEXFzYZ/po69i7AiEAyOoQSi3TtKuqxRmV/8ePqpBzPUHNyI14EiHOelRJ1ZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH2UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrE6A//e1l1LsPsPiFLG+e2uQ5Lww7bLAwG75EEY4jTDMxxaTN/odBl\r\njtoxqhDylmA6PtrAV/C/uE8vs7Sd1l49pbeDnE1551H0f341KaGO6PlnV0jS\r\n/R07nl3bu14tVvpKgqUAw+Tv20g1BK+GNCWSUg9Dm3xC5QKOFmDMT1HQ75nz\r\nD/PJXNmVbdQAw1JG2ZPiAYVetiVKqgGHxNcKyXKt3n1o9PyF4s3coD5DpLfp\r\nbi0Kd/natUMFcXlA9A5zmxRxA//6OXrQBicRIaKr7lQWiFlEZj/yt+4DBV2h\r\nnRKnydPoLoPUPJ+61NVitzGZhiz4V4iPkYXQ4D6sw2k3IgvEeEx8lyn9qVfS\r\nVQWnCze7UAghuNqQA2Zsejo9TaPeRdsEZIq9EXsf/Tdfv1HNW0zaDrxwLKxQ\r\n8n0K1AHH7nra/fqNh8kjS1HRRAReA+O16CQfFTApjA/RrRdJwB5G8OVyC+5v\r\nJ57Wd1UyVPHBHmgxTlB1Kj6i5SaXplvXqKVX3ndLSs+iD+PEhrhq1IltRxN8\r\nnXE4NJGpaIrZoxJlGOu/L12ftCmHZLENsMe0fFU4+QZlU3p0Ykbux3RpEdPX\r\nZnoXtP/bq+5C8znIg8eqSf4mgh36qZ1031EoGyD3z3insFxZOEiAcN/WRQKh\r\nZGrpeJwjgnSOugn5qmarDjBdXm2EaEJ7LKo=\r\n=Cywk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"25c0f0a7c9d8dcedfb35f64d0851fc4fb86b8534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.764de225d.0","@material/base":"15.0.0-canary.764de225d.0","@material/shape":"15.0.0-canary.764de225d.0","@material/theme":"15.0.0-canary.764de225d.0","@material/floating-label":"15.0.0-canary.764de225d.0","@material/feature-targeting":"15.0.0-canary.764de225d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.764de225d.0_1656520083867_0.5907148403734546","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/notched-outline","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.31e517cea.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db306f8e07ec24d63940f3fec6a64ddcb4e8f063","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.31e517cea.0.tgz","fileCount":33,"integrity":"sha512-H2zKIWMFUgZUudmMSEJDnekV03FW+v/579d0IRTll4kMkk4IUL2VAhjYOZZCJNntoc62RCj60Mhj4krRy1UxlA==","signatures":[{"sig":"MEYCIQCZp5iDUkBse7oerDtPYKQKsCxtwzzNOVITTfpaKdX97gIhALwwXdLQ2hf19fwgXpkG2yKMHybOemr/8RjJdQnz7EL+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivz0DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosUw//WcJnD14Z8mP+t7NNLkEz3AVBGpMLbicXgiKJNnjbJHPwWBep\r\nAGgoLSIpTSnR9bEdigQM5FuQ0L2NgxYBpi5P06R1KeJrns2SwbQluwdpAlSM\r\nxuHrlg/G4ir6OJriAl8BpoPTte9YRQrgnBFzc8Him30RKUDO0EaVdKqUQ8TZ\r\nknWUH7ixrY/V4TfbfYWT9WmEbCZiBOYgdHFySUO9cwSsSWJigDyYNbu9Wjes\r\nwVJao51M7HGnfhWliW0iGX5yLS3rHeclEHqARQSvLfJ60I5jXw+Jx5XkTWev\r\npPLWGyD9+QgJUxc/ZRka5eNnHJunw5jTtaIUcOXo55E5S9uiyv+oh6EF/DAc\r\nQuPbPBHzf/JEISM2k2rhh2LjVAwnAtpdTJQWgsrd3yw22c7u3xJpAVo1J+gv\r\nFPwkAAGK7W/+McG1kYMG71KfTMCCVyIhiWflVNYlf6OVVrVzWdQxKahJqKoz\r\nVbii1OmaZKcvw1wKba67sOVFNLdBk5bF2+MmcfZUKEXg8g+o7HycbFFHBcu0\r\nYE9lrFyELZpWYobMBRtreTU9a5ijwezIfRUGr90/syIUmZrmaD9bYFCQ8zbc\r\n0SF7EnFR1kGJmv7Rpz5ulxhYMHgotPCufY8g8TwfoQDAtDFsoHq18l6xIzSI\r\n7EBfN5MiFCjNQr3LsbrZeAPGon/AvxSQVTM=\r\n=X6Fk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8af6d916fdf79ba9e33a883ad56f539f3decd5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.31e517cea.0","@material/base":"15.0.0-canary.31e517cea.0","@material/shape":"15.0.0-canary.31e517cea.0","@material/theme":"15.0.0-canary.31e517cea.0","@material/floating-label":"15.0.0-canary.31e517cea.0","@material/feature-targeting":"15.0.0-canary.31e517cea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.31e517cea.0_1656700163684_0.6772292378969853","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/notched-outline","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.9ea4e8e9c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9d29226c16425ca1ec145c94448146e44e1207b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":33,"integrity":"sha512-e9k3ho+14iM41WvPKdR8QbT3FNOGYb25kuJsolFEdH1eRT0g2Hf4YkxSpMg8jJiJWMbXuHRnYzProtk3G92iCg==","signatures":[{"sig":"MEUCIGINxxKqwf6I0Yn22dC3uMQNl7TZL099N7ftAlQeygABAiEAuuIB0giv41zEKtHtttn1u86kHG61+qgrMQruKe/LNPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3ttACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgJA/8C2F7GfIn8zD3DbAlXAoStc6iLIS8el2efwvEPm+CHsAt2YUm\r\nhtAzSpLXI0R0zCv/sm6FNh7E4mf9XSx9i5MEIkQw1oEgNPvlPMbDDVTRexzu\r\n6MrMSHqrB4lVqxVb2PdzF1DXjJgH8bWhmEqa9d94+OdtD7cwgkGk8UrcSDP8\r\nbiXd8Xfjcxe8iRrW6/IaRw2tAuvF/qGSBPl04rwznlY3mFSQrbkwA4rn0kHt\r\n/g4bKXCaXAzSfROMi+ZurZFbM1FT53kqwGsXRDRsCQgrhX42uXCEUurraaCY\r\nvoSq+Z3Z/ZnRCVTmUr8MfEBlzCHOUVStM7ZWQUzDUeoVH02qK9bMgjK8p2BT\r\nzrAo2x94649IVe7mz7NUEylW63E05Hbir6Bu7fFOCjYf96ufBMLVsK6GfhsT\r\nG1qQU6f19ClQmKmYuGBf3KuEf7iiEP1ucpYd1wzCOTVFtfiBcA/m34rf/7w/\r\ntXINonwjDr8MnKwQGjHX/dmMdFMcdQlqhTPd+ptrreJTLY8IWV9/2tIOTJ1l\r\n5tL/wOnTHJaSZ3w2waHjKogjQFVrfFlXQzN/V8jvtDAE/CpyJpth7r/4aWu8\r\nAGI8qDj52B62eb078k0Xuf9DmTpdnkVvGESkh4HQfDbUiaAYxuTM1i99/OEl\r\nuTnDXq+1qCbNgqZji/fuUi6ewH1QKzJmL3k=\r\n=YgN5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7a2b791f6f1e376a53ceef81767514ec18174558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9ea4e8e9c.0","@material/base":"15.0.0-canary.9ea4e8e9c.0","@material/shape":"15.0.0-canary.9ea4e8e9c.0","@material/theme":"15.0.0-canary.9ea4e8e9c.0","@material/floating-label":"15.0.0-canary.9ea4e8e9c.0","@material/feature-targeting":"15.0.0-canary.9ea4e8e9c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.9ea4e8e9c.0_1656716141379_0.07390487140492663","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/notched-outline","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.cd5bafabb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ecd3661b9ec8085b40f48eabe3245bd1e03fc4d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.cd5bafabb.0.tgz","fileCount":33,"integrity":"sha512-F3V45HXSQAPwfyAPigeVyjxNLtAI6P6ggyd25NHWAPgc0MFRN0qw2O7GoFVP+gz6SGxOchffZR4RHJr3MOyRrQ==","signatures":[{"sig":"MEUCIQDHJGQpEWIL5aq1JZI4S7WC67bj2CMWBvXd0+tWTgSylQIgKWSAeFYHtlYdxWCx3Mtoi3QW8pPbMqWm7ncNhatcdZ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcx/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBgQ//Q8A/T5Ss+jv0xVHTiIfVOH0MGwlEdZnrOU7JICNG5LqR6S8r\r\nwRnTwIO1IkR/WG5GL28ydVo1uwKqyaSggZ7fppqXcU6HnNunHVjJgVbJIBIG\r\ndfq6TRrX7xWHt4rMXN+/hujhmkH394N7xS9GxqulnypPBvqXTTiLiLD68+lG\r\na2gptQR8PG7+xNW8GL+eaQCCh3x5h3va6bEUlHW9yhE8kD4cL3dPrHJJjs0m\r\nNir2I4sT12aPtOzi1dc5CDuF+l7l2K3NYKfLmc47qIr6rNPfv1NtXQEdn2a5\r\nM1h3Kzwvt08F471QkbJZQOrBM+TFanN6oNHpkr7oR3kKj8YLxDNIhkDIei2j\r\nIVxrdO3vocRvzFucYq3vuXMGMEHWHVw2X/uwo8DDSzl1R/HsZ6A3Vku9k1fg\r\n5/cTowhedzAAzFW1naQV+oIgmqPCK4BdZSA14/I3PDCdy0nTP7KKidqVsmGO\r\nti0hGrEL93kNjo+TwtmOZQ5H2sidOdHdWDqVoGkObd7yv8Ko04iIOPMJHGlX\r\nMldVUhCrXCMPG1zAhWfK6A7iaYHPSRYtGMk3BMyccGIMYd4FaQnOIews/g12\r\nY4ul0H8El2jqZrXODOdlr4G3PIDtTbGmq1rixjyP3Lw9VkgBsziK4/oLkdQe\r\nfJ6H5vtkVts4ItUIZk9wZEw5tOtlXtYPJDM=\r\n=44rf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fceb62aaa361c04ae0a30158d529c7e6896b6f9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cd5bafabb.0","@material/base":"15.0.0-canary.cd5bafabb.0","@material/shape":"15.0.0-canary.cd5bafabb.0","@material/theme":"15.0.0-canary.cd5bafabb.0","@material/floating-label":"15.0.0-canary.cd5bafabb.0","@material/feature-targeting":"15.0.0-canary.cd5bafabb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.cd5bafabb.0_1657130111236_0.35499588631932144","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a02fe49d3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d38be962eebf30646a004249a3fc7b74cac3fed","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a02fe49d3.0.tgz","fileCount":33,"integrity":"sha512-6WZMr/BwMz+3Lus1kfuePF8vCi4rfKeE8eZD6FRV6I3qKOPK68dpWrfk5IqKvn+LZVgWRXvwaiX/KzUQrRcuUA==","signatures":[{"sig":"MEYCIQDG23u3BYBevmcZWCn2bydim2BQVDYPKSetofuQTkHdQwIhAIthff7vq5PosJWDGlbqPM0y57SnrYPs5hqCs27LFyxi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdnWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrkQ//QbPd/3oyVOjvgCAuOYQsmSLL6a2MSqVNv9x9xDslVfPoej3z\r\nw3PagTyW4wB0ZlUOHOIm53UVz+ljRTKwh9RY3IvrwuO/rjMf4QeU2bVUJTjR\r\n4U/OYFViFxxhbrfc5PZGefc6kpNT5H1dXOeaJs+mZBd+Wy6rwimxLdi48uxc\r\nLjZ3tjnIMOw1B8m+Pz9Vtk0S9t37VAq9oDVgtbfcOmlvXG6OuI43h5d9wzZM\r\nrlIyea2SErZR+51qCeRRT8n87wjHWAsrm9bMLUEtVmINW2LNjs6+X+PIsfOt\r\nPxqTghmh2WIGfmSFlGcFvHD98GIHv/e9RQy3Eyj6dlWkwmBWZ2uki8ffP0z0\r\n1F3wrFynG+bS11nE4YoiJxYPwUac4dNlsceqMgl8g3lsmVDiSQpjd5NsRHQm\r\nAZOkL0J8agOAgxYqpxjljoyaWGORTVAQxClFxcoRCke6adxocdqLmFSIG0Ck\r\nh9O513Ga45qvu/AoGOUzbOPtG8B9TfhwtAB9UtbawuPSbVKlE+z7PD0ZtLRM\r\nx7AjUZaCRiaTE5fr3WItc4s3yTE355IEnb2fiScBIJYhECM6RjKJlyHd+c3Y\r\nyWZ9Dgj326Ru68LWAMVmhp3ajFyMBpUskTRRcTf3rxILTGJXxUnQNfRxuKC3\r\nTah9Kg2mmsmMBUa1dpuEy5amMacsePvegzw=\r\n=XkTp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8304e794f430681d03b9d2d3193e635a072f2d8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a02fe49d3.0","@material/base":"15.0.0-canary.a02fe49d3.0","@material/shape":"15.0.0-canary.a02fe49d3.0","@material/theme":"15.0.0-canary.a02fe49d3.0","@material/floating-label":"15.0.0-canary.a02fe49d3.0","@material/feature-targeting":"15.0.0-canary.a02fe49d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a02fe49d3.0_1657133526278_0.27003550734616777","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/notched-outline","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.826a3d8be.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10328caf6d0d529172d3c1717a2d469a068c78e1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.826a3d8be.0.tgz","fileCount":33,"integrity":"sha512-A5yyze2O6nQC1CL5Gqs9BwFrHh00NMM/HxZI1fLoxQSPv7F581RjKUjOhox6xEkLCcX25IzG6KjpyTn/9NBPxA==","signatures":[{"sig":"MEQCIB3fomu0DZkYIYPH5h2EVBfzDvduKKD4Salj88Ef3RboAiBJX32x9Ec4hicByhEpIVm+0/DhTVvXKJJQ4Li1z8+ZOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeMxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/VhAAnhCj2rai5Lu/Y8ZFAjiRHX65hE2zEMq6KK5D7o64H+30VWh9\r\nvMxiyCh9pZoFY4xvZrj11rUbLkm05Pix6J461Xdq5EEoTfLYxk79bJNQAseY\r\nukJvTJhBjCSOWQmKVrEpyfGkTpxOuBpQ9gjxc5E+IqtEt3GTgoiPuW9IL1ea\r\n/bOtoaxkNSB1arcepyqkFU6sYVc/GN3B3OVY7bzt3e3wuKH7hiZABrcVmGCD\r\n98DxosuNUAbYjboVQNud22xL2a6GodHC32QMLoC7tA+6gdDJg8wr4mc3/KvF\r\npdZqqgB6vBgAw5+Zhzd+kHWdhDZwTypqejloRnESrsS3QuUANRBF1caMfOIB\r\n+LLf4mNA6zWTKUBWb8w9cmCmRzkP8jmaNVfTMcmV5brDs8IWeDKqnJWzDfh1\r\ncObXYptmozrlPzVlhqnQdEtD3AMX7hFDh5Y2UVeATy4FazxV3zNqStAiHHF+\r\nEh7djlyQ7WG2XVhuAOZIBCiwHd1ikhGaDTBs8SRAW+AwTnRCFzg2fZ5inkx4\r\nB3dMNqi5dh1qvuG6kUqSVP8R51q0xnGOb/jxPi055iBReAsVZfCMUw9mzq2H\r\nloMpgWDU1i7R3oO5SG17ww1HwHCzvtMTNtzyj5C/dszl5DVcKbLKsYMJz+F1\r\nyK6zkr5xT3NgVu1u7pQYZwTDNLFLVO207Fw=\r\n=YZi8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f54c723431e97d10fc1886f271ed251cb10209ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.826a3d8be.0","@material/base":"15.0.0-canary.826a3d8be.0","@material/shape":"15.0.0-canary.826a3d8be.0","@material/theme":"15.0.0-canary.826a3d8be.0","@material/floating-label":"15.0.0-canary.826a3d8be.0","@material/feature-targeting":"15.0.0-canary.826a3d8be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.826a3d8be.0_1657135921059_0.18457442669445112","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/notched-outline","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.ef276aa93.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4c12a64c3f952384091fb20d7deee5aebd2bc28","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.ef276aa93.0.tgz","fileCount":33,"integrity":"sha512-Yr2gAQiO6VuEra8VBTKaPvD6X5cmkWjCFfzy36EEO1zcIugWJG+HHBY+pWTubmmmT61gMrrZ7NHnNOhJkziyqA==","signatures":[{"sig":"MEQCIADiSlkws2yuT3e9BNLmHSM695W5bkvrh5RwIXtkGzz9AiA+BwISWCfGMlwexh/wjGXt52lOqVycy9zhuLdBUdss4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxHvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSHQ//Yo7CiFaEgXa1aBr8glcmfE04VjvGo6RonQv6v4hHIDzP06R1\r\n36qlFJRcfgk7cSj8gWWeO4ZTwwOpn6FW7rjhpa+nzYyQ3Bn39X1YbYWF+g8k\r\nQjexUmSC4M7MQt00nNUJbOezefJK+zQQxhj1fRBOtXjJ5mv3UjwDN04ATJC0\r\n1N/5GN87dHesp04JLGa99eThTtXQJF3ds3LX7vhMY4X3UUjpOmZ7Y92KVyDS\r\noOPh64NC81kdSqMuA8kxK7a3tXyfNisJNNy1LmrlQF0MRnCll7xe6kygVNeY\r\nCbN1GuLO33v9r8TueCzTcX2Ok2p5JhRk1iRqQvbwz35UI2ph9SN/QSdiM7ZK\r\nVRPKPH650r7M8csQ0NdRwPBryjA9aOolX93h1OCcCSVSPTcMjv4ZIH2wmt7Q\r\nnOVc5y5UsyGyrCy3IsceGq0T4Li3lmSAnKBCERV04bAis1t4YFTCFNUKICbq\r\n6vkjKyQWj27IQIF2QbicnQ0lfwpBfV/WOmWGQ7QXlTXYSlw54vrOApj3RpR9\r\nAv+jqh3IQ1LYUtD8J9XoNtj2cHASgvh8GwlhtwnapmS2//NLIG2KmeRv4tNi\r\n0SS5LLwGzEQ6fsoeX2rAJN8aO873oyESEiuhGUGik+pkWADXnTBKS06eJ+L2\r\nusvchlUqT6rFEL4rTU8rtmsBsYQRpA26QCI=\r\n=N0Us\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"502fb9536e29ea5887a9fac4aaf0c9dc2c732e61","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ef276aa93.0","@material/base":"15.0.0-canary.ef276aa93.0","@material/shape":"15.0.0-canary.ef276aa93.0","@material/theme":"15.0.0-canary.ef276aa93.0","@material/floating-label":"15.0.0-canary.ef276aa93.0","@material/feature-targeting":"15.0.0-canary.ef276aa93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.ef276aa93.0_1657213422939_0.277041331244813","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/notched-outline","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.59cf61d6b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4cd41556c78e379e5c35f884861224a5a07a764","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.59cf61d6b.0.tgz","fileCount":33,"integrity":"sha512-zB2W70zn/ElIWCimVQiIOrtFIYcVqwMs86C5Zp6N86PmxSWChWkRQkAsiGemVJGpqL0F1De3TSrY+sAEP63bAw==","signatures":[{"sig":"MEYCIQCoyG1H1VZKZYksjlv8DkBlisaPmLPxjErV4hPhK4gQwwIhANh52VkXTSMYOYp/wTskDyfYioIfTeTeIp80iKMwXGBu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxisACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5iw/9EHT2bFUlGBODsIFAhdjygozYbuFeAA+0OlDiaDts10R0YCPt\r\noORS6f844v5AE4KvGsQD3Wk7QrhUF8HDWi6DeuYQI8m9QFnxiCz+ccAVYeHQ\r\nQFbUL/cdiHsakJ7o68i9XdMSIa2XMZXDaMM45dfhTQsfvr4/KP8IcrusM37l\r\nauoqJjO6CUtCHvH6OAKL73W9yk9lVX+BFdnzR8Jc3/0AI8G5kAPStZuA83dD\r\nnz0DE5RQ26gRqQPSVTTcZKY8nKUNNmL3dabvfg5v/6wvqnV0CgaugeQ2muwU\r\nmQop9KPi12gl2BmcbeDG3+97u4JxqvBAImYAKOY1kg9Q9rrgpf93cbsW6vS1\r\nMAU9WD2eU7GF5n/65Wmn/HQcknhNRqasOR27lkIB6tgD93jl83gqWc3Mo+gy\r\n3+AzP0KQeS5O4fEhziQ5kQyjOibxiVMb+deZ2XJIFLhev47/IFrMpNPLIYwa\r\nRuQXTEpHavr/YVxpDmaAblB+BPDz7Z6cKO4wmfVf8I+eNCxR63Vsbphw0i3v\r\nBPruMUgXWZGbbxOtUeJSzDPft5wwmxwRG4HlC/jv3WiY14Eqq9EEF/p9FvlQ\r\ncnif4WZ+m3u832qveAMBy3hk8ApGdpr1NemtnbJy3BuRqsvAsX4u2oatwCh9\r\nbjaveTtb6KDeSiUT28jO9oa4i05Z0y90Rn8=\r\n=0MNu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2f27bf33b194929683b4faa9f388325b07b408b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.59cf61d6b.0","@material/base":"15.0.0-canary.59cf61d6b.0","@material/shape":"15.0.0-canary.59cf61d6b.0","@material/theme":"15.0.0-canary.59cf61d6b.0","@material/floating-label":"15.0.0-canary.59cf61d6b.0","@material/feature-targeting":"15.0.0-canary.59cf61d6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.59cf61d6b.0_1657215148042_0.02270989156810077","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/notched-outline","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.8647092f7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29b8305cd4be528086888fb008a0b75fdb440f70","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.8647092f7.0.tgz","fileCount":33,"integrity":"sha512-s+Bog8KCAQ2ojqizrwUa+eGgJGvdtMOCVHE5lM2XUcVnnUhmYeONYbDh8q6MN0YyPnLiwX+CwY8JxajdeBWmvQ==","signatures":[{"sig":"MEUCIQCT4jJV0clKqccbt5ddA11JT/xlqgTZEEL9xBJLDdxh+QIgbYvtEjKHeKN1FFOOmLc058hNMsCfCbmOhrqaZnCtwIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0SLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqX+Q//cxfGRPHmSyL5DnOLqB+c69zeVdSDp+uPwREo5bZkjxnCCMov\r\nGwJ87kjdzKM+5kxcTlecwMatY5QbZzzsjmpNB7+YY4PL8S/N7byeNU6JnjDU\r\nZ455Xu/dAW6fcYxXFjfqeWGIYdju0YSY6znP+XkZPZbdWSmWoGEwLxXYU/Wm\r\nmCthw55lgj+dfc+AVFDwAqD7E6U9KN/gKcnm6qAuYktJUn+DsstzH0zAsi94\r\nel5u3puzK2hCum4BQvieMY5YxnF3no84pY1E9oXKaGMotSlQyd3l3uWCZ/vL\r\n7xnNjcV8XeEzs/7OSYRxx27zqX2hX839ozZtmR5xxXkkmulrThhCv8EzwOph\r\nxlfbzQROg6zlLbEIkkNUO4EJkSkwTZIGWjKRXbrrl7AH57yerAg5x+9q3z/G\r\n+C6CG2BSsgc0PwAwa43KXIcY1ZXzA+8sKszJW0TheDxT2QqKs7iZZcrwr60R\r\nBLtE98GzbPC68F9sEgnznfJs/5hcbdeicnHneD9rngoVDKmmsFg+ZRpHUkyv\r\nF23AGINlITBPvyTNaeCLTdNtkdD60eO8WgsrAxaURw/SJ2Zvf0wfvqAlaj6B\r\nZrvUeuLxgbjJp3OC/YOr+hAONoQwfbdxEh1vkHdpKYmC3TRN4ZfAm9Bi4ieA\r\nbVoS1b/3IYC1C1n3ZWPG0W7XtBBIJbPZPHs=\r\n=mGC+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1edf72197ddaf5b6318f71205888f8ae695e9b29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8647092f7.0","@material/base":"15.0.0-canary.8647092f7.0","@material/shape":"15.0.0-canary.8647092f7.0","@material/theme":"15.0.0-canary.8647092f7.0","@material/floating-label":"15.0.0-canary.8647092f7.0","@material/feature-targeting":"15.0.0-canary.8647092f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.8647092f7.0_1657226379674_0.768566788434512","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/notched-outline","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.02ecd4d85.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72603c54ff8afebaca0513fd81b394a3cdd35950","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.02ecd4d85.0.tgz","fileCount":33,"integrity":"sha512-PJBQQFtsu4/efPgfJLmyUXWVy0j3xPo7PR3Z/wpWkiQfQ2kS7Nfzctpfi+kdEpWjFKuhzp3crl38NMlMvXHCOg==","signatures":[{"sig":"MEUCIGDTrklh1AQAU1l560/Ls8/S2aBHBTWD5/HTQPmBG/KbAiEA1sF9J5x/XbuNOa7okdOLN0StSRRNLMvQ+ONBsWoLf3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFJxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9sg//fR1bLxyfhBzChcYcRtHz+X2XfBSxPm98SgNfM09OxUmQWIXJ\r\nkxDA6J7rQuArN9Ak6i/Op8Ahhsw3bqab575GJxVn2LYWjNZMgoHHTs9k+llH\r\n53DEiK/iKS3xVlBgNnlH1dIO5dsMZru/xJ45oqG5J6F1LFwpk3I2hhwlMjZz\r\nFCIVv4oXILYAPDvOuJMFUf4E/Tg5HHY+cyzLaLr0Dh4Bb39RamWM6irKQfnO\r\ndiNv+Ykux+nWe86ViBTTD9MESuejNuEo/hJUwwpesbQe4q7tx+d2L5UvkylM\r\ncljJLyC3kbwNaF4v0djxS2DhRrUqKo9es4sQVYfwagik45P6aopLUuuumbJG\r\ng6h6GHIS7almoMt21+GCDveQY9e2SoZt3gJtgHYJscGdZ6NepjnFpBQpKQ0C\r\nEi4YXeI80LfNIiZfLbarPtNdiypBPIfImUAvwsoRZrSImWtjUGfbwOk0sTsz\r\nuLrTFFAXF1ymymJo/TcHisMSoZEd9kmM2Wxo5Z6BKv16jslgnrZzS1eNdiTC\r\nKPE/RIUTbNxrjONmHzruSBveZymNenpdeXf4PJVCIcVCmqm1IcHgaiA0Zdtv\r\nWwPMA3IBqAEu6+HB+UNDjD8ZX5F+p43Re2qEl9uW+tG2MdhOJYOdTeHreP1G\r\nN2nccYX8r8LSkWifrXWS3RmyiHWstVxVYDQ=\r\n=oWXh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e9bd9b1837b6df66731c0fc9da61877874518d2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.02ecd4d85.0","@material/base":"15.0.0-canary.02ecd4d85.0","@material/shape":"15.0.0-canary.02ecd4d85.0","@material/theme":"15.0.0-canary.02ecd4d85.0","@material/floating-label":"15.0.0-canary.02ecd4d85.0","@material/feature-targeting":"15.0.0-canary.02ecd4d85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.02ecd4d85.0_1657557617656_0.5562287707249387","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/notched-outline","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.63d3a146e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17c6f8f6c8edd99ed14c7a797dae01974a4aa3cb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.63d3a146e.0.tgz","fileCount":33,"integrity":"sha512-vLDe79FxPNbmtpb5TIxKZ3T77dpu+P/3kjOT+m0N7wE36AmbMuheEmwGXTms1R+DXn/ETZWgO/svsnOAodjYzA==","signatures":[{"sig":"MEYCIQCZGe8buPl4K6RJeYzHOR/FhwpIfa1aCOCGt/aCG4tBPwIhAJ9kGCbSjbburcQYa4ADyIcaKjYykaR5j9zbililw/uy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV0MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqnhAAmeOxUZ3iCVUcrMk1BqHg8GQstL2ZQtD9lHgklhmbexuIq+S0\r\nszrJTJ2iWlBEOBx8jFpllo3vo1NGLeNNplbG9vsoNZTe6FuLvuIxP9BEllGl\r\n0dRUM+bwmypo4L+Tup2pMMED9yI+Qpfy1sCzZsirTpYOUmZnjZGh8aTBbVCo\r\nEpTqxfdVYVbsVkdux+9ixcKIe9NhijhqTKMgPLH3HV3hGbM2OFeI0hwPg0g4\r\nsH0MN44PzhW52r1NrUk5C1EWpCPdvbvmqHS8jKzeUhkJi7TjUnu5cHjOAxHI\r\nMBrYAy4S6OzI/59rHHFyfyfYBL3CWohq9qJ6X6zcKYHTc4HARnze0DG7RBDX\r\nSzxsSshPTMAelfnQ/TGb70RCVwU9qJdiOJl0dkv4eW7N0OBSa0F1Tw0zEsPs\r\nPUCJ1HPmp9SDI3WB8rohBjBWDE1NjFAyhPe5xiKJXA07JmN7gY/wK1kraHxT\r\nAUfuphfqdGw5eOX8u3lGlUFuwTPvvy3cC3rtXjOfhckJGPrirGJ1nTRSAk3V\r\nEGGeCwrq9AdLeBhwVQfW406xRV1Kn5v47ki3httYAIPXKpWxM8eeCN1v+JpA\r\nT76lXpxgHsNubxRUTG/Ko0o1ECVG+NV+jv1BdIjpqvbazXlQZyLNxm7xJ54x\r\nclbkHxmTUbhMj34oWUlGdMNaDy+/rM0WzZo=\r\n=v9B4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"593f32d351d8703bd0422f65b3651e55f97fd31d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.63d3a146e.0","@material/base":"15.0.0-canary.63d3a146e.0","@material/shape":"15.0.0-canary.63d3a146e.0","@material/theme":"15.0.0-canary.63d3a146e.0","@material/floating-label":"15.0.0-canary.63d3a146e.0","@material/feature-targeting":"15.0.0-canary.63d3a146e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.63d3a146e.0_1657625868013_0.7964130371037592","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/notched-outline","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.88db01990.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fbe03ba61626a8a9584432593a65f0d4f62988d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.88db01990.0.tgz","fileCount":33,"integrity":"sha512-SBitF3I76pF2U+eVcuSoNif3tqOUYtuEo3Ox4JDO1Q8MBd1xB4HHcahBA4/BQDUpUF5GmsQmS71/O3P8/IJd/Q==","signatures":[{"sig":"MEUCIEeGIxqdl8mQsFeg5Uua3wv4wJwwQw6bitXClaVjKY1yAiEA3BvslduHRNakcuwoNcQyZr37mNl48/inpKu1lMKnLag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV3DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPDw/7BiSmvqzEkdg4QJ9TE7e+TQD93TUlhtF2Wx2Zrjwoa2ljAgth\r\nUcPNW/h7ijH4XwDnxKPPAlvStxc2/HP75usmwjb7vklyuWt7ehIYYBh3jLr5\r\naus5I4AQ9XTap4YtOCL+pK3s79IDD0fLAZL6Im9TA/y2qqK9FN+cNukD7itd\r\na3Z5r290eBHTUVWAsQy+ugGBNgqi5NIkLEMxyRObiA3M6gEAxM9YI0ukhax7\r\n4zHZt2zOeRvoap36pBHadoJwr+rdz64VeZl2Wh+NoUjafi6cqr5583LoI5b6\r\n5IlRKF8n4qpsnVgmffcM4c4bvAms8IbUQAz3857lvp7sadmuyg1PEo/SK7dV\r\nBkoGCeW8xHbvDc4qN0Ct7NwOl8dkNkAba6WUVfvG+48MOGliSABILNZImWOd\r\nOQzU8bhSIBghGOHm1FtF0e3wHJ+lBuVU+sEks959V6buJMBkaVTxIosMKQsR\r\nKTnA9udSbCT/cB07ycoYfsofLrcKcP6pqeBOu/+ynF3Gz03KPnS6bHAhyH/p\r\nSD0u/t+oaI34Y5U0LDw9D4bpZF4LsQ4Q3jz8u76XKHrwpEHRbmbtw0A5HvGQ\r\nKsuRhc20h7KQ4O7q60iO499Wf7zU/AlVFN+sHge++ERvsndHaeh+5xsEDeQR\r\nNBDZ/2isC9icbMMKlulsV9xNuRaI/H7+lK8=\r\n=aVZt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a2570f15e2572775da6e1894e5310c107a703ea4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.88db01990.0","@material/base":"15.0.0-canary.88db01990.0","@material/shape":"15.0.0-canary.88db01990.0","@material/theme":"15.0.0-canary.88db01990.0","@material/floating-label":"15.0.0-canary.88db01990.0","@material/feature-targeting":"15.0.0-canary.88db01990.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.88db01990.0_1657626051274_0.762149616081655","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/notched-outline","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.6432d8fd7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"699127d7f81a48c470168aa185db84967382f73c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.6432d8fd7.0.tgz","fileCount":33,"integrity":"sha512-Ol8vwrYgkLL7fi4d7YcVohJlKWN3rDIk1tAKOQVb29hgzmOl1VKnrX4g0XYbxLeJojjadLuWHzzGRzEf+mPf2g==","signatures":[{"sig":"MEUCIFyqhfqfOd9pDpaUYtDO2k1Wvz+dkrBPysXqyB8P7s07AiEA2OjLKd9vNPczLaOVAbGjky41YhKFm4DzOXAqGSvnmYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8X1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlhA//SwkKNB7O8zASwHRW3ZQQHIDQITOp4SLK4Ax3EwLZYouyDfVa\r\nOOV87YBbaES3s+7iJ4s0QlpIPJ3CrIXkxGoCQirgG2iRUQo4wlWxtidvwOgA\r\nPXfZYqwgcJRq6aJ5QFcKezGTW/a5yF+9UspRtaCey+ZpOSLYXImZBjLVvY7I\r\nkl0LGhmRevDOIHnQttYDzutGn7pjURdJcnoDNvVoj3VY7Yfvah7b+rQtYc+R\r\nZDweDaCIsbebEH3DDClTsl42TLe4saMatb3FSdEVfLGcUIwBumwVaZthEDVz\r\nP4O4qhfULcdgxiInUnuXKIguGrnB1ajcIusAX4blQFfX0Kw8Z3tzyViW9mXQ\r\nl0zd7p1n0B8oOPw5MZXnmNDybCReEOuykpCuZZ8xzwLGoIWLIHCPd0RlTJpE\r\num/LPesjcrx0RS6rmdMK1KAEzQr2sK80XdXTps57oV4lP4IkjtwbT+BkDQBj\r\nwkwakYkrALGh1X/yELlkS/DKZTAu7lJ2563cO/cyqmcoHxXVeh91FVO8sGvN\r\n00EEV5aBZB7GF9kWjM83OR8A3Sa8vF1jS/YHBg9Oq/8yB+YVhxKfeqMepGfe\r\ng3MjBa81h1OreCre0FpmBxqyMZcrC7JlGBnL6UryoElX7brF399gTPJClvpv\r\neMUj6lTAU39JkZMTxFeGHyCLNym1jyzW1aA=\r\n=G5uA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"307aa53d6ea873bb978456b538f97f9922496798","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6432d8fd7.0","@material/base":"15.0.0-canary.6432d8fd7.0","@material/shape":"15.0.0-canary.6432d8fd7.0","@material/theme":"15.0.0-canary.6432d8fd7.0","@material/floating-label":"15.0.0-canary.6432d8fd7.0","@material/feature-targeting":"15.0.0-canary.6432d8fd7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.6432d8fd7.0_1657783797456_0.8646625392705403","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/notched-outline","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.085f9b25c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6285416d5f4a7e697c9eddf209529860f90b83de","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.085f9b25c.0.tgz","fileCount":33,"integrity":"sha512-MT7wcrt6+aQm3RnW/xq6GLBzPtk05p8VF2YGKbsNdjXAEzFO7dnvuxRkOPKC0TEEjo6cXhqSxNWxwy52MZ7Oew==","signatures":[{"sig":"MEUCIQDSZKKBPB3zGqR2P8QV+MBaY2r8PA0pz86Ox+Nmgq2f8gIgD8InfpH+0WvH9O47hib8aOGIUCdb4F4ednRghJTN1Ao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EXvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqShg//XkR85d1kBBzQ2scjsEmtbqMT1Q+itD1p6GKLefHNTpQCGFvQ\r\nYrDl4u8kZa32K8DBsg4EctZFQtnf+HWsb0waKOGvDFL4AjbeCR+dfkCyaeXH\r\nsSiA8052ybohWWCkZJGpyvdLYxtBSRTu2hDAGJeB3EcEU0Xg8rEdpSG1eeXg\r\n/TRoayyF2kqiWCNrAgvZ+VTIZUhdI6+MJckmPxqzgmoj9tUBEAd3oy7Jmmfc\r\n+S1IcBONCoDb5FIJvnHHCRbY/K0ZGo4cawMRhgTTQSwLT8TK/WNQxr3pJk1R\r\nOxv024I5tNantGNmCNiGzSO2CdFszxpu7Xa7Dzz1C/B5spmmXsqlBYj0+Jt2\r\nbdzUkguhGEHUE4E6fhpKQlP/p2K44L9xf6otbfjjeeHeSPR9+4KX+lT+yQ9H\r\njfnUuGRlAHtJOnQ1Rrfx8eBbQiYn4DFpdYE9Ne5HmJFZ2WYHH0vFoERs2lVB\r\ne/YnDz0waqkGow9oBlDjyrQvuVdmCZaFa4poykR0KU09aSW65+raPLiKTj5i\r\nLycorNJlFz4Z861tTw/5aJyw+rqjnnI/lq9F62mP8Cid0Eaj/HOEZaQOINck\r\nPbW1gM9Whbr2aUZo/efz3zRmZD+xf6NBEGmQjgYtsJ/tEreJG67iGVtcPvdL\r\ncjpduxPs9ZqC/4ugxVxtV2Gmoe1wwxukRQM=\r\n=kCP3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"766a8d5f5fc7e4e022835f16c6ecdab8d2ccf071","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.085f9b25c.0","@material/base":"15.0.0-canary.085f9b25c.0","@material/shape":"15.0.0-canary.085f9b25c.0","@material/theme":"15.0.0-canary.085f9b25c.0","@material/floating-label":"15.0.0-canary.085f9b25c.0","@material/feature-targeting":"15.0.0-canary.085f9b25c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.085f9b25c.0_1657816558805_0.04743273165274253","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/notched-outline","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.39f9424b3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44b74b308fc0ffb3d18694cd354c6286a8315ec9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.39f9424b3.0.tgz","fileCount":33,"integrity":"sha512-PKgKy38kOw+zH/aKUZHNwiupcR/64fiKrn/nvfIwpD7i+BbjfAvJyzwxp2/F7QHjeUlnLL6lg5V64c0zrqCNcA==","signatures":[{"sig":"MEQCID/6JGni+lYhqzc+CX2pqeEW7BYlgRe8FRRdE0v54gfYAiBTvPmScIktcWpzlus2RQ1eSxA77zinIBsXm/ROyVWDyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0E0KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDSQ/6A08ykla1WIDPbhoN2FjkbyKomA/kzHF4HopjV8QyBXw1JKB0\r\nyuc3bq1n307VfpV+R/1MFGXeukQhwh7GF7/qTewznWTNlZjXhRBXrtl+ol6h\r\nSVCW43Pje+icN8EGWFkbEeEZuOl4Kxq2LZzB8vpmpSDswwgKbmMAwb2MDuRg\r\nNF/+oag9k1FYvYoDSCu4zDLAcKuQDbN5YyVBQ3A5SnJemcI+yw1bB473WHjJ\r\nQE3b5vF+HWd4Ctog+BC29ta9CFzyOkMo8APDeyCUnWJjXWf8ED37Bh+DWfPp\r\nrmocDWKxvpTgPbZWIK6Q1OBfY26WDZ4vRo8QE9q52Ptm69QdDBd+8dkzEoON\r\nSDwm0ieZwgB1OVcvLVSaWflQK6s2WdbdECqIYuJBh0x3kLhPLEgCuEOJoErN\r\nD87fu7MJ360pDluUqnH407xg9xQM6xOGnOmJ++6iroty1zkI/3TZlOIoa4Te\r\nuRkUseSNkR5uKYmTYaJww2UHSdhk2szrajQJuTIDY3EgNuTa/cfpq16VmxgO\r\n3wNc5cqnUeYER1tRbBxOfN2K8HH+yqZ2F7M9PuU4vjdXposBR4DLj8ohCkzR\r\nYv9eV7Mh5ThHbc1Cx6NDbfGn9FJeOPQ9aqk/+6zI/aZs1PuqG9xs/fqMywCm\r\nlPLu3eMD0xtuBqSvn6k53xhhgASc0naTiuc=\r\n=P7bm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"62e726843fd90c6139d8ade27db8da6ded6e1d77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.39f9424b3.0","@material/base":"15.0.0-canary.39f9424b3.0","@material/shape":"15.0.0-canary.39f9424b3.0","@material/theme":"15.0.0-canary.39f9424b3.0","@material/floating-label":"15.0.0-canary.39f9424b3.0","@material/feature-targeting":"15.0.0-canary.39f9424b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.39f9424b3.0_1657818377835_0.398749615593873","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/notched-outline","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.ae9fce587.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73231a5ade005152913dc4a626ac181f84056375","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.ae9fce587.0.tgz","fileCount":33,"integrity":"sha512-AtuLsS91FQaMM8UO3uUm8stfuVT0dawjo0LZtbom46W3opXfWwdUGGWHrHiL02obGW6GK1n5Y4ddvJgpIHBNJg==","signatures":[{"sig":"MEYCIQDkVyZORXLJoB9iDlVKvtnuiIgTKYNAr0uuFew2Jz78vQIhAJHO0RfIGjvknJNt9XujR32G1fMxjL7L9Hm07/Uajzuu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FvIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrK/A//VQXIL4vfSE47Q1hx5eFPvzO0sjSZVXW0aFGOIALd0tXO2d0v\r\n34DZfQpwUvApC7Jf3F2S7JpMlPy1O9+IkuWHb0O7aURtNbDbvf9bbu8P3sYr\r\njyfGDPpXXgUq8EqXGIU9UiJxVEyaD/eN7FUg6tmyqc5HOBXkTKPqxZu+vaZ0\r\nPV5LGDumr8NQGiaHjIA92pWTuKsFo5r5lsP7dixJhR0aNE2tY182Zog47FZS\r\nXeL4IENPNm1lMMaISEDKKGpBjInOskXSYsY2hEssrzUkKaSDBpaftuqV1NGi\r\n008IaubWzohzYg+ZgK7dL/EfCK2b8medOwEFTC9h5xB8I7lh8kEb/e5GFCHj\r\n1QKM7Ni3lS/jeObInKf83EGrdpJ5eGQFL0on9xrv2Q9Uk4RPnvQ1w5FMU+7d\r\nw+TTrV4EewA0SMlmmbJzs92aApmqs9W5mWi8ON7a6QBlWU70q9E1XYo0zuLZ\r\nISIcHkVeJ5JIsIO/FZstWpvNUPqJUSgbjldyi01DOjqgkqqpIeO2Hj06a2Y4\r\ndQ+Gkhn4gQhGuGoC2WjDQju9y5M28BPSC6md5aV9yLrfTvwDsGjK1CejsUm8\r\nXPwYlYE4N3PDeFHDaPKiKTBxX2yTiTCXZQc7QZ0ySeO2MB0gJ1Hq8e5l16+O\r\nXEwPRtjncLvcTIwKxh5X+4aq2miAEvM54v0=\r\n=OzZL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2d55d2ded8f3ebf66d72baffd67452a8de349b3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ae9fce587.0","@material/base":"15.0.0-canary.ae9fce587.0","@material/shape":"15.0.0-canary.ae9fce587.0","@material/theme":"15.0.0-canary.ae9fce587.0","@material/floating-label":"15.0.0-canary.ae9fce587.0","@material/feature-targeting":"15.0.0-canary.ae9fce587.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.ae9fce587.0_1657822151759_0.18726235157201132","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/notched-outline","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.1ebddc343.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83a6c024caaedca20bf6c07086fe546e5c30c5cb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.1ebddc343.0.tgz","fileCount":33,"integrity":"sha512-ZKaKT0xdKhlIa3ja/NqMG2SHk079FCM9JQEOTULswYt4JyouSAU4hj0UVSlpsRrJcojMsaz3HZrk0yNzyyCsPg==","signatures":[{"sig":"MEYCIQDzq7BVUgWLdpJLFiWzyOYMjcCtgK4I3/239odNJucGkAIhAKQK+NmI00p+7kOIUgQuq1ibmFcafCQcUsFVSXajpB6T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0SpRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkkBAAoEdAuhe1ssuBd7kSK8QTKEgz11X/Mo+thnSwXkrcLuOhehDf\r\nxsd5Fb4amI+JFcD98zdaR+z5p+mZ1zeAQ5rGAj51YfMKIcTH/OMOyrAqDtrF\r\nYPzimngDbA11mZJL5tBymrGaay+JZ0uu+opzLADQ8/qDOT8gQTCuLWtwnGEw\r\nBRubid04mKJp4QW0+2UDqbF2/oHoOs1zYkgqcRHX3dLQBvaoYgs5F1T5Aju7\r\nMfMmNpNECZiMqtZbLbDXn0lkA9Nj0F43GqTdmknb79ydYwBQoyC3Lxm6BKJ7\r\nTevshkB4uZk0XgeoZrVVzZjQ3h6LNRwLmmZ5/gr2cnAKhdo5dANbN9ntSUdC\r\nTGJVyPZlGqHwyS/gmha8dG7RbWMMMFOUoOBEgh4legkGocB3rbZCWG117D66\r\nhLYGEhF6PwZaYAL9dRw4dl+P4t3gehINf9NgFhpazzkNwU3DuZV9huBr1eRs\r\nZt/4+CJUjCF+JwP70WXTpiwLCH4ZjHsYffxUWq/uKzrUN5y2Mggc/92iPPLj\r\ngMZ/gV7oJKmNcvz/p4S+BR93dPSUPKEjR9YJXaijBBuVynMNo0TFgaIPm3Ba\r\nWblDXhXuZZMhIQv1GuPR11JTm25Dd4XqJjU0TweNCo080LYmB8WnxCrG79tv\r\necfEBhjjgX+kj4y0v6YxqgblAG4vEN+4L1I=\r\n=7N46\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2ec31cdb5e8e1a849368a3f352b213919bec43df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1ebddc343.0","@material/base":"15.0.0-canary.1ebddc343.0","@material/shape":"15.0.0-canary.1ebddc343.0","@material/theme":"15.0.0-canary.1ebddc343.0","@material/floating-label":"15.0.0-canary.1ebddc343.0","@material/feature-targeting":"15.0.0-canary.1ebddc343.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.1ebddc343.0_1657875025038_0.26635633462668684","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/notched-outline","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.c5018840c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82ee3967e7a0061c81e552bb29a8c5bd7f2e10d8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.c5018840c.0.tgz","fileCount":33,"integrity":"sha512-FmP2akzrU4pj6QsFP/6TxjUuuRuAthPuAMEcoGujxvzWjpuG+y4T+ysJMrDfuIAl4eOzzCSkqBwLnu09JJCSwg==","signatures":[{"sig":"MEUCIQCcomFBIvXBjR57T0qQh8LnEONB1L7syEhE9M2END6dfQIgdI1vZ4m5UaaM6ixhIj9/KtawEK3/VUD1miA3Chxgb2s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1StvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVYQ/9Esd7KjVfaY0qxsrN9z5CMVMd+W+MZS/mhAKj4mYhuz31IgJr\r\nFNX+avGIubbMPRYXuipiYpOrZWKrgpXUJVncqyObC57VVwmZIV6g8/S6DBbq\r\nHB600LxOQEoGYji3a9Ndyg2tfm+PcaLNzLW6baXpSpvgeBShVe0bP8/qXB63\r\nWiEtYyQnu4rd/oD+nrAW/fHiGyR2piKpmbtIK+8hYqp8LXU6gHTJd1Ay7e3O\r\nVqZ1QuzGWrDD5eHkCwzWP8hAsJlXMKlc+satFnNxvcCDB3C3+mQBZAeg0yjU\r\n5FOwPjp2ImxwQ4ItfOHLyZoATk6QzprAI8H3C6PFskQm4WfVV2eAjV/++17+\r\nNbXz2wq+/K8kuAp7lM6nmOjAJpFEPusA5UHeIuaaoOStdoHjCGdY6MTiIYzt\r\nUOWVl1K2Z9pOt8A33A7fik6dwxrzIZqjbty9KruJeiB1LqPldcxVg/SNUUk4\r\nsUeEiJ5usHNHGMp/f5BkPtrx5BTDdQs6gM2Aj9DXALn2oupCCRuxJ4kTmBit\r\nYC5fvChUoatp4+tzI4PjOfGsy9kOtIB9sotJAzczQ5eiiOppvGj7iZo5ZjVc\r\n8sAhopieU2hOSrROWQLI7jFdzroVKk6M0rhZwkeTntyd/3Fkw4FTdOidimAa\r\nAtscIVYx58g55/AhvKRNKArfsrZa5KwNCng=\r\n=EdtH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c86de383c50b7d72b8c5cf908c5fdf3e6efa94c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c5018840c.0","@material/base":"15.0.0-canary.c5018840c.0","@material/shape":"15.0.0-canary.c5018840c.0","@material/theme":"15.0.0-canary.c5018840c.0","@material/floating-label":"15.0.0-canary.c5018840c.0","@material/feature-targeting":"15.0.0-canary.c5018840c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.c5018840c.0_1658137455361_0.7169758524391949","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/notched-outline","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.551b40d18.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84bd58ecdc5f298d187d34035a50b9248e8f1dfb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.551b40d18.0.tgz","fileCount":33,"integrity":"sha512-QQQQ19+592MJx9PU/d4u6SKP8MPkV+mh1yw3UqNsjrq9NTt1Glkr/vlZmJD2QeodxbHS8Gy3tA4Z8eL+qYbNmQ==","signatures":[{"sig":"MEYCIQDLMwV5wcbjP/ZQrEw24IUfumxnosz3g1Nb3piGDWcbCwIhAOHwPoJzeGRndEoM0DxlCKW205TJWw/1NbtVscPsIYf/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S+lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+4A/+IVqeYkAqIYjOacq0e2ixxn+Bwoc6t9lGmMtlT78WkADP6uGX\r\nFe/+Ow+TK5lfNWT2iPSfE/ZlXA1Jz+78SyTYX8gh21eB9/173WM8fN6ek1Lc\r\npw3T/2QmfcgJKb9QnJs3nZMppTwsB5C2QRtLbQo8fP53zw1w2iZxrqGa8MPf\r\njD5lsu9Bqda7x9n4U+iF/9rA4u4qNEPuJ9EGGj+wwMdbpwlO/t9UTzTwL+ya\r\nK7bTZYURloVZB4WuNYTZVq9mtF0agdXjOtaNXHjgllDzglCQFlGEKetpL5oC\r\nUVxjk5TlV24Sp8tIGm2+47vuWdPKXcpyzNEdiSSC1ujaEZrwpHrpyhcrGTNf\r\nTb0ajUHOa+BlF00610SYZ/6rkQ1HQagBq73lGrMfvZeDISeOlRCqh7OeSujR\r\nlRRriuYISqBrMdGFjo9wX9mhNB+pihFCgmR2etEXMwFIFPCNnLbBeo36DiO8\r\nZ/7kM+wpPjTmK2nM2Wy25+4gMLSXFx08VWinSgP2PvCTHmtEI92/Gtr3SOU4\r\nd9kU49DDyIlUnqWx3+y7/PqDAlT+qI9UDrK7XX3utp9tWiA2lQjPT51VZJr1\r\nWef+ux7GqzSExD7EQbEMnMnSHNhQzIuBjI0iICWEL8XSM87bXSEzWRG67stu\r\nURnOODZ6QCXqdCtJXIcWOGjV2+aW6qoDcGw=\r\n=Ucxk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3e9aa3499438031c9229cf2a18a1a3672620853c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.551b40d18.0","@material/base":"15.0.0-canary.551b40d18.0","@material/shape":"15.0.0-canary.551b40d18.0","@material/theme":"15.0.0-canary.551b40d18.0","@material/floating-label":"15.0.0-canary.551b40d18.0","@material/feature-targeting":"15.0.0-canary.551b40d18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.551b40d18.0_1658138532870_0.30857324764780536","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/notched-outline","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.cf9f12371.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bf20dfc381ce9e8b801e30554d894abdd691f27","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.cf9f12371.0.tgz","fileCount":33,"integrity":"sha512-pGPfJHYOUWXNSTLCWhvV7XVAoUo58gdLIwtWA7biQr3bLn6T4uZImpK+TXpLjH2CQJheVtnP4arGLdvHYJcVew==","signatures":[{"sig":"MEUCIQC8tywwOeXE6EGHe9SI6kcP2Xvxj3CEzv4pycB1L9DH5wIgLiR4+5/ojO5TFi8buoxnGc8llQNnTkxWjIYH4AkGkDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TCUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrR0g/5AOYldxlr/cT5IiWduRvQLq4AgJbC5FCDaCUdrbmneqbgvz+k\r\nQTLB4KKif1j7rJZ+K3KfGmx8dvhwJoRku+sH9w/7Va2BUImSUWwAacCc0jXs\r\nxMTQPNIJtxyixQz1s4WRrSVw+iOOsTMHeg4sffsDvHZoQacuh0Mr6bnZiZDh\r\n+S3fUSVQkKRrmngv3sQh25KIhM2Vng65vHe7b7HSfeKVsDyrC8ac29y2oc10\r\nGupqIzHE39XPhVV4Ax2htO2FJ/OZRFbKEmZ5y5341YPJhuep2wHeCPQSg3U4\r\nymFlxRkvzTgg+Mlv/UY/fNFOejuvG5dAjph0cIX6J//UculY77B3fuoFcShc\r\nIoWcwnyE4EcsYGKTMz21X1am/EaOq0z4oEBBZMVf3Ut8VDnuw3IVCxwiyZc/\r\njF8+CryaVOqfvJHgmFTd8Hzoh7GeH81vddYMPIab1e6pBgo8x4zoWJ9AjrjY\r\nEieH6KcAD45WblLc/vrzvFXUt0JnDZghuQZrNWrawIUgsp5z+tTTj8W9o9D0\r\n99X2/kVRNn2jvRD+mYHR2++0CxjGuue9W8Jv9k8xQWJWoZeSlxYxNk4gLeeR\r\nOdjmbeat61vURhg2hsa3riKwcB/dJrjd6PC5dFyf53rOsMhnrqbhsA2uzvN/\r\nzPX9WUP16S64cCQ/Jjat9elKwF57M/95ZNk=\r\n=cRaa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1817e344a80081e042f37248beeeb96228402878","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cf9f12371.0","@material/base":"15.0.0-canary.cf9f12371.0","@material/shape":"15.0.0-canary.cf9f12371.0","@material/theme":"15.0.0-canary.cf9f12371.0","@material/floating-label":"15.0.0-canary.cf9f12371.0","@material/feature-targeting":"15.0.0-canary.cf9f12371.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.cf9f12371.0_1658138771964_0.2444309926717212","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/notched-outline","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.2797ff8b6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee7f39fb49867878679c73ee44ab16144d6b195e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.2797ff8b6.0.tgz","fileCount":33,"integrity":"sha512-cMYkqMJAlw0ENNjzkmN3hKnAQqQbkhrvFnc+YKmKb6Y2czPN8L2+yvSs3Uk5uAvf/yhdUeZl6TRk2OKukIviRg==","signatures":[{"sig":"MEUCIA2aQp4kZwiUoSiodG5qCIGbPJyLOYGEckRkRvmOR2SfAiEAzmqLvJlCHHmfqHrcRqY07ydcMOWQn5LgJFT6U46numc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fnuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhqA//T+hUygPSmPLgR01xN0XKL6TYqq3UaYihzyr5ekMrBgUoKFBC\r\nGZ9Z6dOxIibtL40GGbv3LwzOuTcFv0rzHJR7Jhu5rJMiFdeuN93GfUUVZKMe\r\nxqJ2Izz5LGhF5mEOmdpDUBH7Qf9BtCm0eYKpnXE4/M9PAfLdPtLdkVgp/G39\r\n/dH6yPeAAE088F1PXA8lkXt5ofaUqltzj7ejMh9xnSBq+FD/KisfDBNiGpeM\r\nzMu1yUGwZ+eXtGju0robTuuuwjofT8sKhdiTxhStX3dMTrjUaC3BmVp9SqI+\r\nV63FZ680GeCsAPArn1ynC0K56i8wrA8QWdBNvIybC5/qPDfCjtJebFKHTMid\r\nP57wERY9feROfWBbfdu1+STRVq9zNkXG9tC0OmIb86TwToMzJGoH1GvAk2UW\r\nYaTgm/N5lFDcbsKui8qYSw6HmHhaOM5TX2RItTDybfC6m3tQvlGTd4jDVLwL\r\nxEf60tGwEpq4nL/R4gFB+R9FL3l0m2Nn+yI2nwDpO7C+9Nyk58IQ4V++CKnW\r\nVM+7dgzwCJAtBT63VBIanO6HaZAaCguRneG0jCmFMVeC4D4EK/yGCPDhh87L\r\nGtELnr9csw/vk1/zJtWJ8LfCNHUEg2XZvFkeGs9/nE2l63AWlFONxHdB+Zl1\r\n0grZGU382cjR3Q9nO+si3V1HD6D+W5SYk/M=\r\n=+9lC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2c89951e5e0cfca0b1dc61a4f30259b33cee139b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2797ff8b6.0","@material/base":"15.0.0-canary.2797ff8b6.0","@material/shape":"15.0.0-canary.2797ff8b6.0","@material/theme":"15.0.0-canary.2797ff8b6.0","@material/floating-label":"15.0.0-canary.2797ff8b6.0","@material/feature-targeting":"15.0.0-canary.2797ff8b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.2797ff8b6.0_1658190317861_0.0920636770083254","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/notched-outline","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.110fafa17.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e94ee63c4e1f849069e68ce08681fc11df05cf60","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.110fafa17.0.tgz","fileCount":33,"integrity":"sha512-Yt0sdKOcTZwmMH3vyxleSoeT4ge19IUXYHQb5fTVA8k7Mqp+4LDY5ihJJGKbYduHPcYGi6Jd3I3gF4InaVhHsg==","signatures":[{"sig":"MEUCIQDoX/7HeSUpp1/ExKt5MHjcKB9GOD5tc7beAfirLa3onAIgKoxFCJWRy1uI4Q8OaqXSReZJ1JQzCYvIPKoE1hH+N9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17MOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFdg/8DKUri9EHdGxZMh6Xkf5kkSLW63faHCQY3kIOGczhKSNk17jm\r\nMA8KSoYj29u5eWL7izJqAJqswb56YZTjIk36+BTv4tMWtqurRr0yzV50v3F+\r\n2vBnhm0g5HADhFjGlXVWRa2FJ81g9ELrJrqOl00IK6vbB86Nozf6fSowdGd6\r\nbq2ddUmRpZpKb9gMGMH8GYXV+bTbFDq44mw9OiJ9eL7bvNSPdD1c1MafQ+vt\r\nA2PkhFNAh/taUfDQ/5NOtSZGqEp2O+Wx1WeSavrhbUGWI08PxKOoAfbGx8Sb\r\nBrTBwT97rQkur8kci8ws2QozJARB239LtZeI/tZhYisQzXW0MzgnIQ73ZAr+\r\nCXJ8y1h5PlS3oXpK0gMNBQb3YCNC0Yg6ir6VglsY6JGjyR0guv/bbjuT4tX6\r\naRGorvqMXvKm7rydjoX0OwfOxl6BNBF8cCgwNh+xakZSiRt2BnWWayhBpVuw\r\ndpxJuuIQm+IgEjj9GbyI0SVWIEky1LgI99dtWD5/HDEXE361wYUADKghQZJN\r\n+Aw17nCP8/Zr7L2lLuIOhLR7xpJje37YQf+bd1B6uc8CfBepH75P2G5t7tr8\r\nMzmyteWYUeETCTXpBofXjLSyJkvgWSXchp/Dr27IGVyDP11RVLZC22XR0sSD\r\nlGfz666W4zQOyDypqmTv09YSJeHQP9VZDFY=\r\n=rhuS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ccf0ed3e8eaadf1526fd10979e8c00e79b228f5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.110fafa17.0","@material/base":"15.0.0-canary.110fafa17.0","@material/shape":"15.0.0-canary.110fafa17.0","@material/theme":"15.0.0-canary.110fafa17.0","@material/floating-label":"15.0.0-canary.110fafa17.0","@material/feature-targeting":"15.0.0-canary.110fafa17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.110fafa17.0_1658303246262_0.06746321382358156","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/notched-outline","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.386ef1d2f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0dd61bb2f40a2e3968e4da69126f2324e5652a08","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.386ef1d2f.0.tgz","fileCount":33,"integrity":"sha512-HBAdcM+DzD8QVHmFKfMxqeUXybKuIYrZDmvY2BRpBN76pWeKn2+GXieX4mnw5ZR9tytRLuTMqUyTQkhdAdcNBg==","signatures":[{"sig":"MEUCIGdZ5kYmwllFl6GqlCM5jvBhrIvNurdic9CPVnYGb8bFAiEAnTGnCSs+C+88P2vMHuQDI8JeVRzutO1aCcwUslrjYXU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EeTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqURA//SDHGthDumpGUzkQ4N3zyHj/2r4Blj8ovX7/gyiFHBNAuGghM\r\nouAOwAGG3kLyo8NBp7z5IZXxnjcgJRKuRQzLlwqmg93xe8g03FyKf4W78sdl\r\nzZXGodbRCwbaM3LUXMMcX49cCUOZt3Bb5IIjI/XBL1JVRwNwa1XX4l3bVCSb\r\nYXgAEl4ZvDtDRf4dhjEFJ7ovEI8m5trk93bB8+8B0S8Y/loRIsOMXa07Jfcz\r\nhRKqyW2+uDgr3dmzQGIR96AVxLkCYziIV8n1TPfGxthd1LooJEYauSZIYlOF\r\n8Muc1kHeD3sl1EcDa5PP0d1mB4UGkThglSaVOm4zOTp0+diN2J6vmB2Z07SO\r\nsI7WREVm551QwX0CTOUEWWTHbofKOpvUGhcpFu3sZ2mAYfFh1KTO6p2gHniC\r\nRfbHdpOXXlbKLdQ3oPQOnB7glfYTOd5nuY5vsldhpRXkxLXL8WkCqQULWzl3\r\n2emX/8QpJ0s6YGicEZqNunujBIb1OkFLtL+SN5oxJsUEPAMksQKyEu/+0ZeS\r\niEg54ynzEtpz54S7acJZnmocQWT2EPM7zuTyNYr0J+MTAVaALI8tP4chcoNK\r\nQyzWRdP3vkYqX0bXyd5wGwyalvQnDz+yz78cYaj/nf+4B5yAWltunWo3TqvC\r\nPZiso/c0pWhbfaPZUCgeRTVGUAyKT+wxCUs=\r\n=bEzf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f81dc27b99348c90268023c46429639f145ca534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.386ef1d2f.0","@material/base":"15.0.0-canary.386ef1d2f.0","@material/shape":"15.0.0-canary.386ef1d2f.0","@material/theme":"15.0.0-canary.386ef1d2f.0","@material/floating-label":"15.0.0-canary.386ef1d2f.0","@material/feature-targeting":"15.0.0-canary.386ef1d2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.386ef1d2f.0_1658341267546_0.9220247182470875","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/notched-outline","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.c3924efef.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61ac533d35fd59308fc9cad2f39df64b43314275","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.c3924efef.0.tgz","fileCount":33,"integrity":"sha512-AbPc9OrtCbNfg64/htcmsxIrPXPovRmKQf7wVAIGKwE2VnAnpYv2jfFvecmLuSIV4HvUucbSjlQWyOGGB6Fykw==","signatures":[{"sig":"MEYCIQDTTuF9TRIp0n1FnLBBY5fHaIMWJ/zosfHHWWXn7NgJngIhANQW2mhsKEeMan0Ftf4mhabv3cfeZ+y72W3lg/6LczeG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EnZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqevw/+LLj533b7BrzpbbOUhQJZ/7WQyqubmHyJI8B7mwDw/7TtOGaX\r\nuUu0kV/NHxxIRdTXKh3wky3HnAc12sFcfD1hvNZKw4hwLpAsAj2vOvLEfTX2\r\nw14wP5bcJr2cmOsL0HdEUg0/NF4f+ge5s4D8EKBKzGnU2KDf9Bz//TDYLukJ\r\ndJvP9jg0VXXpLwThsCtdT5Hjc8Jb8C/1yXLILPu0KINw5pxiaq26ERXSICxi\r\nMVDh9Mgb/YkVZdA4o4QsBPHmSQixhoJqy0Uu4ohzIv711066q1nMK8k9TQ5i\r\n2Bl1upoc9Rpssgqc6UKlY5WXM4xBKtNJ5AjzmnIsm/1D+XNWcl3k13pVq8UP\r\n0WGQA3U4aWE6sRiECSd6SKv0QbG4C+zyzrUD7pBZwiVmQvmMM40S9eabPpEI\r\nbI/jubCfY6sO7tRNlS/l80JKaZ6HuCrEnFeNsCHge3OpeYqVehUndEpTOGaA\r\nN+NL3pn50Nc35IZLE7C+iIwXjOwIySaNkKCw0UBnGVTDvm/8YYLadN4gjN9y\r\nAqGLZ5n+GsXttNDjZxDW6KUsrgSZnonbucoJRu5eP10226k73jdVk7BSVF1D\r\nHYkeOG3vemcahA7aAnDtNIJE62TeFMTMfCT1KmHQ+nmTz8bDceYJAGb4lN8f\r\nUlsyssi0LYCnG6C/wb9TpiHkPucOiiiw7bw=\r\n=SG9z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f665d9454e06d217296aa1a2064c9c67d3fe2759","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c3924efef.0","@material/base":"15.0.0-canary.c3924efef.0","@material/shape":"15.0.0-canary.c3924efef.0","@material/theme":"15.0.0-canary.c3924efef.0","@material/floating-label":"15.0.0-canary.c3924efef.0","@material/feature-targeting":"15.0.0-canary.c3924efef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.c3924efef.0_1658341849111_0.282591192225752","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/notched-outline","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.cf5c5907c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26cf2544d462ebace501d5500e726af7eb4671b2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.cf5c5907c.0.tgz","fileCount":33,"integrity":"sha512-+2i5Oh0gKRtP+46A62/HBiJp+X54McbdpnjFw+lnJWGbmkvZgdf+tjkvFLJPKxc3nd9fqOWBZJN1A6QOnEwyfA==","signatures":[{"sig":"MEQCIFRqEJ3F/3R9e5g+GW4HJq4PaJqwpBHbQysa9azosp3GAiBGKOf8NTAnEX+vxrs6t4+vFMdcXkibh3NTiZb5GKZDbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HItACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpM5Q/+O0+5Mgyf9kUeYBnVfrF9MOrlKIVCdtvupaxwlpYZDo5OtO96\r\niN8o4TJkwIxoRj/na1dKW/qWvHA8lDrRcxPrU+IZ1gqyXJKTuzwptoId6MPy\r\nR+TluCWJD7yt3vNvr39KtP+e16YOkt5ygWDCbposfMAfdIM3692ozX2ypdmM\r\nPZwF97ZNY5qJix/WZ8xVK4P9tGrOitrHqZhnjrauJnJcjF7m2e6C/OtYmOQa\r\nBEzJo2o3JYBEMYhk2QKobFLW2r9vlInPI+YI2Us/5fQ1L8BtwFd9ZYh8Mu23\r\nhFuX9bO82d91Mc06a/m9Ni3SwAjw11+GwGlzdbVjEC9WQx4I2dv7QgwUssdJ\r\neDldelfUzbVy6z9LEo6RgXhrUCN+7broDgOXk69E/x7uFbfRizIG+MmT0ziE\r\nWrpceR2hmqaS3tJPi8EEkCi96g9JzkQKy+2Soe+1io8eHLicdwPFLDFcK5Za\r\nMM7CiGqUmMdkUB2y4mWPre90fEEFdgHvA1lWdPN9YH36FJ2Dlv5V7+126OqC\r\nQAOKt9fnDLDf+SZA9+odUQQLQ6Bwz0FXkgRGt48mrxHsa09a0DfprYObxr6b\r\nYC0sQZ9e8jlCdPdDvv2IBVCMfkReP+rdItqZuXUvZZDFEgQ2EAsTLLYxV616\r\np38wFf2+yOR8WAYqPxTV3DAcB2OrcL92V/k=\r\n=LdAN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ff18947542e40ce8532c2ad78551ff4e74f9d647","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cf5c5907c.0","@material/base":"15.0.0-canary.cf5c5907c.0","@material/shape":"15.0.0-canary.cf5c5907c.0","@material/theme":"15.0.0-canary.cf5c5907c.0","@material/floating-label":"15.0.0-canary.cf5c5907c.0","@material/feature-targeting":"15.0.0-canary.cf5c5907c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.cf5c5907c.0_1658352173254_0.4774321245522273","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/notched-outline","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.0617e2319.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39c7839dd230cea3e1604561ab52bd63a120963d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.0617e2319.0.tgz","fileCount":33,"integrity":"sha512-HRm0GSKZyizTrzfrGeodERemA/fLfG4IK79yuFnmxT/Phya6VRe1Fg70K8LIjCXB8OZNjjaE24fQSzxcQ4iIhw==","signatures":[{"sig":"MEUCIQCwovjuI6RNuZnEfEEvveLRLR3wNSsYfhpS4xTcLLqbWAIgHpY/LnuHokdSKMaoMVZAcIu0v92U0uiTdlCA/63phOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HZ7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoxpw//U+Y24wXCUGNkN//FARd48KCbpo0FdNLMd9CXszNEYJSzi3sz\r\nXhhoMq+iZ4l2oAM+ktPpHfb2OCBFPwogn1PrMrWd/ABoIPfExyFDulRZSd0B\r\nVt+1r6Un6qjXgy1zRCEOqm5pIuMzqgDkzJbmTFOktCuxf1MrNi1V9nBQutoC\r\nm9ENPTlLQ/Br3H0NHOLQdhFbout4gQMfGibzPOyz/2CVpRgKiJnREVQJiXcG\r\nM+noLFOQOmwrzUqUYKRS5skTAOGoHO+WNJ+t8Co1TmTYgnp7gdp0yTfht1sz\r\nJu1gB8fKXEaQggYQ7YSRkn6mYQJids4ezUAkeoE8peghOfiCe4b6fIhyn9EE\r\nSZCe0QoMcxQla1/Y6qBUFiOeXq93wGTVOPKogwMbqrNwhwjR/zXcUjsiQIkp\r\niJwU02RsCslBjOBnB+JPkYtObfKr1mQWB5AAQthgWk0+7Ul7xFtXlGqEAb8y\r\n9gPIXPAL1g4sNAK4k19LdolzZ/9z/SmnXaGnXVHfY5Rg0lub4HTGYPXgdJPd\r\nG7ZaYNfgl5tgtwRZiLZBQ9UU6cBNpN+Ws4mxe0ZVzBJ2QTsf9WIchHzhAibn\r\n0mL0iSh4cUIc2ymgEuuqq+X0QMuiOSIhIoM8qiooH43iqHyXQiXimlgqrH0y\r\nzBnEGPKyNcrVe+kLltURLyrudltMH6hhciA=\r\n=Itjm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a4d6efed0d00cc69adede24744dc368da0b2c897","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0617e2319.0","@material/base":"15.0.0-canary.0617e2319.0","@material/shape":"15.0.0-canary.0617e2319.0","@material/theme":"15.0.0-canary.0617e2319.0","@material/floating-label":"15.0.0-canary.0617e2319.0","@material/feature-targeting":"15.0.0-canary.0617e2319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.0617e2319.0_1658353275182_0.023297584172313757","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a743b7967.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ab03f10a1e600672fde06ddc08c5592faf0641b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a743b7967.0.tgz","fileCount":33,"integrity":"sha512-UZZAEOXLM6Kje5MYRJbnvB7hHgZrDiZp32k+6iry2jz4+Dt4wpVTEQ23urHPkwKQ/OQslWzAwdXHb2Rqz1NE5w==","signatures":[{"sig":"MEQCIDmx7OQV5W8EKOfQ+mOCAwUQ8UPnJNeHsXNoGzdb/yziAiBB1gDTbj6xhWoAzdKe1L+3vKkHTp3ERZ46JSBYdfVUZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HpyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiBA/+N8XrS0F5Gwv2WP2SNk1nS6sNc8XENvacnrpIztks/fict70i\r\nR5hDzRHvHGL45YbMyLp3+noawIzfnZv5oH0bX2Qvpzr/MkO7adR8ZawFGyU2\r\nUAHKsWzsFG+Bnso9iPls6i06fPwFcYaMxCsj/iYg650BllA0SLwNE8hSxel0\r\nGvIDtrzQYA+nVaY/qmgRMrQfAwk/4ylQDzuvElqToHYIEQGL8O0C77tJfBi6\r\n2PZF9vAtP5pVo99pTJqGIEPDflO1/S9riEk7M+1UD/akE83AHepr9vsY5z+E\r\ni+oVFIn5GWXgbscRuzoLkRLsRilLSEz4t9ZJTkyqLHkKe127kg+eFB7K0pnN\r\nKMsOo0v9XTMMippjg3M5/vUKypl0wV/QiqjwNz+K4DJLkVw3tvHGRENAu38h\r\n1Fz4TJydIsYHa5P8O1XerLufIAYzQojdqKLWn1eMAI3hfGVg+hYzXWYxaron\r\nqdi30KD8Cb8i6qMNfTf6ks0Yeh6jvvQLvM7pRYr9UD3ti8+RlcBtCJmpQ0Gn\r\nhsKNZVbsH2Ei4Lip7ZhfDPC6eyV+waTi7fJyyKVqGw1Xk+JCUbuInvHmttzf\r\n70JDvrmzWihfpNEkH9vsRBHJ7tNyw/THu2COy4N72ZhIKZLOpb4QBGdcIPDM\r\n/zRYeKnn2NNYCPfXdtPlj2B3N3llO9zAqoA=\r\n=4JQb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6fe7cdad71b01dac35a3d815662020bebbe50e23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a743b7967.0","@material/base":"15.0.0-canary.a743b7967.0","@material/shape":"15.0.0-canary.a743b7967.0","@material/theme":"15.0.0-canary.a743b7967.0","@material/floating-label":"15.0.0-canary.a743b7967.0","@material/feature-targeting":"15.0.0-canary.a743b7967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a743b7967.0_1658354290075_0.6295505280953522","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/notched-outline","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.69fd619d0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad413ef642ed29260116f3c2772d870d3da25b9f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.69fd619d0.0.tgz","fileCount":33,"integrity":"sha512-4eNo4jc6XV7aQ/z5rz7ga3vdgdh6oNdeIFNxOiOqHdt4yM67NiblMuP1Jv446/5e17QKJ2AV4Ysb6+1SQwB+RA==","signatures":[{"sig":"MEUCICW2/2+csAxdBvg09uLPdiuKlA00jVWJkiYL21s5h9jsAiEAiJaG64b0pBaoA+KzIc13iun3F2RvSgzrDLWK5STA2xU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H1LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMABAAo1G22dBNNV9CvUgzwj4Oj+pCkWx2ggQxCHuyTxQ2c81u+oYk\r\nndAlGB9AwZaVpKcnPynu3tJgbQD7yA5enq0X6E2IN9ItxL8qzsz2SSO3V+3Y\r\na47QThATNcEGeDdZsoCOay9PJcn5v3iApVHE8IWySVX6YbDCNc7d7vJOq7j7\r\n305k71uRwTm7OSTjemT/PDy/rKwKJJnjPNJWCQ9WE0XNfKp9aNYmMU9N8Tfj\r\n7ZufjCAyWbHTVLFYHwCc6PENRSxI0RQLWytU6mosVY1fviW68sFQI0sbGDwU\r\nC/zHol3cK5EBrIxUTw9u1Ux0XATAHKhDO6A2Bk4FzpHip+d54clzj6u8aNTI\r\neiRtrxD4yl7G0juk+nk7ZpDlAP98+RhKE8KJCv8YSfWdecG/c/8fkVv5/ZVR\r\n+0FkWv7kYToIcsgThE1AYOLF01OezmB4ENfN298ADRhnMRbBAr4LArkNENi8\r\n1dej3qfCOZ02Xb1RN72+1c331pm8WFXy4j9nZeEY0aDDH/fCXIjkfye03e2T\r\nsajdtVR8oIkShDSDHwmvIwWMSmjeRCzJ/xc7qUSha61z92rGHoS4wDh34v3X\r\nZkSH1d8F+fvM5rkMKzD0An32k4L66wfl5ESgv99go+eFe4aQlO8zlmLr03jp\r\niYGXrlT9UTzzBuTcEEzX4ejVxM6mr1/jJfo=\r\n=gCQd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8982644a21769a71fcdbd9d8a35d87f00bf73b3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.69fd619d0.0","@material/base":"15.0.0-canary.69fd619d0.0","@material/shape":"15.0.0-canary.69fd619d0.0","@material/theme":"15.0.0-canary.69fd619d0.0","@material/floating-label":"15.0.0-canary.69fd619d0.0","@material/feature-targeting":"15.0.0-canary.69fd619d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.69fd619d0.0_1658355019428_0.060105888386830175","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/notched-outline","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.2a6ddc1cf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a31eeeb1adbd8e756aeb71e1ffd5173c24eb9537","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":33,"integrity":"sha512-zhJ8bfPfK2mm7FQDb47JXhYudf08YcCwWEoY8mOWokgd1VPFZRZ7QKqy34KfrZvb8PW6guCcBuRF7fjdoTbxOQ==","signatures":[{"sig":"MEQCICWIdGZ6k0Owlm+GqhINQH+4Jm/sWrFEfsXYVCr4QVKgAiB18qhF0LeXf5r3WKGNgA+HxmHhCKbsd8PKLt1DFItIqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AVYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpu6hAAkwgZkPpYwB4CtFZan98Frij1oDWWKqJhfRVPR2M/8VtlSpun\r\nOngF08ZSurdCE2T44TNGzS9c7pPLb7fZPwYvlqUJdHotEvF5ypn+rIoGBxbO\r\nGKkYQhaPCxzPN9YhJ1fNb3esVDLKDvllbYcHXPJi+sg5Ww4wvxp18ptBZxxL\r\npOy3EqDN1+7I5czKS3BrxtFSPSE4eCnXvfCKXWHtkGYdK2cAhxhj+kKWFhK7\r\nStWeHB/vwEKWiU8EvNfv/jD4q1FkISruL/mZN5VpstrtfTycMmqOiXiQAFlq\r\nKyG1ESlTYHkOx1mO0jK1i/vSM5mGZf+JO2c8kpGLajF33d4Y2t6BXShBKHpE\r\nT0Saa1sZ0KpsIF8m7Op5k38q+SglSDgmTc9pA3E51phNnYhP+dZayqpIt7eP\r\njWuO7O+plzTbXfqyk/kYwfV7J67+RFxxnCmCr1Ctco/Hv/S0pKmY+iIYgO3Y\r\nVMO7fmdj9dy7QyXGmJZyXiA97ZMxYEG3zs0m3juYDB2CfT5iLjcGSi3SdmAy\r\nSr55z6BHb06EchVrfBK7fAR7Ilnm6BXMqZG2IdrRjej1GtsxV6u/Y1MgmOTC\r\npmYeHxmtsODJb5nbBOVMQGdgdzhZ7eQ9e/+n9qod+Wn0JBcXXravXVAT8uVF\r\nJaGLhZ1CG2g6jnoFcDlim2BFYnau6k0RyLs=\r\n=XE0H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0e951ea9d38f3d449f24bd1d8ecb0fa70c0da462","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2a6ddc1cf.0","@material/base":"15.0.0-canary.2a6ddc1cf.0","@material/shape":"15.0.0-canary.2a6ddc1cf.0","@material/theme":"15.0.0-canary.2a6ddc1cf.0","@material/floating-label":"15.0.0-canary.2a6ddc1cf.0","@material/feature-targeting":"15.0.0-canary.2a6ddc1cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.2a6ddc1cf.0_1659110744437_0.6455769672829419","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/notched-outline","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.86efd56f6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"763997354f1476b3a01e469f8f73a36464c0f2f6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.86efd56f6.0.tgz","fileCount":33,"integrity":"sha512-LbNVnqVNgfxY1ag3ZXT6o35Mvx9phYeDCLaHq3CQpEWYlt+8XCSmARV5v12BA+pDk7wfjMTpUe/RQFGWW1e23Q==","signatures":[{"sig":"MEQCIDi1ZNBHWYVt9q6Hk2PoxwmO80lKdi/qQ57rfyq1AKudAiAvcawVx5nCL/vmLVZRXjStYEg9RiildCLhlwbPmWbGFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6TjcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcwQ/+LQUBbdEQ23fagvgfI9bfgWlcd3bEEE9/a8v1rSI0yRd3RMyc\r\n2MC5FgTgNPTfzjZbkVA0R3i8xBeVeQbPLip2PryZWLcKbk3p5hZagacKsA29\r\nSL85AFq7OusU3eAZtVyEBvk6x06U+GUz//MGv+/MOSaprOIiFExhqpQCrlee\r\nj0moBeIfeamimah/7iS6kNkD257r1/PtoEy9hGZUdalVTndfqc/PY9Tr2Yex\r\n4BZLoRzppRE8vVY3Eo/oRvBDabU9wNVTzxAxAH1O30EYHLZLuraAQcZWnalj\r\nsWOY/Whfz5632zC/dUZ0Fo+K3XjnbJTOIZw3jUQc6yX4gXnRoyWeyH97b0qj\r\nmn1SSLk7qfyS7ekJ0/NSrrO/0DNjys3a0Dvb0tIEZIBdqavzm7x3h4w+mEG4\r\nS4LSzZhXkG3Xrz32PHc77K3Av3C+gZkXlER5kJbHYojdYXVtfZTsJA29gHwV\r\ngM9aNgbIp+F4CrXLYaTw/Zqzt5XbWX3uGOUHnm5FWibx7RmaSG5PQVYvYQ+s\r\nK9rEoI5eH5nI5H1zV1i+y84M2GMg2Yw0Z5SgxoLRoebwwe5s8FOgTlHijGYd\r\n5O/uh8toh/w/MqzpmEWZdLunphF95TQNfe7rEFEDuD69UrJ0qNI8mqh3m1Ug\r\nBAsUJeZ9K07B+S54xi/Nv2JDnHoSQ+xHY9I=\r\n=pFtp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a4781ca009f9a9b59c7dfff5df2d23bb14b9de2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.86efd56f6.0","@material/base":"15.0.0-canary.86efd56f6.0","@material/shape":"15.0.0-canary.86efd56f6.0","@material/theme":"15.0.0-canary.86efd56f6.0","@material/floating-label":"15.0.0-canary.86efd56f6.0","@material/feature-targeting":"15.0.0-canary.86efd56f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.86efd56f6.0_1659451612023_0.07138444761353835","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/notched-outline","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.ccfc24d19.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fba1e8ebca33ff1ea40a8668827d6cff7bc0b51","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.ccfc24d19.0.tgz","fileCount":33,"integrity":"sha512-aVwvOhXmpRyb0ayAjrcE0+lG2rnqSiULoQWAzWAAQmEiEnAAZDiLEtUg4XVuyMn2ZrOpLk7Lo+Bc4Qe43buWsQ==","signatures":[{"sig":"MEUCIQCKp/P8c8NPcuHSHyWIScnFJNWm2jV5fJYU2ljPWJpvOwIgAoWJYPWtDYLDbnqn5Qm/cGqd7EPtBntdEeF87yXmmSA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rsNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOcxAAntkQbKvloW3Mv9mDN4kEuj0W24Ft7zR6aGa4jepIzgKmqiPn\r\nxUJ8K/9uYyHTTum0bJlZI6VdsN4qYUfJSJC/2L31y368CQPcal23GjD1usnQ\r\naeVx16j1MLS7owHAPflRUOGYw9gBQu7Zd45kpJgyo5x3lffmPLuJyEbIJDEI\r\nEIEjIIWHKz2oysDCX/bD8bgjZoaVttzUSPlDFrCe0wka/CyznsTt2whRODbY\r\nZkbGQC++pdQ2mZQGE+4W96v/juEJIpkce1WqkTe2G8BBQc0Dw47YqWKn2vug\r\n2DvLARFFjscqgmSpsrHIODjJhttYQ4YVefm5fg34kXcKX7S3ooGsQRyAbwzW\r\nqTCJ/achqNvkleZ61Z4pSVeUYh8SAzdJ6US3rjcVyorP9hr5aMUuJu6c2p/k\r\n8vMzdWnfdhKZtKATjAcaSk8vHWGgLJHv7cKla6qM9zxLwaUh4BONsQmF1pzO\r\n8NxKOZFpB1l0Pu8rqpqGdJeSJ+PkKBsYvFxrXLFWURb3VHDa8QiuYCX6ZcM9\r\nfYWws+Omd3IREfhkmDOI/c1ncPAQ8KkrGPxnByex8fqs5vDP+/5yTEv479LZ\r\nC5Ed04gyCyWbImUAiRIKWcBNkKnBJNqx4xDxwXRBaElaxnGIbKZ+s5/7aVW0\r\nyGnULSChhpOTazRd4I9osCGRRuTkBixRlKc=\r\n=ASjB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f790058ff0b4b30289ee965102aae1ca19654ddb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ccfc24d19.0","@material/base":"15.0.0-canary.ccfc24d19.0","@material/shape":"15.0.0-canary.ccfc24d19.0","@material/theme":"15.0.0-canary.ccfc24d19.0","@material/floating-label":"15.0.0-canary.ccfc24d19.0","@material/feature-targeting":"15.0.0-canary.ccfc24d19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.ccfc24d19.0_1659550477147_0.10282232591891582","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/notched-outline","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.e4570146f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29660a05ca6f5d1adab745aea179968740c39e8f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.e4570146f.0.tgz","fileCount":33,"integrity":"sha512-wIiex10+vP7DIrTrkuqzWAYZkLLjNslIgYUVlZ4cByWdY5dYSHXqrOIdqTvfctyAN6znkl3Tw9drVBAP2+xajA==","signatures":[{"sig":"MEYCIQDcBhHtop2vwKPRq/CKLmNNrAqTXuAkNcYxqX31suhPFQIhAO2yWvlvK3lB/AyQLvwNEMrDxNKH6DPkGPuU7QVEyylg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sFWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJ/Q/+M3eWqFwOovdW4LkC4uupETEAfgdF/zUbqzoRB/oLYT/65uKL\r\nrex6K+YiS24Mze0RyiEGiXjBKrBflg3mm4X2xBNblLaB4LKLRWLbqjrjRF8/\r\n3+tG5RovJzmBXwD40ZRAFUwwncH5a30wsxoAqdCW/VdSu4soV0+aUYFSBGrN\r\ngsMrSnizuZ0XAonRs93yOmTHUa/wWxJi6N6twrRT/hjVU4pPi0eCt0kmK6oM\r\n9RQ9e0+3UZLuo0dItVhlnHx0s7eLaQd9gCFl+9U8uDPlCp/GgH5tyocHxRXY\r\no0hZPoMrndjcgAr+z3fnuqQ4IP+ffLiNpv7xt8CnitS5wZ1p2oLxYIPTVHkl\r\npamhhpgZx/VFLbWV/2W5ekk+StdUzkm4+htJiZ5DNhCaLoUazbTxymUH3FB5\r\niDAX8RFGOQIoYH79GSItuRAOhKhIeVyH7uXTavCTwLtdjO3agJCme6hhkoKC\r\nssGUZeIgl3p+HfvratTJGacZn7zVjSj4LWX0pNQv++C+TWSi+6RxjW984V0E\r\nBoXhuPxED+XT6aL8g+QDurz2oP1wYniVPhVO67qhL1yYWCH5f50tLhngoFTc\r\nd/qyPQRYz3z/TmkawvyC71e9ppfl72XFWJnZ9Cd9NZOUlLkrGXakToC6G+yk\r\nTphP6EJf0wLGWV6qNHZxYHvG+8bAXXRkctY=\r\n=D1xq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e80d690ce0a868398025065053615e866dc51ada","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e4570146f.0","@material/base":"15.0.0-canary.e4570146f.0","@material/shape":"15.0.0-canary.e4570146f.0","@material/theme":"15.0.0-canary.e4570146f.0","@material/floating-label":"15.0.0-canary.e4570146f.0","@material/feature-targeting":"15.0.0-canary.e4570146f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.e4570146f.0_1659552086042_0.9005828231484156","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/notched-outline","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.6683a36cb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebcb5276c7a0c1259d82b2d6ce5e90a2113da668","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.6683a36cb.0.tgz","fileCount":33,"integrity":"sha512-eMzLo2iDnfZRhmmU/Q6xSZBJEc3s881wNeeECZUsL/271/eDr8WWzAmZKu0o09dyo/0OsQA76KvYOm4hrcbatg==","signatures":[{"sig":"MEYCIQDFoRQmoKeqH+6qCJISUrops9xjAkAzhB+yLBdOdcLJawIhAM5agbgK7fWKOvn7NAvlbBa4mSgi+HHz/FT2QdboiF1/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6srVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSow//QBxjUucrvDFvv2D1VDAitKd9vZvmooBYUYWabsNvNreMoMx3\r\nbZpdegepwTiZ4zdDvei3X7dY8K24gqGsiZDgwoXP2IohJfeMMC4fLP8Ua3Kk\r\nl62TvRhi2Uv8lJpzhIa5cPYezcdsd7zCOG6WSZ6EU9ujD0/anEobR3el/yqK\r\nRFWVE/JpROtsJmO2RX3iutAdSxi5dufW2Ovrb+wXIQdP7gwYvSv49LSteECE\r\nNRb3wSi6n1QN9VonTO+gykoe6KXHaFXt+3raHe8D+LNGTXH8ZOrun2fbBJ4s\r\nNjmSp8ox/1PPaFEYwoVrNjbxIi43Cgx9ilT+wh/E+sELhrmWJwSdkYde+1Q7\r\nsvWQgsIjUf+pKewvofX25ficW818B4yjOUB1lHfaPqe3NMkJN5dmtVt6xrPa\r\nid8vcgDohcqkMjJ7BdmK5fTIhDLa3aXrP5nnE+mdBSsO0/N/TqVH47Eo1IS5\r\neMbHQuWMa0yj6Iki/fjKNcg0y74daFdUKsS2tlhtkzF2Estj6f4zlB9lja11\r\n0O89YpamX7Ay83SdpfRjScqIBUFJlCxDH12BKx5yOT4Sm0JszYyXRAOdLnQL\r\nUnYlilQcDe+o6XDL2N6Sm7zAPwwDpVfxJxIptVNBMKX3XHrB6tdxEtHo8+iF\r\nIAdHRSR1fVrEhw9Ch3vWfaAm6HCYdA1locs=\r\n=aRN8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8feb0b9a8c5151a18a06d282cce87d861ea12e5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6683a36cb.0","@material/base":"15.0.0-canary.6683a36cb.0","@material/shape":"15.0.0-canary.6683a36cb.0","@material/theme":"15.0.0-canary.6683a36cb.0","@material/floating-label":"15.0.0-canary.6683a36cb.0","@material/feature-targeting":"15.0.0-canary.6683a36cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.6683a36cb.0_1659554517062_0.41662218908854487","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/notched-outline","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.10196647d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e09c7ace3faf349cfed2f19e9e7c53616c67821","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.10196647d.0.tgz","fileCount":33,"integrity":"sha512-zNDA0+sarLDmAB8UPgMFXEeePa5q/sGETq6msvL45wdBrtp1gpo5OYP1KFsXuXr5SHyuewjN/08EH7HoWz4VTw==","signatures":[{"sig":"MEUCIFAbOjU4xyzs/u8xLS7jHljWhNmiWunBd/tNpgKB+1nhAiEAmzSNuNa1kJ33j2NgtQAkRFM6M32D/qj/D4W9keaVvjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u6QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYKA//aEMTouoqIOdH55uisq7hqpn2+/rJ2ERIKAp3jX1CIycfcLU0\r\neLalXrSXO0G4fsQ14nyyNJQGQeLfikKAp3oo3cOS5HsT5QXc2YL/RAebqEC0\r\nZR+42aGkvuxRYrKQYq/o/gMeYduQn92AtA4+kIFFGzJ5knNuVpBW/idPPfsJ\r\n6+/2kAvHDeQCAcDo/mecHRxQNJKkZDBjNqTeCfUqWj+ZQSL12i7NvViKllLP\r\nwjtDhAXqyVdCqq/A8n5HCI0Q2rEVMfwgav0Nj45eM5ddLubO/j5oIe+YPxN6\r\n3X4bWk1k1vLyM5VR21HX4lHl7rtrgssPrrnQkRLAda9Dmjh8NydhNkPRGB4+\r\nMy4ODR2WVluVKQeIbgidz66OOYuHMX8FG7we2U+RFOZA7Qu+9GFrhR/BWbHq\r\nZqMOiHPFwd8sBAuCnSTsV6JBm/AFU7LuPjxWP5ogvPy4ptvthBtM6WbupIov\r\nJkCxZStCZjAv0jWKiZDCczA+mYa5drAByCuFCgdNmY0Rxu1E2vpMM4OQxV+o\r\n6baEqz76ccUBT6A+tLWRm7SiTwsZ6SO8hmFbTvsSdIq8j/txyTqp4SQyr9vU\r\nfEf7gH+IN6QxoRcW90f6VJBg/u2Qwtgx3y5ZRd0YlfLKgrQNLfFOj2ZMC0aY\r\nVrJjyAZJjpdfwc8Gp4lpXFaPLutnBHShJ+A=\r\n=tyw6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7a708dfc09b3443c565ce80a676b159abcec1339","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.10196647d.0","@material/base":"15.0.0-canary.10196647d.0","@material/shape":"15.0.0-canary.10196647d.0","@material/theme":"15.0.0-canary.10196647d.0","@material/floating-label":"15.0.0-canary.10196647d.0","@material/feature-targeting":"15.0.0-canary.10196647d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.10196647d.0_1659563664522_0.727754664094072","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b20d3d73c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f244a8e5116e9d48594b33e1945bad137f92d9d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b20d3d73c.0.tgz","fileCount":33,"integrity":"sha512-dBiWtkJcGMENEA9vfK6j6zWikDBhpO1Q0HewBvQthQLvL0GhFiQpNO9eqPHQy+GHQeeiKo/qB3Q90IYXpzXi3Q==","signatures":[{"sig":"MEUCIBtoMNUt46EGew9KoZr7zLInwcVDUaBbE1g97HhJS4/1AiEAjk/TMDItw/NrMldvv8xi2PcUdJHsYLQ92xu91hTXt1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EuuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+zw//eRDnbJUwYKxzG+AH7wIE0R/jKKuG6rLS7S3nw8ioTHii3LfT\r\ntKU5f9gksvR2ew7Gsp+hfEYH4qL28MPKqAOYlyJGnF9Klsl9+U2HOtkSPitW\r\nWahh0BgpnMWqEDQSYYHgZKFCrSDyrpkMC1Yky+uSOARLV+XrbWC9JpzqoG26\r\nzp5J9Xaw6PW8aEfFteT/n3fafQmJzIwXKa4Pqxg4RyfrZYhlOAr0rddVUSJa\r\nxW+cGMpFY3DoO5fr732ZNo5fPxfgFc5Rdb6Lkj7k8AYT2t8HknB33kLg34W7\r\nNgPvBsPon7ztRuUQ9kbgY2QscJOu0bdKOVh7UbMjStC+CLNTxlyNZCc+6ycW\r\nrixftrUZE1iTmnDlcF4Q0bMHU5GlwK9cVoJyeyOforVkkkXwe84xYAd7+Cp/\r\nK0Rt/s+KUTSfTaPcqJh08rPNDb1xRvf2PhwXBGGZ0HsNqN1+T7aVEwF9Xb8a\r\nh+recGyXlOd/70mZOcbkfd9LMObekxdHgOfWZM03FwbJWyE6yZVxbZFoFlkX\r\nU44R/odm7jlzCuegtfspqlSusJpFY0BXmlhookRza/6DWNUyXQsMgjqD3v/C\r\n+gFOGCM7UcSBofv+twQ+JDg85UptBxTDj8ctvkWhm1KwsHIsFiBZiwaAf9ua\r\nkJQsYceMAmHTjnwsiT5VPuD8Kud2LGHhNKQ=\r\n=0hE6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c869b5a3ceaada6bf2ec164c65f1e4fd88a0e7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b20d3d73c.0","@material/base":"15.0.0-canary.b20d3d73c.0","@material/shape":"15.0.0-canary.b20d3d73c.0","@material/theme":"15.0.0-canary.b20d3d73c.0","@material/floating-label":"15.0.0-canary.b20d3d73c.0","@material/feature-targeting":"15.0.0-canary.b20d3d73c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b20d3d73c.0_1659653038563_0.5867041491308347","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/notched-outline","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.47c0c6b1e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32d169e94c5d691b9d499d42be8109e2288ca101","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":33,"integrity":"sha512-y2RbCRF6SI1aRZfwXC3fhCoZFIgfACCHf0g9hR6dsMnlEffWrtKHOoeraOh0yH7H2fWuS/PMEgltVz03H/kiAg==","signatures":[{"sig":"MEYCIQDc7FRFTA3UlDLebmDo+URPZ5cNUSSAJ/9t6tznRaLoewIhALXXUi3+UZVRcSPbmP+MrKWDpFlQGqcoZe4/v1oO9FmM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8ntbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqf+xAAjMoj81yxVqB3JPKaA1uMCsq/cFHSJ0BASzgHFw+W0XN6Lpnr\r\nXR8Ch3M998P6marDNp/cURaRVJEFBeMDJBgm3ZUPkORvp9NtasQICv4XBTiU\r\nCbg+xP2wUaqddMOdtOfpV5ZdKTBm4ACiZrkRi+QdEE3NpsdSX3/jAjt25eQS\r\nnyxAxmIUd8kk/p+QttWXlcApbVow03cl1Xm1fU7VPZfbJn1Vm1UCaivhPKG/\r\nkEDIP/V+JtwWLBb53Ldpcp+T1p5+IX2eF3MNhdxv587FHQV7yKCZfaLLU+wh\r\nRE9lTnYswGdeal5yeVSNV6RauD24xOtXKwGMN+yWl19TMvD3LEk5taTlOmSb\r\nMKu8bGk3W6ECsLw3Asbf8DALcUBhFdCdZRLP8+ObdV3MRFDv1XqEGLiDjdO0\r\nwWT4qqRcKKZdoW+0PZk7rk7qW3bPvlIl4oSWznmELhQNhCqSioNFSxHTYmbW\r\nojIxHeNl1jEv3UCPzk6jVrBgYQKnyCRdAMIlG5oT7bsF1hdt806I6RSpfffd\r\n/orNMy3LIQhURkY5jmolnUDS4C40d7Pc8cyc1SWw4ktSCSR0a4ecdD7Po/3I\r\noHnQKsP9OwApEuzyoO9LMHeRMnAW4uHeX8krDmYJO9UhI+2U754D7fDse9z0\r\nso1ltsz5/JOnYeijO9+mqVfj4Oft71mvwLU=\r\n=nkUt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"692955bb2bb9c99ddd9321606e40fe4a56de120e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.47c0c6b1e.0","@material/base":"15.0.0-canary.47c0c6b1e.0","@material/shape":"15.0.0-canary.47c0c6b1e.0","@material/theme":"15.0.0-canary.47c0c6b1e.0","@material/floating-label":"15.0.0-canary.47c0c6b1e.0","@material/feature-targeting":"15.0.0-canary.47c0c6b1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.47c0c6b1e.0_1660058458912_0.580957504059546","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/notched-outline","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.0e3dc8e38.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fc16abc24d9ba9a8dfba8e10bb87d3191f37877","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":33,"integrity":"sha512-tviAvNxnJHRbWTAwnau2GQQ81V3/bjx3kx/XBpRnKNmCcxfUm7Xxd7m46UIFDGuZXRCYAGqtCHLeZhw1YIZwzw==","signatures":[{"sig":"MEQCIE8YNvps3sYD0TrnBAnQtlZGwLs8Ipw7UBTDSij1Z5FcAiBmCp2dPh8ORU+wa++RRGP8c7lP5I7aTHXaiHgQ5mzkbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U6iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnAQ/9Ei+ai1iwNgdIfOafT528sVWe2mNBANEjYxjE1bvLoiK+6zTG\r\n9kgjZDbTMQa7H2JLUrhYBDRPhkYCOEYuwWyI+UqLYECiuOeeYE9INo7PWggZ\r\nSS+4sv3kh7YpaTIM7YFgnxiRjxF8A/5UvxZwIcuioqBbvDrXjh8el5sE/XeF\r\noX8XYNltN87iSaL/Dt5C0b0l0lNOCRyyeNPG5MF4LhSUnG0i6f8avi0Xgmkx\r\nRUwIUe/PXN6rnFyceVJBpDAx9JPioJT/VKiHjZvjN0UaqxXzgbMqFnMQ00I7\r\noSeLtIokfsmitrPftg4wIOIQ6gHHrwE/gMhUm22XFyhcJY+SnQtMA2B++GLN\r\n/+EwwqwfeHPC0jLanprZsHdaIxXJH1KRL2oSimlBJCh3Cddh0DYofd2GzZic\r\nUK+RZ2WPpnXUcZx0f3m2JV5U2Bw81/eS/hM8Q7VbdNbHihe8RJoHI9h4xr9o\r\ni2jkihnqquF6JpFMh34CFA1FQO65dmZFWAbT6pecIzU0OUabNspri2GuUO2n\r\n2P5IQaYlB3eRRpEys57kEahpcX1tBhMdfFm4cGFDAO0Kki1C7M5fAOq+4/RI\r\nBij2ylJqgVh7NSJridOons6c5FC285gZfPt/zHGsMvFsYngFP2gmAucMUn68\r\n7hkfaZ5fNYm/FnsgHPH1LPvyIwJ6/IhxDd8=\r\n=OzKH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"51983e03d07e3c1f50454770dc24ff8d6d6f97a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0e3dc8e38.0","@material/base":"15.0.0-canary.0e3dc8e38.0","@material/shape":"15.0.0-canary.0e3dc8e38.0","@material/theme":"15.0.0-canary.0e3dc8e38.0","@material/floating-label":"15.0.0-canary.0e3dc8e38.0","@material/feature-targeting":"15.0.0-canary.0e3dc8e38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.0e3dc8e38.0_1660243617774_0.17129604944660537","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/notched-outline","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.d5a11f1c8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2869532c100004f8669713b14d695b7995b54897","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":33,"integrity":"sha512-Pmj1bh7jN4qaGjkf2uRzkXZaG6PofwgzjDnaVpWSmBd48mqBGfr0rhH44w+TK6yNTWE7mNdzMQI2cF1MR2nirQ==","signatures":[{"sig":"MEYCIQDJjeTY94gpzo8Izx8+Qyrd/4e0Byb6mDaHZaKTnpP+9gIhANK0toXdhuoB9JBkAUUurkwkQ6vexRk0E4Uwtf83Fdoh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpb9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9rg//ZQnqPpH11Nulw7XIzEab7ROI6xJXigH4QW+se1WfbpXS50Ff\r\n6FHFnCkRNqLaEvD8mrM1m80TDAatBG4fWxwHT1bovGjOpX0dP8N5/Z3fViab\r\netZz1zDtSakR2lJiW0QVZGX73rDzbbgr7px5e2iK4Ofvrl3lGjVwTpfGD0FP\r\n8nn0qeKtyAGFGDR2gXXBvHnru1VgAOCzKq5B+19IevvywLMnWj2L8e8k4HqN\r\nb+9jePk8l4lD5/JRGYDWE4TYiWWT9QwSb03afR+5vNaS5bmVBepuFDqpicTq\r\njE+tnlITVbFo79p8iCeTxED1SyP29TVHXoSAG8j2al/4d8sECJ+6+0UoPRXE\r\nThUENw4qjoF8Ocp0Ntjo/7nwO0R+6JDn5p0pTdqH4ghGvVuJAE+Qq34KmecC\r\n8v/xFEpblETrkn0e1TzmzA7/BwysUcS33lYRiZGOCzWl5chGjSFIp5RstTvF\r\nA1Kvo9YV/WAQA/J9FfsMPQYCb5EFZzVmmpwyhZUn/Pdh4h6tELwJ/AIfdTHJ\r\nkNOskbOWZo6gakCs5U7HOkC2qL0Gdy0fvbveXG3NpDUqRJEIduX+ADcU5w9s\r\n8jZRr36nMilc6Amz/yEWzsHReu66x4ES/rIjCXzfVDa7gc5417/fpdeBqpPS\r\nCeeKlmvRxRS6ZAEZHTa1WMLm/DOFl9BVgoY=\r\n=yQ3p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7ac71b54192751de3a5469d20cb2e1c30e544d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d5a11f1c8.0","@material/base":"15.0.0-canary.d5a11f1c8.0","@material/shape":"15.0.0-canary.d5a11f1c8.0","@material/theme":"15.0.0-canary.d5a11f1c8.0","@material/floating-label":"15.0.0-canary.d5a11f1c8.0","@material/feature-targeting":"15.0.0-canary.d5a11f1c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.d5a11f1c8.0_1661900540957_0.1589382469383982","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/notched-outline","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.bac992a95.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44175b3d8d7ec8fd67a68b74e46e492fae719cbd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.bac992a95.0.tgz","fileCount":33,"integrity":"sha512-upfOHx0Bble3w9cLjyNlvLwCgkYoR+tklEv3/LqPXDEP28y1TiK05MKjeBN9eOlJ4PNlzW8+tkvt1znIrUaD2g==","signatures":[{"sig":"MEUCIGlrbnqK/xaC4wieBzbyuGam9L0SXZk5nKt8o73+PXsmAiEA4Xt4QIqqwgogX8F5XFr5yuVTsFCnUP0ENkBnOAn9FjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFoMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopUBAApQIDIic5g9gBnur6ZGM306VDx/01MAcFPf6UdHixfNqEiCsG\r\nEksh3yuxR1D7/XB1X//lRcl4jp0DPrrOIhV91/M8EM+xMmlzUd8oHjLXR5r8\r\njkouj2o25Qa3Ob3VfJ2i2ZGCbnHZqkdTiCx+HJvJwwtahzVt6ZEM0PIFRXi0\r\nnBmlOMjfyFQt2ftHPRPyjIVVJlPrkSCi95kj5IXUv51DXOTnVxiUYNTnEA/b\r\n6YGYIOLeDSxw5liC4LFkwBK38T4lqr9bfkSuWzb3B54RfUISxmoXAFsATn+e\r\nQlBB2ckE7ZNJXilY7LM2trUsHnDg23iEuiw+0ViGhtktX0INohUkM2pPNhPZ\r\nFiYbqMRj7IZaV98tIdNPW0Mx4NuUiNkZwezVc6FYDSV4xo5ueCULGi5THYy4\r\n3R82TO5/mKcjRwdhXOzSSJu3/O8GcWquZupej7AOiWkqnk6yKtMr2Zhhginy\r\nYfXqomY+zmZOqf0UtcrMLFfntfbYZQSquhnu6hYMxUQDC/DL0f8EqYD+rh5V\r\nO4Y/rM+D1/36nYDuyLmdR0O+zlZvj27rJewZh5MsTNcnj+8ZWMJRPlZulcfc\r\nulE64Damw9WDEPUSAI/OLEBLb0zCaoOYA1TOHw1SQ2Muli0MAUNFGFz2SvvC\r\nW4FPZA//tvE0RTA2RKtzCT9Ei38YqxsZfnM=\r\n=v6pe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b8dc8f019b6b9a7241d55c21925faac495f9230b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bac992a95.0","@material/base":"15.0.0-canary.bac992a95.0","@material/shape":"15.0.0-canary.bac992a95.0","@material/theme":"15.0.0-canary.bac992a95.0","@material/floating-label":"15.0.0-canary.bac992a95.0","@material/feature-targeting":"15.0.0-canary.bac992a95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.bac992a95.0_1662016011885_0.9723924911972894","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/notched-outline","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.d25f3404c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70dc78895b042d9b6d7975d70b922314268d587b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.d25f3404c.0.tgz","fileCount":33,"integrity":"sha512-EwhNnmfvQQn81inOxJzIjwmeM9PVMnyReFOCgjXrkGpMTbR1UK4qggI+SEYE7iVghtLmopaykLy6YVfWlv6lXg==","signatures":[{"sig":"MEQCIDNeINv6YActbxVtJx5dI3u8IM4EXPi1Aa1nqI02nR/3AiAFewU1VQDQE7u9jcxzZ3nM14f9aest87k3IIvgzcEgqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH80ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTJg//QQG/gE6JHBC/rabQ++MKIOObLTZ3x9CLzwUQKJ7aeyN7wUEc\r\norWcKtxssT2nNaLtONXL79XOY9xTnwnM495qfljTwabyjVsQo1r9DyjFAzYj\r\n9vEXbH0tZGiMwrKT3hHdQCYBT63lPXH3Fx/wKG3Lmk4R/uNCJE5acZamOAC8\r\n54Hiy+ZViCw+oENCOr2Adyz+59oUp7bzwkUg4Kg7ZDzqpCwY2qe/zWDtSR6b\r\nbrN+gUqKRDcjS6RXSqjlYEgh2C7WTTP2E1kNHUA2WTlgbefXisDjiqQWV9bP\r\nFj47UPuF8eAxopXYbgxX/hVS4Vc3dXaMKWO7P2z/CqObPyZ2js7lkwfy7/+P\r\npOoh8v0gd/q2zMecU2p0/4eTu3oQ5WIQKPtHAwWV4PzRY3x/CffDPBgg7WLW\r\noIHUEMP/33ehPj8mq0oBi3T3NRf2lOeUb4Mq5RpjWeZIisWAjyWxUhPEHYDG\r\n6t6yq/EdYpr3GjrTDp9foiqbISy6klRdbLGnxy/fc0CLCQPTB3vXNZ/OatkX\r\nvlTrkGzLJYQ/ptVGXc4LYWDX/m8eej7YbVve3aTiS1wN2vXlGQ+sHSgFZ6+x\r\nSsFbp26BCq/j3tndLLZSiJpNmbMCYrvMp+RSD3t00fA2oQ1jKR4nlQvFyTlu\r\ncmly78uPBVV9bhjZDJ9bEe7NofkvevMXxCs=\r\n=M/wl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cea256990068cc2248c9bed32c4a47fe622a3286","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d25f3404c.0","@material/base":"15.0.0-canary.d25f3404c.0","@material/shape":"15.0.0-canary.d25f3404c.0","@material/theme":"15.0.0-canary.d25f3404c.0","@material/floating-label":"15.0.0-canary.d25f3404c.0","@material/feature-targeting":"15.0.0-canary.d25f3404c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.d25f3404c.0_1662025524532_0.4982313003349734","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/notched-outline","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.920d8a79e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2f053bdd75f3d2dd1af4d0176c6bffc8e32fcd7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.920d8a79e.0.tgz","fileCount":33,"integrity":"sha512-pU0pOZNbwsyhAjoRFGXg5Fk9W9LSmyK64Bi78bgc/YDF9g/v0n4+9ZMCpVsZE26+gJfmpdxtjii7UkN7UJZ9+A==","signatures":[{"sig":"MEQCIAcvrZKKpraeqSNXn4aAW0PeoWcV/KCG86xOnCACHhFbAiAO46I0gLq7fswXWbwRmw6c7uuxe9yXHnJdX0br8dhXPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERRrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq43A/9HVB5TT0ncKwp/SXZIF/rpIEctQwLmOOr+/93n/B1RYzrFkDM\r\n+ErS7sHqSqvJVtqSBZvyMacHhiCe5Axv9CF3vZ5RQForleS2um8qLa6StA61\r\n186el2WmncyjLMCT0jdpsGqRpGT7CtlJJmHPg3Nh4r8nEH0QeaqKLXuRHuNw\r\ncfV7DJShFI4GezECgdt723sjUG/4+s8EA8BI1t9K9jaw/dPXIVbO5IIYGeK9\r\nUObTI5OknUZhz2SH/01aT6b5GFdz3CC2oGShPcqqIWD7Kd9ytRsO57bvfhM2\r\nsCC/q8LXPqkE/kMEub0CUIg7Y2Yp6IM3+G4Lw1wG2nSocCJ5YMmfJM1Yf8d8\r\nI4m34eqwFWHV9VTd6wKIv/W8h+ZbJ2b8xQ9c7kl0GPEMS6BUcXnypIHGs8Yh\r\n6657b4DIUaJOAf9yBMCtwEnLxmzJExYduX3JbWQAHsUtrzBaUv6Y31LqL/uY\r\nNDE9QbFoQUZpmDccIWHlgscildxuZAKxXrQfkOyasyF9ME1IuQ128yJu/rWL\r\nuKVgLXJTOkVRKtGK+Y3ltzXiZdlTIScqIC8jD2v+aS0OWpRQzAWEacv+4t5L\r\nljcvUCYf51ZgfiqWQnedv7AieE+9v9S7HSwxgOaX7hsKP3QDCIwaYRNiaf0C\r\np330BskNipZXpAj/Qf8FPeUKivduKFlqmh8=\r\n=x9sU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"781a4c78770587fd97c25633bf9f137081c35bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.920d8a79e.0","@material/base":"15.0.0-canary.920d8a79e.0","@material/shape":"15.0.0-canary.920d8a79e.0","@material/theme":"15.0.0-canary.920d8a79e.0","@material/floating-label":"15.0.0-canary.920d8a79e.0","@material/feature-targeting":"15.0.0-canary.920d8a79e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.920d8a79e.0_1662063723278_0.9018219457834016","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/notched-outline","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.c363f267b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f6c365a4cc0fe06e933070cfe6af8c34e67a0a1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.c363f267b.0.tgz","fileCount":33,"integrity":"sha512-Tw3bkk7d1thHwfd61iPdFCOpYOS30AiuFHI7+RJGbBSSpVxqQho3f+38FIcw+92cn7fqT/5BCWgZfDk0zqSDtg==","signatures":[{"sig":"MEUCIQDTuQ2BIsi6rmF4ASA/yoYtbDd0dI7xF4OQ9ailTxccGwIgBYWvfWQGEqUX0VKquDY6kC4GLIVv94o6bVzM6A38Q7M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESHYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKTRAAoyUAwww/45/1YG62IaoaDWWUp3xXGeHwDlHES/Anbnvi02XQ\r\nBKImpmJRl4TCF6s4IEQMYnaf99XpWl/DE+M905MPiAPqCHofV2qjzwZclRvQ\r\nkxikPzWTMWRmRhi6GfXRKo3rNPMTWdQSADjALsylZeWIBcDYjm2q/485xi7b\r\nhKVlepmHeRJfKNIHdU2FpMzLWKLd0/NzkqQLrCJJfxAehTV8VTTTWASPslXk\r\nTaFCgFZ7+S4+rrvpCzCSRtyhP5prIkkSaXg6p5sHXKEokvgHCUD+sYvQM8/p\r\n6TjveC4/u7wahR4h4mvjPmsmCunExZJitm8Lw8PNesMFi2sDgu2Uz4Mu0doh\r\ngkHGUW7b8rIuoMIfHAgZIb8g2lNy7g0y3t9wzbz10oFJNYY0Hkb4KI/VDpUO\r\nScxSO5awNoj0iFXo90M3pZlnW0ksvkrhNO8pln7hPy/mHpl7yZTFSMv9CyzU\r\ni3RFi9RkY5zmkeqg5Bj4W20Y9greyuB19+V4FQ6exMDmn9yqoS+ClOfdrDEq\r\nXzIWu8CtVeEeeeyg84hUJBvidRvL0zf+KoxgyNZ3feBxf15t9QUPFDnw7rIz\r\nAcFloaDHI/puLLGO1RdKKkgBb9VJSmLCy7Fbhqjd8/0obeHC8Oz0uFy9qAEl\r\nLkjipruviwZ83LSnur7lvekmzs+3OttG/1E=\r\n=vNP5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6e2ef624f85a84b5510b55933f017db57797f611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c363f267b.0","@material/base":"15.0.0-canary.c363f267b.0","@material/shape":"15.0.0-canary.c363f267b.0","@material/theme":"15.0.0-canary.c363f267b.0","@material/floating-label":"15.0.0-canary.c363f267b.0","@material/feature-targeting":"15.0.0-canary.c363f267b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.c363f267b.0_1662067160075_0.20902451760023233","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a4eb4937a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ade9c811cc73d5d458f999a4f7d91a0d2a6ba157","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a4eb4937a.0.tgz","fileCount":33,"integrity":"sha512-4J9L7fNn0zOqfG3ft2CBljXB9wtuRtDPkGT6+FQI/kgApuffsVM/EEhJZj/gvgYgsImISiXND5orMCxX8ewexA==","signatures":[{"sig":"MEYCIQCWJGxNaKofMnW6m8GBl+YG13dBU8ffiD7f+2qR1tsQdwIhAKvvbA+tMyJN2rRCo4avy0/YwpZbytcrmutLId/Avh/f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF49qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIyA/9GCNyWhI6tQCTrdFKzkQe0V+pjJrwi3Pf3pjfBdZmZAqmQwZF\r\nqffK8n0sxZfximeyKIFUH9f7YJzVJdhyg85FD65hj942N0m7WrL/ZWxVUegM\r\nCQ+vw4Xhhv4Dtp55eS5Ggp8fBsCwbIjEge6l40ngbRDc25CFhqs0QV9X9ruX\r\nXzhTJmUJ6eb2IsbB1w4K33XxTtBswAPTJqCLuWwFg5jTByfrGa9OeWufObOR\r\nsmr+zZC7iFAyV9VRoQL434323BY0A0jdtS/2VTUwRcJVG0B6oBgMIW5ALtt3\r\nJkReRbXqbtPCHFKYj3kv4fUC6I3OTSBMYmJq8A58PHrUFeFv01Zc2UVBBpBl\r\nlMahijcqGBR1oCcntyKDDDDjRFahZB3PT+0ojBmnHiJZJ8tBK2pD3Vdtxpqf\r\n8/HDxkw69gwjF9Ou4DBOXZn636kOiwwA4cLqnX/AFHlrQKifDcUi3CKZuSuY\r\namZmjMt1tfic8vzRPfSlcCGCCPpY9b7EsH5OR1HFZQMOT38HB3tPWuWiMqZg\r\n0fzuHyYvZ8k+qY20mtVwvSujuRf3m7LNyLCLq0H+FBBDtXoHcJ+8WnPkpuqR\r\nAsXfJwucNKW92rdXaiqdc9biev0cOC3aHqx9uAtEiBVOEIHIeyZfxwErkXlG\r\n3MGD/jKWZEC8yB3kX5X6Kt/u2DSxT2aS56A=\r\n=FEHH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cc03915314119934676831cd7a244f70e12dd2c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a4eb4937a.0","@material/base":"15.0.0-canary.a4eb4937a.0","@material/shape":"15.0.0-canary.a4eb4937a.0","@material/theme":"15.0.0-canary.a4eb4937a.0","@material/floating-label":"15.0.0-canary.a4eb4937a.0","@material/feature-targeting":"15.0.0-canary.a4eb4937a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a4eb4937a.0_1662488426034_0.8057216274293308","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/notched-outline","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.4299717da.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c63e29f1fa3a405113544e01acf24cd5d71da81b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.4299717da.0.tgz","fileCount":33,"integrity":"sha512-/EcRp8RvQxVCdg+GAzRV87XBewIAeZArqNzgwnbREADKYUMyvh92A49TCaHM7rxL4Yruq7PktwXV3N6qoCAfQA==","signatures":[{"sig":"MEUCIQDxKIFLuOFJ8PSo+ByoxDs2QfV4Z82t+mK0l6Kv8ySouQIgWcx8sM+Vls04Ev5ugytmiInqo72lJ4NEvHNwPGb3JC0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMPXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZ7w//QpUafRAQrW73qHI5RmGwZUQDJCnbTUZydqvUADiW67QN6Q8+\r\nM0KadUtLRkXCpvCHq1rTlHKtkcgr+RP4abBEFJ0LucpDG/99FCk+N9xEphyM\r\nOLucA1xCPMBiWnnHpoSeQAtrBvxYZVT6cshXk/PhebA5Ic3d4QpPHHGCmluT\r\n68uRb1yQS6yn5c8urc+9/8IdGxkJDoHgELYwDXDh3whbpCHcP3dwNu6Wx1Oh\r\nIfpD3XCA/tLuwEp0m0MsQxc8Pfb3s7u7UR2xHO2+hxNBkAAzEDy9dAMVSyr6\r\n4sqPRPsowU+A8C1fa1fPtPy58iFGh3ckQSJOh7B4/Q42PK7R24bZxCZwb5BB\r\nf7EabsUfXlYwMQZRR1uiegDUJYzXmlYZBFmEhXU5MMsUkOEout3MLMzsVgWv\r\n1uEgC1VA0ROnvrQQbfl9u9lzyAN5SXA4TVx7BpOythXXdKYhc2OrID/PJT+D\r\nZlwnTpFTVhoM0z2rg1ekds1WDuf9yYk+DcOS94+IR6Ew6aZdd3s5zquTpWHF\r\nsqUNhylXxP6xYqJShqhe5DD8cZQ0R8YWPowKRx5lXtnavW/oBXIJ0X5opMdt\r\nb7FId/waZ1LqSPcsch3cyxTWG5G1nds6cXCRNyVJquEbP/i1WLirOLJ57Dny\r\n6WyFKLd64sqVpfwF4nyLFwsv+oh10tddXUY=\r\n=dyRH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"22082634ffad1ea812192e5ac62786a8ef47aa81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4299717da.0","@material/base":"15.0.0-canary.4299717da.0","@material/shape":"15.0.0-canary.4299717da.0","@material/theme":"15.0.0-canary.4299717da.0","@material/floating-label":"15.0.0-canary.4299717da.0","@material/feature-targeting":"15.0.0-canary.4299717da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.4299717da.0_1662567383056_0.9767729887565801","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/notched-outline","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.fa7d8d44b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3411c98283b18143ab76a14994350b6e7d82c4c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":33,"integrity":"sha512-BT6dJo7dN9vG54euKvRMaCpAIzCXHeBJVm0g5Wvw2JlmhxCO4ic9E30s8t31ZYz21Z/6PHj92RcF25H+4hCPwg==","signatures":[{"sig":"MEYCIQDvuqVEXJCqhfy00tzv8QRg2cKP3txMsT9URSnhWgAQqAIhAMQArMnVfQwYuwyCSuGUwHllcH9s6bN35aynd+bdansI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO7gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGSBAAl9L/6TuR+cB1jSUTG2BEz56ZoR9u+Ci8ot8jAAfSnGh68yL0\r\nKIbP747cKZJHwjJfyONt/lWEpnwbS7IkYRRoSQMq0827AjloJy+MSANVSZqA\r\n1Q1W7M4pH2/Q2jPQk+Ne6YQN8D7MARG0daTW35m1Bkgy4tCaUzy03REfY3j5\r\nJf+RVhU9jvHDDjPEs2/Wj9tNFIBf5VmTkj6InqLBXrGwV1ZzMW9vn2Emzw6U\r\nCZ2W1u3EoQXQjo5vak41QMkF+sH5F6uHERGMHwk38taZ/By/M0Ig6O+V4y4C\r\ns3hOq6nGknPXqNgIxlmQTNk5nY0U3k9vcdihToqn+0qQ7fR8gMPGTtxrSPBY\r\nZPgXXkuzjIdsUmC6kcU7lrmnSH6lRh3/3BNE+xvWzv3U1qpUkjdobgTn/LtE\r\nnylk59PgrKw6UaJjYI6K1KK5vu0Ypjw9lcdLrl8UPwRYKcGUBKr8zqezlHZx\r\n5nTRrabW5MPvW6rere3y9fxAGHswIgZHf0lIrybt1MahtESEvF2he1k5+k/U\r\n8VzeUe0LowzdTrXbSfC+Qteqn1ZUTv2rrBJjoetx3cE3fHLBOGpjAqkAdE7U\r\neRmgFpd1SkvBqbLtvt5Yj2CJtOEJO8PBCTtoG9UKrSF7TuF0xBpTIh7x6pZ9\r\nzS1FuRGpiviWosK0IudD21YwAfwEYj8v0pg=\r\n=P1fP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6fc828292e73ec2f8aa4332891628e90f4586658","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fa7d8d44b.0","@material/base":"15.0.0-canary.fa7d8d44b.0","@material/shape":"15.0.0-canary.fa7d8d44b.0","@material/theme":"15.0.0-canary.fa7d8d44b.0","@material/floating-label":"15.0.0-canary.fa7d8d44b.0","@material/feature-targeting":"15.0.0-canary.fa7d8d44b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.fa7d8d44b.0_1662578400107_0.08556978997686238","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a40e3c768.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77d4dd7ec44dbcb9004f64a0bfac7eafdaa722cf","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a40e3c768.0.tgz","fileCount":33,"integrity":"sha512-+60qEYxtJReCPTiMzms8oG3vJQBTBqCu7+GPqYibQBjsB9HuoG7joUG9mu6skFdWMFpk4xNE0+VwJ52xZsy9uw==","signatures":[{"sig":"MEUCIQCxfw3ESc72rBD0ofTrRA3voqknQotqlKb+xIApL3N2gAIgC1/tsPLHoca7Fex1MfrzEoDnWL1K8imMdWV9Cir8X0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5xpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOeRAAiDN7R9xnlHRB25XhIvzNBPNvES8rppzJKjbPONwd1GtuHHuC\r\nqbq2klerXi16iQy4eNHWUzpt7D2ZxhTclf93HWWewN5g4lLnf3VZWGDrJmln\r\n7g75QaCPO5pe+9+zTMpyyU+6wulZH1xDa8uj2ZjC4cQaWrLClB6kMoCv/qSY\r\njQ+5P0PCsjgQCQN73HV9FTxbv60WFq5SDMxD5klHatOC7J5FmUgFstHZKmyW\r\naF4FjcgRoGzfVlJc+j/lJ89Virq+Mm3Vg3IwXqkz+zkOzBf5TdWmgIiSSoZl\r\n7nArxYf4tkMHsS1IsRaaIwfDLK1CI6AOd1BG7uP9JzixALP+FW3c4PkUz/rG\r\nKQZR8VFNdy5uFRauz3W4z4JU7GGX5ihuBUvk1049dmC23EkDTeVSceE95163\r\nqA74RWAZTm7JfD+sIoj2Y0KjrN7PLMYpKDvB+ML08TwVk3yyMQX2OelmCVH0\r\nWUQCBGUFuc2j8equVNgpxlNgjsIkrzZN21ZBmo2RUVMXMWACIQB3TKRcTczI\r\nRPeYtu5f/RiJGGs7yY6ETudOtY0+yCsbg9/9Rc3GPSOKyz4uLe+YoiMk/qXY\r\np9Ijjx66RxQGSwzoGx65DHTBMBGDL3IQ0ayPTuZtwnDGLOfU6aWyzcD7AvRA\r\nH7cwgVegqMdPghgw3s/5ABbbLkMk4w1ajUE=\r\n=cAc4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"33ff1e71e12298ba7158884edffecc83f0055913","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a40e3c768.0","@material/base":"15.0.0-canary.a40e3c768.0","@material/shape":"15.0.0-canary.a40e3c768.0","@material/theme":"15.0.0-canary.a40e3c768.0","@material/floating-label":"15.0.0-canary.a40e3c768.0","@material/feature-targeting":"15.0.0-canary.a40e3c768.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a40e3c768.0_1662753896875_0.7688590963460913","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/notched-outline","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.18cdc9a00.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a8b9c05b71d9c69fca580c8604c42a14366d95f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.18cdc9a00.0.tgz","fileCount":33,"integrity":"sha512-uQCGmPqcTgDB9w3WWshrAlP7ih5krKR9rLih9RcXoX9UMXUi5dpGwHn52lqSHf7FXkRppIRl0A5crv7BQaEJig==","signatures":[{"sig":"MEQCICtuht+7mI3rKeY/Z8Az5o0kfzlFdJcp2gy8SgfRUFYdAiBfaVjx2/0qFouUPds2vY2jaPjQtFRiTKrXhMs4lzQoKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH57DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+fRAAo1TvtxbIWzbEw8xFu4xtbTQ+/KTlMy6ErL4gFZhs41MUYL4V\r\nbj+s+i6H5FbHD8SW2f4PvKFO2TAgIpJwMrkifVdbVaXuFc96lphILl4OdGaL\r\nIxZAkBdIilutDgpL6fAmitkyJ4RYhdpYHje6oNZiQHFstZ4YEKizU4xIb+Jo\r\n91tf6WmHDGcrfSjfW7sAo10PGGHCc+dxtut81u16eEICGmIRulM2d+5Bd3WV\r\nlKBECcxsbeH0SNse14/xSNVQCHMNsXn1LWwTRFK9gzuBxNXAFYPBMbvSzt0Y\r\nSmfO5H27tDWMtuuKimJxhwyl16auchKr95D2oxUM93PpAOnIyKtYjtRuEKDT\r\n/O2sBW24KkXYbz1KQoXU0aY6GF/t8mHec+TQ+21oNOrSYuxm6fnH/iucBeYa\r\ntf0kIXHzMGmZ0+k4+c51yYjItmY4XbuQPOvp11kOe4rQHisliF2SS9zULusY\r\nmeSGJMC15c1P5lVOio4FLvHFixFKwwT7ZKbeAB1QrB7UC3Mn/qwQAgEPQdw/\r\nE9Fgmel4cU9CWJMHz7c5yhGuXJNeHe+zGYXNBqGE3Rfd81rxToP2pOJzzdJn\r\nU8U1wnufNtQ1Ty2hJi/YXxRVoru5MjUL9gpcCaoy9Y6dWPoowTxcJ0zz9tX5\r\nYCRB/x5JVvTPSO+8whTnkWgdB05a27QSCpY=\r\n=4xbT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"85b7dc2034fbd68e480826d635d6d061ba62d3ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.18cdc9a00.0","@material/base":"15.0.0-canary.18cdc9a00.0","@material/shape":"15.0.0-canary.18cdc9a00.0","@material/theme":"15.0.0-canary.18cdc9a00.0","@material/floating-label":"15.0.0-canary.18cdc9a00.0","@material/feature-targeting":"15.0.0-canary.18cdc9a00.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.18cdc9a00.0_1663016643080_0.35524145964191045","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/notched-outline","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.7ab3cd3c8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d43ef7f72c62ae2b95b47e3e539ffbcb645866f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":33,"integrity":"sha512-vPvI+7NaX1+k1uKy4Wuo9OASK8T9How+RN9PInn+iIhWM1zOY4zFr0lo3Btnd4u3/Pe7XuuhRDB9QUtwVy7RFQ==","signatures":[{"sig":"MEUCIER6QENAxTbJzRY/xSiu48g5pZcqJSwxkh8XsXVrgxyTAiEAlhCmvYZbRINzUp82lCNZMYO7JIEaSWZghCTAJZ/n7FM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQbPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3wQ/5AdC3fpOX4WTCsL6r6x6gTBVG/hOqqfgvSopY67M4v2DRFts2\r\n9M87j/0Qd7Yv+1xvCBwXnPCws+8Jy6MZKCfX9pUSuofAlCnT0o97/Oe+01gh\r\n4o6wfUaK3Q89XYJvKIMPpGv5zSPjqTnjNR9R6ppclUDXqxQOr99KJWJdOCRM\r\n3I1tV9MZ/m91DUhG30CRxgKXlSuIAQUyGtsfXdxR24C51RmQp9i+1WTWVkAL\r\nxS4i5FnvW9w/hoQAQLeFsT0MV81xHN5LNhyfw702dtQv2n2GInM9KHzSAAQQ\r\nFjMKluBsbVKjsQWFcNGDbrY9iDaux4YHQ15DJgcceATwKU5vqMzUmL0lhl0s\r\nPp7dHuk5BXztoV4eZPP8o9h/16BwHUG00Mb13mJKgUe49n8cYBauSgfgYD5l\r\ne5PWiIFZ6oszU1fCcCnR5J0rZXHCkmzZPnxpuG6nONAQTAhDWhepDMIL4clH\r\neJtJJiYXCa8gwmTEKx3RK5LZLwZmoQUHH6cXj1MBeolccBkH9xFSrw+2PRH3\r\nkcRZc/om5LJ3SFJddFNgojhdKAmgkY259WL3lCZzO2BPKqvuNUm7F9jQV8WH\r\nBTHG0n/hxox0Jwqx6rBFcnRYZw5hb9AXoP8eDIeeVg6sm8Jrkt/vxBI82Ftq\r\nQ+6DuuPpbp2j/VRsK78ix+QQbRcwiGHnrgE=\r\n=Gxrt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5e840f2c9b221706de7ff81194e71da2b68b82f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7ab3cd3c8.0","@material/base":"15.0.0-canary.7ab3cd3c8.0","@material/shape":"15.0.0-canary.7ab3cd3c8.0","@material/theme":"15.0.0-canary.7ab3cd3c8.0","@material/floating-label":"15.0.0-canary.7ab3cd3c8.0","@material/feature-targeting":"15.0.0-canary.7ab3cd3c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.7ab3cd3c8.0_1663108815158_0.21742921775156332","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/notched-outline","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.2860d244d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"652db402007a3b9c5c6ff5c1aa90599a2d50246e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.2860d244d.0.tgz","fileCount":33,"integrity":"sha512-xhxBDS4OBy//oYc9IH5VyB3A78/z4wzza/2bmbsqh6O45pJORmJJoEalnZgHJI//uHfHQ5sfd8fBoKNWfy2GaQ==","signatures":[{"sig":"MEYCIQCI8L/+nwwsOklZDGCYSVnzG1FgOKJKn3L9xFdNTxXJkgIhAIApFwq8vsnsKncdVkNDiAtW36E/NISrsDKw0KUvdnh7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP74ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNMA//YC1fVntT8vyiDuqIif5lj570i7Bug7roTJiXSi22yTVojZR7\r\nI8Xm/xA2dY2bluo+ZsIJcdc3sUzLdf7ciEEmuftwiUIRIrThCfO+TVQj32ZT\r\nPlkqV1GByUeXhsHLOFGk+yWJrqhxb17PRkJGlTOTEkvnfMMFiogzmm7Wkevl\r\nOntksrYsuIT5uBzDDNq2V5KjAZWZOkiYnW8pIGbi3PToH0h8iRvd1zIurN6R\r\ngbH94pILfT0vGRl89GYD00m1/f4h3nb/LhRc9uCpiXLBidWXZV9GSd+HLcwS\r\nJ3vhgG8OtGpUGibKwdC34ryfF0gpH3YzM3ZslXARIYmla0eE+gm9D6xli91u\r\n0IqW/1aMOPTBJrH+YP9Dr3L/U2dRK4sXBwgvy7jwd9roI8NNWla8710sjBs2\r\nSuj03Fl5MtjjE7Z5nmH3gmcEDvvVRZLiBWkU66ck+PrMOS2lTYEYz8K4J0In\r\n2ohoGrwOqFFm0+fLRQJO9MFVpz5qFA2+WmGTQQwaG1BIvuJcQKHUV8UYoml0\r\n5PEcDS8rGybWQI2Pb5hprAnmRWrw5PDaoBn3IFA9MScMJaR3wQrxlYBlLFn1\r\nyo5hJ548aAI3Qn/mf2oW8k12XBxKKEeDUWzZu0ECjPWRRucvPhDG+L/E6zg+\r\nUaQuNFwhYS8NPf+i0vb4Fc7aR+lou3pTX9M=\r\n=Heju\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"992b4ddc7340e4e4231d1001d68229e8911eeba5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2860d244d.0","@material/base":"15.0.0-canary.2860d244d.0","@material/shape":"15.0.0-canary.2860d244d.0","@material/theme":"15.0.0-canary.2860d244d.0","@material/floating-label":"15.0.0-canary.2860d244d.0","@material/feature-targeting":"15.0.0-canary.2860d244d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.2860d244d.0_1663368952756_0.10166072346167332","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/notched-outline","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.e8726533c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38e74e1e1795ffaa491242e304050398a292a257","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.e8726533c.0.tgz","fileCount":33,"integrity":"sha512-pszqacq6hUwz9SGjNwtKKv++Q7/brr85BMrNUKYfxdgV9qWeJnwvpmorTGGdiwPofK1n3HZnesvoIBmKpz7NRw==","signatures":[{"sig":"MEYCIQD991QWK8NcdbLm6t3W7i7viHPsKdwcF8yEhLYpLrnNugIhAMh35+vJgoNWmxvXJLQn9ZPRph90AvETxvhLNy1p5o/Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKiAlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPBw//dgm5yxztwb0kAyur43o9AXjDafklfODVXrKau7eoYtsQic3Z\r\n4El3Hb06P1Uoy+1xdxcHAglcmVjUbutsa10gHkuc0heuzBhOri2Chg2OQMQ8\r\nP3LoOH2gSg4vyUp/u+Ka3K+J3LLSjM4bDvp3Od+arI/BFoCyrPK0OP0QyFw1\r\n29p01omvoGAH3LKQ98kD9roEPOE8kzIes/k+mxO7pjifftIu5nk0Lzr/ZMum\r\n6g00UyKSc4GfM3VKhvre/R0cu9wjDG8sy936m8sTK0ckD7FZgwomPvNU9GTB\r\n0Bo/BDb0eOVbMqTDTm8uraZFiWJascFoVIS30h+wmj5yRlhJm/w3GQQsI82K\r\nnC1+IgNGNYLGdX5smVIGV5yOvk1UlNz3NRzEkpUxXWweYPrj9xpYlNajJ25k\r\nriXdVNcORmd6JMLb5ZhMkfHe08OeFzK0oY+Mhw3zfc+awxpeZYB8gtCmnIPg\r\nKKx1qn4bFehO8iuZljsb6ngg/pbtPqWufpB/IdXLO+J7/+2B+LBYcVKkEA4m\r\n5NdmlvLsgALciIqSVrddnNhXnYHkKsAmqZ9UzgaEobiwQo67Gt92H+ebvvQN\r\nfNEZUKl8+f/dPouzw/I8ZeIilLkG2/UBKY/hbRrJg4fjCnBLPXVwNxccrgtW\r\ny3PTQQ8DSBMGJPJ0m2d6d3s0f9U9E8onibc=\r\n=ij/3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b85a9f4d1ad6e30de8175562c0093248848c2598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e8726533c.0","@material/base":"15.0.0-canary.e8726533c.0","@material/shape":"15.0.0-canary.e8726533c.0","@material/theme":"15.0.0-canary.e8726533c.0","@material/floating-label":"15.0.0-canary.e8726533c.0","@material/feature-targeting":"15.0.0-canary.e8726533c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.e8726533c.0_1663705124812_0.5576641909829501","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/notched-outline","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.00d8de0aa.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d61bd684fa5539335d1c44f7010383bd7a1616a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.00d8de0aa.0.tgz","fileCount":33,"integrity":"sha512-k5F29WyAmZ1jwa8IF31M40+PRh0Vuc2Cvv4E64sEhFsXrrX9Ja2zVuhBuFyMB6QEMx4JLofoHe8FjxXMsW1urw==","signatures":[{"sig":"MEYCIQDqxSU+sum/gzIAR8rFmIJPnQUtJZqjpq6kqa4xoAYBJAIhAKWjtvxox2bLyo/s+CIwI8Jgz+2+TlsBR1KCuvcbvSWY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKyv7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEmg/9GNSJAm/Vy3gTdrVlXNcKDewVB3OY3fKcCbJRILmggZeHlPVB\r\nxjc9e8ga7r54sbA7KYaamSfxcDd+otQKqxak+ff8BagwmGzYFUCa8I9uz9Ge\r\nf+/jo0gbbQqzSbqepuLzy9uMkv9FfLNz1fASUbpXGZcBBYERkmJZzrOLJUUr\r\nVg63IpwfsGKhUDAljJMO2ASTJh6E3EimbHNLCWDQQovi+dS7MJkogEnx7lco\r\n0YmWzigSer4SihlGwyh5dfgtdfXDmALFZfeA9T2iF+N1tHDGVvSaKjrj2U7H\r\nXfH8229wLAXSJK3R5uUIQ1MMpenpt0XdYWDb/LL4V9V9l5QcFmNF4Mu/MN05\r\nH52r1Er4VgPIHDft4Lqt9wLI0+ddGjr4UkwQ8GJD+06TC324BZufl9KnOl5l\r\n+mZ9vzEHpU1nJ6s9L87o8AJmeo1oQwDT+SiK7fwMBSl2hWik4DlDRtvi2Yh8\r\nghMYRQ4UBstIr86xARWsk9pqtMF9FL6dANBhFCBu3N4htWqHJC7OY8NfSRha\r\n1af8svZW72FVyE/80Lz3JIo85cJ5xEsw+SEBNZoeLTb0uabVS6OlSjO3FmGu\r\nz2kYjT5D+11odBeMl9jsQbCq9prauePZ3Maqe7J0lBn/k3HHdbKmTnkyKqzk\r\nf1k34lrxl7FpnNd/pqCsPadkmvu3xrp6mjw=\r\n=9kcw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0be0806991396e042fbbfb14ac3ad622770647cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.00d8de0aa.0","@material/base":"15.0.0-canary.00d8de0aa.0","@material/shape":"15.0.0-canary.00d8de0aa.0","@material/theme":"15.0.0-canary.00d8de0aa.0","@material/floating-label":"15.0.0-canary.00d8de0aa.0","@material/feature-targeting":"15.0.0-canary.00d8de0aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.00d8de0aa.0_1663773691433_0.6120865555194872","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/notched-outline","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.271aedc30.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c2f3451d4d30c7a9f6f984594ea49687cc509aa","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.271aedc30.0.tgz","fileCount":33,"integrity":"sha512-lgjgTvB3bWVvTDAJ+9+jJV/JOEGEeTZfs889UM27csTzkGkHX7ZMYMQRf/B1BDxyNVciqzzS7yaa+lMJA/E5VQ==","signatures":[{"sig":"MEQCICxCaS/ohn/5oCc5wB/hE+MXJdHhVBfuxn/yYfZp4vCDAiBCZthbRzYk/V9JwAf8mQInktzujB+JjiAGAGnk7IEyig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy+jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqnhg//SUW8hU2voVwOeUP7u8pLUjbBWifgQ0MgOwMtXfBbRoJmshPU\r\naR5XtNt1GnkX+pL0XNJgY7j0/qmugWfZEOvQ9jY+qrby+i4m/XrWsEcBlryh\r\n07OIjPfUfr1E/mC1TNMbUnO19ZPz7D/UUlfVd0lFYd513yLlRefHqpNGjxSB\r\nyYH09fG1PnAXeaa4AARt8F28h0Sf3J2kLwDaJJlT/Li+CQ5UjGS8jknAF+rL\r\nRQD1eFoQmfXcvy9adpYG80xewaxgOG3R8UxNCJ8lH9z3QN9S2rHgaxoEZIp6\r\n1Pf0GpWDrInM/KCKpeymYiEUw9zAc4BwvHrbtswDkNFL39WNMZ71+xQEo9Dw\r\ny9GDZNyycpCy0BB1/oc7ey9egiMfEd5wugvLh/9WKHZvJx+nD1zJR/DMkJdD\r\nqb8hZP5VwcRsBBTMntw8EdoU1qG039K6I23uCbovAy//mvoahirP2EanNLdf\r\neANv1XjWZ0ZuiLsKDJn+SPHtopyVbIMEs7uikeO16cW5ZdOvVS4ZI2fq1fof\r\nUJN0Ih9u4kxyLSdpox1grZ/Kgdoec1Tm5pkQFHHJyQTG0lSgMgdbU13Rmgw3\r\ni6+jaRAYWiAfNkdalCA0j8ZbLgmMFuhbV4yJCxWhCvOG0j8zwIzldlJH6+WX\r\nErNGcBaor8RrpiofJi6bMVitNG5N7RbiOHM=\r\n=1cFF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4972da221d6f097e904fd1a001de647e0e185749","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.271aedc30.0","@material/base":"15.0.0-canary.271aedc30.0","@material/shape":"15.0.0-canary.271aedc30.0","@material/theme":"15.0.0-canary.271aedc30.0","@material/floating-label":"15.0.0-canary.271aedc30.0","@material/feature-targeting":"15.0.0-canary.271aedc30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.271aedc30.0_1663774626762_0.7534497979185129","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/notched-outline","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.d3344c16f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78d470b0e834aaac230708eb8685739f8f449375","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.d3344c16f.0.tgz","fileCount":33,"integrity":"sha512-oiWjFohfYko+jNqO8YxYQtH7cUDBlM6q3xwb4Qx2aBnLHi6xJBn31h1Y5oeC/dpzh69j0PC2dqGGvL1O+dyQlw==","signatures":[{"sig":"MEUCIQC74D9zgvjsrk7iqQ81Xv1cu7cmz3LLusqtSqWk5JesfgIgGN/iS//KrfyUW2Vxn+cSDoBjT8D9Sanp0awoP/7oL1Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCn1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrR3w//R2ekEVAsDp114LR/Za5V7dBFeDGIL796LPVMrTNuzFJvqGR5\r\n4EJqkauI1QlW5TYDnw82fEm6XvljEofkctUWjV7HDx8I1uwr8w3pWyQNOQIR\r\ntFinmyYo9R3owNTLJxhgN6WXGKs8S1sjP0hUzo2Ekl/t+AWv6yFcZVCBpLG/\r\n3/8HSYm9Bv2PJtvAFf90XrxADQZFyPGy5+6sk1JqgqAxC/vA0T4eHA3TxzH9\r\nIRTcJNb9yC3zGUnKKdhdMz6rgE1MROlUDN/oh3Fo4kglVy8qsWAn0Tmvnj52\r\nkbFlimBo5GLIR4Zzov1YaMtKe2k+9zCdggRUlUMyNJWElzuGN4MPJqtsEi5F\r\nq66rOlRVga9EpPfnkXh/ZwLdg1mcKmkXW26GkLTc1VzL7BohRtcG/qCH1Aak\r\nVqItwnzmhISlU8C3G167CNJHyfaX5Y7ocW2mK+ou35bILNzUx3ojEIO8Lhq+\r\n0LvcXKSyBdAKFisF7RlGQcYE3ArJ22/SxgBodLMEjyj9EL7UnKFSQrqXf+BS\r\nll47F75fvmp4wycRrBYTRGFSIuVrQ1JtxBLFglpKgIbqFzrPMRZGWOZjGCEX\r\niozRemKABOL77dKRS8Xys/ebDpDRpGNSkpOX1tL0/BnIT/xNE7hI584qfVhV\r\n0FmedqyDlqS9J3LfX1kN4j+NB+CcW0YboH0=\r\n=9EVS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e0a8dfcab6df46c9fcc9969a6dba1f4fe48e028c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d3344c16f.0","@material/base":"15.0.0-canary.d3344c16f.0","@material/shape":"15.0.0-canary.d3344c16f.0","@material/theme":"15.0.0-canary.d3344c16f.0","@material/floating-label":"15.0.0-canary.d3344c16f.0","@material/feature-targeting":"15.0.0-canary.d3344c16f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.d3344c16f.0_1663838709556_0.42300699523058705","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/notched-outline","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.94f20ccb8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46feaf1ab16e43b22a4ad42492339646e491782e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.94f20ccb8.0.tgz","fileCount":33,"integrity":"sha512-3g1kSP/tlVJ9K1yF8BA4p3HnXmTGfQVDvUIc1WeBOTBm52t5Z3tSBkp6j+rkrm4HzCVHOi8GdMPeVX9MMuKmKw==","signatures":[{"sig":"MEUCICQUgYJiXeKslatvWm/YKNeJq6WgBcZ9okX9XsFVrU5bAiEA9HUj6Stc5egkP+lSTboyf3z2FcuKQO8xjN54EhVCI7k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMozACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmplnw/+In93dMN98Z5nS5YT3a70foYB10KXzEMljNcyJsUnkdpRNIh0\r\nAYJQXtWEdjpWBzMKldHJn6kZcFOZuAtGrfahVt2WLR38bho7A1Z6O5gbgZ/n\r\nKKeaQmxijcRg+gZNFaXzRFOzI+mwWnPsRfa4BwITQ2QHqSDB8yTDWisxOofK\r\nZhOzhhskxWn9Dr9W759tGD7R7yxEMQeGMTJ5uCVpVkU9DWfAS9mxvuyvnq6F\r\narLWjUI90HgPJSpUsdXGHMwP/+omtZp9UIFv6SZ6oIQ171TAg7QmqRTMlQ2f\r\njwmKbPt2rpLjgjHdghXv9lixQH6JU/l/9seYor70rpfWyxLPcVR3ewtT2PHH\r\nPC5pIzJ43TVQuKPS7XbgbDz93zT/bvYaIjGm9ykU6hH4bWuSegiAv/dcwJ/6\r\nMJNhLg3yAYaybr8pf3ynIj2jTVZnwyOPUMzbBHBuir00O2jHRzGEBR8/FYu8\r\nPVBM4nlzR/fbYP4lndzdLpHhqh5Nep1nBowB57shABxiIIVNOzA1Ezh+0pal\r\nweKr05asOw9ZiR54yzWW8u94uk5T2+IwYbzZO6tmWWjsqMUIux5fQLcia64c\r\n9IzudvpXXVm6+9fKLUSutlZZ3CQ3PEGDq1xO8GEa/A9wiSlw1aUG/nHaTCgl\r\nPVBQ2flsf0cGBoWPeXjV/M5ZaZvgniQZH/w=\r\n=q/Qf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"16225f613437ecef2ed2d760a08046953ecd51ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.94f20ccb8.0","@material/base":"15.0.0-canary.94f20ccb8.0","@material/shape":"15.0.0-canary.94f20ccb8.0","@material/theme":"15.0.0-canary.94f20ccb8.0","@material/floating-label":"15.0.0-canary.94f20ccb8.0","@material/feature-targeting":"15.0.0-canary.94f20ccb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.94f20ccb8.0_1663879731489_0.3135866386415562","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/notched-outline","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.81e4cb7b2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83dfd40eefda196dcf9da245789bbdb141a21cdc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":33,"integrity":"sha512-8YJEYG5ZOqjjSUMq5F8jtnXACclDzYETfjcQHhOQAxROUeFXM/0tHMZ10haEhpVDDSb09rej7WVPkpRBO+Dy4g==","signatures":[{"sig":"MEUCIQC2YiSBby3yC0d7+qMCPBhRNv14H18/AxOV5bX2cbOylwIgQ2cZkC1hkxHlJoA4NuRLZO9nsJq/J5kpt4jLRAPvEWM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcv9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2yBAAjVAR05ZbZMjkBzI52zDVEPTVVSeH/XTepgugXNmgtsVBCZkS\r\nHnXCxNGLf8ai+pm0wI1si5D5rZulfgEf5bN0ghM/x7gEp4p7lzFsA8idLhRj\r\nxI6xZv5UON3ebQxpvMTUFlGzO023BTNzYbjX+HYGp2cVvLpJkLrZC/quAdR4\r\nzHeIJzw92DrxB5KwCyoWK/z826ldRZxG/SZSKe29SFKMq5RZu3LWrqEpFK4k\r\nGjmhv7NtFFqLqsAUk0r5OdlWCHd/2qVEG+vyihymRLpQ1sYTI/47EusqLJWo\r\nHRMOv0oerft8SqXqHbvufXKdx3h1VkNSkiZ5UZlUlphu0M27p3JFkRaYTlt9\r\n/bG9fPiG3+dS4uETILeyLgJYXgF8yTgwgPGVLtTNeEKYUg3nsWua28EjceAQ\r\n6VvFx/n5zW4hS7HY9UuxoCOu4G6hVbSBCu4nd+774/ijOYOGyZFzyoD42Nxo\r\nzQx5FuHee2r3WIREfVbbs+rn3G3vGAqV8cc3V7ruEhISFK5lR/QfXMD90zI1\r\nXu45xZYGcxDm5wj5znAyXGzmbTP34tS7msroCYcsCbJdTiMSeVlzeNN1rip6\r\nI5GejctzEWWbRWIXcgdTyUnitNP0E/ik16gqVUhUP9XmcjbP4nq8kn59aS9S\r\nteNRtKZEioJsfHKYgAp97KOkxzUS5Ob5Hmw=\r\n=xq+O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"63fefc99b30106d8aae83dccf8e6e8073043a3fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.81e4cb7b2.0","@material/base":"15.0.0-canary.81e4cb7b2.0","@material/shape":"15.0.0-canary.81e4cb7b2.0","@material/theme":"15.0.0-canary.81e4cb7b2.0","@material/floating-label":"15.0.0-canary.81e4cb7b2.0","@material/feature-targeting":"15.0.0-canary.81e4cb7b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.81e4cb7b2.0_1663945725213_0.7760546662155787","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/notched-outline","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.aa85f9413.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"552f65a14b227ffcb0794cb90f0aeaf53a277e6f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.aa85f9413.0.tgz","fileCount":33,"integrity":"sha512-jpO4nCIjc9UuCSvCkrE1l/qFuIsXkORpUw/RCJ7GnIvAe1Im4m/g5kDRDy1uL2yZI8ohZm4gRaovVNL54onabg==","signatures":[{"sig":"MEUCIG9x8woPSND+09G4kxIkAGcuJIk08AN1M7ZjhP51VMljAiEA2b1IVEhGV5ndmuY4FzT66piyQTHcZPe30O/8RXFb07g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMefqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqk5A//WVq4goQQWM/J4qzC4iE2nQOLDx9UAa0+WUWRtVRcH7MoULlw\r\nnwk0defWlqSkK4z97L1XNquyjl9XJAlwD8v7/Q9wf86Yfd4SlRFUzxg0JBMu\r\nQXNd7CLg69qPb31KyB+SVCmydbe9OiCxY2A8A9Xhe3QAa6IVjWWq5x5bNUhH\r\nprsIKpyG8Pq9A1t73lvb47Z0o83Yx0oxokzzauxx0Jc+s4Le9NBHzQXvhsup\r\ni3RTOLi/UF9TTmBRHWciqLG5vu6UFgMSNRqszI+uUI6h/Znkubg4wdItkv/v\r\nfYn9tyNJwzhmOMHHAIHo6FIb3dhV7hOwum1MjcXt9Oc33qVF8WA72NtLWwBt\r\n5iJwUwjnmAiS0hXny1aDT1wONG9JQ9ta16nfRYt5KA7mMj0znvnW6QnK5n0o\r\nDAQJkJM9+c/UC9BCJeP6I+oSw0D5mnV0sINgK5NTq0GReo5BDv91+ja2cmF4\r\nr7EIL6FeHOWT2sI/0E1AljBe8NJNkkz145hnCtxk4oKWgzhPzJb9AkA1AES+\r\n16o1pPmDqxh/h6/h3plpJXg1b5UEt2mflGwShtkZXMKpnqEMfcYZIVPusakO\r\nN5JzzmHBbkpKRTyhT75pIOadig2sIRTByjYiC27wAWNHSXYLHcQ4gTMOQKEJ\r\nz9+XIas1Rhtrd2c7djyL7URmmUZeGIcRa2Y=\r\n=GrBO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"73f7402d0fd839f22c2c3bca08292a66389f5829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.aa85f9413.0","@material/base":"15.0.0-canary.aa85f9413.0","@material/shape":"15.0.0-canary.aa85f9413.0","@material/theme":"15.0.0-canary.aa85f9413.0","@material/floating-label":"15.0.0-canary.aa85f9413.0","@material/feature-targeting":"15.0.0-canary.aa85f9413.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.aa85f9413.0_1664215017888_0.7918864765215914","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/notched-outline","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.7134a7752.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5de4c0885f5572f0f8ff7a2a1367b12104759410","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.7134a7752.0.tgz","fileCount":33,"integrity":"sha512-eowaX9y/S9XSHKfHjBHQ9hm5qYqTfD/s8C9NJf2xeX2PspWAJU7Da/bLN6OU5IPSWW953Jb7sU6TbSMV+QYRHA==","signatures":[{"sig":"MEQCIC8y6Oh0Y24+A7FHJFD4hgcBYk51pNcBXLJVPyZInS1eAiBTg0+7REs0yys/wjj0FEGlbuk7DFwuq3/gmW0eCvcpZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiCSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoF5g/+Mao4rl7qi3j3xzW0rMvYWefc+jXZHwO1Xf/ZcCCfiMWye1Jj\r\n7HZ3h7UxwTIV5WeX3aBPv9brYwKxJxi4MUJjxSC0qVQXfMp5EaW7vcVVmWqu\r\ncqbLh1ylT4368ATT6VwZKVhnL9zWXMxZoHqPfCFx14n03ZKGTWU0KGYK8sOJ\r\n/nV4NqhHVkUSj3dqbLB4tl0KSJQaR/vE1x8g2ypoNjWlcVqZBJ7ztaIBIo8+\r\n4S7Tzaz5a7aj4vgRBU1fKF6GfFCOVnihnlye8mW23SatXMzLfkKiodJfnYk+\r\nscggJKkbBi65rFSIKLnrQMIdOckmARNjQvoDlMmeI3SD3ZWOD7Zhh3+mXGhm\r\nfNtLgJEGr4B20tkb51EUtrVSWD1ojNGExGArdiP9IOzrECzMQdpu26Wz1pck\r\nw01AeFB4gu1nG99SXaIX0dADpa6XtTqKhKMS86KImZCBBAPHCe0lVodNc5WJ\r\ncXf3UaMMbpA0a56zHKUK1pqP9MixiB4wAid5xxVUE0Y0Y40yiGmn03BTcTVT\r\np0iRV8dqrKPfvnwcksDdUV/3Slv+H9NPYtL5NyGTiE3aDPwrkYfw31yEPHR2\r\nWiESWWTMdxMixG8QYrihgdSE55JhdZyUJXVkjVVscCO5XeH+CORI+71r1O9Y\r\nOnuFne4LATHwOtF7BG1OWRHr6CAsiYK90hk=\r\n=dwXI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"31aaa09805eea1ad3a30e7b91a8bf8ee8911e80e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7134a7752.0","@material/base":"15.0.0-canary.7134a7752.0","@material/shape":"15.0.0-canary.7134a7752.0","@material/theme":"15.0.0-canary.7134a7752.0","@material/floating-label":"15.0.0-canary.7134a7752.0","@material/feature-targeting":"15.0.0-canary.7134a7752.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.7134a7752.0_1664229521878_0.14140033077150038","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/notched-outline","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.70b8ac16e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e007d9cce9399264dc05356e69833d184504292f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.70b8ac16e.0.tgz","fileCount":33,"integrity":"sha512-iDjgCX8xPwuHMlWVTCvJy/zO7SR7r4o5kpSxUjb7/yvfYSedfj5ErozAeLJsspoImERHGFPhxDAzv321Boo+Mw==","signatures":[{"sig":"MEUCIQDtyk7u2otXhoUiZztrsn+bKwiDXqHiezlh5qYBuPWWJQIgQ7jkJQ5bBNPSXtzC97lH/SD/PlPjogu3ZoYgwMIuyls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM30iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZnQ//VLX/q2QH/T1b4kjvF/gQmedlWwIllJbv9WdJypRki+dw7fIA\r\nB1l1xWk9RchA/pOfpKhqndnFntPy6qydZvIiS+k0IA4QmNoLuiJYUVAci3zQ\r\nFZkyDLWfsI8sWT87C8lB4k5jB81Kf5wj3WFzuaXCvRCen+G+5THzh2Pzq0JW\r\nXYmxfwyVrQgNtxRbfR0aLqvqt9oGW1CAArbs8Xc/oA+dxJuxJy9I0mh5aJzP\r\nLcZgN0X/xb1cj8XFt1gGWO8tfjXEZu17qK7wZX0vqi6HroyVpfGjTT/xplSc\r\nuZBQJLvqOqC2cvkcW3akWqEZyfoSRCzqmLS04P1UTZpgbpK0vizZnspeZaSA\r\n1ecYQ5Y0wFjS1lYPXcvc4RX2PJnq2B7SaIgcr6KyefUG1loRoriRkVn3hAQX\r\nB+oStzVlxSxSTpSs9p2QGG83bkS+aYNTAwlXHfLWxs+wTAw0ZPjubsbCoGAr\r\nv0YrJ+cRlj3+lUfsh6zKqEXA6FyA+JpJLkNgcZQVIZF/29SUOQgqgcOHGNo3\r\n4rJM+eZOsG40kxT95hMYkscf6Z7wYQ3A64c2r2aKINaHKZHAVQ/V74UPhUSa\r\n66763AXmmeFQaea9kUqGxPHgYazllin/1BVtUW5rX+jjsEsb080QlbKAeA8p\r\n1y0LZlkvwwQBLbszQ4b8T/wOlw+jTBWF4n4=\r\n=euYy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9f9fb4c3a4123798d2b993ab287cc4bb7e8d7014","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.70b8ac16e.0","@material/base":"15.0.0-canary.70b8ac16e.0","@material/shape":"15.0.0-canary.70b8ac16e.0","@material/theme":"15.0.0-canary.70b8ac16e.0","@material/floating-label":"15.0.0-canary.70b8ac16e.0","@material/feature-targeting":"15.0.0-canary.70b8ac16e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.70b8ac16e.0_1664318753939_0.7295488932862937","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/notched-outline","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.c20d74405.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a949e9f7bd1aa8a280cd389b359f90ca773b4337","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.c20d74405.0.tgz","fileCount":33,"integrity":"sha512-K861hz8yiMIcq61ba2JCDOq7y5neD69m2J0SX71Og2Izeav/Z9plBWhNyhbhXTswtXdne19RZtVephMJy75x3w==","signatures":[{"sig":"MEYCIQDAPqRMpkh1LPemBXm77fdOQH4LhjiswZrlpzHljhUEAQIhALoHvJdIJFfbXiyNF0AHh8fwfBVL5nNFW4nrcFaVHEN7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4f9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmAA//WuzYenY4QC2DD53PIFum7RKFi7jXzigTQRrnynF5xQcNzMWu\r\nNfwbBf+mt9szpUyOh1bjMBjJ9bTr8iTkxnxorvBxbDeNRfITNCg9vvLO7WVc\r\nQgI4MXOrcuLdvil3yE5brmASIfWYICtXzZZJM58JYp0AcYE9a/rgb84QTVVX\r\n7ILs75uWS/8Kn2mDqjnFCyhGPZCwyvoQliGfnyvEO3RFWUysF3T0RKEuVGXC\r\ngSHJDn4xjGxzn12HvUkBgX5Nu1X5fNpj56e/w8N/sEEdJ+1fJPV+ZTzSKnAD\r\nRhgewwKLztJ1HY5nFpBbyQSOMK26gbVCHpwN9eXxiJW7CA5R4XTmdNXwhKqa\r\nQFuXSZLhpkW/Us8u1Mt5A++oq01YgW4R7KzxstjusyYQO4b5HU9/LRKwrzM+\r\nb0fzlzKVcVk464NXXbHS+NnfZKNnvixpagjylCBbre0yyANzq0hAFFAw0iFc\r\nv02OiV72AzFhDIvKAl+NcVPvmQ04m9OfVNE7Sx56z3yveKRJBd+W4rDaLE0O\r\nJffNZFKZRbUJsD4Mg5ld1w99Vox/xrhFx98o/HKRjjMedpW3rat16Jv/dQyg\r\nse+30NeTx2H1BxRx3tVoREgQbmLeOKWQ/wXZ8DQk4p4K5FUpWBhbcLsp+wHS\r\nsAd+TMaWhiUg9RVIA8fgW/r+Te0FsNOkfso=\r\n=hR1r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7e1c6f9d7e3c90438265d23d710997462d087d78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c20d74405.0","@material/base":"15.0.0-canary.c20d74405.0","@material/shape":"15.0.0-canary.c20d74405.0","@material/theme":"15.0.0-canary.c20d74405.0","@material/floating-label":"15.0.0-canary.c20d74405.0","@material/feature-targeting":"15.0.0-canary.c20d74405.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.c20d74405.0_1664321533378_0.021785147534909344","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/notched-outline","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.f033fc8d1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2eb6ef18aa517469c665fed1d8e1649f4775979","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.f033fc8d1.0.tgz","fileCount":33,"integrity":"sha512-8RRh1oIg8PgFmL8HEsDVGb9eMfJnXSSttyfC79GWR+j3oP4lC74D3RjCkK4EpJci7HMXv/T7wm8910hMnrHE7A==","signatures":[{"sig":"MEUCIAdoI5zfuPI4bvl9aijKDkkOkHNhoLSpkk7Tv9nyEnsqAiEAtjwcAMki9IgwtzFTDoy4fOhhaveM7Vs0fBaYig4znL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM43zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKAA/+LDFpj+laHE59KLGHM0UNH3t4hmIE7V4Ht+h3GsM/vNJeLnSy\r\nDh/PZydgH8sd0KGm/Mnr52JI35UXxPVk88CzWcUKtXJam4qmu48JRA0b4c91\r\n3kvebjygKNsvoVbwf15XuLlDmra5WGCJjtz7rEBeAWERM8Tgvwb6RgzF1hNA\r\nGBknM5hUa6G4glVttVNGmv66ygDMNtlToD4TGgBj1xpYzuJo41WhVTM5txhQ\r\nFiGbuoVqGJiZN7/R0a6xFrdQgt3is4PutBdhCOkknCgvVjD81cKRRPd9HsSh\r\nOrq2ppA3Ez7iACMH1KtpSfk6zTU1XbZQivabt0QUsDoPQ5f/Vsu/HvNbp1Yt\r\nTWjcONYAUQfAOScGIenLoAs+ZdtaWPUpA+ZeXdLPW0q9MFA50EzFgQEmzIml\r\nrpDFjGbq+ht2cZcg4og/3Zwbm5cwQIfE9Wd0klLa8tAvQMreiUTG9cx9PN5q\r\nUlvKgXm+nOMsxu9dAC3rIxYKDqf9UGaPDIJHGSgIN30YMtJxyvUiiH8Ar2bB\r\ns6PkX+wWh67kFL/ktA7oWjQYRKera8V//ogdomjZf0BQmm9TTmOsJCOBjoFP\r\nN8DJ0abJkW51MFL5P9SEYGiqYqt3bi2bj2tmBOVjwXf1nIiNsxyNd4iyeal4\r\ngkRAIaw0BWHQdnmN7YlPPUxGqaXxNoto9tU=\r\n=HotP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a658683d647364520f9de8a2d51f15913b5ffb78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f033fc8d1.0","@material/base":"15.0.0-canary.f033fc8d1.0","@material/shape":"15.0.0-canary.f033fc8d1.0","@material/theme":"15.0.0-canary.f033fc8d1.0","@material/floating-label":"15.0.0-canary.f033fc8d1.0","@material/feature-targeting":"15.0.0-canary.f033fc8d1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.f033fc8d1.0_1664323058931_0.9911194949153419","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/notched-outline","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.8d7ae912a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b79f11eb26b60695f60dcd717dd178a98e73e25","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.8d7ae912a.0.tgz","fileCount":33,"integrity":"sha512-+IDkjBbwdhQIOjAwdTG3kVXWaL8e0FZ49crP6NUfqAyuxdZ4tkm2pcIM7pCSmqe+ngMCvunVVlQScGEVsoFh/Q==","signatures":[{"sig":"MEUCIQDBpUzDnN1Vozeef3HpjnCvjUUT+NwtiWHFWXq0J+MpugIgM8O9KCJAnhQ/fkeIsXahe/vTpu9oE8VNMMdqJo7rkE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/5SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqA8RAAkYx3GkQ+i98AwgaPw+klLX87bmcYy5c/4096GIna7UdvllmA\r\ntogaq4xwLGmnWev8ma+iuieoUycu5kw+w795pBCE3tSq4Nf3p+t2TXDA3/2W\r\nUs82ISI+wKlJSZVf8lfqr0cK25712Za+jHpHIWZniVO18o0TB15lGAuO/A+V\r\n/89Br6tosjcv7zVctqdgk3xD44opOpEh3WzryFSCkPfRJByg/ETET07avaW9\r\nRmD20wYrtRhRGfcrEmVBBQw+lvUQ5LfnG9CeMXrcHdrJnNkp6i9dR0U4Ao8U\r\nCDafMIRFj1FMQGd73PZC8jJJxo1tBfKxRbxRbC8TBKGcES9kJt92joRVaSGO\r\nCfR/nkLdVmLYvMLOc2VPcsnU2mI7Fwr1x2ndynALqwZvcAQ2ypSs4dI+fe1w\r\nXeYE/J26TJ8LryBwlfAuzQLVGDoHNp+gMCsGH4X7vj/Tez7LIw4kwcymGcPx\r\nagarAGTfO6j92rt/URVRe0MdXEnEzCyIfLrING0xW5QcfmHifb6tThkb4SnK\r\nDhYyRRdnaQzwk+odYAF5+lZMp0S0hwACjdkfvemQEEakOzvt8FJ2woHqbwVi\r\nvov7WmHIzOPqh1i/40P5DBGH7lcbSmTA6IpLzPbQMNIyZAFKBU8jSHOy1TSg\r\nRQSM4BVQ5jFPYKgwIQmoVajvH2rsyA2io/k=\r\n=3e8r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"26b2ab57ab7cb3eeceab31102ed1b6cb133f4cc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8d7ae912a.0","@material/base":"15.0.0-canary.8d7ae912a.0","@material/shape":"15.0.0-canary.8d7ae912a.0","@material/theme":"15.0.0-canary.8d7ae912a.0","@material/floating-label":"15.0.0-canary.8d7ae912a.0","@material/feature-targeting":"15.0.0-canary.8d7ae912a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.8d7ae912a.0_1664351826152_0.4366200494932151","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/notched-outline","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.db414b864.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed96b2b7cbcad37d206e21cb4ae462f7ba374933","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.db414b864.0.tgz","fileCount":33,"integrity":"sha512-vLTh1U+zDVVjX4OuzedroOLA7SNQsz03zuNpZkPzfgaxMlcqXG7+lsE8zbuHGQWSVB5rZOs80NZxmPb2xIOjdA==","signatures":[{"sig":"MEUCIQDwQdEAMhdb89YYrw1VMCIfMFWye3KsavyAeV53UxnRLAIgBkofam8wp0E1/W/2VERKBkk1MZo2XFlaceRmZIyx3gQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF/5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqdjg//WFyb6nZF7ZEXPpXTWzlVe/U3TdyQoJJslKHEMTHU2vCXJ8uQ\r\nCgsc1bvphMg3p3774nDV7HY6d1OzUVXG7AaLSn3cy3Ra9s6Dq7n7bvm44Y4M\r\ndD/TvMRfCY2Lx04HH87QA6v0HgFn6Yf4tNvLcZ6fGZEu53+6mI0o9/53bHQR\r\nLGQ/k36ZD1pQCDBZwanPgKOXaHTH5tL9gvjleoUz6fXLYMF3DqKDTnG+JaT/\r\nDV48kdDHi17bxdFeszIsUHVj4CFPZd4ImS5DiBrdUUaZpqp/Ue+vavDpNynj\r\nGYfp3YKPYLSEII4FUSM5uckqmDCd0B4fQ3Mw0R6LQ37OQMoOV1AHJSdRizAY\r\n2NJqUTfYgv3yoK825GWh/IgR6sgD6nmmnrAhTXMkGmJWwZ54U8ziCIPbhQbr\r\nE2/k+WD3rDt2HpM4/lnS0yycpfhzpRgHd/RHSjsunbuvyaPvDqa1t/fHfezZ\r\nK+6rTfixmIkZJZuPKhCvSUur0BrCn7gyHDdVNNUaLyKfcL1MVF2Q8Et46InG\r\nd4/MZF99zBPUoCGV+/52RRoz1A68CI9SO7KXyj9+WGLGDarsHKfOYzFkEqEO\r\n41bxSr1QtH/WB/dtb4rGI9Dla8UoXvLCUn7CyWn45FdWfTtAyrraYw/Hpe0D\r\nxvyTCeynGazQrs4QW5jAYr9vng3vtKePZ/k=\r\n=9Bry\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7601f089a2e7599728805effc4e9bdee40008aa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.db414b864.0","@material/base":"15.0.0-canary.db414b864.0","@material/shape":"15.0.0-canary.db414b864.0","@material/theme":"15.0.0-canary.db414b864.0","@material/floating-label":"15.0.0-canary.db414b864.0","@material/feature-targeting":"15.0.0-canary.db414b864.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.db414b864.0_1664376824902_0.29970608398721943","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/notched-outline","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.28cc6791f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34039be2e4abbcd2f42f812a7ea87c81aa6616da","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.28cc6791f.0.tgz","fileCount":33,"integrity":"sha512-XVf5B5rnibC+9AZ052oUt51gKSk453W0YzaSRjvfZVxl8gnTtv9ENI8UyQHewK/nuARuOdxRmoFGzAHfGkoP9A==","signatures":[{"sig":"MEUCIQDw7q7QcSd38UuX5Oll+A0LcX/S9Ino3XUdcIrN+fZHxQIgT7hQg9ioBAtDC7EshfxtuHm0Abqi20J8JP25bBxXXmA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI1oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBrA//eckhqIU/o45B2wXknSY39z0n3lU76pIdcY4RzT45ZqBaNfwl\r\najUZFfudv2azq8epncgRj7QB+BYk7BmHyeh4aC++N/3CAibEr4i9sImSp+Av\r\n4af8I7e3UcXA0YOhGcj7JLr0y9Et4ijPEFtW3mTzQygJKGZnpEHo2v3hnxb2\r\nS2ulZkZerUgFRGk8LRLrkdIluIS1mCz7mJEncjrvdGaaeUpJpEuHLDxuhR5e\r\nwdrhOoQvClqlUhHP5W+ECRNhMk65RBCnC3j/hm2uFHnlFhKVq0/tewdTX1oo\r\niYE45sxcyObv1DqXxDBL7jXlkurCi7Y1reFrmO+uaE33rpfJj2BP6SM0Q0gK\r\n8L9QVmsPQ66aGF92ZGKgi1x03UuUInr4Nh60EVVbq7gL33G9OoQSKBlFm+gd\r\nswEEau0clR5msd/3nyJL9tBwncsBv1aNNYeEJR92pQkhiUdQZqq9J75YKCnT\r\n0yoPREmOue7OMZG/ORAwBrpcAvDvPuD5U80C2te6VrkZ330PBnQtvweDXNsD\r\nunyb4XqwvAi+3vVQj1/zilv3aF4lTqsBR2bO+TtPALjNtYKk6NFzBv+D+lOd\r\nDotJEwTQXd5KCLJEJ6PQNfRbcZIGlkkKCRgg5Gybw+Kov5i/CZvjtKTUxW3T\r\ncjr8UP4DKf1KmvmsmseN8SZl8s05oTWYjIE=\r\n=/F3R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d2dfa219437727922f4cce877090f9afdd87edc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.28cc6791f.0","@material/base":"15.0.0-canary.28cc6791f.0","@material/shape":"15.0.0-canary.28cc6791f.0","@material/theme":"15.0.0-canary.28cc6791f.0","@material/floating-label":"15.0.0-canary.28cc6791f.0","@material/feature-targeting":"15.0.0-canary.28cc6791f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.28cc6791f.0_1664388456046_0.08395179065724867","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a515a2d18.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24e7d2a60535bffdd8a6aa9b068280ed15bb7901","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a515a2d18.0.tgz","fileCount":33,"integrity":"sha512-QcHzKy51kfRf3Xdhgd0usPXhVzax9BAB/W4SQFUIdA56QHWEC8WW6Cz6HHJhGD0SLYZXbuUG20o0I7pxXhnzyQ==","signatures":[{"sig":"MEUCIQD8p6RP91iPRNvnQDE5bTDutZi9xrTd6b99aamSC2VpZAIgE5trW0x5VTpNdt4LuCdmqnS1rRRNuR9TdDcmgz4j8KU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJjwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCiA/+NrzTOD53nge975k0QdgyNcfPkNx6Q7ghVKrtO8GPe4gzUDhA\r\n3lkqe+sKcxlQJRgMHPY4z8huq2lslKu5K0F9orXK/zJtsOuqW4pTdWqKaVMC\r\n4JW5ttGD+wP1xCkAWoahH7uDoSxarV5EbeVVyG+76sZbgU1zX6KMTvfXDtwm\r\nTgt/yN0CjdCP9015G9pIjrzqskbgeieieEGz0QLY3viRfwInnQzdmfmaX7Eu\r\n9gDX3a6cFNKfGuigSgPIHR9pP9McYVJt1sQTOHijZayP9HbweOlwhXHJKFV+\r\noqYUIZE7QNQQbmX2cbzcifrHace6PCizXQIDya/h25dUf0y01RSLA9GjDaU7\r\nmrCp1YgK+mnvkiqM1PXsot83RS+39XetByXiaxuV15otWAPAhYhBsh2SNgY8\r\nz09UzcdSmhUanUb7Uu9o0ynpZFHx+w+Fi8fKPdqum2ezCvt8lItGaRmVbeuA\r\nMK8OFXLRvDHaDFKe/KTVtAvOFirpfb8JF9kC2l8HjdMETmyNOizDApyjoC7n\r\nq/R916cmXB5sUAc7P8xAhg3ApuHCr88P3L9hY4vazJcc7cPNDFiL7CjifSzn\r\nRkZ1jVxvAXNdm/aYvwwQ1t5m7vwE6ovozMhnSpPTamovEnbwxVaoqcBmCZdD\r\nfXS1eWCoa4irGRwGs1ZsLlUCbn+QlOLQkY4=\r\n=x4vb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b634251c1f816bc66bc81c76758fd339ec40a76b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a515a2d18.0","@material/base":"15.0.0-canary.a515a2d18.0","@material/shape":"15.0.0-canary.a515a2d18.0","@material/theme":"15.0.0-canary.a515a2d18.0","@material/floating-label":"15.0.0-canary.a515a2d18.0","@material/feature-targeting":"15.0.0-canary.a515a2d18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a515a2d18.0_1664391407906_0.7374691672277944","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/notched-outline","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.ce9523167.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3675fed99ea9c4f7056fe401799b66618a24c52","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.ce9523167.0.tgz","fileCount":33,"integrity":"sha512-CgkJfBfvnyLzoqdBu4diLi7goO/gDn0qKtxYjZWfiDIE9hSllp0Yn4k6GlRuSzvUWbZHviAYh1JClglErPKfqw==","signatures":[{"sig":"MEQCIAkMwEAnQ0a2nxeee6i/9Wf1IkTj5ja67WUW6hQhmIvlAiBEYT1HLOPe9j7fDZCWZVNluERErSDqhCT5cdY2Suq15A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgCyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrwfg//er5NpfMQ0Js2t2eDtJD/9VlakzQ0Wdsw4YaVlpoqTVfZAS/h\r\nlyQQfPjFTwWza5ViKPYMC/Vdnz9vT5fQvAy1YH9XRW8TOBoKgrrDoukJ9rY3\r\nG7RkCDm9PF/V0aoJT4jhf3YyfhO7pCFsOGQioY25klYJf31Cc9wYrLFQzd08\r\n0HAi7O6NjIlmxxC0oJBqva2wEEa925sRlyICJYjpAmHc8TcPwlSULY45M0Oq\r\n2QlnIChyZzJl9uPzd807HMxB80Hq+tx8M5FdyFSY5DtaEKMJDqollfxvMO9U\r\n16oT3rr5xq0TyWnKVYEUwYBGQA6mXs4Eg48LfI2eaBRlb02HprqcsHV80yi1\r\nimFCPGBUy0kiNqe7fnTKML3QPX7g67zWHMkt2/rBXtNpVQUiIEi7428bAItJ\r\ntrVm2eZs9LNmL3HyhPrD/o6h228xC19Hm4GZmdttDdEnQbqX6W0U1RQHBzLn\r\nypKXC9ydH6dvkKd4qegV3xK1A9MVl2kqnMeVgQX3KCn30K4qBzdIogQuKEgr\r\nauqPGap0QUirNjQBrJ0c/+QOZGzpQRJwcQLthUdB+MydIznsS2S+WQEv5kVf\r\nD+v6smLfBN3UUyTZSYHzSv1YFLULDGgRMGzHHyvDaTOUXEOHJsPF4g+QPN9J\r\nio+tXCGGcJRbDTgsafIX4WZyHvbKCwedSkg=\r\n=oYYb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8aac5a80fa36dceacc7b3a6e2474218f9092a107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ce9523167.0","@material/base":"15.0.0-canary.ce9523167.0","@material/shape":"15.0.0-canary.ce9523167.0","@material/theme":"15.0.0-canary.ce9523167.0","@material/floating-label":"15.0.0-canary.ce9523167.0","@material/feature-targeting":"15.0.0-canary.ce9523167.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.ce9523167.0_1664483505953_0.11970994857640238","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b2310f7dc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67e954eb3771053a924199b9142f0e0e771c4d27","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b2310f7dc.0.tgz","fileCount":33,"integrity":"sha512-xcBy4jX27A72h9bN5K6+PWcYPTVBGD3BCGJ+zyzY6jRV1OqnfzB+3ffZ2LU/CiPqBCizJv7gZOMBX0mtVeQuKQ==","signatures":[{"sig":"MEUCIQDcnnBnP4nCQh2upFQFSvGKU6duHbK9rRwcuuTeYZuvIAIgcSWsCT3flJBSh0KeYY616Xe7VfV274z3RqjuHFMT7Ns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjT4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5Og//ROAlSCf71A1Kr3/W90QlkLvB76ptNfPuKR+CMKAUxU60iLLR\r\njIZZwxOFc4X1jdahTnkjgWLgzlU4OdeDRlNPurKh2kAGZCq5FpqQizFeg7pV\r\nGmm3N5QNpXdtArdDjvN84TmB/eqbM4ZHDT5XpZmdl8bC+MUAVCmSya8kZrKf\r\nrSS2E3u7olROCRwuw1lpoVwFnXyZBxtcQQ+RtwvoIWpmIWXCLsokydkWKQea\r\nBXwkR62k5GWvyACwM98wy0oo/s/jnHu5JQVabKbCkjkKuz7n46oo4UFYAQdd\r\n3lqFEP++jb3erQg9ldokUmHYFNubqvfjfqxV/FC0HJMCdQiHWgLyBawPIYvY\r\n/+4fdQfsH4DJ+4+tKjtn4E58IHiIDuXFwvoAdg2jW/eIfVluV1/OgKd5ZlWm\r\ncPMKk+nBWjYkcHq8Ys58FpXWPII7yWcIIVVWJoKzhMwrHrR+t4yuQslyKPb6\r\ne3w9S76PfKX8dz2NxvM3v3E4snOhwhsaqfd8ke/ei6rGBXuQFVM+kbXyyzwt\r\naFmeJ0+83Lg7pa7M/9KjD5D+niVBSK+CO/qeQsW/r1Xas5+IZRMDgDDDcDRS\r\neGVmWlXmVzL3/hruwqdVwGlRIlIo5ov80u5kvUtyAwLRdbHgLN5F11kJAbmu\r\nYEDBSAYFRfzaH1y9OUYSPY+SkK4FbttqmDI=\r\n=+DjB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1b1f8d124dcef049ff4f3730b930eadfe1e2a58f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b2310f7dc.0","@material/base":"15.0.0-canary.b2310f7dc.0","@material/shape":"15.0.0-canary.b2310f7dc.0","@material/theme":"15.0.0-canary.b2310f7dc.0","@material/floating-label":"15.0.0-canary.b2310f7dc.0","@material/feature-targeting":"15.0.0-canary.b2310f7dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b2310f7dc.0_1664496888013_0.4007178448046689","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a44241e54.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1260447367f6a8da63a673606d4e3c034ef936a9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a44241e54.0.tgz","fileCount":33,"integrity":"sha512-nSecxl6emQxW3Zn6fHVgAAwZ+HtOjhnfc3wfr6NkKviDpBOM9yragkVCcDO2s9NMLdnE5nLp5jOSpPJ04+abVg==","signatures":[{"sig":"MEYCIQDdN3VFBqqYoSHq7wvMmKJ2A+L7GlczrJL/QMPExB7vdwIhAP9mzQYGA6mlc348ISc0XO2nHvUnq7pEgtA0wcELtJVl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqcsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpz1Q//XywOKMTAyhRJ1FsJBdV5ZrxG7BWXj8K+Al/jKR3S4J6iCN+u\r\nVqzvSvNnb57watU4XjXIs9GPGdKmvyO3jPccf2J/mwPIw3gSczl/OLG4GrP5\r\nrBllNbKtqhir8qfRyIPlfpAgtKkgOmbplr4R0mF6IRgMfCY9V8INrq3ukgVd\r\nI8d4ZjML6m1+lEmW2Je47HRlQmj5hYJe5d8T5fKU5EShBTa2JccOuZa8j92x\r\n5OZuPeHdKGEMr2W/A79+U4yprR34td48hjUSfnbEbFig1vjDgqZR5u5gn8Yz\r\njq8FIhyn67Y1z8UDwqID9Fz4Bi2a0WYKewdsAs0gGkbXVX8MORfaAO/F9DQv\r\namTxXXlljD5EhIqoz67d+WFaD8oy58NGj+d9dQq0FUsW4FYYUaF9RXx4bcHW\r\nRQMaOmTxldGTzEpWY11UPljeXFwDa5QfoM1yJryzZXwobd8ZoXnMoDXLufH1\r\nG9rfnZCbJWtxpRed2OfglfPT6X+rfd73DyGNV593C4OhVerim54prmvzOStx\r\nVNwc7t/PCARHeHoDT6+3oVe67lQyYTkrSQJc4fMz+vC9qYK9pu5BGRyjkg8c\r\n7G6sJCI5sfGcw8b48CoPuJUF5X3XxtflMpEVYrP//Jh2wLsDtwC1Ksw6rGYR\r\nwOO7aAWDlwMczCucdaLaaPSEgCzj+/a8aDI=\r\n=QaUO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2a5fa6460bb58b3b2866631eacb27411a12f8d21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a44241e54.0","@material/base":"15.0.0-canary.a44241e54.0","@material/shape":"15.0.0-canary.a44241e54.0","@material/theme":"15.0.0-canary.a44241e54.0","@material/floating-label":"15.0.0-canary.a44241e54.0","@material/feature-targeting":"15.0.0-canary.a44241e54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a44241e54.0_1664526124125_0.6413399419881434","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/notched-outline","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.0ce81e115.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e54be3f5d44e97fcf909421b900196b8d62554b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.0ce81e115.0.tgz","fileCount":33,"integrity":"sha512-GB0B2kc0Fsmy1RY36VuU4fc+2JXvDRljDqQGyniDLs4I3fD7ve9z4XtB7dHUm9gnBf7eD845wWvTaYOfs81KeA==","signatures":[{"sig":"MEUCIQDB23ms1lJ4MeFX7jLaKmq06tKY2nS+7/1nK6mx8i4EqAIgDDm5iMf8zpt03J6M5GEALn7YsEkyaB75/SBg5aw/4rE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzMDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVmg//QgZlRHYNI09/cCyRx6gmeK8vPauEBt7PhOES8jq15Abrmsyl\r\nk/YqfOt+nM5V8Kqxl416y6dpRlIsd9/YmZWo8h02izpQi4jRJ0B5ngY2pkxT\r\na+KC8BKt0hhnNLyL8jHtk46J59yK7uAtTvvsHbSAdzUqXoyfMr7AaWWx34nX\r\nx8hu616USxQThdo1+9S1dNuaCtBCqeGB5t4lkl68JsUnOsmUW6M+FRK817tH\r\nj1oWjl2oZocuZ+StXdiLLVSNJwIRrZcHqWuKzP8iImAxr1teOXgdN6uSd8JY\r\nLQpEr0VRb/O8XIZFJv4uGgxL7N17qA6Eg7bReBywafqUecl1RA/2GHiHCNa2\r\neKP/lGjyGjlzb+QQwatTbuLBNVIHbHCmHrR5Rdu0zHelQqt9vxjWnmmUrRfC\r\nFuRZQowduz62RrUYnqq0OMy1Mkn6PvyiGGFWmZSc8NDgztMf29KnkwzPHIU2\r\n+TIoHSH0sHDmjfhgKKvTfO7tlxBt2+hIiqcExwnPywtWgdJSUa6QCMU99LWJ\r\nYUF8EyIiiUhzhrtt9udAtND3LVS4vW2bDm5d4W+a+VDkLtHfKIJQCuESeEvs\r\nJZdaVsN8160OqmYZU2FZRalzZizodHDaPql9RIqUaoPDgwETrleOnxJXY/bN\r\nEl9AbS632/CPEvyiXYG4sDE3eBQ9w46yd4M=\r\n=S9+Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d690b44f4e157e829199ea749861c3b827d46dff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0ce81e115.0","@material/base":"15.0.0-canary.0ce81e115.0","@material/shape":"15.0.0-canary.0ce81e115.0","@material/theme":"15.0.0-canary.0ce81e115.0","@material/floating-label":"15.0.0-canary.0ce81e115.0","@material/feature-targeting":"15.0.0-canary.0ce81e115.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.0ce81e115.0_1664561922777_0.3903402419279607","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/notched-outline","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.3cc30f6ad.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71d8887a89c8f95c3d1b477cf05ef13b25d926ae","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":33,"integrity":"sha512-u/4MmQFROLU62x1wp2oD4hHYkhXWFNxzkbMDKW+G8Kx6YesY6Ae5sC7gHfQlaFmHr5rD7AHz1fvuOlpoecyoxA==","signatures":[{"sig":"MEYCIQCiEeGeK2YqhiPZYmtPGh+QalABRVq/vUtgh/QnJ+EZsAIhAP5EX5vBPpHvi23npJ3sIUAXS+r6aL6v5N0QwMxw5mXO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGs+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3OQ//cwqmm2jZfll5/wjgVFJfkDhr7bkj4g+O15Muo76pjvnEKr/F\r\nb8o1soje8PF5R3ucFlCzofeMXh9LGyQxna4dK3GP9TOU8Nj4a2AGaQCAbd9N\r\nQyB4Nmk+7L8zLyfN/vf+HqLrDOtvJyF5J7+AlpvAaKoMDy2dntBk6PCM4E+E\r\naWRDfahqtk+kAk3z7JkAjmLEMHxwSw0HhqDwXjmWy+mJeFArx/S5E18kLCmY\r\nI8cGDwf+M7g62+wXhl0dzSB+Ew9E/hueNr1RPOsQRmYersa7AnnML9XUszHR\r\nwofr/gYciSMAp740XcTPHyxW+PU+F+YVK9XilGaI8zveUogdRgs43/hlwS0p\r\ntXszSjlQARPsc3BFhEZf4WYqKrBANmtMe0zsKybkxZHvkLGy2kMrNOxBEp4f\r\nqxUaZqjQLNEkAMjnpvYCVDk9IK4oGZMimbABXodQwMS9H7x41sHU3Bw2oNj1\r\n05mOJKbZDaC4AoEutTeIyH0LQ4heayighZ6Le044VVwtmvleWmGFjg2CWrnA\r\nzEFkWlT2DGsyw6jxhMsjKkobUFUrp0hNdYqjrAdJK4aFtp6ub/ZslqCAJIKR\r\nivxfuZ1KZ8zxa6rHoej66YHhwTVdGtALAgoXWLBDM/9DYOyWmnDeBe+ZgIGE\r\nQgfUtJu2drh1k+Iy7Ofp8i/S6AFut6AJbeI=\r\n=9xiG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"78d02265193749df2eae507da620e7571c09da12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3cc30f6ad.0","@material/base":"15.0.0-canary.3cc30f6ad.0","@material/shape":"15.0.0-canary.3cc30f6ad.0","@material/theme":"15.0.0-canary.3cc30f6ad.0","@material/floating-label":"15.0.0-canary.3cc30f6ad.0","@material/feature-targeting":"15.0.0-canary.3cc30f6ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.3cc30f6ad.0_1664903997741_0.9209396369513143","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/notched-outline","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.d9cf98e60.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29603689050e4fed73b50205323af90aa50d4d2d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.d9cf98e60.0.tgz","fileCount":33,"integrity":"sha512-kp6BOCQ5omGFsD/0yjwy6eYm+GnXltZSoUy9iG7qb1fY7Q1Zb035sux9DCSuN8yx7uzRjVuDXcPHpEDao+2hvg==","signatures":[{"sig":"MEQCIHVdK9P4LwfTeK95SrHFoUDC1OmSa8quY3Ytg7gdgYodAiA2hcbTcW4+jQ8KOW7ei/CV4IXaPc2LZ8PsrrgPb6Q3gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIPPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqC8A//Y8QUbVJJv9POZbEzaZ5hnRDgUjLqlelw9JtD/DaTkIFE5SEh\r\nbPjaNH8w8z/hrLW7fLnilqDe4wIsQ4qNwe3V/q76hCVnvDPnvMuYWBnQSWZ9\r\naIrwA86gmOwbBTaYOJeYzNPBfutsoJLJg5VI81hkiFiIPWby5J6nqXU57ZGm\r\nwyshPirG6n97C/e07s2V0j/N36mwZ5vr6RW+nZmUb48PoVF4+cse1li4fPCk\r\nVH42Jn332Za0PAdSRNeEhZyYGJXQELX4W21fpqWRHvAxQT+YSb8+sk4cgEyj\r\n8QVJXHv9CCturo7PIzfO9aRlAGvJLTm0kdwQWWyUfRXEwm4XDwcU6W+07KUu\r\nIQc8jcGskuRUZT7AaJcHjwdI9QBrebMll3JwIDC3xC/3+djpEh+hDMtWT1od\r\njPGlU1T0JXws0Tgw4c6If1cweYz703/Z5AW5gN3rN+F+8KsXbUaWjFIQVWY9\r\nsIH21aUR9gZJSnlz/kFSji72BCvxd7JECMI5KhuT+S+KEomo5NXLNi0H52d9\r\ni3PvQMVZ8bBFplaVKTtu0QE9yumM6p5bpD8iFcTxwkCnX3KLbb6w0VPvh7nI\r\nwmBRoLeKnHvexrQtc3cHYtZ3NDlpT8lHJfrDIpj5aephVub1TgF/CxEQWUZY\r\nIMBEf8E4vRMfcjg1+KSLsD6DVS5j4uqIx4s=\r\n=lnkd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"554e3182e6804b0bbc262ea0e730d556747b7382","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d9cf98e60.0","@material/base":"15.0.0-canary.d9cf98e60.0","@material/shape":"15.0.0-canary.d9cf98e60.0","@material/theme":"15.0.0-canary.d9cf98e60.0","@material/floating-label":"15.0.0-canary.d9cf98e60.0","@material/feature-targeting":"15.0.0-canary.d9cf98e60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.d9cf98e60.0_1664910286823_0.2616128126245769","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/notched-outline","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.d71935c8b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7589365363ef62de437a3c3a602bbdec876f7bf7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.d71935c8b.0.tgz","fileCount":33,"integrity":"sha512-i5BC/KHvi7W+YkJC/iT56dPPUJ25OU7bB+yxuh22OcFgtUJU77hwVQSfCLNyw9qWUfeDXpwzN5Zv0RhehL4Qsw==","signatures":[{"sig":"MEUCIGUkHZ8NgZ4+Ldw90rUJJ5vB0ywyNqkWbgqbDtkIuwAoAiEA+lmnnMS2/40khmtnEBQdLUon3fLSp1LFTstmSexLHOk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo66ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqW3Q//R5NALqRjP8Q8gI5mIcarI6ORFeYtq14G+ZWKiLi/7DA2AHyJ\r\nnvmY7nZSwNl0y5/N59C0ymSzo/2X0LnXQ6Wy7pgxs025nVa5kvJteIxMAgd7\r\n94u9/MOs7G4Mc7wDVAF044d48bsQxwBAxIc7Ic9hUqPw/4ABPOnjC/PcwesQ\r\nZK8vyiJU8HwcqUAAP991SMGwpAjBM13GUWDewD2glx0AvlfOo84Vr9pUZanN\r\n5d9F0yYOvYWNdBly3AhvkM/5keo8XOsZdfiDE7ynnw8Z5XQkYYuR2zJbw9Lm\r\ntvMVhzAJgfOLDX7FIsrX0M5UGEcwhoTmS3HI8ke4+Sc6D+MrIFGEmlrQKiet\r\nTv9r2H9Kj+aGtUVFk+AZhVSYMnapWpSq1KHfA8d2iQ1Sa9nV7cZc6f8bfVy0\r\n5z2DVzKTi5FIPDmAmKXSVsQOeNOFLFZHS58ujpggMBwWb0vESmwKB1Ge1864\r\nWcDrk7s5k4LGb+Z4r8Y+NRRu4Sp4ThbykynWuQF4V7X3fkusrmCRg4Zt6LZW\r\npKa/7I6/ht4A9ovg/IB/jphMEQ2Gpp7mG6rPSk75byCcJtP3tooIaq/0fVkz\r\ndB5WKz0y4pk2C4+EHSA7UN13OdnmYxyL1tlDnx1vizzEo1yAl8+APRwlvuc0\r\nwnKq44D+HSlQj8DYBr+RziJd8776CSIIpQQ=\r\n=4wUF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0e9f697d8ab3c0b93969f61d22a2b06760934fa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d71935c8b.0","@material/base":"15.0.0-canary.d71935c8b.0","@material/shape":"15.0.0-canary.d71935c8b.0","@material/theme":"15.0.0-canary.d71935c8b.0","@material/floating-label":"15.0.0-canary.d71935c8b.0","@material/feature-targeting":"15.0.0-canary.d71935c8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.d71935c8b.0_1665044154094_0.9627410190142085","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/notched-outline","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.49c56a25d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c6f0a83ef2d0425ec2a3e6fbeb63f73d76c883a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.49c56a25d.0.tgz","fileCount":33,"integrity":"sha512-zj0lFbE4vm3YTvJxKDm6N6VVyFjY+Wwwcr70OnShscyax8q+UyNOmaqE+KGHOcu14wv8L/3EoIdrpSc5717kWA==","signatures":[{"sig":"MEYCIQC+PwoUbKnDx9ZxY3v7aIGqKGxYjqhK6NQj31GlVurzEgIhAM8ojugI+e8cxqZc7wa/N2N6J1I6l9ooziDeEJImeutE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyPJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpl4A/+LUBOcVidh4FqSjrBKL1WddRzb8sLorKQOVHoJaDmZjpn53S5\r\nCAuZj10b2AUVnLT8XTzr9x2K2HwARo1rM8w89uetGOrIweNpSBSJMjWiHmPb\r\n27HIx48ApsxdNUBX8aOlBABeZAGoFZ8c2Elx3Ps76duIufI+WpyslrpDzdat\r\nHsQLFdKIB1nF2CPV9PCFoRJxTzzttxJpUi6U3Nxyabx2CEcXibEEO6c32f3I\r\ns3f2T9L0FEMpG4usBsZX8+jySzTFouDQkBGuu+wQDEUatKhnpoWUJbad0HuN\r\noWt1l09OJVNvHm6IWruazlk3jTNyLA23yEpUJZeGWwKWR3qCSUQ6Fod5RNH3\r\nPbTJeL5MLhjAYH+sV2cWaAjrZZjTwv1xh3+zAgncJFrzu5Zyoh703a13xs7x\r\nbPn4O2E4bx2+77Nvfunl3ZmZnqqGvH1vJUYgB5AoSODe4XCuR1bpQ3QeJ8Sf\r\n0Yt+U6cIG90BrsppCietwSKj1FhNG8uw7IUX/uNyxLuz5nhw7MTn7P/QvRfh\r\nkxDN1zd77nDc0DAyY0RzlSA5guM1fBjjyoIylGZ6JD7V0PrY78QIS0UxfLyu\r\nLdz503dyGthd1p2A7UfJUlLigsCgrUsGLNp/ORGMJsWZeJ7qPCktsx8vm2Xe\r\nCZVSAjjBiMslxtLs0Nf7Y2SNeZjudLLqZKY=\r\n=DqE4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"46425b4f1ee71ec9e841d7ffacdce7cdc35e7b69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.49c56a25d.0","@material/base":"15.0.0-canary.49c56a25d.0","@material/shape":"15.0.0-canary.49c56a25d.0","@material/theme":"15.0.0-canary.49c56a25d.0","@material/floating-label":"15.0.0-canary.49c56a25d.0","@material/feature-targeting":"15.0.0-canary.49c56a25d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.49c56a25d.0_1665082312980_0.653184126799681","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/notched-outline","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.07acddef3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c4970da2cb34fd1f029fd7f3fd2c50e296aaf22","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.07acddef3.0.tgz","fileCount":33,"integrity":"sha512-1kAonO6uuiOtsRjGzKhuqtK9G7riPOSQcSjpZGEQzKsbXGB5InBeC9E7u8DUBuDEzWEAmjX9dpnoeM131y3ISQ==","signatures":[{"sig":"MEUCIQCykXbiW4bCJcCunXtfNoA5XiTtDIZDm286Mw0SGDuccAIgFVaSuiDh1ysw79xBojnvVKMS+zLT70J8VKlmchTTVBQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJwnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmot3A//Z5BhcD0yWjqTLZsbqy7Thy26B7kM3vG1cHRHoPmlvYlcOU8q\r\nfDtP7QM8H1XJEUcLFcLrJHWIRws4+hf16QRXDsIYLYjFtajuQqF6oBsk8va/\r\nMurCUhFGeCNV27L+8V9O0cuqwrpS80HvmsBf+mjQkp6vmzebcjhXPdpVWvWf\r\ncCHMdr4F6K5KeO7BJD5ujaKnti3WS5EfbJPWtY3TODuLPy0G7qCb1vmQ3YYl\r\nNghdvc9QhyBu1Qk4PtRLxqWd6a0k6dvi19YQFcM1wrt8+S94hYthbeY6Ec3w\r\ne5JBwO48bXm5cOEEVsdulZptzfsfzbKcLH8jfKRF9802Si5cCAcJEqGYesz4\r\n3U+90yFfCZM/StZJbtOtRP2cKy0XwQWsEH7t5KvEH8vkFQntQXiH3NiGZpxu\r\nt//CqSo9FWROBFLNDpK/KLJhdkHQFWwE4ehpmvqFTm3e4IxeWT0tbKQteDWD\r\nZf9cLbj+SLtBKlw5eykhfMgEqehraLWNdHPlhnkIG5finCnAMzgzB/rp+SYC\r\nTuexr9CrGu1evh7z7SRDzXGqU/4o+42cP2yVqq/vfXc5WhexBD0ryOJRFhzY\r\nYtcy96RlIKy/toF/3jJlYW6PGHqgaNGSuRxMKqWoGW6DRjS8b7gB1SGef1bc\r\nq6GUzCuevHpuXx0jhnZW6hU07JtNxZlgl3k=\r\n=XCLP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f61a6c26b4bd60354b690448809f9dfb7ea11564","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.07acddef3.0","@material/base":"15.0.0-canary.07acddef3.0","@material/shape":"15.0.0-canary.07acddef3.0","@material/theme":"15.0.0-canary.07acddef3.0","@material/floating-label":"15.0.0-canary.07acddef3.0","@material/feature-targeting":"15.0.0-canary.07acddef3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.07acddef3.0_1665178663405_0.1348203834172892","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/notched-outline","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.1c74eb2c0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97d757ba9d1d44094f3cb8183b1311f470e623cd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":33,"integrity":"sha512-crgNOIaXr+QysgpR9FAHf8o6RncePdntkU1NZVEpiD8Mz61aantFIZzQBqTFS5PMILumDbwBijoHyXU8CBs5iw==","signatures":[{"sig":"MEUCIQDTkmIHtOHmm/BUzDk2Mq1a4vd/Onh3YQf7icOpBGqSigIgGT6y8iU+9Gln3nDRmFYxfXqK5AABoeHAe/JqJ8k5bfA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKBpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlRA//UI7/G/NsdXdgX+RusV3f+MK72JuIw+KbW4bFYflgKFpfdVVI\r\nlkh+9XitULA0X5zb3/XA9suEvtnnFGAQruXjJ5qfHLEzC59eiOxnVONIdzdc\r\nMTJ7r6n4HoOc6L5PV0Z+q2qI79emNHae9lmLBzqO8mICCzoy2z/OFRXRtBBX\r\n3HKiHgQX1orO5sqNpqdRH6WGvczbiWdy13zH/30Yimus00iYjX1ofkQKrQPV\r\nhaon3pFa8A29L6XUrhihl1+iGH1mEWprGqIPbVQDRmec/hLIHu5LRLDglgIV\r\n3XlsT8+7oPCPnimtiQ6yOQdu+xpNkaPFW6gx9+9HSCO05sBNhkVRPADhlc1i\r\n+x7/oZEmllcJ4q28wxBw6AJBRLhcu6jB4T3skjhBHbMl8hyCcusjL0IB76yP\r\nTGj0hFycZybdEQy86ABlGOaMo6yZhz4b3nvOtumhfqaxYvCXdCu3vfHAXZX/\r\n8bRNjXEMfevHmrJeoDEgwtQDH6jL3SPWOQVl5oEkYbgR4+sW+QXidQwMdMKm\r\nSaZ4l9ECHo4aJ4sSQx0GoRHjNOxS4XKu/jG8N/o9YGvtnYrFIQR0v3uftEqe\r\nVKUtAJkRUi4J1shLH4D2acoqBoH0wqjuf02pM0UJxvHgnu9UEBs/8R8PZ+l8\r\nblp02+jjVv071lBW8G/GP04e0qSyB3TDyjs=\r\n=ZLY9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fa2e48f4e71714ca4a637a500ddf18f562031ba2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1c74eb2c0.0","@material/base":"15.0.0-canary.1c74eb2c0.0","@material/shape":"15.0.0-canary.1c74eb2c0.0","@material/theme":"15.0.0-canary.1c74eb2c0.0","@material/floating-label":"15.0.0-canary.1c74eb2c0.0","@material/feature-targeting":"15.0.0-canary.1c74eb2c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.1c74eb2c0.0_1665179752873_0.9595860783306378","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/notched-outline","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.dadfb713e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd2b90b74fdf4a05403e0999f7bdeaebd8d05346","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.dadfb713e.0.tgz","fileCount":33,"integrity":"sha512-5FZy6MRK1wHtx6fOVr3gubkxC0W4W/UIEMInl/a4FGDeQ9RNWHRaDxK2mxmJjhp6lV78QeSlt+74R/3QU8INog==","signatures":[{"sig":"MEQCIGNvXKNsiTlATLRWBZTCRGCjyKVchnAujw6heVmRKugPAiAYFo8kPj+Y7sJnH4EH7zluOQtl98LB4AKIL91aArLKHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQU0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmDg//TLx2pboXLJQ+F5rH1Q1LwR+tluhPTCpIryw8bHoDrNIRw9sl\r\nhLkIxmBm3Mpxr4T+ONr8vQTfzUpGBN2RdA6eF/9lsPkpuLfgyWEgFGPxB6Hd\r\n3M9lfjnsvXCKFs6R/8C4+N7le/3hZit+iJ2GJXB/UP6FIE7EVHvle+xzxgus\r\nuwodnmxg6Lto4R6BumaZDuuJd/LRtuQUCkfYHDCVltwHt3heJabRfekzHxXn\r\niFIckosHiGt6W9m2eTry18Zt6zxBqEc/YNsKejQP8bCOU4hiX6vP/36X3Wuv\r\nQuLEVh9JaSR02zlYPUOnjZotssB+jiex8NHD/phcj0mCOyKzLMVoEQ75k6vz\r\nYcOrYICQHPgRhb6ZYzLA3jDJIrGZLXMuF7eWFyhDLKwpVrlgr2NsQ9IueRbZ\r\ntvfVZx7xyoXUiykYpNj7hck7MtNyNhOR/8x/1bWR9f2O3hawIaA3aI3FZPhR\r\nevtxowBMOBqyIfG4dUKTRd+yh971V+BfpHnBGQxy4cL5rkL20QY/RIY3/hN4\r\nfJi5CFic7IRkUawIsIuvyWfw7CeFeJQvn3PUsZarWy6IzTIyiGlGGzJY1O2T\r\nzh6xN3nXsdeflNWaYELcGmwG6MX+wGQ5G7Dgb+1bhXbW6d/15b4ugLRURPUb\r\nCtXi50HKXsKvLsm5LKBchUoFXkmlZ4HoPgs=\r\n=vCy5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dc577772f45028a4c4dca1d7c8ca8dfcf636e763","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.dadfb713e.0","@material/base":"15.0.0-canary.dadfb713e.0","@material/shape":"15.0.0-canary.dadfb713e.0","@material/theme":"15.0.0-canary.dadfb713e.0","@material/floating-label":"15.0.0-canary.dadfb713e.0","@material/feature-targeting":"15.0.0-canary.dadfb713e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.dadfb713e.0_1665205556506_0.6511727236482323","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/notched-outline","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.395f1ce61.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32a1cc040dce2833f544fb1b1d13cfd84540222d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.395f1ce61.0.tgz","fileCount":33,"integrity":"sha512-UuWRNAdA/tkPGrJxey6Uz6R7HidyFCze4i9Pf9ZlWR0KMmu0PDNypbOTJROKfcnhaILTsJVk+qvnTEKrJYMcPA==","signatures":[{"sig":"MEQCIDmRmp9FexRtFYQqQKZPZ+RB5urSc3Qi3C+081+QUHCvAiBZF4HDGm5Xs3/4U7GTvNFne5IZiDQUcqRGkdo+VPQ80g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQWtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAMg/+OFFy/ovVCe1kr7WE5IEWh05F9tbwywWEx6WuS8Fx0MtuuXeK\r\nRUh3AAysIud/14rdJwJRanGzmP8SXwflG+D2QZYv8zN/tfI50JkdbU6/lH+U\r\nLnVinKsqmF8WSiMiDCKEx1py//EjEqD1jzUIfoPYChEyftG6oo0e/HU/Oise\r\nfq6SlPJ/KxaB3WManczWRAauzKBpPNyiDIaCueyLAqwq2yzxHh4AMh1TVE3k\r\nVoD1OfkTnFPrN2vTMhobCmVRpge2eWVJpxdkjFiTO8hXd7b2sCzcux67KVJc\r\nmTcpdg7mxyfYXiRx/VS3LDEM4XEsoRSauVB7G3a7U+QFeXB4u3bN0Lq3Geoz\r\n7vhJlMss0Ha4K/4BxTazjHcMYPU2dkSpepib/Pov0E26r/yACN07DyQ4g6hv\r\n990APW0IooO1QbmUnt0T/O9zTOilR1pBuQpEOK07kMikSmpkOs83ADUdCPa6\r\nHRwg62sARZR7LjB+ij4T8QN//tkzr21Er4f10Uokr+IvuO5kLsd2AqwJ2qIr\r\n0exLUP9qYJnlxfldZRD63c+ky5vfJrKQGQ2W/iyBhmQASxDDZhcZNEopxTif\r\nRv4Ck0ywqjtmy1VZV4rarihnQEAHRBSIwjTsHFkPZ9m6lKSfGJUntRW+NgYG\r\nFIF5yViBfz/h/u06hXGYhurWbBJULUuOQ9k=\r\n=eCs1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"15a2d954f8c5260da0e9b6f65b6f49df69764a95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.395f1ce61.0","@material/base":"15.0.0-canary.395f1ce61.0","@material/shape":"15.0.0-canary.395f1ce61.0","@material/theme":"15.0.0-canary.395f1ce61.0","@material/floating-label":"15.0.0-canary.395f1ce61.0","@material/feature-targeting":"15.0.0-canary.395f1ce61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.395f1ce61.0_1665205677600_0.1044751701810891","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/notched-outline","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.e741b5c82.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbeb9a746931ec71079e1a42254e57bcab6388df","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.e741b5c82.0.tgz","fileCount":33,"integrity":"sha512-C5tv6iEmylVOF3fbOB5KGaoAxbFC4DoLvWCoPWTDSgOVCGG64W/vcDHYb6paveVqhsnNn6vVO87I5vxkLhMGJg==","signatures":[{"sig":"MEUCIFe5fxGwrWkfCc0350iGZzj5Plrqe1vxUybRAHUslkG0AiEAzaLzVQnr+AGoke3iLzpk1M4ILSm+4Aeaz2X2km/S2oM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFiEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOag/9E6W9T0WWvlQx4HaMI8MB0gmBgnOSdShc3BcubOsZ1LybpTPX\r\nbSj/WzPo+OBXXC7t3qGwvm4qvoZwH59Q+bRmgzZuZ1VKslSqwYaPOgRTJTVo\r\nzoaTrLFngQQhcenQsnQFXhReNkY7jTeYTerCzZjkvKQbuZCwW/T8y9DHmdHk\r\nhIiTbaAXVg5E31UWk4NOFS/eprmzaQQqD5RSRf9j0NvbayU8at/nTMO+Htw5\r\nSe4qNjpytFQkMZWt5LJOaSWH8bVXGGspqaAyY5vbWDcNUqbPWGAualEFWdUe\r\nlG/FmcmLwUtEtFwEAsrmwEHPHu5X3swKXUBuybUB8i44eOiWAtuL5veGkMSV\r\nEB4WenXXfZaWNS+IWOG2JtjfdghUq4xgPNDtwYEKFsTDoLFlDkaEpxeF6TMo\r\nJjKy+EWIwNPscJVvornzFOJuLMm6twrRkFT8O0tCNTovyShSxS0xIyKMlKRj\r\nYTyAn7DJ/4FcaRd+juRDtUZYMjSsTamLNsRQoTv2ZrXSdN1+ZxxdRRA79THi\r\nvK4pJNpcKixeIiSOlQeOXGm/+HI2Joc0zF56u++pbKTnvY7YYoO1fEmZgdzS\r\nZx14ciJNfGM1c6+RQo3LESZM+44Qx4lU52ixoVciIPFbamnE22tdaoNAzKab\r\nev9wlKP0fPx10MNKzupSLcfFIldPgsq+M+A=\r\n=wF5C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"489583dc41bf06c909feb0a87f9679b40fe6c03a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e741b5c82.0","@material/base":"15.0.0-canary.e741b5c82.0","@material/shape":"15.0.0-canary.e741b5c82.0","@material/theme":"15.0.0-canary.e741b5c82.0","@material/floating-label":"15.0.0-canary.e741b5c82.0","@material/feature-targeting":"15.0.0-canary.e741b5c82.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.e741b5c82.0_1665423491935_0.4879545876386595","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/notched-outline","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.582f3cc1c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c76c98ba82975fffaab613570c5041488804ce24","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.582f3cc1c.0.tgz","fileCount":33,"integrity":"sha512-FK1ILZkhTCd9IM0VnWlOMHLS0ixmPrKMZSCLt0sAnc2cqy7wabu/AkhH80UFVP02LNr+NfGxsuZrsnVblbcXAA==","signatures":[{"sig":"MEYCIQCsHwwyi4zSASwY70Ry6CtS/hzKCs74a7sUVpqReoSq4AIhAJAmrXPnbH7FKw8fq090q1MQ3OYtfRw9akaJgwPu87Ws","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPXGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnTA//a3WMeIE1lKErkjnL1il5LxGa51ZevPc/VTpQ+mB57t7sceGd\r\n2Pm3dAwlL0FxY5wF5JoHZ6WOcb2qwgxMO7UOMSP24854p7Z2oKtbB0n6n3K2\r\nmHxlM2tXy5071ykV3UlW7pf2bXpAvrrzVmeGtPpF9/cOqER464+dRRJpOeZZ\r\ngNDvIyTVnF/LGEM+TPW+dyndC6AHQLZP0avjYfI/OxhaZcBu0ASfGBxAmIgv\r\n0ZfP1+wFMPEFbUtyVm83DYu0eliauDhwSCFzhQ2DS6GIiLcoCk9caHy0YCOq\r\nrxD498Iy7KjO36txbBhI79WADNq0gC1m+qDerOIE8gGKqDcR1MFe2Kex6YFr\r\nrg94EZ0y4O1HjAb0qMcCNMqBPChsrn0+pCaKpFM5BK0UCgW9KfBoTJZtygTq\r\nipr9T9LZPO0sCBUBSO7Re4ZqLmzXa+B3XxA/f1QzocXLUXNZNuxYtSFjomyG\r\nM3QUTXhnRGbVxVgUl+goB8hrK0T8ZTf04qJgbJCngU+3hlC3iihPrAXnyHa0\r\n14ZdxysHfOWNk4oUuHfWsHIpAgHLb5XhnD5eYW9Dz1Y6vB4mgCKFv6+s9kiZ\r\nVyANu/KVWrYSey7h13tDP9ml0AwSgVqAG7OMfBcBt2qIWUIWES/fKFlHZKdy\r\n4rravbnNqXxeGAVL2V8691r4NDzBP+wc87A=\r\n=dl2t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9910dd1f5b3fa962bd02fe552774781896efa7ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.582f3cc1c.0","@material/base":"15.0.0-canary.582f3cc1c.0","@material/shape":"15.0.0-canary.582f3cc1c.0","@material/theme":"15.0.0-canary.582f3cc1c.0","@material/floating-label":"15.0.0-canary.582f3cc1c.0","@material/feature-targeting":"15.0.0-canary.582f3cc1c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.582f3cc1c.0_1665463749928_0.9959658115683954","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b1a6e3e88.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d05c30d8863f42ae652ec14a4747a7dedc1139ae","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":33,"integrity":"sha512-C/PUBoLuDZ1VIO8yhLv7fFTH7l45ilPR+MUVzaYlc757y23Y2GmnjUvT02seR5AValnx4Ax1hp+03DAnzR115A==","signatures":[{"sig":"MEUCIEqrJkNN8w/MxxFU/OxdxdsraxAeCMkk5AmFyLL4rwzHAiEAjZ3QWtKOA84y6O4bO01fKJbt8Kjw2WVh5AbwLP6i2rw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRqzUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKOA/8DNomxhq+mEnuDHn3wylqdVTG2u2GGSFODxXXIyZRQ2lPl3oS\r\n7QeS292u1amoXOwrN1c8POEO8E75wnpCuDmbQDG5taT2HNzPHDi6fVpjpgfC\r\nKKgjw8CF5xiKB7EGJGvdi6clmAosNdKfuZaxQHSiVKqP00k21UM3O10S7Wkc\r\n1nWQN6BL4E+PAZX1FGSg2NTUc8OruNPB2/yVbHcUV5Jk6Ps12vu8XcamaEWp\r\nvTGWWINVvBsXVVD3PbEXVjRgRonT8JpxtP8H2AwvQfAZYbuYEs9HgfQ+PoUz\r\njror5gBFuG+gPvKuKhz8geAKJ+enW4mkdZ0PU4pqk47qhyvnqGYn093+wc2L\r\nMqrrAcD/smHWMB290ZCptBsEvgo7CAgtHrUbluanJW0PtNAI/jrWsLRc/H6d\r\nqJDCg4JTCjZJiKQGK4Yp8NFhWQpU/ywzVZDZ1C7EzOBrSv0KwQV0AL7OHcNF\r\n4W9lXpOX7e3EBTU2QCQEnLZcgNcYyZMCi3CAbze9l8QY0srg2xdjG8onYwi3\r\nHlUr+ELXG0FdiNWhm0Jn3a0prygvnXz1wlSIE+uC9ZP7IiEQv4X7nbPweIwu\r\nnmXru8bDSQBDXZ0qn27a5E5RHCWFIpDdJg6QdF2RcEORstW0mGr8fUKGPf9D\r\nspPtrnx7V0owJ7vSZUiV7FDXrC+XeLdYF3w=\r\n=u1iJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fd6420b1b81c64578026927a4acf4ea73b7358e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b1a6e3e88.0","@material/base":"15.0.0-canary.b1a6e3e88.0","@material/shape":"15.0.0-canary.b1a6e3e88.0","@material/theme":"15.0.0-canary.b1a6e3e88.0","@material/floating-label":"15.0.0-canary.b1a6e3e88.0","@material/feature-targeting":"15.0.0-canary.b1a6e3e88.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b1a6e3e88.0_1665576148298_0.2541098412457863","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/notched-outline","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.c9b1a31e4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cd621773a9b2206ffd8b04ad477416fe8781062","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":33,"integrity":"sha512-3UMv7yu9mJVzgZg6oUVSXwq+HiaoSuJbzafUBZrMLCkj8l1XsBDrnpqrq+EM+7QyxoUVxrCCXq+UplVtwXRoeQ==","signatures":[{"sig":"MEQCIAynevgqQGF7R00S2SGdXcuPfkVJ2bt/ezEQ4n2WVIX1AiAPKnd6ZE5ezBP8kokoI/x2h016ecbZyr+qXc/GJWIy5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvI+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqY0A/9GUf5duhTuDJkuiwlYZ1vWez+1h37nACKRNu4klPDXvn5cLY7\r\nhLC/LrNBed2Teo6zpTJuAEgrjLYRruw6MCxFyiqigRGH5KYw2Q1/JdbkAbLH\r\njyk7EzGJb0h/3sdHyvbtfrKb8F/+o7uu3zZZumtKLPTW9pIajF0pdQyLqaKI\r\nSHgRtkz8Hf4If+y7aQw0EhgvqHlCgoGm7uKid0GCU6qJ0tM9jzk1oPMFUK8v\r\nVtiDaDP4cX/OsOfVEUM9qPpmlkbm44fZB0gXZo7OIZD5g3E0lf4NeU79DY3+\r\nOCUp9BWMKUH56iWJRtHZlKX4WxPhmPNlT2OKnVy9vbb98mVE75+mScHD/zeR\r\nKVEjCt+rsuNEIW2WOxvcJOvd8zGNnkEDMErHkZvaZ0DfdLElfcFCd/8TmMwW\r\n2txrbrtKuL8tsYnuk219gLd/YdeFNHHuOL5Dn2j6Rk54kuxFyoznVwHFLAZA\r\nRy7P2qaqwheLkQsN338otoI0omZVAsit52YpjiyRKxgMTDL02ai70CddJWMX\r\niIN4vZUO0kMDe01GgXTOOet8N+1BM9ZQywFio/QhirSQYIPCrLKSP87vWcAu\r\nxUTbB+LdU47B0e8S4rk37J/8ZJ7ZhNPCJP2f+mEvjMXJmn2x5WVmNp4BWcPF\r\n1JTUCzgpEqQWF+3ZEUepb3B1362bkqQYvnY=\r\n=/amG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f7a6b71c85fbf0d1a9db952402e002f8421baf4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c9b1a31e4.0","@material/base":"15.0.0-canary.c9b1a31e4.0","@material/shape":"15.0.0-canary.c9b1a31e4.0","@material/theme":"15.0.0-canary.c9b1a31e4.0","@material/floating-label":"15.0.0-canary.c9b1a31e4.0","@material/feature-targeting":"15.0.0-canary.c9b1a31e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.c9b1a31e4.0_1665593918458_0.6773808925125804","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/notched-outline","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.13e9b0d1f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74d0a4b3493ca497c6bfab74e649dda35a7218e3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":33,"integrity":"sha512-FvWatbAOzRfh7pLMm5gmEsqX8DrILEAdI9BrFlKOmMwVkZpTdKqdJsTZf63y68v8Ec8nIXd9WOrQFTQTKOYHVQ==","signatures":[{"sig":"MEQCIAWMnPejZXFalGcYejuBAt8aVe63sSJWFDcED5DkgjA0AiAyrs920D+J4mN3M7Xzf+9MtHioCvyAyyLToSyoIWkQmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxOpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmovbg//dTHDWJ/PH0LT9U3PWWR4Xw+cstvl+kSogXVngdJFUlsJP2s/\r\nyY2Qa4L+3j4Auv+EGz/g5PZz+6DHK+LEXiDpBTy5H4BcLhq2EtBotz5FlVw9\r\nxliiisKxaq8cMSof8Zuog/A4FRvKZeH4+eJIoeC/0xSxAJG5aM8A5D1CTQ1H\r\nlFTmiXwRMJvZ/9SJO5f4bc5MYcGNUPrEMzOWRMJg8pWo/6/Ug9cP9CXn1SZs\r\n2xr5I2WFTEERVcqR36a7WYKZTLNpeNnwvOT7VYZLX5On8KvEzIJMUY0UbRvj\r\nhrMFIS0Ll3Pyd4djpVpAO6HZrGU8/Nju9zOkOWwa6PvRqDjL2i+5eNGHD6+s\r\nUFfnPClr4Rk3d4V1lXeJ/pSQoqF2LGeB0ITFYJp3ezahOLPHf80RdniocaOb\r\nX99KbHeVPE+DtCygHWDUDH46j0Y1EqJuuIG+sZJuKtOjDgiqp+/fLWvG/cVQ\r\nnERciE9DsbyKH/BhXX2KHr4jtMoSGe6ocL5S5oCIZV8dEWR6ztGUMM+KvXzT\r\nVeAB+85+Vr7ajvG4SatP5gOjEX4daUyoruWPJ1fbvL3O9IxjeXvkzBRcpwQH\r\nqIM2GLk6LAqXS00UAMPxFK9dbnCP5Ype5OwrPfNxcI3xcjIH9VFRpaw+JSvP\r\nMUL63D5zclvC/bgo3jUxvmrJQSk8tl2PXhE=\r\n=ro1f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4d9f6e4f27b68587a15ebef6f003f73cdad60bff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.13e9b0d1f.0","@material/base":"15.0.0-canary.13e9b0d1f.0","@material/shape":"15.0.0-canary.13e9b0d1f.0","@material/theme":"15.0.0-canary.13e9b0d1f.0","@material/floating-label":"15.0.0-canary.13e9b0d1f.0","@material/feature-targeting":"15.0.0-canary.13e9b0d1f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.13e9b0d1f.0_1665602473640_0.654961612240635","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/notched-outline","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.1dc797e7f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c51a15da77edf90105c36407c2bf7c0c6f85e32","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.1dc797e7f.0.tgz","fileCount":33,"integrity":"sha512-cYczn0zU8smEjiusU4f//NkoDgOtEzYNj2uUWgCnRB8CqteCNUICja36yZVkyHRFP10Q4vwzlysPFuC1AnVq6A==","signatures":[{"sig":"MEUCIHoANC/1u9gmoE+XijNGVG4ZPxq/QglcDalDDqPWzG2FAiEAiaFQp/wfy+rW7/Yju47afrUkaee2SGc0ZJARzsfNGag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS7TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSEw/8Ctz1hsd89UIuyTTSgv05o+8u+xhe455DjgL0Ifuf2m+Qoz1v\r\nc0iEmAHR4aZoqoj245NVW8lVj0UD11sy43dkL7VvJIyyi+3rYtWWCYt6yckY\r\nQn0ZnI3XfXFayHzWlCYlVLJgHAJ9x7FjXByFaBH0nV8X/Betf8zcEaQ4OqPx\r\n6xyhmSKoDrl8waeYeZya5XFPoflMOSZRUmcPj+IAcCpYq6VZdD1hqM82j9aW\r\nv051PTY3VrHQ9H+wynfq4keBMnYWMksSvWALNN3EMt+nh9bZ5oSEvXX2ZAF0\r\nDkBxjv6pJw82JgxK18bc0OYxtI3Iz3vz4ZoFy/ZHJJFd8AW87EbC+kcpIqaK\r\nWwI/CqEiW3MjcfByOx2hcy5I/aDk2ogPAkcFDnci92zAju8Ywp1XUQAQlEbq\r\nUTEl7vbxbIwMtbd5Ru2DFCeYRebADF4bmW9CLTKWklu9Xsx9VdwwdeiJEkyf\r\nt+BqAqSeQmAMypNgR/LJwfBJQnR3jJ7iA+EmG5l5AOUyp03lXKaoKjyDzPjk\r\nX00qzkNqzcnvwR4RRkZwwJk9yJep5ouFItHX9Co41La0ZCFMc99bau7UtJPv\r\nrLf8bdxLjH43DMz9vVsMotUJ2bEY28CLup7fJ8EwJ0BCArsWkBsM+FtrSW2B\r\nnC2EBTowBj7cM64qxT3DhE0v4H1LXP/a25U=\r\n=BDPY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"22eb0904d0b7a84996854bc57cc417286deb08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1dc797e7f.0","@material/base":"15.0.0-canary.1dc797e7f.0","@material/shape":"15.0.0-canary.1dc797e7f.0","@material/theme":"15.0.0-canary.1dc797e7f.0","@material/floating-label":"15.0.0-canary.1dc797e7f.0","@material/feature-targeting":"15.0.0-canary.1dc797e7f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.1dc797e7f.0_1665740498956_0.7385870541193564","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/notched-outline","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.ed4009397.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da695d13384cad61e2521e98e8f1e9e47f51cee4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.ed4009397.0.tgz","fileCount":33,"integrity":"sha512-Uu6N6OpF+ZZWkLwba8lV7//GKcBMgvMs9s3IPzC2L40rLXHo5gbDVVqEAa814DWeQYEiUYpi1SXmNQ4RE/+Zow==","signatures":[{"sig":"MEQCIFzv2TKk0z1wcPbQ2N2wJyulxhOpKakF5QENHraF213eAiAm6YsE6UMVq7rPX2/J4/Gazdc9XjZAIHv5ie5zJU9DpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZOJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIDBAAg+MQkAa7zLz3kKtpfCiDigG/Vx8m8kyy93+29ET0PWwUJ3RV\r\nzuxZBqhB1ElxRTdsKPv5ibIYNLz7Py0EiZYrBfUHbSWm3vFiTPTIGBw2L89d\r\nKPbo2Xt/thm+BPRVlHJQVC0FIi/NL/YtsBZGDsHBY6Mks/QX8iwuipFOuS4h\r\nwo7Tqkb+KdoDUDyrYxw9GM7K20O+iO9Kjcjfwr76AFictXOqXnX+kbhGHh7u\r\nzimxdYoZLRb1EJdmWbgMCmZTJ1CkNGUJ+1gymUVBbqSnE4kqmGu9BlPcfruj\r\nyyaP6stDaQK75Q8sxvRNnuzil26tq6ib4as0V0N/swDCfemixLLEKRIRKhLi\r\nwz9F+LSTsBNv0uoWQHV6NyZV0V4dUn4p1IfWkybDjT4ru5C5qZctS+3ZAVE4\r\n+glG6oJOfnROJLU6sbG7Dq3QU8IPwPA7LbAV9sPpj6UFlos/5x6t3CkePp9g\r\nwyr6as3CX/NcbqIAHclVr5iLKGUdTdAP88uFVIMfKuz9aLxWiHTp3MA1wrXt\r\n7EdljiPVfc2+BnE59DC1rkg6eWwcgFIvLEAbSEkDEeZLHVBloyH4WfbfrE+K\r\n0G1dqmAvIhzzyiB9vsHo6cRD1tDAFJjUO51kuO5cAhDpwFelx/bPLcMRJmho\r\nYW9FrnyRsX8u2xpkS4eDCFWVCIQb2leTXE8=\r\n=Ti/T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a749634198bd160446873ac2c5cf3d4345b1620f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ed4009397.0","@material/base":"15.0.0-canary.ed4009397.0","@material/shape":"15.0.0-canary.ed4009397.0","@material/theme":"15.0.0-canary.ed4009397.0","@material/floating-label":"15.0.0-canary.ed4009397.0","@material/feature-targeting":"15.0.0-canary.ed4009397.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.ed4009397.0_1665766281307_0.6289142096127867","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/notched-outline","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.95ef196bc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7a486c1f556c0d8998407a1f6f9f41d4a294f1f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.95ef196bc.0.tgz","fileCount":33,"integrity":"sha512-p0bFW0V1WIuMOwbNNPFu5dOkDgcxqdYPyRJSYm1911NAKTP1HKYNNIUtI6ij8p2YyCGqMoKXtHqgD4fLN4c70Q==","signatures":[{"sig":"MEUCIQDataRmRIskm4bUuVfUaRa1BvqhngrAgXMBGJeWVv32ywIgHZinWXxs8WaXUaLehpscCN5KC0qxap3+d7ILWZFzjTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe03ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpa0A//f6DrAypC7oz+o6zlbBqU1wJPeHSI1pFCW3gdEzVElcWzvTsQ\r\nOl2lC4fybp4zDaZVIA3OUDfvkifI4dp0mSAWCu9R1O6n6GYqkKsgAw9sfR9A\r\n/GZkj/euu9k+wIt+z1OpvQwNGba3lySl86h5G6mffm9po9qc1f2HaCU24HFC\r\n2NQykR0CgwI7MwKo+Drpj4zcWAxDSekv7AB8gif0JOdpFkqMgGuQ4gWr9JL0\r\nMSuZSk05X0+g4pXijNMGHRTHFQpdfDtAk5JqbALVU7vhV+KDeYvbDFEw6R+k\r\naBTXhHHjxN7hgUBM6hfEOIKDywhV/qzDBp8uBH0FDA/OkcGDK6s7SXa0lXY9\r\nEGmU0RhwCqLB8Rr8tHrLu1cswCeYUJ1ZHp/wIeN59qwLS1NfvYrbkdO4HfG+\r\nAs3KrmYPExzrpHOOYP38Iu3sPcXfG5DjxrS0K759wJOXTffC69QndxmeU9pS\r\nhwAQHotH9i54ETyT4TWEQ6uX06CrAWN0lYLuLlSu/Z+mUV1NzAMXxXz+rTGI\r\nvyx1frOyEGrXw+IvfgZZk0aOrnzafkGpmHT0sauQHbJDjGlk63vZiObljxGK\r\nO6DVTRKOSLCY4IZzNSX6fB5pAcrH3dskAhdgBy6HspcmIyfjEIidnHbbVh//\r\n9dV09sTemHRa0KXbkt8pcUkB+5tFyCXQsro=\r\n=SyXb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c133997c8c45e50d9ebfe12fabab75ec90d244e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.95ef196bc.0","@material/base":"15.0.0-canary.95ef196bc.0","@material/shape":"15.0.0-canary.95ef196bc.0","@material/theme":"15.0.0-canary.95ef196bc.0","@material/floating-label":"15.0.0-canary.95ef196bc.0","@material/feature-targeting":"15.0.0-canary.95ef196bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.95ef196bc.0_1665789239608_0.5918306029734905","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/notched-outline","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.13eea1b2d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64454879667c300ccf8c2bc55b7fb4b0b95266eb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.13eea1b2d.0.tgz","fileCount":33,"integrity":"sha512-NGE7vIlnoPF/7EvVEzmyZrNiuvkB7e1jPm9pTA0V1+G12jwPIYjvoMvjbwF1dMiCQRyIqshBRVLTKsDaLg8w5Q==","signatures":[{"sig":"MEYCIQDT/1TDSP7eKNMJ8C1N73N+EWmrl+1MwJMeieIE0bVjZgIhAPuz1ivirbbNRGcjzpXJSeonq5ONfg8rxCMFlFuD1NwV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNFLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpA4g/+K63MFJlzmaEePjnbotRC57pM055TFs+o16iwu+YV8E/MhEWh\r\n0qJvMKGVAil1mOjKN+1hrR0N/SOSbh2YsUM+NbtJPz3KC7yPTqcS7YgFzFij\r\no6G3AcjjtLV1EZEtjEWx2eFizy922z9qKkz1U6yikij+jnFgxtFpweN7c/ck\r\nM+zzoaIkOQvoS9qFVz93+PbQn2eHCf8KkCX9AYmgC3anQpgAoDwIQWRQNIRM\r\n2AXabT3eg3uiKnsabpmXOLb5SOPW+lvg55OSIQHdTVWxAxCnPuaVVKZYZMpx\r\nrLWVdJZeEMrGLsdT/vH9MGnIJpC0xWJb2ZfOK+4WViJPQ7bQv33U4PR9Ccp4\r\nsLo+nccRscbFEbGhlOhGA7Yee4l72miFLuFOKso+E4pFpc4qz5xIMz3cueET\r\nv0n3UORjEAVU+pPgaT0EXLICOM2mOccSTW3qL+uhyv5+mqtFYwQ80ppdT/VJ\r\n9VxlBxJMMnhU/QEDJ1Z2lWGUmBEmWyrWJxa9Nd7dnTzEkMtNB6yCZwM4/lrj\r\nivg0h7o74pFa02nYulF3gN+XQMmXaePGRJmHdrwWomqz/eNoAeWmkisj5y0N\r\nRp2xb1RiHyjPs7/hDRRe2vN+kHFykaFcsuY/0S26rJ1JUdsqE0JiqnPMTt9z\r\nZ/GbiHhwg+6LyzTWbeZZaSLaPBYUFHavubc=\r\n=7mJy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e9a13860e495e7f113966b4c71b9c7931a32807c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.13eea1b2d.0","@material/base":"15.0.0-canary.13eea1b2d.0","@material/shape":"15.0.0-canary.13eea1b2d.0","@material/theme":"15.0.0-canary.13eea1b2d.0","@material/floating-label":"15.0.0-canary.13eea1b2d.0","@material/feature-targeting":"15.0.0-canary.13eea1b2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.13eea1b2d.0_1665978699141_0.6952761038100013","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/notched-outline","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.ef9b2babb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efa38111d0912cbad3298561f62aba33238a04e9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.ef9b2babb.0.tgz","fileCount":33,"integrity":"sha512-VgVOvJGou5aoXjbjD1gcAY99iIGx4901W+TxMX2jw+vZWkbO43qJ7IYFhZZlKT7ZizKTCSiCfPEJxc2IJzrlZA==","signatures":[{"sig":"MEQCIATrOAaHIoaMZCvarZb6JYtewwAinmMkqZIgX1jJOoTeAiBHTapUaZkRI1hYyA8WBavwlj4/8DivsplSgbRE2m7tow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR3LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKEw/+IXJXyNhFnoeJhgLDfAnfIfi+oQvPKfAFuS1TwkK/6V5bgH29\r\nmUAxSzXaNQvNn9SwxJDd8/IeszlzwoHyWBjQOs75jlYHhn9+rdck9LjP5wJp\r\nvUsi98NzLYK3d2c6YpcWeQJasCkBHFmvZIAAIZ0HspvzUAeRgxMMVQ/0wxwy\r\nJS3Anx0JBvSYAFHMlnkjmC4HxRNhtYxO3SfUzh+fpxVWCH1yrJsk3pbdhHpR\r\nMdkhd9YMmzXfbriFecC5ESFq8+TCEUw05cqiCVBdSrsdbChZnGRSSyC4+Hf7\r\nGQVO/rBoZB5PNRBZOpcIyY1Mx8WX+2YUA8sul8z3i8gcX1/zNd5fuqJsTUUU\r\nuPkCVeeK+DQvp65ck9QPGeaNRQJO1lFVtPFdXlvbHHt/xv0fdBguS4VuUDfT\r\nmWrw+S5dOHiAYdJFCmXcSgucrVBtJZ6E6UzC55ngOuGma9+jdpcH/sYxCJu8\r\nOuk9cBMUy5sBZvOx4RtV4dOrqMQ+QACQcD6NM0u6SljRZkOiHKaVAT/0CqCt\r\nKeMXYwVaIvKB7Hv96cpMuaC4OwKi9/9lw4Yzq32RH3qFUJYVih3TTiqv/JnS\r\n1+jXaCt004/06XgtQBXMjJWyxeadilpRCNXQh23896HjAgAcEx5Bdqe1ac61\r\nw9h9LLQCnGrVdgEv0BMw0Wx2Oycah1ee/zo=\r\n=hfZp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2e04dcc89ca80bfb50d7ee1e4172ff9713c149ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ef9b2babb.0","@material/base":"15.0.0-canary.ef9b2babb.0","@material/shape":"15.0.0-canary.ef9b2babb.0","@material/theme":"15.0.0-canary.ef9b2babb.0","@material/floating-label":"15.0.0-canary.ef9b2babb.0","@material/feature-targeting":"15.0.0-canary.ef9b2babb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.ef9b2babb.0_1665998282814_0.18299915441951886","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/notched-outline","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.cec7fb987.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9081b1be3f8528e5592f00f83d9ea3dd0a76d973","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.cec7fb987.0.tgz","fileCount":33,"integrity":"sha512-Hdhc5ePbT1MloMZ9Xp1VwcXBy1Q7cRNRPe/vo4KU91mLQtUAmw8XAdc/r/NOvcATOfMvoiBC7DpF96tIh0Cx9g==","signatures":[{"sig":"MEQCIC/N/WkTW8fKyZ/MF+W2jMXNSxcBUHrpYkBegYIa3BZDAiBxOdGJMOkeYrL2BlUVibCJ5jfMdF0eVa0W3iriCrls6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTTZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQLQ//QpiCqU7N4iQodBMEUVvDqzCC2PYissIaRJDH8AtKJECa5g7a\r\nSwqtoQdbRm0Woi4Fg7T57udXKoqHYBa39f7RdUMPIeY+riYRcWCAXf0f7cV3\r\ny9XoPkW6fM3vacWBe9cLcLbOHH4A+E6wiVEPzHKkm4vwt7bw7wzZzyJLYuHR\r\nBe9AdBFYIAPbWav/yln1/oYL9rEY65hDBJgtqWXY8w9Omgi++LUsL6oZ5okH\r\nZQT+v3KET9sFQqu7Os8oJgyb/bGTy4pkQnDohjkTnsyhMDhMZu2wf0BWkj8h\r\nL3m+7geQEMwxjDVGTA9ivfK4Fa69KuIBGuq6ZGtnsY12CkCyXcgWoD2g6mXD\r\ngW0/VZFcqyMysujwOKC9V/TxmJqXLHYmbk26DxzNGyhiNM8e+wsjh5K+xqgT\r\n/nWt+EsAyeO25wEniFTxR882liq4G3YxhCjUvIeb9ynUGMBGLunuKduBvYP7\r\nm3W3mrfJCCqY7OvahNSJQNalmd7V6Lc3BbldpgiYLeORFWGmEUm6P4hp2OOo\r\nrSmyrKm+wY3mir6MVozqOPA/ICOY9EV3DpvG+Nu8K5CJMG+EwrAsVSjdoNih\r\nOiK0UAiU6QXce72l3qgjDhRcirAYYlvTxf54LcJrQBlf/mPac/7+lxCpX2U4\r\nVulPp+wd8N9yxF4OWgrDQuWPOHD2zpq760w=\r\n=P4Hn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5af4beeec511ff0266173424b4b179e209402a5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cec7fb987.0","@material/base":"15.0.0-canary.cec7fb987.0","@material/shape":"15.0.0-canary.cec7fb987.0","@material/theme":"15.0.0-canary.cec7fb987.0","@material/floating-label":"15.0.0-canary.cec7fb987.0","@material/feature-targeting":"15.0.0-canary.cec7fb987.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.cec7fb987.0_1666004185062_0.5486143174669083","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/notched-outline","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.4fff58b08.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c344f37acfaf66de0585c4c9e8d51dd4bcac02d1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.4fff58b08.0.tgz","fileCount":33,"integrity":"sha512-xEJXEoCKzkt6YFGQmBjRKs4UmWfk7zuVEKzcWYyIbqgejuqoACTT5w5dL0SnMIXMvxfJIV+2TWJKSlL2DGLvaw==","signatures":[{"sig":"MEYCIQC1chuoGHgsyYk9Nr4y1u7e/wA958XbaY0Z4iFhVX4yNQIhAN36B+mNevYmWdbKn9xHrrPgXwB29odHsYO8WTeypcNh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXM6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcsxAAgx4YIXyz5m/5y1IFzfSRrp6DjW6ozBL8Fhm6vyjLjY9PF+c+\r\nrfWDzBKgHy+YC4cUw86z2fTYvX34dIGuBjJzVyfsEq5RSgR2mP6mUXuSrEfG\r\nMaIBv9CnyvG9znbLNfxHnWj4CWmvQRA83OpD/2fJ30ks0OHzjRqnjDjEtWzQ\r\nHl2OiejdIBf0rHht8s6tP9BEvN7o3303IIZHYir9pOxAIsMUp9hIsF+ilmhm\r\nq1RoaR8KffXUPbwJkGL4HZvMGJ7npTtsxFJpRdV8ZbM/1Jao/XVdea7vQQfc\r\nER+m8fXQIbUECPEe6/WCnvISwT1ZpfCLa9fr9IQsQ/NxlTeAoGJYXta+ebnR\r\n4hwM8U5YGW7Wog8iURPFpQgPukLU0l53nVh48CC9qvToilMVwV36RtcOlwFr\r\nRXrklAHjhaeQjzwd+iXi8Ap5DG6938kMgzXA5shvsl5NCxYhVPT2mS3gOzHC\r\nXNHG1YbgUN+8Pxox60SzqhJ8PB+NXV1+N2bALvxy87q7QW7eOt1r+L62wL58\r\nAb1H8Sq9pb4ot4kkx7eAwGI49Qimli72zP2hrFNaJYniSDp4RayBWHvGSlTB\r\nclpl/bpZ4JHMnAZj1IhxNamhrP+cnweFpHJ7/1k39BFFtteZ4+ELOHpJLpSD\r\nwJFtwVNj7oNhpUYP0J+hCTCiofpWk/rrfoo=\r\n=uktd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b44726c7f5a5db16ef660807b5247cd71a447c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4fff58b08.0","@material/base":"15.0.0-canary.4fff58b08.0","@material/shape":"15.0.0-canary.4fff58b08.0","@material/theme":"15.0.0-canary.4fff58b08.0","@material/floating-label":"15.0.0-canary.4fff58b08.0","@material/feature-targeting":"15.0.0-canary.4fff58b08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.4fff58b08.0_1666020154027_0.37771680865138246","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/notched-outline","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.587d8f871.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cabf5bfef1c561ecc4d32b60ef82dfe4ea17852","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.587d8f871.0.tgz","fileCount":33,"integrity":"sha512-iC6zIJjnK9Ae7Lld0tD3SF/LduV7JqOgwRhizJozUdPdwnrHmFD+pWSCoyONlAvr7CqZ8ZVilesCje8TdE1++g==","signatures":[{"sig":"MEUCIQD0ysqeLFkReswwBB1cfJpwqZdlJnc8RdkACBfbuQjh0wIgGSuM6ZZ3RYL5AgezaQM6//NJoqvjFhIb2AGhOxfmEpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXtYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNXQ//QnMj5cQ0bVjakVE81n6E6afLiirnZEovimiOVYMn2+ShS7Cj\r\nsMpcREy+B4cdDNAA3mhXlcWIgvbUnEFhWlXg03NiDO8oR/oCQoKDIs1Ye5pI\r\nLtNuPxG2ydyHnG5dCyGN9mnjE4FAIxlW33G3KDlvGI00yIQsozPcQjpKmsYL\r\nPBmimtsRLglt/UaQZGJDdtQruZT5FB9y05StUcqExynsXWEVy9YH6vdbGOy4\r\nUlWf61CWq2F0wtSsVsggIuNalJ4lyKR6UjT1E291eANu5H02znfCWano2/xN\r\nqcx+Z/DafsHso6BOgQ8sop4lAhgrpRc6IIXEfnLJInCEucLuPHtyEGndpM51\r\nnlL8LCJ4FRpkNCK9QELzcsGYtpfEYvna0h9eS6ui1g2VvmmHj9uUtCyOeOEr\r\nV+RElTK6LomaZYknLSu9uQWSPGzvo9447WULc3pw9TaTnotkZOpQUrIW+FW/\r\n+FnCh1uQ2yPSppA6Pr8dtkkc3aAGOY7ELfyi1eyj+OrYzgUWUPdmbomBTXVr\r\nR+qIpjbIggkV7SDk3vsCktrdTfpzuqmrHjEE1v8TgwliTAewnVMbps+5NHlU\r\ndWzA8h+CBXY/8gTyhQJ/G0UjPWKklP8Ua0LgZRMdjJ/KhLe7MUxCNUwjanW4\r\nAohG5PE63ZkxjMcN+EqDLjWGWb1wIEWo4T0=\r\n=59QK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2ec38be871dc355461961e4ac44d48ec44c42a1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.587d8f871.0","@material/base":"15.0.0-canary.587d8f871.0","@material/shape":"15.0.0-canary.587d8f871.0","@material/theme":"15.0.0-canary.587d8f871.0","@material/floating-label":"15.0.0-canary.587d8f871.0","@material/feature-targeting":"15.0.0-canary.587d8f871.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.587d8f871.0_1666022232459_0.7449243424881316","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/notched-outline","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.edf4b98d0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7721320b985ea0d1158a80c5f16297cfc8719dce","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.edf4b98d0.0.tgz","fileCount":33,"integrity":"sha512-idTtn2xAZrLBf9lKYXXpzstS8Kc+S2KpS8iwe0rb0MxGHDRMEWQLy13/J73iTXDVVZ1lbPPQs+txH7c7lOv0Ig==","signatures":[{"sig":"MEUCIB7kmSJKTCnHGEUdV3RMQiXkqdSeKSyvuHJ9FX8SIJjbAiEAiGTwXpAZkQeADfE2TSxQ4ZXEVFAdNImp7ts8k6J+wuU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYV/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDBA//f0+BZX+T49ZA0bULaltAdHzhT8LDv3yGyq3uYYlrv5IrS4sJ\r\nLnvGi0dVRU/ITE5qBjMc7KnrfWQtdJhLep9k5THIBK6WeKVczsyLkOkIWRmN\r\nQtvYxHysFIVSELBtBPLb43FeW0KKvc+48i4aPn1EHUMRG+zp4lhZlDsrsLad\r\nNW7MbC6HGmShzS+AAV6rZx513CNEEDIsGivfGPm/kGHiZVQmz3CXtDjGba1B\r\n6TIS40Gi2vQYMAHOIIJ0JVb02e9pwEbttkXWAPEpuLi3rBG8a7kfO25vcdeQ\r\nefSqsaeeMh6cEcXXN+wqn0Uh1N7lp0fAcKnENaL5223Dz2pWu2mBgRq4/gHv\r\nlpPpCUv06+e4jTVILCYrijCQkQhJy1PjMdXMAYMlgKIb/kBr/TxtJM0Mxo7z\r\nxeTU/dI13UdpalAVoJBUkNQgOl4agqrwpdoU7fKSCvHDrfW5pyBOG6vQ2kko\r\nCKZ38CAGx+AVGX3v1axAuI2gbe9O230hxeV0Jug3/G+b1gD6xxEk/FBdSRAY\r\nNRsF7egiIsGVuXMF4LTo3Xcan6hqDzlZdZibNAJo5ktqyh5p3otYPbV0ahDP\r\n79BANBaAqVOlLWQtWjWmeqKlmHsodHnfb5ClzbMF7iZUNpgm4x2s+CaWAOYO\r\nwMkVKrCpsBc9RiAV/MJE4E2FW7svVkQ2Paw=\r\n=KH1l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ad4766965d2bd24e69b2e2e6940c960907c93c1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.edf4b98d0.0","@material/base":"15.0.0-canary.edf4b98d0.0","@material/shape":"15.0.0-canary.edf4b98d0.0","@material/theme":"15.0.0-canary.edf4b98d0.0","@material/floating-label":"15.0.0-canary.edf4b98d0.0","@material/feature-targeting":"15.0.0-canary.edf4b98d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.edf4b98d0.0_1666024831068_0.583121977984929","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/notched-outline","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.024ac5f16.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8536442ad83a3db939cc515623e2dc3ad816a680","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.024ac5f16.0.tgz","fileCount":33,"integrity":"sha512-9aaqgkCpltio25WaKUGxLWjtaC7ZhDVk2kNvWWK2UeJCSmicdQF1FDcwVAMI2x3nnEjSq6Pdi/lb4AnyTI+uLA==","signatures":[{"sig":"MEUCIQD+CvIjdvMnYRM7Tuv414mW5enKDWg3w81nL1XIJLcp9AIgf36VYDxVKZfsi0c9+ELIT7nkzInNmI16QwH0wI/o53k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdpTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5Pg//R6nFBlDTBFZC8EZ9p8Dae3N8vtXn2W7xeqgMnSccqOv0CddV\r\n004ujiL+4j90SadIWzUJfkAD6Qr3hOdKJPGGqb1chWVC/8CSWqAR2DGGTihY\r\n7A0PFKDn+6dSw4/8cxLS4RfmWs9153pHgjXnvcPcHcdBOmH27PkY8pARZH8V\r\nJ1ymUvKjlizUpMPF8fTVQktkSmsTLKn27O2thf3USDBUy6cr1j7La49GTfeP\r\nxCkA2iYYs8AW9CNFWxuY5rm/Pb9/jFbhkb5Ya3ht4PIa+oY5EAT1ZkuECErP\r\nYz/KwQ0hbRBjAk8Mboy9YOcvIHjdnNCd1PxmU5oV52sjsF/8xVhsdY/tjC7n\r\nfOjKm5+CwmtG3tAmeW+W1IjJAoerrXt3JEH8/dV7D0ECld/A86yi5iLpIPYs\r\nSBUde99ghud6VG+6rIeViYXiSI2HszNJESMwnN5yABL9yTuXc0vAvp0wsoWr\r\nughIrPr3eoSfPFnVoKxy/irKfrcrljE/EKUzOvaua61YLPdJ6GFLzfIob4ls\r\npgM70ddJFpoqPl/CQBdZwq4Y09wCg4OlVQ5hdLY5YOAUqKZ5j7hKRJ1pU57r\r\nZr4sA7daCLyLlS3Y4RzUqnneef+3iFhn+l5OU3s8YRUqPHiYzhXmL0qUf8fL\r\niCp3Mutufcz+I4qS3DB6AmFfrmSVhmwKU64=\r\n=sxEA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9ad8e77cff1167055c10b93b4082fd5b4e1d8643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.024ac5f16.0","@material/base":"15.0.0-canary.024ac5f16.0","@material/shape":"15.0.0-canary.024ac5f16.0","@material/theme":"15.0.0-canary.024ac5f16.0","@material/floating-label":"15.0.0-canary.024ac5f16.0","@material/feature-targeting":"15.0.0-canary.024ac5f16.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.024ac5f16.0_1666046547086_0.9673227060435736","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/notched-outline","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.c8bdf6144.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09fa1ba1ea8760629d7ea7682270be73c5b103fd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.c8bdf6144.0.tgz","fileCount":33,"integrity":"sha512-1SNaBTMjR1R9gRO5WQMq9dXdox5xGQ+ZLmSCIQjp4ioyo8spCygxPoSaelLVqd6cXtTR0yVRMjTLRXGIQGrkbQ==","signatures":[{"sig":"MEQCIFfS2i3ZKjzHv4W/WzOYfcTaeoBIUYVHfZ2KB7jd+TnSAiAevzOq63B/DAoQGGznHzbVR46oUQANYl5Prw0IFCJ8ZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu8hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoxhg//URnWLCa9iNDYLy68oKzz0lPMiNhg4/sjCcOsY6/0GqfiIInT\r\n4pqOcoX62ol6qWbegerx1CVfhiRtsgVE25GKvDZXS+N15beHraM/xRkysbiV\r\nc5PpALqi+tRWRgTZSPqFBKQ/lZGCk8i+dGqMX7ibtql1tDLUN6mQzClIL4UZ\r\nrI+/kBSOml3cLA4TKRbVFvVlkajlyLHeL58DYGvUi5gOW9PdwfYVV1AV4/F5\r\nvSE1uKVyS0XveDsXgOBUSl/COijQvZ8OwRQu9aeCDqsJWOqn/Jn9YnD8CjB0\r\nFuqNl9TTUIogON8I9gnNCSoP06UjEVMkEseqDBSbm3cH1+5aMWiWPh0ffk5Q\r\np6coXTw1g80PPU7ir7bIvWH2jHrfUm1gHhbICz5Nx5BOTmjQCr0F5XEH588C\r\nkoxzb0iFdZozw6dMBp2RJ2EMghPrKhFn9hJU9AvJmyL7+8jn5XSVybWvvH4l\r\nXIzA4o3me5abajNDBSnP0lB1A3wfJi2rFBhyK6U+fmwToIBGRkUzY2T6kFs6\r\nkTplDzyYL7awmzqOuEHXEG5ODp/vZ43WlWjkf4FsGPFqhPlFhh/7FIUzHX6t\r\nJXeBYE3rgY8uSS/fkup6uA8qAXp7OauiJPXDUOwj7bkkoUy7Ae9vo3Gs95P0\r\ne+kIdz03G2duTjO4ODtn7GAa81nMMSN5WMs=\r\n=id4q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"92f4fcf51598cb8f9b9e03a35332a980296c24e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c8bdf6144.0","@material/base":"15.0.0-canary.c8bdf6144.0","@material/shape":"15.0.0-canary.c8bdf6144.0","@material/theme":"15.0.0-canary.c8bdf6144.0","@material/floating-label":"15.0.0-canary.c8bdf6144.0","@material/feature-targeting":"15.0.0-canary.c8bdf6144.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.c8bdf6144.0_1666117408887_0.5884250417764401","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/notched-outline","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.bacda4885.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35703eab403e07ea0520e6aa8a4318a053353736","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.bacda4885.0.tgz","fileCount":33,"integrity":"sha512-V1Pl3eHT0qWG0m2qXcLI++puh2PEoxnwUFb6gpuDpfHTHMnhgGnzZaYuiiSEO4mOYwv7VqBZ5nrxAp2waQDCxA==","signatures":[{"sig":"MEYCIQCAfD5UiGywXrV2Dqts9ptjWIZq3AhMWEHazohbTiwOIwIhAI7mYmRQTXZ2AmE52rhXYqbOhejv37OkgL09YOgTlIXS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvOlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq32A/+MJ1qA3SWsEjnOhzFmNy7AaVaPBXGR0pxJRKSyu1eeLvJgUTL\r\nZCB2AHVcvzs1ny4zqdWMSoWa3XvddkhOgOB5C2Tv61+zkv0ojFNxrrmIVNMg\r\nq88JMTJS4bTEglJ/YWeVmRHBSvKeAyicTdaIw428qFbw0ymYgEVeUO1eBUo/\r\ntKgGg4kLln5TUIwH0JsruX1dB+Qix+Uyv4Y2AP70lr1gHUyzBNZUjyCHEIaO\r\n46r5FUDHx1FFAAdD1KIgEhB5gIja2SfklZG2BTP+tKVoQXB17AhsQBt53Ohu\r\nob2Ej+2ejpDjlVcqcc/PH/nH8B3rJPErn1EHm07uRXoEJ1Ls5Xoc2q+zoCCb\r\n/m16XdIn30/lSzc7R2uBA8awfZSUlq29wvwEhF8xunYu7WmCFk5/zgRnSqlY\r\npLpzboQRRz1i5ImsxDRHMDXNEg5lgdPDaN4U3ItbGTf2JnjNlvvHzL/xtAFx\r\nFkJq7YN2cqq5cOxIM4tOQLNxZuOO69joyWB9WDLbzJ4+xeNwTmrQMweVUE3+\r\n+QSGjYvDMHOXuuBiQ7mcyjN5wnzaERFSkHuzAkX4Llbb2Wfs9gyK/vSPhvut\r\njrmr1j4FGK8SNnMTo5ygFwO9OhfhdmFnlEe9yoi6L2hY/JtBbXwbsFHrkdPL\r\nWc4G1TxcFvzk9bST08Gs4Z20pzQm/FXc9hU=\r\n=BMEe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9e0a7dc5fb5e2d1554093d85949ffa6c2aaa33ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bacda4885.0","@material/base":"15.0.0-canary.bacda4885.0","@material/shape":"15.0.0-canary.bacda4885.0","@material/theme":"15.0.0-canary.bacda4885.0","@material/floating-label":"15.0.0-canary.bacda4885.0","@material/feature-targeting":"15.0.0-canary.bacda4885.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.bacda4885.0_1666118565550_0.6166406387747789","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/notched-outline","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.92b2556cf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcaa39bde47923536f4caefe55a9fb5259da67fd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.92b2556cf.0.tgz","fileCount":33,"integrity":"sha512-ZcmVtY/KrORoLu6mOsLQmOW+eJyruYo7FmRPP+mUeIrHJblsi2+jR20NULiE1x2U8G86HswLLW3M93HnAc4V4g==","signatures":[{"sig":"MEUCIQCn5lQ7KfVoJGLsswnkwECzYovygG/NePxFqCjtNN8n7wIgFKbp4GODqRg13aqOxVprzU2Q6rwSFaptbAf9TULF5pQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT084ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiOA//Znz6RHsByW19VBp7jO7Fl6DMJID7i8vbEbI11DVJODFMgGgV\r\nFUmLdaH+0IE2sxA+oujtIEFAo/ttXn+H2Hu+Ebni6kNn7Pa3Fks/qp+Wuw3/\r\n0YrMOqkz9YbAy3VvebLk9/wwz4Gk1iw79MCR7mp+tzS71ZQxBa6seZTP0klN\r\nyNuBNuRE3MdjaHylh4YERuAVZblLhWF8GxTfMLxN+nOOg3aoR3KCH5w1fm8L\r\nGBEN/2+xxu8ALEym3Na7gYklcKbFZg5oo9sEjnuXrhfw20pbjhiinujtEDSo\r\nQBQNZbnvpXyHDGQUdbPnzFFnhGqbelcgIvC3BDI2xSx+fb2HCwBCqxjyFBP2\r\nDL1GO5GS2VMZgMccoqaGpHcVCJLO50qcE0a5c85875VCgwJGiFVca+8ZVFSM\r\nTuUEODyXG74MRpxRPAOmhDvrbPiHyj9VtjPZDk50lxXyKT08MOr1xm3StNk6\r\n7AsBDkiuccvtH3xncvqkwux6AtuqIcGWSMjYZvL7hGgU7ZBlBryP4/6nRrGY\r\nP5xtlGLh2nEPdIrBm3oIRiA2QFGJZMOLLmOQdiom4cPIXELQk9rQWO02Namz\r\nN2q5nSLb3kOz/3BIKJif76rX3qyz2I7++CgAtgKgwRgNDi9CISAOpBpjF6ca\r\nrmrVQNrolVsFZ3Ys81eGCllRDYiBVolGby0=\r\n=u6Ov\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7ac326ada7a9c6e84bacf5e01a6d22e675dcda8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.92b2556cf.0","@material/base":"15.0.0-canary.92b2556cf.0","@material/shape":"15.0.0-canary.92b2556cf.0","@material/theme":"15.0.0-canary.92b2556cf.0","@material/floating-label":"15.0.0-canary.92b2556cf.0","@material/feature-targeting":"15.0.0-canary.92b2556cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.92b2556cf.0_1666142008076_0.20384475357795107","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/notched-outline","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.cc804509a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01088dd1a5a50700181062669854f05f450cb6c7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.cc804509a.0.tgz","fileCount":33,"integrity":"sha512-tNvysXFkxuOO2474pdIyZF+qc9jPwllxMq57CtenKA23eUZNiG4Q5I/b6fuf9Qt5BKMv87BC4Zf/kGHLlblYmg==","signatures":[{"sig":"MEUCIDDMUYXXSfcG/f0ROML3mwTSCgxuDyA3NWrUCHL5+xw3AiEAlpATVQtEgz96xeH8RbGr0Hn1mWCXgeBjNdJsReFBosU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1AcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRXxAAlAd7J1ygFFnM4NOpDkm6kGRvS+TQuingEA1j1M0PwqE5G+xS\r\n2kbr83khqZiTbAM6TRNMElHYTz2P9kK8l0Uh3bwI9zowD+FykuHjP3CrAzmt\r\n9IGBYz0Ko4hlGrshcrk7hDgpvB2iZlGgGtak4JyXQ6MjixmtK5Td68EpoqjF\r\nK7tnaTb4+YBMjqHomwluZYVU4t4JF3j6A1e928pMf+5Pb+lfyroPraYFowML\r\n5apeAuPhW07rrpMLfEBwPRQqtAnUT6RB3L9P2H/6wt64UhvBCSq4SKdoAIca\r\nzweISXA8jC4wfe7G75aipgjWoVgBbbavjB1ffVdYZt0DzjZSLgt34l5sWhkU\r\n/Y9dnW6RYicrddraDcmB5C2QzA4lMY04w2ep48LOtfVF4c/BvPK90nBCKI2V\r\n9TDoMNCP4gJN1swICTKjWNa3ZQZGxdg6O4HcVnCbJt6L701rUZzKer2NBNkO\r\nFe1G81ikn0cgQUxc12PHI3/bxFkVLmkzvl9cFGFXlDd81R23+JBRWT9unsVD\r\nEUbr25FpgysJO205gJGa+QWEUb6Dy/e1E9zC7rXTLVrEsguitNhTVJSYa2Aq\r\nYYMV0wTnLtGPgKWmalQb3hRGfEvaNnP7nTheyX2n8wOV88jsabfd5tDbrZH6\r\n6CgLPFomKdSSrCphyOHM6u6x06nTV6e8sd4=\r\n=JpQV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e8cb944f6f2263dc4b4fec5d7ade2bdb5172b4eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cc804509a.0","@material/base":"15.0.0-canary.cc804509a.0","@material/shape":"15.0.0-canary.cc804509a.0","@material/theme":"15.0.0-canary.cc804509a.0","@material/floating-label":"15.0.0-canary.cc804509a.0","@material/feature-targeting":"15.0.0-canary.cc804509a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.cc804509a.0_1666142236402_0.7541573147500411","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/notched-outline","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.982bedae9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d757c5537085cbded20bebe0364f3285c378dcbf","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.982bedae9.0.tgz","fileCount":33,"integrity":"sha512-cAkepkKmGHMUxTyI8STgDM8uNEcjLLcIQMyqS1YbESVMScvPrVbrlmJqPx1IrNNMGrR5p2X3L6pWMtSPdSsZ9Q==","signatures":[{"sig":"MEUCIF3dF4eHsRYON7OBrPb8j+LxmkRPP5aZxk02AEHh9PQWAiEA2T9TRsAVFvbMsAHrVywaYsMlqMSkLhKW+hTNU+qvfYY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1TKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpO9w//ap6CZuLBKjlVQ5hsyeXeWd694cnK8aHmKXJZmccA0q6WVu9P\r\nuP/T0xJ/jurE9B4X1L3O51/pMVjdeIgRYRqo+Z1+C5heJ2He6YO1JurvMU6R\r\nuMuqqVM1FzflVNbvxSw1q8dq5hSwUjnbB2PghrSD3iTVtfoLxZhtc0HUyjFV\r\nWoLxSQk8GsVGwe7+md6l52gafdxCtdpFRvQ/Uu+uPfZ0w93yUGlcTaDXuldW\r\n/bCrf1ppL/rwpHq6Bhyf/o1mWdWxbvG3nftF8cprYlRU5KxhpSMDYsUwRWSm\r\nvFHXUqcQADCTpUjW6tL7lN4QD+1dcudObDugD21fpQ2opoKGNO9zO+BGYlWg\r\n+e0rYmDFccLpdOrZrO3husvcMNsqC1PMiqmh23CI/bsZ8xAQsKGkLsK6cVjc\r\nbQVS8tC8BpMhyEwZkpGYqNkNVqcUr1KTcRo+0F+fn5b/6ZMFf0GZofO7qVeU\r\njj6JfQZVQShP+F8KL6wSXMUyLsgd8fIiXMHYeg/deWFscXEIvzGTXAnGgMny\r\nup8mH4IyhSwL/t9lX3F0gRs+AonoUG5Aep4L+xy0R7MTpraF3brY+tq4kMTn\r\ngeVeJ0beR3tMaV5LVwPo7FjN5SevKq1bEHm6kGxNlnS9wUdAtcDPLN/FrhoZ\r\nnOvlzDNqkkGIL8yhRStUkOQ7BCyde08JuTw=\r\n=LvMq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"247fc73217ef7d2438e876f1477d141e6970c9e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.982bedae9.0","@material/base":"15.0.0-canary.982bedae9.0","@material/shape":"15.0.0-canary.982bedae9.0","@material/theme":"15.0.0-canary.982bedae9.0","@material/floating-label":"15.0.0-canary.982bedae9.0","@material/feature-targeting":"15.0.0-canary.982bedae9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.982bedae9.0_1666143434127_0.24612284502054105","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/notched-outline","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.ee40081f4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90a65d1f7bfe601daadfa141ee40f650e6828abf","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.ee40081f4.0.tgz","fileCount":33,"integrity":"sha512-tmJx+jsoXH4Dv7XVviWvqlyw5rw8h/+7XDb5/2Mttccwgr30lk6ab57Z48hjWQuaIiSu3sMfQY+CwdmAIp2e0Q==","signatures":[{"sig":"MEQCIH6tHfJxAnC5lu/PNTnQtnaRFMtoQzeX2+711by2qqVOAiAqpcW0Go4aSxF9c4CNjBCxKJ8OLWGxapOSLwlDTwkwBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFoKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpzzw/+OqPm8o/MQuyeA6tC8Xgt6tYTeYuV/mGyndi0o9ukCVmbqO52\r\n4GJMvpwx89V4R8nh3G3V51LsL278UgwxiKwKNSoWPx+NuKtfMhL0NDrR2XDj\r\nEaCO7WuCPgdUPJec5fZ9xwrk+5P3pebhDZpEPPfHS1jZ6AH/abYr5AwUgCeE\r\n68qYrZcrLCU6drhN+O+z3Lzqbct7v6ldghg+BUATDEsbvtBXrCrm37dngGD4\r\n+Q/botlyxogXw+fAzVjxuHXhn+ap0H/ibKKUE1Ose2vkxg5knh5gDk/tDzKw\r\nMh0/Yyyt39mAVt94lHRgQ9oy+sWsNqytxESJfn0bFLTmaOKfajfcU21I7SvF\r\nCFsFREv7N5GJSUUElkmm89hQ+8Ul+h5/EhOMO9vc/r2NlNrys4R97AiQ6z3R\r\nS2XCw3+L5y2njzWCdubyVlAlyVwajBZzKGPq3vHMcsgmSJCk+SrsxpUMOAGD\r\nXD7AfTQvzoRqR+JffAEVJVTEoH+Nr/HEOh/y2ChWXdeU8D1O4H9sy1sKGklI\r\nikrz36W5YLuVl8k+4JHBnobTl1tJ/FTXl/Q8T8EwVQV1UlcG1Q/Lu2BTbkxO\r\njMEV1Najc7PW60XiUYWXBZIcUC+avnciq777XqrxV8R24VG1Oo/3QG5suDZs\r\nRH2YocJ6M4WbbWTmm0RNNL7kBg1LLptfxk0=\r\n=a3IY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"04ad48e358b6eef4ec9ee359b0ab906b30425504","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ee40081f4.0","@material/base":"15.0.0-canary.ee40081f4.0","@material/shape":"15.0.0-canary.ee40081f4.0","@material/theme":"15.0.0-canary.ee40081f4.0","@material/floating-label":"15.0.0-canary.ee40081f4.0","@material/feature-targeting":"15.0.0-canary.ee40081f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.ee40081f4.0_1666210314265_0.3858650310926084","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/notched-outline","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.98f1b54e2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90e112514d64f22a5f8bf0ec3dbe8972d93afe86","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.98f1b54e2.0.tgz","fileCount":33,"integrity":"sha512-VfRDgHY7R1BXrVFz5e6K5rQzYa2/g651ThRcXTybOnmaPKHo/RUtXJLgIlAOhpxEZvvbJgNAW7gVOjRr54K4sw==","signatures":[{"sig":"MEUCIGG9I96bfQ2kOesCiObQ1ZWOJIIXUf/vXIodwyqVEQAIAiEAqJTDeQWi8NiLmKC7wp9C3m9VemdQ+C3IY5qXYY0MVP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdIvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoj3BAApMX7FAljMivvbpX7svB1wvsp+4nmtFTd1mwzPwwyiGnB7z97\r\nOpOxc5c11S8vOgJw6MvHdDGxFAZt111VVqQlrEB1abz5b8ysJN0OoW0y37Cg\r\n5v73i3JY+Uok+65bPMd//1htazHKrnRDT9rNRk6dq/Fa2CiuCJbAN/P1dC/U\r\nTcY8ODy3hyDmYuxmmjnmZS+3p2ncJ04gBPI3AifN56QQDkNBXT/H87vqNoMA\r\nwKHhdvcLu1QQwRVqo2Ko+gstkALyXdPcMynSmXUjhsWP2fVuw02WxB1M341O\r\nHSz2B1yudjDvdBwFxy++bCbOO87pLozsuvdYybz0HDQIHCEXphwF7voS2Eqk\r\nLBK4itqwHzDeLXfDXK6GvgOkO3OIAcbNrwbIaRem9VFE2uRTVHsdI9ky7X4q\r\nG8FPJkwAxwHE8zXCsudTCKcpI3CyoxUJqpg4gEQzsR+L1fY4lovx+ci+WRJo\r\nu+zRj3707Rgd+CId8a4RXcKzqmn39Jw4HjfEgEjXuTTajNm7NW3fFiRWtQM5\r\nMD3ycPA9P2Jr6hCG4b92oy60lNzYRd5YhhaTHE5qeum5m74g3jSAYyet8X9D\r\npbDTCosmbrd26xU+xJ3zxwUCTHWM+gWehuRHOaMcADVzJEHAktHPnI1OE47i\r\noXqjAqX7CmJu48X22pNIQVR5zJp2HhlLgB0=\r\n=wZu6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"aaf0a191532b3357cda509746499ff62e3aaa47a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.98f1b54e2.0","@material/base":"15.0.0-canary.98f1b54e2.0","@material/shape":"15.0.0-canary.98f1b54e2.0","@material/theme":"15.0.0-canary.98f1b54e2.0","@material/floating-label":"15.0.0-canary.98f1b54e2.0","@material/feature-targeting":"15.0.0-canary.98f1b54e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.98f1b54e2.0_1666306606972_0.42617798015842","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/notched-outline","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.e74b7ba7e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96fe676698be652a35c51aca6d48bbc7f7bcb85a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":33,"integrity":"sha512-Eep/MKG6XAWicMdAA33+G+TD5PlZDnIvVaULsNHAxexUo2nolwftYwLRuf/4ViXk+fY2B5pJSd+Iuf9IQIWDHw==","signatures":[{"sig":"MEUCIFSryQVVM8ucVzRahZUOD6q5+VLLH7BC5TRjSEjogpzQAiEA/arwZBRi/20YWZrQXBG4rCGqyQyE3Tr6x/zrQIIZkeM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtFxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXLBAAlmXK7Rh2zBxfu+MI89GzltDBdi2ZW4bQvlmQV42t/pcOyRxc\r\nEUMW4rMJz1oEdK954fw1UvOAJt80u21yBkaO2cQ5Z2zBV93qJJ5m91Kbc3dC\r\n7kRaYvGmIriodW7CSw6jpJPPxGu67jNrUmccluzU4cd5PTJ56iq8VoQ1CbKU\r\npCDY1LqzoqSnBwS2110kHz+TfetD0/41FGMgBstd7QlZgHRDDOuzPMkaD8EC\r\nZ5j023i2Ki+C/M0cdbqQfyk/fQhbTL4eXUNrat+hnxIfCU0WYNdR/4yWpxHw\r\n8/P2Vlwu3zPCJTZshQ4F4P7DGyZ5Ub9UHU0TrmBUBhfLFKXJsGXMmxF3bnXj\r\nJssuj1ivUkJILbV18rqJuqMWCgQrzcT/LbrQus+Nu6zwo0h+j033gbWgMCAr\r\nFe0/ugz5nSGD+miArklT47G23EPxsVVtz/F2pfDo1O8YiSc4t7eC4imuhx08\r\nXHSTGdzG060AVlLPVcZ1AHuqbTeXwWCGbxsbs9n4nKRWxlciSGN1vBO5h4T8\r\nFFcavxALKfvqhL0yOVu8pD2MBZ63vFgOAymnkFBujP7npgCz2140w0kPAiRw\r\nADtyu2XV47PwgaTIcnCj9ZzeoWdS8dG47oKijj/2GIocHdp3cjqyKymk0y3L\r\n6PilCsnK6VfxdIgUfejkxdIpENV2N0gz5OA=\r\n=IUhk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e30e36776ed9bc98d53938cfb5e48bf5d2cc67c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e74b7ba7e.0","@material/base":"15.0.0-canary.e74b7ba7e.0","@material/shape":"15.0.0-canary.e74b7ba7e.0","@material/theme":"15.0.0-canary.e74b7ba7e.0","@material/floating-label":"15.0.0-canary.e74b7ba7e.0","@material/feature-targeting":"15.0.0-canary.e74b7ba7e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.e74b7ba7e.0_1666371953694_0.9974556439996909","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/notched-outline","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.ab55c07d2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e43e5d8cd76cadb1d67b2a38377dca6202147383","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.ab55c07d2.0.tgz","fileCount":33,"integrity":"sha512-UElq72y7fn7egI6mrt9ia67a2t6WVxh2asYDSbCI9xXoNFv6mSnmTJULBPRWGI3mF8qr7VAomj/iEomrIIfmTA==","signatures":[{"sig":"MEYCIQD30EWVknZYiLrd85EN8BP2XlSTkhs/hEOhNNwsKJ9gjQIhAKdrQ0aUVN33EcgxfULnu5HjtyE2KHc1Dvy4UJEjT9fb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDQjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQQQ/+Kp5tCbRp358Ih6CBpMGplAiwX6EVanslCJ5llDfHXi1we1Tm\r\nmtqNimmtCwcYVwTEKVr8YTmFzzXSkgPJG9281U9BMR/TPvAWebZs2z0tRcVN\r\nx9B14Tp20bCjgu7FK3LTyI9k77bKUSSVOk9/AKd0PFKZdp4oln1TRj0Vv6Jj\r\nnbmf1voALOCV16H4JkeBNXoqdwlK6sX4iEYktkvxH5tZnJ44Dc048de6u4bz\r\ndJuecpNbAbZ+3XrcKwYaqQ0cbbZPDY5z2pTUwSDKxW4+5UPnn0StvVALhGUo\r\nqqMKqeL1dTFe8UHnUga7z6LUeS89J4idQtrXj0a961jS5bTqMhj3/i9Zr/zI\r\nNVpMdHLM6ElrKpjiEqn0h6Qw6yyGiRIFSoI23xcdA/twLM6Hy29HD9ikJVqR\r\ngKgfX0QJ26Jp8QWtCxchKVVx0+AzYLj1eGonMMLKIiJIm6LvU1NkpF69/OWJ\r\nWeb77PLX86RAIq/dCu3POmySIq527pxQDkNS9IBnB/hceadh7fWe6eobT7G8\r\nK/PO6dq2/vKi2IbrcQZ+f/XRuihZNgscUZ1T0OK8+1FMywZtbrpWizyEknXF\r\nuOyyy1rUKo85PIPZfzuCasF2lW9XEumQjZUMSQ3ji1wh43OCRl6GO1Rf5d07\r\nYqxR8nFc/uRwURI8a/FLXdbREd3O2fvbdeI=\r\n=Kd5b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7fb32c724b7903a8060cb457aca1f150a15590dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ab55c07d2.0","@material/base":"15.0.0-canary.ab55c07d2.0","@material/shape":"15.0.0-canary.ab55c07d2.0","@material/theme":"15.0.0-canary.ab55c07d2.0","@material/floating-label":"15.0.0-canary.ab55c07d2.0","@material/feature-targeting":"15.0.0-canary.ab55c07d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.ab55c07d2.0_1666462755190_0.20008800152643968","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/notched-outline","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.fc539db34.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e01456117fd8998b83f867a1fb559bfabc383d3e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.fc539db34.0.tgz","fileCount":33,"integrity":"sha512-NJ7fyESR236L3sHdNm0JiaBXXH/0K7ZGwFMHXNbG3ezlODppGKZ7GlJQCxgtXR0q9MjuSAWd0iwEwsKBuwVl8A==","signatures":[{"sig":"MEUCIGwpOeb5deCn2yoeSH5tiryRGd+bmKkm3uGLRUNASatiAiEA37i1F55XgpVI2vehztnXskRg8NzVBoUBEX8sAQE6wZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuCCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrn0Q/+MDtbKQdJ8RaB10SBXIVUbo6qI9jhxHBZndCeGqV5L8yL+gM7\r\n+s3I8g+sHEAx5+OpofLQLxUdtN32tDTNxA+Y6UVihT8OtZS2kuejr2qQrmYV\r\nMbf66O+rkutCaLrR60drMbUDJv8DpY4OhE7RIq/bTWEG3rp/mYMbzzscX27U\r\nB5/XWQ4X+l4i5x+71eNvayiSaixC2dHiC/ZTXy7j8zWj6qVZEC95Z2oSG6zU\r\nU3cis0ybkCKDdEoCVPlq7nWy5d2EqQv3xGxiKxtLR/V1QHEphXmvTIZi/itT\r\n4f21/rZ2ztcnsmMGs98O+f4VCsbK8XLKFArONSBXsfOtSOz26F5/eOT66Pka\r\n6MRwXy01Ohtkw8TJhY6kyh81+uMUQ4lFYWVtztRITD8Cwu9/Opo7O3yZ+Zc7\r\nOsbYpm1u6BzrwIvdtpNjL6v3xxtxrxuNp/hLgGtfFfg9AfVzw+tqrXqJOtBD\r\n3FU9rmK+Yv0vhY/aDer+0/V9G9FC7msRKgXKbLlmSFr23eoRNdAbLkFi90SP\r\nMrrA7/7esaFO31vvZscdJ8Z0rVMJyQfijNQscISJMsht8WWf/5989NxraqSH\r\nwO2y7hGzvrfg6JTEl1YgkE3iGF5xVPyMM2DqjK6CxMtjClc+D8Emxq7N2/VP\r\nHgfWcGjuyt3mbsNU2pLgIpxiZW5VA5LKJm8=\r\n=rYSd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"18c679c73aa42d66117f8f1a88ab7cbde6f2a201","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fc539db34.0","@material/base":"15.0.0-canary.fc539db34.0","@material/shape":"15.0.0-canary.fc539db34.0","@material/theme":"15.0.0-canary.fc539db34.0","@material/floating-label":"15.0.0-canary.fc539db34.0","@material/feature-targeting":"15.0.0-canary.fc539db34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.fc539db34.0_1666637954370_0.2789520236458727","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/notched-outline","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.e340b04c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4ea38513cfafb046d6285fa9a8263aa41be5453","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.e340b04c5.0.tgz","fileCount":33,"integrity":"sha512-MK6GO7fYcbtqK1gCXLBd5BZRSkVGZIRrZyFmyhhQKmP3sR7gl58xDGpLEcRjS4NixF5A/TQlbjKdZUx/qU291Q==","signatures":[{"sig":"MEUCIFmT+AYSpy+SZOaFIfldbyglr0MqLicjA5apl1R0HGc2AiEA6YwET7catm/xiovkxPN3QLVwO9vtHVb+HOqVd+clt8E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHUEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQMA/9GlETXaavGQePFybX59z0J4VKs25N4PgGGaqF1YizKmVbHsZH\r\n9Zw3D01L1aa+3yn/9E/+4RqzrxrPEwtvC0MACSXQB6VnItM1REXdUkNwc9VZ\r\nZNeuMjNxMaDz3PkWS6WfRRrjzNmnMVbA8ZHIjYgBjABdIZSEkssnh1iAylFD\r\nytksqRrF/4O+Y1BGv9DVUSHo46slrZXsXuXf/eVuDNO31SydFvK2pRZ7vLZE\r\n17ZKWht/+0L007YkYLl9a/Rv90zNcLenzcwvqbP+ZdL/unS3KZA8hC1QlmFf\r\nmpqDqdJTPPAjYGnSd+uq06H4C/Id73VEVntL8sAdZ5j9IbfJT4sDTDfEbqR9\r\nfUbMt05ji5tSpUC7Ju/Vrqk/M19ACrKQ5OEEsNXE6DPvGwqoS9dhv30wPiz4\r\nQSK8wWy329hLW0VZHRijmQDRQSdY+Y0Sv5SUznJJVmucGOsJ5Vd6GJfSelvS\r\nzPBOV5Kg7Kmks+WPFE7KOucMzS2iGBM+2Eay1Fg0SXzkhgMIppx8+GJ5d0eE\r\njKZrfIjDFMWr+oDzbpz8OeynJ+/SlSZNMRFMZfYviEqaxhyRrh+5P7vb5eP8\r\nhqnaJQDU9nlcr0RNj1DqG2g7zGEv1b33sIUm1Fgj3JVPAJJysrND5hwYyHYb\r\nTJ5wcdpaPp8CA6b6bmxtTS8eCAWKt05WBxU=\r\n=8+Qs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f3e39db57f42dc19c08bf6e97cd6918a3ce32dcc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e340b04c5.0","@material/base":"15.0.0-canary.e340b04c5.0","@material/shape":"15.0.0-canary.e340b04c5.0","@material/theme":"15.0.0-canary.e340b04c5.0","@material/floating-label":"15.0.0-canary.e340b04c5.0","@material/feature-targeting":"15.0.0-canary.e340b04c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.e340b04c5.0_1666741508141_0.6901974928540866","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/notched-outline","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.2c1a8f8fd.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbd96d96d0e10af76a13cd291fa09ed41c37f42f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":33,"integrity":"sha512-4wUugNdU2CPBSoImflP7XzZt3IR6YMhaeytB1vtnjmLsmthqqoNO3/YDnftEHJYS7RsnO0eOfYVNpRJXtKZPSw==","signatures":[{"sig":"MEUCIG8+KlHd2ep5NLTMyYnlfYuGO5d3Ik+n4s8RZGA30eKzAiEAsZmNlirYImcVTfOopq6R4+EO817yBCU047JfFF5IWtk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW68ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFtQ/+MOgPjY1W7Tx/mo286D0n0bvEsBOtnlXcMieEjrim86O2zCET\r\nsaOw/pwqkXxgfsXBiX9XOGigM2xAT6YggzCJXtyFzsZNKqfpLGW+DwnVtmxK\r\n76EkaqLkr6Yiz6VHNxHBBeAM4gyow3hAEYgWVhNS0bYpH19oYYhuIXeJ9bAH\r\nCsXauutZsUTxflXR0KVFTay7aVoFKTV1LdIhQj6tkk+6aHj9duKOSE2llAB2\r\nZSqrUy+VxHfDrN0TQspBA8odp40ftYBrzQRG0j8pbFK6QFY3+ILdqA+de7Gk\r\nU4xIbmXMGYuVnr7glkFHy38rrrwLm1sjP4wjQCJ3Z+j6WPlU+Y+F9jKSGAL6\r\nPs0BlNhGMjBnQvwzPj1I8ftPoVVRCcor2ZjT+weFDKNQEeOoo1v1f5R4XZDM\r\nBVg5ICt15vXrOWJ+bUAmj8gVHDh124HN0PFbUl0VCuS1fkPCPd7ymLa2Z5sU\r\n1VmMbQiO388PTLX06cpie6Xt9PYomzqxRHuK9VEdQqJl1tO1rqYYucmiKM1H\r\nzFbBRc26el7Quv11DvLfbTB/2jGc7QTE3IkwRsq5BTOjdkj8p5eHKwspgUhw\r\nBL0Elit18sp78yWi9R+xc148jrsmTDw4JWJK58lcGKz6ZB5uM3H5+LVvVIZd\r\nH6UdV2c4XEgIoyWae5TDfzxjZ6jCfI0Tlo0=\r\n=bJli\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dbee023b5e37423b8695520d95f2d00d884bfd5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2c1a8f8fd.0","@material/base":"15.0.0-canary.2c1a8f8fd.0","@material/shape":"15.0.0-canary.2c1a8f8fd.0","@material/theme":"15.0.0-canary.2c1a8f8fd.0","@material/floating-label":"15.0.0-canary.2c1a8f8fd.0","@material/feature-targeting":"15.0.0-canary.2c1a8f8fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.2c1a8f8fd.0_1666805436452_0.8744570698786349","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/notched-outline","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.ecfee946f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a420d6b9c49fe7249e97417692925e5e30f5f1a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.ecfee946f.0.tgz","fileCount":33,"integrity":"sha512-FsnzeLXRw91Yh4B0Fusu57p3rEj+5OYVkvkr7jML6/YS/4ptkIe/vjgHBxM2DThySOqjBVE7EY9gUMIedMQrNg==","signatures":[{"sig":"MEYCIQDD3B7BkHdUG+H1FtIhOOTXlkRSGrOAE8BxJZcmVyaOEgIhANFG2Bi9Gz/lwISPhI6Uxa+xZCzuEfgCSjRSgJfCk8TI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZVYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3ZA//Xwpu6GiUo4dvuuaRRi9FPfd5wjQVOOkrkSI6R+pN6jxE8ca1\r\nHUaCU/vyTAToKJFWzFb4N6rKYf8dCjUgBZ2XwAFNPH/LEZszlMwdJcgRVSAK\r\n8HHvAKpk6NvMDDpCuL6Fcn6doCjhrSUgITH7SDFfrlmgqZuoJDKvrOqBHcvz\r\nG9oYRjpU7zJRP5p/VKkrTQsb6sfhkJd6r8S10iYeakVw+s819WlUU6YdRudh\r\nGYjVdOdC/aMDLWa4P7cqEyC2jwWnNxu8kY4ntgeD/0gBn888RlyjLK8rnzuR\r\nXnHUKWw8nNM5J+ypQcdn6fFRD4ojtn6L6gnUzLWwB9cfwiuQoS+WEt1LeqHD\r\n14qZL0srdwQul0fTag6GfWesedAhZZ8BA3bwRgmlmlv0tfaUuGYL+A7n2HqX\r\nbTYwePZrdIuTjp/cfUPoSi/q5jbRpQww6remLakeh0w6uZNJ9s//UGVKs7cl\r\npBM9+IHqEUJVO7G0RW9ah9heeor7RsFTYbIC+KciMZ89+zkpRRdzJsZAefi8\r\ntdYvwuv9Lva/JDQDATLsYmRFWTJjY/nLesr0XDYY9alnE2HW1sKfCJceiQoQ\r\nKTgw1HsHND9m/CIaP/Qsb8mgm9d6RdI253zmbkvMKQHeeskjA1hWDbdzYA2C\r\n8ejeRGWHBX4HfscsOzAnwOAtDxLlDBcvrR4=\r\n=KwAc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dbe05d725a401275de1e88f9d5bd6cd2079a0047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ecfee946f.0","@material/base":"15.0.0-canary.ecfee946f.0","@material/shape":"15.0.0-canary.ecfee946f.0","@material/theme":"15.0.0-canary.ecfee946f.0","@material/floating-label":"15.0.0-canary.ecfee946f.0","@material/feature-targeting":"15.0.0-canary.ecfee946f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.ecfee946f.0_1666815319940_0.5396480344756294","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/notched-outline","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.73ca9dbb0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af1a298cff4b2e41d4ff2946af8fd905684b42d5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":33,"integrity":"sha512-tEkpPA7YznZvOZDIocDISB8bPvvz9mASzuaqDbp7uRCFXTBYPS3BTzzMF1AGrGHVelgdu+5DCK+CT2HrWmWj/Q==","signatures":[{"sig":"MEUCIDRiAXb49bMZwO4x4ATHVBlPD0lSHy7NrTCeA11ARHlpAiEAtsnv4BBTNOC0VpSsku4aezphvHsAqWOCrMQtLQCnUwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAavACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsJA/7BOM7j3KsNRhbbkTl74gi0DYVSbbSVugPHGv+v5qIVCqoG8rN\r\n9kthoGwG52SwfJMuqLVvQR3zSB8TTA5M7zxvr3607ncBQfHM9QdusMBCJl9e\r\nvrRgDEB383Y0TPq/1OGg72/MPnX1t70Pvx7IjEfcUdmJD9aI2em9dQQmDGzt\r\nkKS4Z4tFm97M2G6cemY6FC64UyxLxD5hL5roWHUXSOxo6PbIWGRsFZWLXPKu\r\nYPjm6dJ00gUxyEt9xfPT4KN0aWP2d9AcePBOVgtUN+LUPfIkXcHUdowoi7YW\r\n38ruz9VOKpx8MDT5W8VygTMtb6s/kpShjFFu9sqQAetyw24i703G2HPUQI0a\r\nv7vt0UrkuGxThsiKZiJ8DlkAm+UkXv4PPIc+rAOxMEquTssOBvShog0ie6JJ\r\nhKz3atvgKoau7QjpCPNveofKs+YUA4HNEvgT41RL69nYYK7IMRbMirCGFTI7\r\nPD8mEGYcRILFFkBf4UXk18OtZEd2DqhQwlR+3+QUrzRMFrP5mJcaIJRBSo94\r\nlWnvGS5OH74S/nMSyJ5ZpFywZpoHjm8wI7RSXT8o5Pv5VyIvMih2I8Lja/Pf\r\n69nzg+bZYXaFD1g1Jmu9jkmSxEBmNnclOEJJEekKoVvQUcalOP8sOv46vzZ/\r\ny4Q41gLkonn7uOfIpv0l8UGaebVZPt5oN/E=\r\n=3KDG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3b1ecde6148e6e8d98c4b0c8a4dd2ba56e95586a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.73ca9dbb0.0","@material/base":"15.0.0-canary.73ca9dbb0.0","@material/shape":"15.0.0-canary.73ca9dbb0.0","@material/theme":"15.0.0-canary.73ca9dbb0.0","@material/floating-label":"15.0.0-canary.73ca9dbb0.0","@material/feature-targeting":"15.0.0-canary.73ca9dbb0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.73ca9dbb0.0_1667237551062_0.5095835933458064","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/notched-outline","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.357f2e5f1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ffa538a1cfa063f77d3e6cfefb72e1acdf321b1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.357f2e5f1.0.tgz","fileCount":33,"integrity":"sha512-vGMJSz817Wk5vHIvoW/V7RuL6MW3HXNALM2fv0su2JqNAog25JwrmAdzGa02IJdQ+smZsl4WPsjKBpprg33r7A==","signatures":[{"sig":"MEUCIQCuMB9o4PkDuquRmVqDfaGeqT5RoQbX4tdFk2nkzKzk2wIgLdtmMrbKoaTdqhmCsKt1XbrpVYkiEahPbejmUWWoaOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBi3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3PxAAiSYnibLLWX1tlp56sx3CUmczVx5mxJA06ga8QYm/VekuYIzi\r\ncOcJClOtcjUC7nHqI4AKnLjhZgSsGpy+ZgBf9m/GgPgk/brVqWE/TNOMYIXE\r\nIyt0m7C1i7EooEPwJx7nfxvtAT8CiGVzmOwiyx2XzC+SqYCuPBhtCzD9kwxu\r\nLLArQr7GECJ0IuRKsegf2nFoA61HhLEm0AC/tVqaGzZ0ANYWI4+sV8tTOSe3\r\n46Btay0vr4uZg228LKWhjj8ggJrQLirrBH7cGlq21B1BDoufSDNag/xE77OJ\r\nEmmh2g5wBob3AuivKLNmjJJgfKbNPMyFLTk63ipgXG8CaQj0eQ97Q+Mo47nr\r\niNwfB+nNz0YN4w2lj8gm4GOguOsIxPkp1pBoy/Wxkq5L6AReb1mk7eaLlRJm\r\nS8hdXy8QUlJ+FzqUnQkEgBTcJ8xDbAwyuS2hbLFiPta/wPDHGxd8Bzi1Hc9F\r\nRI7gqG1i33k7/9yY10BXrzsfg9J6a2SV4gymKS9JIYuYydb1bSpdbSRDOuPE\r\nkWnbTuEKSFX4XCVmF2RwfrVywqXh+z8UZ/Svx7DMxpZSc81FUmYPq5qfB/Gi\r\nBEIrmv/IxLigGszSnwI9Ryjw0XrqckOFqzISWkOh/T9/QZZy0TTHL/5eBWAi\r\n87INDbK8VVi9rnck+xzo4tJngsynVcgIq+Y=\r\n=vgyA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7f8af87642d395b497ff80efe06544dd459b947f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.357f2e5f1.0","@material/base":"15.0.0-canary.357f2e5f1.0","@material/shape":"15.0.0-canary.357f2e5f1.0","@material/theme":"15.0.0-canary.357f2e5f1.0","@material/floating-label":"15.0.0-canary.357f2e5f1.0","@material/feature-targeting":"15.0.0-canary.357f2e5f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.357f2e5f1.0_1667242167765_0.7500771462361906","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/notched-outline","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.eb103d4b5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5fef693745f0466bbcd1fa6e757c074d09ed1e2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.eb103d4b5.0.tgz","fileCount":33,"integrity":"sha512-nq9//tK2eCjErFnQo39Y0cMvqcktpmsKtTpvuR2PNNLwpMbzg7jtIQuGLCbPiDS3WwNdsnf/4BmiR5BQDbHb6Q==","signatures":[{"sig":"MEQCICsVK67p0u14tvW7atv7f7NmqqV+BX863yeAP6eYlnLxAiBsX5eCC/tOC2K/I9plBLUvLth4hxo7n6852ht6ysVbzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYChuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo30Q/8CxafWJghI5i+qeEw4BS4XwBza2R486NTzeDAzonD4uUa+Cx6\r\nYDIoDptWj7VgqQBBdJZ+Gt9toZVa/g0btD4ylOdwa2nMaDoeIYjkPIEttK2V\r\n/NFdQlwqktkxRqHaR6s6EI2ziv7IGx0uQ+OsKk8lE/VC4LsR2x8tzSuhPLf3\r\n9qIcSQFEMDAE+FFrkGxYdef3b+/VdA+U4eYivWMiaifTCNeA0NdDfklwvPTX\r\n1I/REn0rvBa37WdFlozXtyGUXSDlud/8hfaVwK/+eFiqaR0Ux4bWvu6LjL0Q\r\nQCIugLTJn1SLeUIN6nKSDQrzsLYFW9yp56pW9ebUaZ2kmExnHWtSRR00d8bN\r\nEMSMD0vaJ7L8AwKLn6+4x9ONcuJCTkgxeo8NPhFhTKH41gVOuqzBwkeoeVRA\r\nnLv5s/qTEBgefVue45SmFh05/lChmnP5L3jLucsuuU+mmzx6pzd5jTJ+n2O8\r\njEFyXn0XVpLQgkJow8N0XfU4SQvW+BtV/iL0PWcXQxmb3AdoykNycwKQQapt\r\n57JLn0EvxuE3c81Jym6IdfNJ12HKN107H322OacyKRb0FcYK+H9k7uoDqn4N\r\nge8rpY+jYQ9lo/3ir5XS0dYkTSkE0zmFixXnVwMls8O7KoWheqSk8hptf4eW\r\noKUyns9e9OFvL02Z3lFPNMHdn4IcRju31Ro=\r\n=8EHX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6fd82c2abdb8567ca00c6847142375ca8ac18b90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.eb103d4b5.0","@material/base":"15.0.0-canary.eb103d4b5.0","@material/shape":"15.0.0-canary.eb103d4b5.0","@material/theme":"15.0.0-canary.eb103d4b5.0","@material/floating-label":"15.0.0-canary.eb103d4b5.0","@material/feature-targeting":"15.0.0-canary.eb103d4b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.eb103d4b5.0_1667246190781_0.5506647208991413","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/notched-outline","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.af5f01223.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92ce9abbaf8d632b32f15665f714cd49a885a2b1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.af5f01223.0.tgz","fileCount":33,"integrity":"sha512-T4B4xUPTJsQ+mdv0XmoaYfwBM36QS43KrHK3f9jb4U957OLMteUmHfI2yKc7QL6D98eoS+VGaCKKoYxgNPTOUA==","signatures":[{"sig":"MEYCIQDLTQLwLPsi0hKmC24r5P/jE6hAk+tLYuyp6VWeORcifQIhANo6dlfay55Yi9nDjqKP75nBQui7sg1KQAxTy8cQcosp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWdKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9FA//bHm18eefZ0x7VufB3YOZhI2mJe1s6uwANAQdJH3Y12LIBk3x\r\nYww3svSVnMwSIhdmxbt+2Ew5ffB7veVAE2HZAP5boxJ0ICNI2J48KisPWVJH\r\nPQH86oADe1uBmJF1aHFTCtyK6MA9AL5WrQUe0Na4nLD3XdN9SneWIj4nUKDW\r\nDkYdkJQGNu+rCHbLgsrSP1PEkYNLtQb3yqkk01oVcpIdkMZdODGqHZKI9+Ew\r\nPeDTXXSaJsLrTpoTLQj4ET15IgJPpjX0DpC8HeZg0Gl4qTrRR6ILqvVCGeSe\r\nm3PGxTCXpg4JjRhbFUgG3UoN5kuJcq9rb1CRP4NU97NBdttZZecHS8bsZtiW\r\nY4p+zHmgv1CCOeprA8QuuHSVV4vVA/IUsEonqDVgtTgZYK0VAF/+8AL6kgjK\r\n/e4JsW6mfv9PVhGQ+ZAzOHrLspSkwSxc8/wl9J2R+2thPN5jiIeltXYRva4J\r\nUYX9FI/yeMh1S4M79FyNjnKqyd7Fi/nFRrBfRij8r6YxR6lb7ceC/5tiG6cu\r\n7JNmxbYbKEoxvdYmfQDxJsgYtaVXAkmRJxdQbfxzmgeslAsqa3JE7cCd6DYx\r\ns1mCc+Jyps5ofcio7amrHdAak1hdeubVTLuZRoPMBa1WChRTt2fKiv8D4GWc\r\nQhyZIli00C1sWpEKtvcaji/7xYPbUZz8ajE=\r\n=f+EV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cc7d8ea77d18e30bad947332164ac02701e1ed9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.af5f01223.0","@material/base":"15.0.0-canary.af5f01223.0","@material/shape":"15.0.0-canary.af5f01223.0","@material/theme":"15.0.0-canary.af5f01223.0","@material/floating-label":"15.0.0-canary.af5f01223.0","@material/feature-targeting":"15.0.0-canary.af5f01223.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.af5f01223.0_1667327818222_0.34437580256561096","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/notched-outline","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.58733ef41.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f820c559432d0e1517d00bfb97690a5d1b92997","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.58733ef41.0.tgz","fileCount":33,"integrity":"sha512-msJ3Ezdg/ArIrNkAOeITk/pbkq4cF+l8hWhPmu3RxuG4BcYxdgm6vcD2bWaDyq2BHh7InWeqWSiTWZf+BPiIJQ==","signatures":[{"sig":"MEQCIAKr4/YcDqq13qpCM9UmMJQ+ZZSw+ki4rAlwHtOe3C03AiAKc0mk2epS5XGtQj1UUh6wGL24Pngr5uw6Jcaa15LMhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrKoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1pQ/9E8rGHD1qg1l4laRuN5ZucsxgVVxUEpnqVh4dxgY5XWTnnd/I\r\nw0shdVPvEhL4q0grq4bcp5qHDERup3wygvZEcJoIgTAtmBRuDGnemjwexLvt\r\nBCo3EUcKV7CPJIROfnoyKrJuCJ1f04a3V5RLtUXjVOyKGKasZUxGaQJsA3hI\r\nQRaWxSUypUyEX5ElG++XXFuyqMBO6jSMpQYUc/PA1REH5oR7sl9MPTL1AEkX\r\nH6rLNBHIgfD+a8P59ghDFdsk4lkkZfG7mo4FDF8h/dbzEQXyKCUmvWVPC1rn\r\nGk30lw9kDaiD4+eZoKamXT79SuskZxaTK5lKj4Tf0gn3nLNgwQWxqFalc2Ao\r\nevZG1UXt3KtcdmZKz0PljAAYc7f5AhtKOqfaj3QT+h2Dcgm/1oNgZbz3yEmM\r\nKjxxwvE0Ej2On0GP0acvqgeZA+z0ZejTnRly4FwvWmXFZbqeNnPrZwqCoLYR\r\nWWScy/jv82uZG793TU0znrv0gWh0r8saEP7eXPjyoRy/nQYaok2zvLNl2YGK\r\nxB4/O3KPiOdxCg1PSNS7xMj0LDtmyA+smjilz9Zj7U7GqjbZwqofpKoD8bOr\r\nALlZnySS8GktAZoCckAWC2Q7yavXxKDjIpVgDDu0/eIYokqZP9HbRGp0uPiF\r\nZT5UAMLXEg27eyWJi7fLJsIioj+iqiiM09U=\r\n=Ytfw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7754bbdf66b8fd61976d3dbbe04b991d9dbc0caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.58733ef41.0","@material/base":"15.0.0-canary.58733ef41.0","@material/shape":"15.0.0-canary.58733ef41.0","@material/theme":"15.0.0-canary.58733ef41.0","@material/floating-label":"15.0.0-canary.58733ef41.0","@material/feature-targeting":"15.0.0-canary.58733ef41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.58733ef41.0_1667412648289_0.3144003899484089","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/notched-outline","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.909b48215.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2a14d6db7e9446b8b4aa727b817087583aa966c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.909b48215.0.tgz","fileCount":33,"integrity":"sha512-pEtTkqwFC6qfPR3OYrcrgsle3xcCNoH9vTEmryeIi0dK4JsOoDAq9SVb1peD0ojHZ7u0x8L3bSf5Jm89IN078g==","signatures":[{"sig":"MEUCIEXH2wZmOedbFu+jupeJDwEsfF5ry8Eq8qwSa7baOrwPAiEA4NnAp9QeSNeS1jru3MXO6UgDEgOu/7sSsd9jaDu1i+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz6cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5JA/9GlIaPH1su1c+hyK6Tg2Z9MkQgDIjIjYvA7jFcOmKCWG0MX/W\r\nMRAmMQSMqM7llthjgQ2mW1N+OYxy8Ghq5O9bCpTb6lTHz6DWUpGlcyTsASyZ\r\n1mwOowAc9G7uhNQTekS/Bg21eER+Ko8RxXoNB85Twdn151IKhA4BRal3uSzt\r\nAF48AX/SrSbSARyDdG1sanIoE/n5y5AsgTmUo9wiUaqcPljQSG6+YodmyAEd\r\nm4w3KvSBrdj9dYGRQetEEcTM9aPyilQjsvue50/ecFsNl8koLdGpNzkv+SMM\r\nXydR9Ki7S+/wAyaboVNQqoAlv/mcIXlxrFYAjBhouXuU/munK1xeWuYTnyQm\r\nxeMZTSuK86LYYc20ZNWt8GNeT25IluwkzQ9VD24wjG+TsFNCEnXG/h1cX+ZA\r\nPUonrl5mnCmxzqTo93Agr9RkZ940NC5kPi9uoTllYxs9TY4mee7IdQtR2IM1\r\nXf1sl7Eu8zYpr2sfi4zxnZPjXJPIt69OcqjGSWMfVH5AEKrXE4y/y7tgUUnZ\r\nzpO63/Md36ioDip2GNVT5VQEST+T+2V2CSdAr5hNObOyhde2QaXjKuilr6ZL\r\nX194Iv/ctOaD4/C8BvTpYPJ3Dni2PeYj4eywRVlYYL7Gd+nbWRyZelLIZz+X\r\nU3j/vjdx9sVusEO/Ow5dDs77eDOWrtQINmU=\r\n=pXkd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"68d372ae12d017bf28fa2ad3c86cad4f70609116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.909b48215.0","@material/base":"15.0.0-canary.909b48215.0","@material/shape":"15.0.0-canary.909b48215.0","@material/theme":"15.0.0-canary.909b48215.0","@material/floating-label":"15.0.0-canary.909b48215.0","@material/feature-targeting":"15.0.0-canary.909b48215.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.909b48215.0_1667448476573_0.6371329086221993","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/notched-outline","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.7f17127d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47375eb43243b78d411c42e64bad11ff99c2f87e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.7f17127d5.0.tgz","fileCount":33,"integrity":"sha512-LL5QM/At0cgffcrn01Kb5aKEIcK6tYSv6vdcWsggcigemAtpSMrNlMOvioz7GuxJXpxIGgVvptab605upJCyjA==","signatures":[{"sig":"MEQCIB0UGpIrpA8M3RpKef0q3/bsrbR8blUDySrsCF0YSz/qAiAu9lU6Dmu2XRJor0ErPqsM6R4pEfngYWwrxQ1FrmMNIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAYjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIzQ/7B05NrqF+6QAMabmn57AcetZhvj5G1rnLrAMvZCLFiF3IAeGW\r\n+BzpVz9kZx2GcnbpIjv8ZNSIXkdqKXz1MAgLx4iIOHfB047qGYFRKpRd1/i5\r\nErmh59aGNF86IZPy/qbL/m5E5rHqyaU8SDFI6IEPjzBNSNn/WpF0+AfNoqp5\r\nSqC1yj5CQpQVTI8wNtCUP8GWhwpaxXL8d1aFUQ+w97yBaQV4lXEthhYp9uJW\r\nA4+qKKM0gmnGqe/GukbR7nfoMG4+RBMC18VvLQk8HQqOqM1W7a8pjm+FfRhC\r\nGbhxFGLkpGCcGUnz1EyhMczt9ghF8cXYTA133RXgD0La/CrZ587KXTXGjqm8\r\nBNammjn7eRnTFsC1dOLvTKr45NIzElVKOnp8+rRJv1rJbQCcl5ypbdKMNzDk\r\nhFFVISxeM1Fc/ow5YpJSc91ET+NFnnQKeqIOFEZ0/2RH25jonRV1ou/cXovv\r\nghAm9hxcamo4qGEVxDlrMNK33lDwJvbURp96/ghjTFeztr+Zsd9KN9Pcinh9\r\nIROxHWPT97MmHQHbfenHIoCfIPX5xS/3iC59/PTiGrPFEuQiuTBKhJjJca+H\r\n86a+hjZwhP3dM4unfE5MyzAJBrY+pZMqJpGy6GfUL1Y7AwajGNhre5/eNxMH\r\nG0Z0a2GvGZkdBQooWXXSGd2AYTuwzAuJUlE=\r\n=oqDZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"26e22af93057c0fa00e7fa9eb104abdc96131eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7f17127d5.0","@material/base":"15.0.0-canary.7f17127d5.0","@material/shape":"15.0.0-canary.7f17127d5.0","@material/theme":"15.0.0-canary.7f17127d5.0","@material/floating-label":"15.0.0-canary.7f17127d5.0","@material/feature-targeting":"15.0.0-canary.7f17127d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.7f17127d5.0_1667499555133_0.8230442238147329","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/notched-outline","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.da95e2a05.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1810d57cd5593601967c33811d9cb79f6bb380e0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.da95e2a05.0.tgz","fileCount":33,"integrity":"sha512-L10y61pN827+zKwHA42T7lqBNfDsvHy9L7WZJY0Um1Xh4XSmvsh9YRI/XQM3xSQQnDhkGQjrga79LCHTH93s0Q==","signatures":[{"sig":"MEYCIQCrjKQLB2cV9cl9dgHEwrHcWOu4eomkBl5wYRK1nDVu+wIhAJMnsEfErFWsevgF950MyinFgyoDFXm8k1OAOn67bcoP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUTfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqK6g//QxOjb9iL2XUhZWuQE990yKe6lmvNwUU+okg4jSDOL/GOktyr\r\nLMjcJIpNb/y3Qiz+zhRPkphZPYUzxjjrj7ItN0srOBaBdYjmrQ/hUbyFYUHH\r\n/vJLd1/2buXo3wQZt86QkwEvRiF03HIwgj+5fTPpzbaPd4lHAtgG3lXK0G0W\r\nqEte9FHD501PjWkZFugMymSGzC15UD5r9VEAL//GE1oS/Bb99ybr+9SAVzKr\r\nUWOuhpvKHTZ2e6I8QmLswU97ORjwItWcM1ildLjNF1C+udOse0OQdApwdmuo\r\nmahSlQ7ztur0W184eZAANEq82kFh8EazFOcYxtBGgYfffhjyowiE2b+7lBkU\r\nBHI948TyAbQ5syVLa/oX3HzFPEAk32mJ8KKjdQjzJCSZOHZDvYlFj5q9NJt0\r\nOKFiqD425Ij6fjQvAxoq+XUSejEV2fKPgZ+OlD6xKSBS4aqcaj8zxkOiCR4d\r\npjI86gvplc5tCVfzzCZdKaEHlX1o3w/a59tQ891O3xqBDbrted/8X6mEUqiH\r\nqtDp0bhei6sQ1y1wnfMq5XwhisVAzuCFnXxrWxTfUYmDUomJIHuS3Bdco4rh\r\nQdd2aqEbNMinMA9N90Y44JMbf54ms8KlpiYMHOeG+me/C+5GSozJp1YKhyIl\r\ntu62fY0gixnXiK+1gSJKxgFZFyJSsJPcVNY=\r\n=qmYi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"eb47dc6e824d05fe1a33c55066101c99ce1fe241","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.da95e2a05.0","@material/base":"15.0.0-canary.da95e2a05.0","@material/shape":"15.0.0-canary.da95e2a05.0","@material/theme":"15.0.0-canary.da95e2a05.0","@material/floating-label":"15.0.0-canary.da95e2a05.0","@material/feature-targeting":"15.0.0-canary.da95e2a05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.da95e2a05.0_1667581151590_0.33446297773725675","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/notched-outline","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.4832e2750.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"515f61ad9ed2b5577d503efe57d9e031af7a3081","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.4832e2750.0.tgz","fileCount":33,"integrity":"sha512-oCsUZ8mtT7PS1/xeaplUnRlsp5UEdDO3hIJRteFvxI7thTBRAS/XhQnWabkfve5/2CTN98eQ/gsQvccB9e/fkw==","signatures":[{"sig":"MEUCIEXqSSkCfD+WOvqfhAKQvfM2Rhsv9akd9dbZ3HCxLNauAiEAqyCbM282XHMiRWxCyJp5NJoHeNSNBRPdEjKP8GKp9fY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXyhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCsQ/9HDkYmLT37+JzcRSmG7E0vOYIchLRUZBLQf+MbXIFlwW4ufDd\r\n7RK+tkdCp5UcaZPscAzTZSN+4hmFbJxnFMuXu3oNB0Qy5k8PMjk9FHuxbvu/\r\nV8gFz3F1geT/HLATFJgg3+DF6VF911pFzQPjhXfafjr1Lg+gO23NkpHMwL0i\r\nRdOeZnDcSGG/b8NnQtj2XcWkvLhjPlCAfDj9VOf8fBVEaEu/zumLGYc+dfZS\r\noeSJ4qWpwvFRxtnywV0VyRaN2oVAeIKHJ6z8ROod5c91hfkB8aYuV6xqrkJc\r\nKdn91dnh9Jd962IyjklLjQcW7rSKsNecub7KHIJ8A2F+n/Ab7O7o58cF4Luf\r\ndtbboOaexKG97MOM1Ow16fW+HJXXdk+0AM8xRWsaJbJF66i5E7EJPMet17IW\r\nRbtz6nXYNVI/nKwKOMDVpiijYH6TUjuKL3g9IPgy1Aklg9NreOin2Nor4wkc\r\ns6pOUOc51WZY80qKs3B1YVThFN/0nLfe5w7f9f9V/AQLedC9vO/kjY2zkXn3\r\nzdDZdos0AhjoWfdgBKU90rqPsRf/KNAYVfnMKoZn8n3+2sKTb8alQxX6LNJx\r\nUmlQpoTw62G20B0EUCOgG80eUq5wLwv0CqYJeNnSIRMzAwRJ1ZiFy4ZxcwGP\r\nLKo0fUsieJe/ptRFTojGwTwmV2N3e4inShk=\r\n=cIZn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"258def578bdd5ff3b52dbbfbe6f06e14b2b74045","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4832e2750.0","@material/base":"15.0.0-canary.4832e2750.0","@material/shape":"15.0.0-canary.4832e2750.0","@material/theme":"15.0.0-canary.4832e2750.0","@material/floating-label":"15.0.0-canary.4832e2750.0","@material/feature-targeting":"15.0.0-canary.4832e2750.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.4832e2750.0_1667595425267_0.16523928941862875","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/notched-outline","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.215506426.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"822646f49a958da5f106772148824cc7dcc4c969","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.215506426.0.tgz","fileCount":33,"integrity":"sha512-h8x49M+KRd2E/U8KDmH3P1f9wGzteLPe7V+g19ZuOgPLy12MQSJ1h8DIecbEOtPVgIJHFeqiJdf/q2OAZkPO/w==","signatures":[{"sig":"MEUCIBEhNKopiBYguIJUknhAQtMsrdj2YrVFgWaIX4vMRPbXAiEAxyzG4G0hiVkU1XAj+AHTJ0fEymqMf/oDDI+xanET0tI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbb8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrc4A//d7QXZ7zRpF2mUMN1ihtUpOWI4Ow5+0kLJFpyEh0IIDsvOdBv\r\n2G4o1JgQK+MMGWDaima3C/SSdh+HGrrOdqOpyE1DecFTmq3tyx4daqJ0dTpP\r\n2SGyIUBcy5eVJ8ord1R9hKvJ9PV9Wk1FQbWOV6QlP6uTvYR63Ey6t6N9BYRO\r\nwkR+KTKPvwywHhN9Ku2A44yVaBFqD2Jyh6cVNZDKaTTrQt1WfdC9UI2GoY3i\r\nF/1AJrzP3P+YrRsXpt9bazPB+2Kw0pTCvBJSAWFHPmWkRU0pFL129qU8MjFT\r\nfg7lQWGkLtBIVL+c0FTDxfpF6HfNlkqLpEIA79SWciwyxS8KhzkX2wwMG7pu\r\ntHC5tZzGVQOL+bOIyBhEyel1sIvKiBJCf7yNTFXknR7PA72k4AzTyWMo8t0s\r\nX1Md9H/BGjpZ4/WbnHl+99RfxgIoMFiuM+NQ/X3lC0/Tx2UXkJqJ8cldI3or\r\nYaaLnYIzS9W79FuFrvtNPKkGPAcxhxvHQ07g5wmDqMyJ6g6ObSqEU2Q7ADBt\r\nZj7lwqTe0tfihKfT5OR/B7tY7sB0rC5XixH3UXlYAvAtgxRMyCzYdSaBRq9y\r\nbobj66Wr8UGdeJH0qRp8kW8Y3vNbrk1Z5fOAf0nKwYZ44oiyHfUJRorPRv5B\r\nBChispnyvBN20IAqHCJKYj4EKv4Vj/zoHa8=\r\n=xETN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c7da5104ce280eebfc1b0cab2279b8acb906babd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.215506426.0","@material/base":"15.0.0-canary.215506426.0","@material/shape":"15.0.0-canary.215506426.0","@material/theme":"15.0.0-canary.215506426.0","@material/floating-label":"15.0.0-canary.215506426.0","@material/feature-targeting":"15.0.0-canary.215506426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.215506426.0_1667610363873_0.04299690194257133","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/notched-outline","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.4cf917476.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f1758c490a590bcc1c5241e4f89245f38a3b137","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.4cf917476.0.tgz","fileCount":33,"integrity":"sha512-G0r9WFjMqDes1O8LNzXjUO7PxEq/ssnlLkJCSkCAwACwB21fv8Kkf2tJOI9Qzr85wPLvOzKbjzu18PaXb3Tu6Q==","signatures":[{"sig":"MEUCIQD1YypWQojGAldscPQmtuUogtvsnFMDuhpiyEjiftSCXQIgTboz7k6N76/cgZ0C7PRUNCoKjrHRXDjuCI6iOtr/rMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqWZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQHA/+PbwYVzLRa0AcNg1ysTVKVo6FL4GuaiMSlFtOdRxpEd/WK4ej\r\nLIEYwjWRfbG7d2ZCq8K0qTSP8RiUxh2CupANFkKB/fo6cvGTpwMSLnInHUeL\r\nELBpH9jUCUaguCJl8ZCglyg/uWWjQ/ZWdJ0TOiE8EA578/dl1SXC6ql8mqaZ\r\nxrIhxAefEySHM8/C2voP0xzGcmR+qOcazH5LjKJzAu5O7InDRqhUx2yv7fVJ\r\n7vvCNJUeqQTPDKYNYifqxKbaXANb/n2/Z9y76PRPbZMMscdsOMFYg8y23DOq\r\nvfWgSWJxwmps+NBGHkYyKt6gq4SJtE7uxMR/8Wy3ftiqITGwLGxrGhLd+yOn\r\ntzQOkhsRMhgfmGvBJr9XqGx/XT+Q01mhWR/sOcEZAj2X/oKdV6DHMIX1QqUZ\r\nLHostxRJwPRhDfTmnW/wpSUYGZoRu9ISp6mS6EiugS0Pbb5mEgOSWOd3YJFy\r\nGeeD96xLv4gjcZ8Qm5Kh2ed0bvNAWU7av2MNR1WYMm0/Llo30tG3ANd3shnc\r\n/n7Zqg5GIB4nqaQDdlonUJ8qFE/vflNcPBjAcTE4SrK8atloyzIdkeUGbfbb\r\nbs4c1rqXEYUWTB+0JFRpI+f9nUxNpY7CGt9Q5QTlfyMzKdJuvhL4YaruS0R1\r\nVnmmFnudW670GpTgdEIOVAHUYNsdl0waslc=\r\n=kqBZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c7ef38a54cc085b34eea4d38f143f3b65dc649e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4cf917476.0","@material/base":"15.0.0-canary.4cf917476.0","@material/shape":"15.0.0-canary.4cf917476.0","@material/theme":"15.0.0-canary.4cf917476.0","@material/floating-label":"15.0.0-canary.4cf917476.0","@material/feature-targeting":"15.0.0-canary.4cf917476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.4cf917476.0_1667671449108_0.2498942095452823","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/notched-outline","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.eef14bd32.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04ea64a1683a61d709ab79841fff49bc21ccf700","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.eef14bd32.0.tgz","fileCount":33,"integrity":"sha512-Az8Ur3B+0QNxE0wa2WUk92incySk8GIZikiV3BcrKu9D0tBRbayXw/DDvpwufdUHcvRtdD6IvOoLB1ALkF7tWg==","signatures":[{"sig":"MEUCICirEYoqLZQ/zGzZvU+bLA3X5j2LOlSRhxYpBhSQwYoTAiEAkqARXg+VtnV+B6nRhrKPZ6DjDxEe5umT3l3ZXfi1/bw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+3YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquKg/+M8I7TNdDpKD6LSRACi4iokcIZEhPDi+a4CeoDbcHfMO8eYyn\r\nJ8l8YlrljRvYBCkHLakyF8NlX/PzBBQSv7U4dUs70Wum2uscb82hObMZDo1J\r\nGIbdDsP8gKPQpr3H1AW0iKFneIF7DKmwqFx5ITkXy+sKTH9El0ULEoTP6YAX\r\nXWygkmdbcIiJH46JW0DR6dTGfJKxIwhuQx3fbhGc0ZyYJnXJT1Mp12QHkjFk\r\nTAH+GVRSkxmD79hUn8IEWVt+TpmgKJTXv+dR9arssbGjSLzdwvcHqtf2ls+/\r\n1toU5546QIopQoIpBbWpcmJsEB1nE7gu8zbpiICipIwmJQurZLxU4wbU4Tj3\r\ntMrsghZSOg2pT2n59vF1MhDZopVCHB74V4fWdoXJWlMWh8VLtnRKIoKZ7jLf\r\n66mjSQ5ww4wHC103uMV0779aW38QnDQR5gI1VvoHHylcP86vpvj4Y4/LPgC9\r\nu0HgsdIeoZhXkQA2WJr+NhKZaze6ORWNi+tJQEbDCoggY4+zwqTB/mfGqjqZ\r\nXpsUTVjKmO931vndLFu9HnyKvOgMosHXodvhGBfltgDNgs0zSvoK+iS4oT3H\r\n+l35Vvu9g2Y9NWVWQIrcwqJjZvAN4Lns8m5sJeXKv33NaDk4dkYSmIUMpYvl\r\ntJfkQhrEJtn749b/cCpTIrCkOOf//UNxTTA=\r\n=ds0r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"40acb6cbe1201f5ef758bfb96da3145ae3c4c1a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.eef14bd32.0","@material/base":"15.0.0-canary.eef14bd32.0","@material/shape":"15.0.0-canary.eef14bd32.0","@material/theme":"15.0.0-canary.eef14bd32.0","@material/floating-label":"15.0.0-canary.eef14bd32.0","@material/feature-targeting":"15.0.0-canary.eef14bd32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.eef14bd32.0_1667755480223_0.6632753354151344","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/notched-outline","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.6faa29fe9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2679ca65c9dffd17eecc4fc4e7f5ed120fd892da","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.6faa29fe9.0.tgz","fileCount":33,"integrity":"sha512-G8M2itQvQpPmMZa+vqR+UfLPSRPBuV/IwT+9ssQgo63OCmIfK05bzGuWD6wRFNhjNaoAIGaLyshmtzb4aZ9CSw==","signatures":[{"sig":"MEQCIG3tzW6Xl2AZzQn7lSILCw4zZrC9l1oX5GYf097OFKwvAiAQ28Nlx3CO1xSaQ/lO38AMFRRwTNv3RnuSqaFkJt1WqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHfaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFaBAAjmmrq3QA3KTfPZQYW9DuOqyscJYuCKuO6iIjF6Eholep8LcI\r\n2/M/5EY2JlUb4qtRKex7bq/VBgLko4eo4ZO1vpkwnfEpdubMx8nAl5bgkXQo\r\nzNIhXUEmv64zyYInw/icGyk/lhDzp3HBaBcSgFX6qBCm7wWo4TpSv71+MxOZ\r\nvkyy6mmo7Wyz24XDPj6Ou1U07bOK4dxfyEiL1oKfosopLYIar2WZbBiZZDi4\r\ndJJ0SyYGkWLvxkmtVSek9hXIcxI+/2ozHnGaIyemPCCSrlSxexoQM6Knd6VC\r\ngOCz4jI9jS8BFZ4irD/dtBhRoXx9+C3t14nzZJVOgz0FjEMNNl0yYnHLyA7j\r\nuz2RgCvXdc9hIXwIiemD9+8r6osvMOA+/A14pFGJwsbY44bX5FEMc5qcmjLa\r\n5Lxvlx2IyVHqKWPXqpIyL0HKAJGfM7TTcZSINT79WgqC5AeVVlG4apDXwsSE\r\nBK6H41dygktYh8jpTNXoNhRLxld0pSxbYUxY7hCSrj0M2+nXhYrGboxt7NcA\r\ngN6zFQyrS7BXFW9LvWUuaZW7nKVrDyQ3y8Ys+KDFpQ0xU9CFWkICVqMhfx2m\r\nBjbL3sd9fYKk/j3grJYAAVg5tlU2LTxuASyXjvlJU/KxcV2V2H+fJSZQXCnV\r\nBF5RCycJk7ZKROI0dcyL3bXB8lPVDV/7DI0=\r\n=jCCL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1403858386443f73c0593105b5654b6ad8596a9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6faa29fe9.0","@material/base":"15.0.0-canary.6faa29fe9.0","@material/shape":"15.0.0-canary.6faa29fe9.0","@material/theme":"15.0.0-canary.6faa29fe9.0","@material/floating-label":"15.0.0-canary.6faa29fe9.0","@material/feature-targeting":"15.0.0-canary.6faa29fe9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.6faa29fe9.0_1667790809995_0.009148699040089081","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/notched-outline","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.9af09b967.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd465a252118935a4b740dceca141860f3482bf9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.9af09b967.0.tgz","fileCount":33,"integrity":"sha512-LQ4wJfPjR45k0fObPMhKagnrYbFM7fL9iP7tTOG//oydcljx8oIs4waLsQUVbcZtI0RcFQM7T6+dmrz9Y6QF+A==","signatures":[{"sig":"MEQCIBOQeHF2Dn8fiB29MH+h3zU3chi801ixpZxfGiJUzp4iAiBFP7S52E9X4kQ/33UB8PhboGOH1ooL6teqjMgsRU240Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU4pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp75g/+IQXHweu1tB2zG0Hac3xCFtklfsAceNED+anvPBEiuiu0WX0a\r\nBMbG2DsV+7obrlvSyvS8Hm+2rkdKn9fnTR6BmJxOzScJcy0HaRnXOxBTZuWu\r\n/K/iGYqanNSUtTADniHj3TYT7BRqCcl2CaXwn/ExEjDB1q+sAwY2D6bEPvrl\r\n6DzpF61SIfjFzHomfm5kgbgS/QuNZysX+WXcxFvxPSMtwaBGlI1YlqDsq941\r\nNGdHQezLBev3NFNG8VitaWicQ0Swkrfs5JeP4uVDrnMdqqdMwc+83cxuNE9b\r\nQq3taYGGWeKdRYXlRNXO55vR5Xf4xl5j/cwkb8ub75JJXZCWcUXG2/jzWqhh\r\nnHevQvv1Nhedpjo+T/9UnPfBaYoN1mM9lFMVynIi1JsD4iS0LaxLtCe3vF5L\r\nQr7SBwUT9h0aYfVMdu0RyFMK5o3wm2qNwFzcNj0/ehl5/eiMYbokal/ACYP4\r\nwwaZcCJOq+xZOh+6LFj88EjiJV6OSqkWxihGwEDpJ5ZQrl7QZbZBaDuK/q0c\r\nQxp3eilzFitNQpreyOAT6X0HsgfLd1G336XF/kwQE6YlfcQWFEXgaevQR95T\r\nVYt3t5hvEefOV7UNz3ol3gVlEKoNeXWZMYIekfTHH97BZd9AHlLNUwGdW7s9\r\n9L6VsXfbBYnboNiE9UNqOE5N6Rj1Z73tvqA=\r\n=mg8e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"745e702463a22f4c5de6e94b3527530a9bdcc9d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9af09b967.0","@material/base":"15.0.0-canary.9af09b967.0","@material/shape":"15.0.0-canary.9af09b967.0","@material/theme":"15.0.0-canary.9af09b967.0","@material/floating-label":"15.0.0-canary.9af09b967.0","@material/feature-targeting":"15.0.0-canary.9af09b967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.9af09b967.0_1667845673163_0.28992216668783355","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/notched-outline","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.0f54fbb93.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f1f3fe8fa9d1649ddb46ffc7d40c92e0c4d260e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.0f54fbb93.0.tgz","fileCount":33,"integrity":"sha512-2wZmEuW+SPsEL5HMyveULm8q74fhJGaZ9ACwJGA7Fcuf+w+1yu9QKVJUyDVFf7dmxK+3dZQCRZQZs+Q3ZWnzwQ==","signatures":[{"sig":"MEQCIH/SSw9Tk7+9YuXv3XjY0Vm1G8SpF0IBgjugx6UzDq4OAiAH3OjIJznyd+shoLlF+wydhxU98248FKIFQrAHDa6wVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatCWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp53w//Uhyp8RD5TFF2jl+eBzCWoo+iortow01dzL8c3ohtXFKLbF8W\r\ns4zXpyuiFLLZ1iNT8+tmw7sp/Z7/QoLw25AKDSy8TkV1GMyZ9AlvBB0B1yiv\r\nQSVYocRFEzfvonyF/MWn/51jiK2axvr34dzU7Hk/t9E1DnvvitY69XCQSR1/\r\ntVD5ZZy6Z20baL3TTpckD2zRuQ6CQoNg4Ym4PrCRNlhXvrWnyYxmKOgX4dii\r\n1Hzu5X46Tc1dvmNxqcvNg7LSFO1SN4dlnsCfxvXaIhHpwPMj/33e2SCpVOMC\r\nMscP7/VeW68KVdtYTDfCTdRs1uRTiJblVFmis9JtmDAmR9mRqb7kmZEy0B73\r\nRvjSdxj5v4NfeBuLCJUpwbLw+QpzZd13mYshtHSvD1w+tTQiknszqIDrux2F\r\nS+xamRGAljGkj72atSV2Tw7rF/shjDDAJTqokJPL7tjOQUjGvUOEJIhu8OJp\r\ne1h5UBKJ6E0Xhe7K9CQZrkhCmOR4DOUtIrdI3OEgiJuE0iwzCVNcVcNoiq26\r\nU0OUJDK3z1fkrG0sp9I/OrOWSJNxd1LvlgB2qLaOXT5+eJtdTREK6KtTR6ZC\r\nRi25Ss4WsnLh5ikwG4rp80zwH3xDZQECmSZ8v7HX40g98r4nFP6XvoEFeOF0\r\nf5ZaVtXmVfln99Y2VQzTP8UMyTOeQQFD8io=\r\n=wbJ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5d2d1814fad8065dd869bd95c156c04ad45926f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0f54fbb93.0","@material/base":"15.0.0-canary.0f54fbb93.0","@material/shape":"15.0.0-canary.0f54fbb93.0","@material/theme":"15.0.0-canary.0f54fbb93.0","@material/floating-label":"15.0.0-canary.0f54fbb93.0","@material/feature-targeting":"15.0.0-canary.0f54fbb93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.0f54fbb93.0_1667944598725_0.3688578975036736","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a8d47f9fe.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b4c98901084dbc98b6f9dbf06e851709f88b9f4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":33,"integrity":"sha512-e5zVsmwBqGZdzeHdmui8tvBkAHf7uaeY20t7nDJdjjaamyv9yEpLbr765NPxX+J+vWBz2mD92U7JgbwsrnaDQg==","signatures":[{"sig":"MEQCIGnXXt4zNC5IcKwPLUBZ8tPslUrTT2fgB4VYTQM27EpaAiAJOwlgwJidJQ1nEPnV76Jm2H0mNkKg6J1UCj1DzSNDnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjayn4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqC1A//ccR5Mu8Tc3XRwGha/IiKuiV3O1rToylYx4GetBA3cRci/nwZ\r\nSDe1220O5a1eB5hMwr0J8+nJGHxZ+z5z4ZqDqsbrNavws5xjSigW/FPi2l6l\r\ns8CKZ8L3Dm6hipJ9TbEI68rGL1oMyDhHhjkgPbZnZ7QGT+AzYxg+8lW57mtV\r\nTjr//TvsAFEDWPk42XM02ISILRKjWTtKpVu4JZK14DMVQqsGDlKtyybbgw2j\r\nVJ9b9Xi5R5VobyoTaInm3V+gYGcIY6Z8j+VzLDfzj6+sEocAvmH4SsuvsZYO\r\nM9mPxDBivjC652c/qmGWANrLg9gEBYdWRbAOMV5BwmHgSTEqYvtbe7E7/pOp\r\nx2pf1R09SkazZDkjllhZDg+jTn0TIJw0H9aHhDs/YhOf47F7DmoYOkS2ZDrC\r\nS0kB7rtvYmZgcvZyVCpEN5AbsI3usHNr3p3oiNMrSx2M2OjGNPBG2Y/9Q2cP\r\nU40UBwWueBPNW+6V+5E5bcHSb8A3P55GV2XM7HmOH3/b7WxjjXT/auhxt/xK\r\nEx1kApVrFzVN+/N7cp/Xe+i/VMIQ5PQOmjfc2wnpY2ZgMc+DbRvVPOHFtem5\r\nabdf+kJ8EnX3CY1D5BYfBz6LQ0t1f4BvmHAcKwnlqGzUZXwA8/iano32w31I\r\n495bVNOuLf0QZ6WlNyfKNIAM28hAHZLK3v0=\r\n=uQQZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"37662af94525622cb00ae2dd17f31f6a93b4eed8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a8d47f9fe.0","@material/base":"15.0.0-canary.a8d47f9fe.0","@material/shape":"15.0.0-canary.a8d47f9fe.0","@material/theme":"15.0.0-canary.a8d47f9fe.0","@material/floating-label":"15.0.0-canary.a8d47f9fe.0","@material/feature-targeting":"15.0.0-canary.a8d47f9fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a8d47f9fe.0_1667967479823_0.9064008354009172","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/notched-outline","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.66a1e75e6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5c6acc50a66706ba8d37914078998dd16b74adb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.66a1e75e6.0.tgz","fileCount":33,"integrity":"sha512-91iGFsLY3LBrAAsK8FXdU+LaVU3l2rVyl54QAlST3Z/YAd+NDDGc5dSkrHDBMQM2lYuNSQxNNJEgRAWrSdqaEw==","signatures":[{"sig":"MEUCIQDsCm7cuenpXnYV7QQEjPsOv0Wese1Wlpc8bZAdzd0tHgIgFlaEWfPoSDeoRSnUgMURGdeempGs6l5GC6JEWrX2eVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3RrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprSA//Q+ZXwo+tCoO8EvRnH0NwsGzNUSYAx84K9G5CFeb6HJzjo+rz\r\nTZB8C10OzL8xIfDOAlEt0a4Axl2WBR3QcVEFV+HbHpwvWVRziDH1367I+Bnw\r\nIbGRPKUzaCPZNYcb4S01D5EcuFOb9zAK0BQLd7RGgedWfU1oDNpjcwNlIe/r\r\nFKrAMUhuKeSJcn2OSULV3IVbbvHgwSS8VOMH/qcvXUQE4AFWVjnHLRN6L9Cx\r\nfq+hBZdrHiC9RbOCnVAttwrzLzQ1XncdA8uMfhiu7yEmmJigFxWRzHQGx8F6\r\nx1iG1TkGC1S0RcFC31NMFMDSo3VksEaTOGvw2BXg5wAybFhIKI0nsdiAL4lD\r\nG+qrg75FISJk8n+RFZo2rQFg30eEsNSRg0iM6vjjD4+J/0bqHA/VKjz/oYxe\r\nhebv0Eeua7+NRRdRvjVafgelveZ1LdJVqBgJtyFlksOmqBJ6boI3WwLVcqOQ\r\n1pw/0x6Scr7g7L8kMas9dSqFBFEEPmtW0DUzoOf7rgbGRI59z2NkCKXLQU/o\r\nHxL80ch25kOb/qQgU2p9ZYCAqpsq/IH6676/bzi499Fjwg0hFQkekFIpSzcM\r\negIWGkH8rIvB7NGEI48yZRtE9QJl36Vj9+zWEAvIohfoKgGVYi8eycfFJFPJ\r\ncNuwGLKS9o/KAMPDA/8ttWB0bLsC+jf/g5Q=\r\n=5KCF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8ed0cca778858904bcff29669c6dca407f25ef98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.66a1e75e6.0","@material/base":"15.0.0-canary.66a1e75e6.0","@material/shape":"15.0.0-canary.66a1e75e6.0","@material/theme":"15.0.0-canary.66a1e75e6.0","@material/floating-label":"15.0.0-canary.66a1e75e6.0","@material/feature-targeting":"15.0.0-canary.66a1e75e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.66a1e75e6.0_1667986539364_0.7916875297408306","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/notched-outline","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.5e5c2afc0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad420a342fda481b509af68eeca8e90d9fe6a614","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":33,"integrity":"sha512-8/a+v01NaNdU/zWNIeXa4uwRAKs0zhKxMO0dDUml97DLvgJRggA5BjQCnC2OHfg3jnSePHu0MSVbbD97gKYOlg==","signatures":[{"sig":"MEUCIALwfskUnsjC8Qx/XS2VpAPGoKc/LjuCjFMi5KvC5TC4AiEAguKk4lzi9/DFxfZcsZHw72sLgxzGCWCnBMEfQJK1FuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5SxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0EA/9FYzncT7skHLerpJrAFz5gWNm4qDc4sGlhP5T04s/AM9EVRVb\r\ndaixrgp4B8KEWrkFvqU2IpHbpx1kwUY7eaM7+VpE+gDzvNzY5qm2fEAsjD43\r\ngVfZICQcPAEBSSG1iCW3M+xCQePtLRZhI2HoJUQ+lJ2VqcA+TV/1vGTHf8PP\r\nidYqbQk4iVQkAjeh95NDIyocHGC/4064BQfB355EmVMAkvbop8sqKx5/ZDXL\r\nyGKlW3eEmZ21vAOBicopwwgD5E/xvIWuWU1RLcTrQ0XsQfnJoNvdv8VJopp2\r\npR1LOhX3+tXRW+VnEO+1s8ZHsiVLqDEt8QFkXA4dfsYwQ0TEkIIUdBb6pFv6\r\nN04K5I5FQsV6f22Egu6vIucuD/PhFHG5K9w1vcYMndXaASQY2AUmXN0qniOp\r\n8JcFaL//76gR2amyt09o+JTht3cXeAXkS7nQpTQiLZN6CIA30Z2ezyhSfNJy\r\nc7kEnVv3y1prYHMXBYHqyE/pk37xN6Z9Ip4MKxhCJH9+O7pQZPyRfpIa6mVo\r\n55yam6VqLi6SCwdj07IoucP6P+B0IRdHK8gi7XsJfNivPA6vvHlhx63zWEr/\r\nF1L1baghB0AOzqEp8P1W1ZvMO79h8UUfAwzJ1raVpd0xLG6N8wsYZVGrLFp0\r\nWCbJY2+bo45ELzfnzRZu7ZC3chw0uDeGB3c=\r\n=lZvc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f14204a01be3c79ff286a8287a0ab731c371492c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5e5c2afc0.0","@material/base":"15.0.0-canary.5e5c2afc0.0","@material/shape":"15.0.0-canary.5e5c2afc0.0","@material/theme":"15.0.0-canary.5e5c2afc0.0","@material/floating-label":"15.0.0-canary.5e5c2afc0.0","@material/feature-targeting":"15.0.0-canary.5e5c2afc0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.5e5c2afc0.0_1667994800837_0.19451434442327442","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/notched-outline","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.3e3f43359.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2286d8edc1866a8c11c1e0ed7976d8a7ca85517","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.3e3f43359.0.tgz","fileCount":33,"integrity":"sha512-7tATtG1YWdjQIJaIINCHdtyhw6TKjf5nFculeTGzLfwPXY8WgkuoosAryquNdIQ2e/TIqPCO6ABRKI7YapSk4g==","signatures":[{"sig":"MEUCIQCstE6dtivVvndTQMaY4XsHoi6odWFAvcx0zpW+1uYLrAIgJMj2sbreoku6chWCSo8amraUXkcBIxA0J3haOIjR57s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAdwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQ4Q/9G70AVagosMdVuDifUI99QwkzBULO817+u4XEuuMHPCppxFHu\r\nOHEbSmWPs0kAv8PTBBbIp1QLYzKyBl7W0+pAqGcbcQr4gEjmAv8YDWdHQKal\r\nJkxbPHtGyL6JzBchkHTI5so50mWMeB8a1XvxzzdV7JLJFqg+eFAnfRhD5JQa\r\nHOJ38PqydY07w4l+pBmCQFWMzen+QREnBElKMWxJxsdUyZx1+fz10ZDb2BNH\r\nkl+Eqluk+6Gl68VMUpgA4h+igF1OTzvASnRbefIZLbShs1IhnR31RI7ziAdd\r\nnCFf4eLioDOzvKE89JUBhnHM2Com55iia+NwdryhdZ89i4A+AnuoysMOVOwu\r\neulXQP9fz4IWU8gicmiCv8T/AgHYKCZwmUIMMSBXpSEao5QJGyMM1xHxfiLa\r\nPC5A2uHVfb1UFyv+gwfWbGjrqjOoDmnxYTuYe+HlHxZq96pXdjHu5L1z8udK\r\n3RKkuIQnPTQhmw5vIvd6TQn6ghG68BxVssmqrPpv0bPYt886Fl5vatlDuFhc\r\nL3ihmMZcPTWEZXkBpO/v20Sq81jQHURYII5G9Ey/5oEb5PjAOpn4mbwDcUIe\r\nRp9wDibvSgmPc9Pul9bhSd+QrR8dYggM4WVqe1/gSB+VPXfRWN1UyaRCJ/JC\r\n8u8pTl4ZNTD8q3xnLDB4MLCFP4+M3QhEc14=\r\n=BBPJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"722326ecc6026aea1f22d8b4e1c9901bc13141e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3e3f43359.0","@material/base":"15.0.0-canary.3e3f43359.0","@material/shape":"15.0.0-canary.3e3f43359.0","@material/theme":"15.0.0-canary.3e3f43359.0","@material/floating-label":"15.0.0-canary.3e3f43359.0","@material/feature-targeting":"15.0.0-canary.3e3f43359.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.3e3f43359.0_1668024176643_0.39104855215857115","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/notched-outline","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.3f667fac6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c746dbba6e33727570bc4e6f872806d98990acd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.3f667fac6.0.tgz","fileCount":33,"integrity":"sha512-9xE0zwK4c5l3uluVXMiHnKK/apv/4o4CPKqzlFRWogJiDIBKtpbhd+lGuOLOBEL9gKhIQKRqC1ryu9j7fPaYuw==","signatures":[{"sig":"MEQCIHDNIXBmIP23obJpeHFK5S+lthKyaTUpIIYVrJF9+uJKAiAEMhaeiXsofTKUnHYQkIzjG5DWhUiAFG8ORxNbUj98eQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCROACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmBhAApQvLCGH5+D+xKCVE2/DMIn8CKlq+//e41GnPG4VLSObEZF8s\r\nFy36/clriuG8gbwoZPKtorA3kfL+de69M7kP9GRw3JQ0jD3TCcXdDFENiJPH\r\nVelyvveb7aX7uQVWfGPmWWBa3QEYUwKEl3xBkDGvGK9cCpuUdq84uwveZ6h1\r\nHROfWYzjLUHxCSwZEoKEPySLrGITHBfxoFCtfkgO+S1CoD0H7YaaykpFC2Sm\r\nngGWEwvU3S+g7B3NyNCtdD6PJW238lTVBKqf73Z00uAKXMM3dbTWAcF7Fiok\r\nSVCyjV7mTuO8AMAXFEDuABgak7ZO2imaqSFrwiLUcLnZ3QwTqTT245ZzV2AO\r\nfMAks/q80nP/U26vXHQr1i/UfGeamGyL1JtkEFPnCS59gJ6GJKsOfRuzwrU3\r\n90PI92OWkJ8z4QQSOsVZVABY5pjO16NxXDs9WfbTGyS6sF/zybGxMhQzAP2K\r\nIKozq0KEfkeidT1S4w4x0TNo6m0lXJ8elP1RMLbNVpRC1kkGvcqckDxRZV3B\r\nID17uwQS0VYCXhErqBXDQ5RWFhRknfgkG0AX9WantYN8wAAESTG07C8ATvnE\r\nmZfOtOP4WWeXkDr8Pe3SZg1OmSuJz9fe2G9W569e+B5Tdb7CTn6S1aPJXp/O\r\n9GRtYDtM70KlvG74p2GQWVkA9+SA7/j0QMk=\r\n=6tsO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0980467335d47e19b4ec72e32644ba0a08bc0c34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3f667fac6.0","@material/base":"15.0.0-canary.3f667fac6.0","@material/shape":"15.0.0-canary.3f667fac6.0","@material/theme":"15.0.0-canary.3f667fac6.0","@material/floating-label":"15.0.0-canary.3f667fac6.0","@material/feature-targeting":"15.0.0-canary.3f667fac6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.3f667fac6.0_1668031566772_0.8127038136754356","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/notched-outline","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.faa28c1c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b49947a7ebffb169bdedf4453a354a076959259","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.faa28c1c5.0.tgz","fileCount":33,"integrity":"sha512-PVV08AqqYexX1M+9qmBLFrd2ynKNXX755sPq5xIT0nVWuzMVrnDqV7SVxnTIH6kNyjc36Ekdjosu96HlPdiaOg==","signatures":[{"sig":"MEUCIQD2AWzb6/mz4g5wmnmO+L+wGXKnuH3IisoxHwVq6jhZEQIgXj2bVXf6yEb51GKdeYO2deIgL191PaX8Rpka22HJz6Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnnqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpQw/+LnfY087OhF4LWIsFdLeHwtY6BJwsY9turl53eMdwDVGrU8cu\r\nXYHiUuigME8UjbeFaWcZRsX1NJtH4zaxwODoUvRrSziVoGrcn5qzMs+ZZGkv\r\nxqnAonht+rnoRhzGeJQyqIUm5BJ7Q705C3mZzrkTa2s8hdyt8WyNkg567pzj\r\nqg7ETef9KPN7b8q+kYrP39trlGr7txniV1r2TY5PtVmn92TmZRZ9zVYds5JM\r\nE/wqREgIm6xpWU27DqvK0rqKBgIzfCUBXwo0BIBYQyjOI3fmbo+azqeF0xuH\r\nVE9k9RPSDkuTRg5YuWC0t/TVhoj3X0KggEfgDTN5RUc9aIm1cCjDkSnE39pe\r\nliLPosAlq5P2jPboovish0Dr/IvI1dKutT+BLnMCT1nSJkeenvAZFgDdFyyK\r\nmgpFzYcTskT3Fs1YESDphhxwRfU7K/ai+QEcA0YAErdxS3NaC3e1bCclstP4\r\nAm/pPa66Y0ulVo67JbILO8sLOIL/Fw+2wKENxUHAlGloBGR+w7bClYmkN9Hv\r\naycZjLiwVZwe9RATPu4Ms7MMPzt5cqF5URPrC7CiYAHucAEZLEp/uXeHePf4\r\nJTIgId+s7ooIUJ4qq2eoMey8HtpIPiOqZtS+wl+6gSSnaBQnIqjYkqfDPFYD\r\n9MdwpOBoVu1FBfvrdnoIXgGF2i7Cs7wB8D0=\r\n=XPng\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d36350ee1c0fb11d053acc0cd521939199fd696f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.faa28c1c5.0","@material/base":"15.0.0-canary.faa28c1c5.0","@material/shape":"15.0.0-canary.faa28c1c5.0","@material/theme":"15.0.0-canary.faa28c1c5.0","@material/floating-label":"15.0.0-canary.faa28c1c5.0","@material/feature-targeting":"15.0.0-canary.faa28c1c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.faa28c1c5.0_1668184554685_0.48891330132039545","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a868c7866.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be3979fdda84c6fa0d22f0066d178dd43d50f920","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a868c7866.0.tgz","fileCount":33,"integrity":"sha512-V6MDyoDSpcv5AWr1+mNW+D0nua+j93q1IMSHWu/AnZMfErnfvRuqAITap6ORxD/lqpkNIXTZBAfkWiVZ03D4ig==","signatures":[{"sig":"MEYCIQDwPPtgJ9SP+L5zzz8r7NG+5La58WadwYzn0XBLkDvNrgIhALDzxEKBxl9ryeoM4XvAwQUq9uQLOplU4xjs3xzoKIJU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnoTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOOg/+KaAo3UEsR5vyl/KEkPVVrOgJEi8yhExWG1xIHzeEPgus3Sem\r\n59ecLSgW4qTyoS8iMED8g+g/xXqBnzfbc+F9lvX8x+/xT4gt2zJKdNlQN4yc\r\npL1Xq/gaTrKOxpmTwfgzLm7RSQvGwq8a/tAB6kwg7t77lgKiy5eFr0KVRwLG\r\n7KaTXqwNa/126u56+X794fGx5hQfD+sp9r2qPgplM7flfCXthbVyJVYBNXfd\r\nZkiay1ceX1oFMj3rCYgzhzr8CH7kaacGickL18acyEEzPW9o6xskrAAIDE+V\r\n707jytn2uf2JTW3Pq6ESA8gCoBeyZ5HYhiEetL1NhDBb1G2ZDMG9tStWwwA5\r\n/P2heLKPdPAHDzLV9ENw9r+klZ23fuDtB+Ws9bWoVkND82Z/tCGmPoVeuxXc\r\ns17mJ7W+Jj9QE7PMnjgBgSbYApf2T36xnQXDwJ1dwimLc73Ibb0bhE0EPqDa\r\nkscZKPJh/dDs1ojjY1IHl2ucSP7okKnB/tp3dyTADazfrToVtxxMcFZYu6ZO\r\nZeXHZAVfITx3SXa99pPawlsQdBvtkq4hLiYqi3ywiFOx+vgJcLSyJeHa//s5\r\nGvUA8T//SQ8NxqQhWr5yrEwwTOZb9tv25Wm7Kmpk+xaKMBbmnmUv18aUpO/2\r\nSHutr0rwfzqvYz3DVuKTKoqgdyA7j7DHerc=\r\n=usBJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d35416d7d3365898437e980f43ade48e60904e85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a868c7866.0","@material/base":"15.0.0-canary.a868c7866.0","@material/shape":"15.0.0-canary.a868c7866.0","@material/theme":"15.0.0-canary.a868c7866.0","@material/floating-label":"15.0.0-canary.a868c7866.0","@material/feature-targeting":"15.0.0-canary.a868c7866.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a868c7866.0_1668184595099_0.07257608247947056","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/notched-outline","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.602fe8efa.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b55a5908e66b5f905c2fec33614a58aa005ab57d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.602fe8efa.0.tgz","fileCount":33,"integrity":"sha512-w+9M7hAiek7Q4sownSVwvJe3i/9O3YUBUo3m2v6eEObDo9OPuHs6wKQi//zUp3lST39749kb5+AlcOVB5AbrUA==","signatures":[{"sig":"MEQCIHJJ7HSPJD2Q0Pjb3zxdSW/mo7xR3L9/m7jPypcX7nU4AiBYe9owgtVNVD8Ts66u9F4fzEVaEl6ndhaqTPm/9trT0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboJaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOHQ/+MC4Qx+6N2ANs+nUWiE+NFKy0poJZRLj/GN2Qq52HXSx9ytcY\r\n6BqC4JU+N3Y+tyymjfKoGabJnZpE6likBZF0VLi0xN+veq+bvIx/wumVPRnF\r\n9oGEQQui4ll1fulC36J7wjX2b7iq6TScdsaK2YjERTMRUXeGj8uUI2ZmafSb\r\nlhXClJqtwly+yxGGv/Xx12hisqvt21DSOScC1S6uvl3tz/lPiKHY4VMtEHHX\r\nHKK3rN6yS80BWD/YSTYb5asdSWUHqrZVXD9rGCfBT3O4YgFVX8CxijmZH5Mu\r\ntPQ0npKjWGKWCwevvK8OeUkbyD7Qzu3vxzkOnTXaQZLfBaKLIUPTLOhl+J1N\r\nCAwA87CHK7D5zzG3W7CjmIC+Em3KiH2JiOtLlYEKmxcWRqI1auHMbe7NupOK\r\nue7mJDaV7bDdbCw2MRAR9GlAw1GohZNJp4Wd0spTA8qUdxPcl3VTq97tYqNi\r\nJDcmeGpDPTCs8GvidwEhdJrjz5PPC2JOHOncZ8j1aIEXu/BC4+d7uaBl3BOM\r\ng8c8kp0XqRuK2R6eo3kmWjNLmv8O9pzIAob6i/1Zr+16amvcMEJ3e8KuLm2J\r\n9Ss87LRKOcDZReD4UB+XeXDHXG2/TPlIzvSycjtJq/jIAWzB/frayHq7LF/y\r\ns6Zs0HJ52qPcJnI20LqjmBrgWcJKRee1l6E=\r\n=Lk6U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6bdfaf09ca41b2fd7e3db4797bc2f536f8fbbade","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.602fe8efa.0","@material/base":"15.0.0-canary.602fe8efa.0","@material/shape":"15.0.0-canary.602fe8efa.0","@material/theme":"15.0.0-canary.602fe8efa.0","@material/floating-label":"15.0.0-canary.602fe8efa.0","@material/feature-targeting":"15.0.0-canary.602fe8efa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.602fe8efa.0_1668186714379_0.6064143229189527","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/notched-outline","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.558c2be62.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e45a2b88b0a06b0f53db0a2e562d0ffa5d7084eb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.558c2be62.0.tgz","fileCount":33,"integrity":"sha512-kMlIuDJeMOI9/ZZBFjdRzehm+faU/5Rp9lSQC+XtlBYuNlu5DqBEFHr1wqds1l+XA+4pAgJMX7/g/q5/+Z4u2w==","signatures":[{"sig":"MEUCIFz8OfhrdbD+wrXO6RfETJ7RUhQqJmIFS+2TkIH9sewEAiEA89+32INYHASWIpgeyygxAr8Bga0OTxLXAuSVkYkWync=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtCCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVBw//bQmEPzV9vq44nuqLXdGsXcRYm6A2BLiv//JbvygDjXC+ucvP\r\ntWB1j1BEs3EjhNeJ0D0HRpdhhqKpfwvVzlmwlWzIzoC9SdzJUtov21gKzQcZ\r\nw5O0hIQ0nYA7hM+sDCyJjVcmJPw+4COPdkaQSJn58niMEH2RQXz+GAhAIyV+\r\ngJcyvZqCJwi7mvu1ukXMu3a/0s/OekaQxpiNCYwA4iBZbC/qKHY4HA3KhyuU\r\nZwzx5om50rnPGtv6PSKpDYFutBAjP+PkA8WpCQ9RRnYkxD9edYfQmn4HOWZn\r\nsUkFYeW1LX7qXp2Y6sI3KIOmU49GyC2xUU3xQfckHWafsS3KRxyI5cNsIslX\r\n1T6wAs+U/ESI481KxUJ55FZQMbrZ1SPCGERtnCjEmEqA+36OUpiYqZqmtr8T\r\nPzjV6ROsGJisQf6K5LNBeeSJQ0QHEPDmoCccM97B2LA2DtcY6575bxoNcwkl\r\nipMd4FxGjwrqpEoTlqoo/uvq9Erve3ha7llxVEjcnHGCmMSEle+mTnfesU1i\r\nqs/YEJl5OUzZwRFkSnkstYDrNDxmphRuVDfIkZn6n1nayCTr+smB+L99tYBX\r\n1FHJCssJiAChxMWjXWgl9R8vos1DU5I8bHnC/wPjOEnoalaT44wuHMt7uv6w\r\nOU6AsVLH3AGCeQ65ZPhm/nO/b/xIYGQhrL8=\r\n=q0iA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"64666caf2aacf562ab6ab5b701e89f28a9bb5c74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.558c2be62.0","@material/base":"15.0.0-canary.558c2be62.0","@material/shape":"15.0.0-canary.558c2be62.0","@material/theme":"15.0.0-canary.558c2be62.0","@material/floating-label":"15.0.0-canary.558c2be62.0","@material/feature-targeting":"15.0.0-canary.558c2be62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.558c2be62.0_1668206722325_0.0020610054437921743","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b5c13a7a8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcc20f0c7dded68ae7617bcd2d0009e871f788e0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":33,"integrity":"sha512-4RxmfJL7AWkB/LUzvWYfijjFsosQeCelZPqb2tCG+z7ibdA7YTtRLss3AJWU7cMbzs3+7HF7qVFtJb9m7Gmr1A==","signatures":[{"sig":"MEUCIHzj36M2YMkNg1A4T1zYefe7IDKiz1R27eRzh0q7LYSrAiEA5mw3Righ8Z/jhvRFXuZJK2st2dO5Jc/S1cRwyrX+sSs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmWtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5UQ//aYbggLS5MoTU2vaif2QhvpUgmGw0bFsGX0e8lKZUh/x4tsV9\r\nRN87Yc6Vxx0Pq3XMvcws1wWMLQGjeewH+Dwwi/4p2G2RfdWvrpby/+5rJbjI\r\nV9DeKg4Dp2ci43wFljdETRR/4GTa9Y383njMdM6l7RlJcf1ShTEJp/L6FJp2\r\nmz/jjy67ZDG+Vd7hwKE3W6dP96pltdIfA8cuyg3c7EK4MOvWJy8useZP+kRW\r\nZ6nMWoLuKQykEu+4dvHnCi3m4RcCJx9WV2ReUmkK0dlPlLeor0aFAn7ZH/dS\r\nm3P6kI6zPjBkSvzJ7X5dtOm01CNtk+Wl7WJpfcnb8GO4/aQtq8KoBuxEdZZ8\r\n8W9lydm12tqM7bwv2BfsEq25pP4QubK0o9aq2Hw0MkLwO2cB+tv7WarXj8PJ\r\n/jOA785B1D02kAomhl3m4IMRwikK2E0+MmhWjLuZco4AJpzaDxfBftU43bVY\r\n7etQNNF/Tm1NkwLt3U3n04YhEt2WdjF3bDgEDr5K5Ky2Nr3mNsmk0dhUqDPC\r\nPD/7p5sCgUh3q+O8Y7jFEr2HbBH6HtOsLTsgAQPKYJVtVbCSERV49YwEEftE\r\nIewRW96Pl+gHqCSE05rvHwJLYJFiNwhEE6nptbQWM4hlY34gqdLyX4Cl7ELX\r\niDruORP603F1f2PkNKqTu8/7YdqmA40v1bk=\r\n=2LoV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d7e326425877e3ba53b64755680e3503090a01cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b5c13a7a8.0","@material/base":"15.0.0-canary.b5c13a7a8.0","@material/shape":"15.0.0-canary.b5c13a7a8.0","@material/theme":"15.0.0-canary.b5c13a7a8.0","@material/floating-label":"15.0.0-canary.b5c13a7a8.0","@material/feature-targeting":"15.0.0-canary.b5c13a7a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b5c13a7a8.0_1668441517718_0.6556962889253279","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a6e1c0702.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02e43c9fece2987f92c339777b3b466a619e6074","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a6e1c0702.0.tgz","fileCount":33,"integrity":"sha512-UxXyhq9YOPW1QsUF2mowK/QETGLEjDG0in1ip4YwJn9WtjidE/Bqbtgnx7ilz7BTpsw2X9FrLpQQxomHoP0uGw==","signatures":[{"sig":"MEYCIQDWopbp0J39PGJ91YYRYlKq5CREedoaXpc9FZPOscW4dQIhAPvdu+vCdQLXCptkjH7a1ElZW3kMJN4sRQM2aKUuP7GB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnprACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyQg//ZeuRaO3ym3nmJDYz7WuWTe3+/eBAP6TYReldBtRMcS71HKX3\r\nC00yvE9r5tolIDBXDCJd4p2LWutNzqiPpRfu2IC+ir5dBzsZP9x/sDZ0/a7V\r\ndeSBB8+koOYeeEQNu4vxq7GopVEhas46kV1IBqf6jCvXaiOguXp7gYTgFeIz\r\niZqW8PVLdTj5aTCAdgfCXpkymjUzbKUb2RmgsDbmn3SFxGDOUVWsK/n17jBt\r\nxYtsBsQ9fblq1IOfP81nQFb6qFoFSV1SOe8fltwQtXjzG3LL2m2ZhiQu7CjD\r\nLwUP3rzypdhUMkEtRDbiJBGgQ+rJ5So1a9eRQSJwlwU0TRHxvM06eMt4OJTb\r\n9E8MVcEy1vDmWlrYGxLDU8P+4fUi4LhgNc0ewNBsLfdPZGlhDMQP9NYNul1o\r\nT+bbI/1Hj3AJydXF8Ni2A5mW0WM4Hyy80ItKBRlJ4hOQ20/16x+DYlceMuac\r\ndsp0H0MbsYTsGvX0RyRuffFf917poycvBoAnwqSeho+w3F1PojCMh2ZintQp\r\nPXeZrKWuctlJHg8PpeR85ZRB+ZxEZLtSTgJsOy3IE3GG8l+/Zb6d0kGALEou\r\nNdxhQojInOOWbBY2m7cL2gxbOBVWKOUH54/Tj1NS39isGVEtgQBu2/Yj64Zr\r\nol5xc5oNjbEtV6y3tc7jzsdiCamEXMN/yUQ=\r\n=yU0G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3c1ee7333cad68ece747437d4bab1a737d6ea96f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a6e1c0702.0","@material/base":"15.0.0-canary.a6e1c0702.0","@material/shape":"15.0.0-canary.a6e1c0702.0","@material/theme":"15.0.0-canary.a6e1c0702.0","@material/floating-label":"15.0.0-canary.a6e1c0702.0","@material/feature-targeting":"15.0.0-canary.a6e1c0702.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a6e1c0702.0_1668446827771_0.0486930920233728","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b6f8a06de.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abd56258ab211470b143ca66018df6c654cefe58","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b6f8a06de.0.tgz","fileCount":33,"integrity":"sha512-xFi0il7qj9bCkETWBvBlh6fTo2uPDKX630Z2ZDYR4FLYz7G5A8V4OMzaO2FS/9gpbN5Sjdurkc8tUy41tplEXA==","signatures":[{"sig":"MEUCIQCk604hNZ9D8SJ8xf4Wd2FuxYeA2Da+M1TLmMRrekPkHQIgLvBrqY1FqhVRm+ChUlgiB3AmtQ/bp/RD7SQiSr4KVEc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1u3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrToA/+NcToJYmuVM2hnCi45uYO84nMHfpE9iKsY04x7+5oAZy9DdU+\r\nz2G7kgbPFYxxt1gkRnsXwDmuQrkI4Lw27wyM+YFmDPQS3drFmMxsFRVl54/l\r\nXquSg+WCEEOoKXS31768t369qMRt9mhssvu7Hm6S0dLFmketAUXKYrDzMWXx\r\nt6KdxdFmYlJM0eW0eANhL6Cu/TXnyFKJKGF/D3cE1wRVlIMjtbmzUWzmi+Lp\r\noIJulmzCTWZcrOHZIkShVQuaYITOht4QAFeIbIArIN3kT7r/bxs+fpbwiByE\r\nM4oIwU0HR8utkIM2njA7QYWTEyeT3vjK642OKEQ5zfVDxe+7yBCcZuBRM+ko\r\nJgtMZUP+4AHy54+As5UZcqb/djsO0R3v2n+0yR8TCZkaXWO85MbYm+RQJ09C\r\nzGnAfSKPbnrHWF86SqaBi0IELHEz7fJQqiLYBcUIIPlulSKHXJvGxGMMKOIU\r\nTNboI5sDK9/kJpGLnqtDhWwzLyZm/V86eqzdvNkyQ0XVJAeORHyd01CInAvE\r\n1wtewXcD1RHsX+0M3fJyT8O0z5LHMXHYaplNOKm48x/sC9Sm9ys7adTY65kU\r\nQehIbNEuBlISqN6T2Fs9sJ4Z10lfkf484TvqRn3nEELVgDpfj5FFjNjg/aIp\r\n+MpmNPCnF2ql2j+L7WdK+BNSSgyXwTWxq54=\r\n=JMgE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"92681882b16f14e6a94df4b1ac983fa86e242640","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b6f8a06de.0","@material/base":"15.0.0-canary.b6f8a06de.0","@material/shape":"15.0.0-canary.b6f8a06de.0","@material/theme":"15.0.0-canary.b6f8a06de.0","@material/floating-label":"15.0.0-canary.b6f8a06de.0","@material/feature-targeting":"15.0.0-canary.b6f8a06de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b6f8a06de.0_1668504503705_0.5733827534279345","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/notched-outline","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.0163f3ba5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf4bf2a65a72689612ce82f0ebaca4e6f403f27b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.0163f3ba5.0.tgz","fileCount":33,"integrity":"sha512-uQEB7M2aDJSESH5z4MlbbShGMJyhe4MGyrZ/FYVn9xFoUmRxBYJ56VhHVGrsK2cA+0LXgynWeUITXZsFeWPWtQ==","signatures":[{"sig":"MEYCIQDgtnWnuniscvrGk6fgF8Bqcm+UshYbyumFLIkwrRod2gIhALTEx6IYeFoSJhdD62AV/SKZDD2lq9+yhct36FpI+xHt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9QmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphAg/+KpaKyVwWkzkEGApWU/Yf6hKGj/9Ab5L3WZYyIN6Qc9CK9z2z\r\nmTb6rmy07+jlj+KFcHf6MrhDsGRVkua9yzd9ClXHW1haBjyPiwf9edKG+slk\r\n3+VRgyjLOM1xEz+Ms5Z6C/0MGWmtY1jtlAvQvfZXlH3T3CCNN7lGLk/I+y1b\r\nKGe9m19MEgTC+TPzPeHJIdACPWDEhMXX33+MvwVwBc5xbuFECHtCyAhcD5NI\r\nynmit7ste14cQL9rRRezmr57DH0A4UYHmn9XHoOGdflOxf4MykGO+G1YSnR7\r\ncNvY+mzu+6C8H/OeFivPzZ+M8PpnPoXI6Sgl4NbY2DK87MTHupXGPFYMIhlr\r\nz9XJgEuis8j+D0BZyo9NXOJQzB6cgANRJ1Bs10OXLsa2bAnfqsyNbM7yqKD8\r\nNcn+EbnZ1qENaPMhTL9Pi7dEBgZCoOHmAV+P6zd/FVd5OXUOkkJp3kw+q2zl\r\nT7Bt+CsK2R+QG46B6Dz1lGFTVwhpx/0F3TD5E96QPdpQ2qp2oARaCHKErABj\r\nqF69vnr0SFeLM/fLUWl8VGayko98NKCnTjrwSxhwvaVQ54KcFUX6Xl1gzrA3\r\nOPHVsAmlLm6gkvXRVA7IN7QjpcFfosXXKj+bJPgcdnsOY0C2oDE4HylXshQO\r\nfS/Oa7/2cBx3oAG6k7RCMSU8ghHV1XXyKL0=\r\n=62nL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4198cde77ba33a68c74eb5e814d92df422f464c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0163f3ba5.0","@material/base":"15.0.0-canary.0163f3ba5.0","@material/shape":"15.0.0-canary.0163f3ba5.0","@material/theme":"15.0.0-canary.0163f3ba5.0","@material/floating-label":"15.0.0-canary.0163f3ba5.0","@material/feature-targeting":"15.0.0-canary.0163f3ba5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.0163f3ba5.0_1668535333789_0.4578537144577588","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/notched-outline","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.66c5cbb94.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8311a53e7d6840e515d42471504b80c91e7fc53b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.66c5cbb94.0.tgz","fileCount":33,"integrity":"sha512-O9WrQM0gMMq/Qjg7VFlTei/JUy71s1ykg61IXfdTvzvMpb7x2+pZiWvn7xTLLlwaU/SbSEG1imAUqL7LW8laXg==","signatures":[{"sig":"MEQCICXuV986CHb/HPyPt1eM5h453HJ/vxHuDxV+5JJPuF+rAiBu3Y/qnNffVLBpO+GfbtSOnBFORirGUP7VkPkb10p57g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+jGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpA3g//WZzIq3e6f2DL1cwzfsFwCklSo+7Ggm/My+5I3f6wctAOy+GR\r\nRp0nWBAZWsnqZyjolD4Bk5f80NEeNMSJu3HDTKkQg15QMwiFymv0CFg1FpUS\r\nU5zoxsFuzVHyd9AXgVimN3ILKuJMS/IuzwMC5AKxRzXuRgAenbZKqthvf1yT\r\ncnllCpB08qVjcwsn8QD1e1lbHCM1rGJdQDqveUKfE5sv9Q1LTx0OPeUgXuPy\r\nilU5lDkXwE3VcMx7R3crZsW4VbzjlnGfWyhct5CZp/uOPwoh0mnQANrKY+XB\r\ntEKGheC4nWRbB1IMKxxr3mXUsDrCeQmoKimi4ZJIP6+jgdAQYGDdu1EiaGD+\r\nIAvmrY1DZVodcVsQlZz5COeAlTI7nxlNllNWHxnR3lvouB949KaRpaqUnChG\r\nBEMFGohurEbQxWyRYYTf+dpmK/PoVjFavriY8y2H7WzagN8e+cDDYf7c201/\r\nKe+n5+tvgb4yC94IxyHItnOuS7bnX0TWMnS8U9O9/2HjKSatRYW4cCNLv0XI\r\nTPEzCHqLx1pMxTibNWfUDu6wjVnZ3fd4OJLOeSCBHAn1KhoVLbQbiNs8k1K+\r\nkWV6i52bFdRyv0AedKRsPBLqIbDHADqmiaev+J150tH4jzhvYmPnMpIfS+Fw\r\nubAo13fiK86tK7aIdrOXQSrljwcq9v6qk4A=\r\n=Xf8v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5d01716a4e4556657b2c4ebb469b826660673327","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.66c5cbb94.0","@material/base":"15.0.0-canary.66c5cbb94.0","@material/shape":"15.0.0-canary.66c5cbb94.0","@material/theme":"15.0.0-canary.66c5cbb94.0","@material/floating-label":"15.0.0-canary.66c5cbb94.0","@material/feature-targeting":"15.0.0-canary.66c5cbb94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.66c5cbb94.0_1668540613969_0.15780897166583863","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b01136063.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a762bbcd477387a9953ab77cfc99035bb7b16db7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b01136063.0.tgz","fileCount":33,"integrity":"sha512-P1EZ+P6CsWnDre1J1/vWhEgvLpw+E0beShYJCpKo4G91jhedORpxnt9cGJiiUVWTUkZe5Fr91++mFYMCG+PYHw==","signatures":[{"sig":"MEYCIQCs3h2gYxUEaymwGmkyprpqtaK3Yn6pc0hdCPKrXeOEOgIhAK7HepWi8THbWt0XISJRzwPM0n8AETo5xZSCAl5pLZRI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCu8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpK7w/+I83YK0U9EMSsDAZp44CztzD/ZayEHHa8pnLsrTXIWcVrfxMx\r\n2d0/foiKHA+zjPl1XUifPQkcvm2PXg2tJswTCecTNfj7jk1yxRv37OStKRLh\r\n/Sq7upTPCg+ej7cVCcbjGzVpcNnwMAdt0TClCeTuc4BlBGAVhlKQzZgNJZJU\r\npKL3Tz3MW1flMeNiTQlfXf9nVh6rRa8aST1g4BmTJOwHgg08lIFQ4B/bmPYy\r\nz/WPcmdmu9ytqmFVKEYBRTz8ypycmKpr2sCpAv+bP/sdy5C8+tFIQQsn+hBE\r\nIjTQ5Z/HLlZf5DAZUZ6Kvxf2WxAYBIPoEe01tMFuQK44cUlw4uZpP0bZEA8Y\r\nCNT5yENj/kuwKqqpIFAMSUQklign/t9FQELD3hOD+3qjwRUPLQCCDQKNK1rl\r\nUb98rVsUBRZbY75Uz+8FrfB9IvqPQiNS6v7wJ3WEiKVmgOxztC3i0ug9TyMm\r\nAk6PwiJxR76hh3wzhORY6Gw9run4TR8D+r6YK8fPyL73yV3lhCyc+EUNS/rw\r\nj11TMTI4k7QL5pql63hpeuRF4M3DWlKXOe/fJL1KlbeHJNu/vXhzQWd+sKf8\r\nB9GeMrOO445RzUGtqfOLWsTs29JHGebH6EVgXYH/I9ivgT34/2ObS4SsT/83\r\nE9ZSFWOM+j8X7oSZTAGo7NQYOpuxLalN9Ug=\r\n=gdA0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"125921cea459cbed7dbe3e1c938761a0cc03a263","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b01136063.0","@material/base":"15.0.0-canary.b01136063.0","@material/shape":"15.0.0-canary.b01136063.0","@material/theme":"15.0.0-canary.b01136063.0","@material/floating-label":"15.0.0-canary.b01136063.0","@material/feature-targeting":"15.0.0-canary.b01136063.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b01136063.0_1668557755870_0.5328388265661392","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/notched-outline","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.01da0cabb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5715d278286ae6d83b690150e9cff11103d6e9d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.01da0cabb.0.tgz","fileCount":33,"integrity":"sha512-Dz2D/8mcyr98Pez6XYAnuoq1FQ26ynkTwaRHsIfQGEKiTPC6egMkPvD6Z1SWqgBIPbMR9BCotMSjlLtXbtXTGg==","signatures":[{"sig":"MEUCICY1CnrM3UJ1U9G3Qvw+hM2txwa4RegFapQWwhPPOHEnAiEA1b9kUG5bJZcOk/edxYRHR2xjAprX/mQ4OlRxF6lDeAs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKmvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5yw/8D5ReaBZ6ywgnJu12InK42y+RKVMovc2h+HHR/q3YvcD5jtiX\r\nMb5KXTbmjy6dFF1OdG5iu69yAS/NTjMerKdL5lj+BrlrEdMG7j5Xr2UNtXmu\r\nbmnzB5Q34veEwSxX97Y5k6ZLyqZzKV+BdYiBdGHyQm4xwAzK2T+RNraN/h9b\r\n3eM7Kn/FqxMJQTcJ6NQrpzevBey0tNg1iSgcBTi8YmJOsCfR3KNTaKZBx1Z7\r\n1XJGa3VHe87J6r2s8B+U7ZHpPKu4ziz/Wvz9/eKbHBgSUYak3uDrpu9ztOwP\r\nA7+zzKMmN81EChLhZBPgQsw8DbgyFu+MFLMbF1SKtIYMRBUBQavmdkXe0Bjp\r\nRkNgbikqnEYMbOFvAaO2WkHGdOCpnndVKV98kM42nnrbDOGDxLXwgPYSyDj9\r\nk5r6LvYAS0XaDbbqNwc89VjENu29mpfWcAZ5fO9fpxlVracRNfKL+q5QKg3K\r\nMZSyD30M4EVj1RzBuVXk3+XrPG3TNzDWUorbh3EiXfsm/J5Nu7twVU7jJG0b\r\n7oC5InDZ0zta2wBSlBtPUfR8ziGoAjR1OIHmlvN06bhuOkYSkjuJcyEJI9I8\r\nVBOoVy9cXEbpNS7T4FAeVKxksgVbvVCX3IRAIYgl9fdKGwzBJ6bKdQKsPv6M\r\ns+EDNKQ8byn65SMC1o9zSrgW883APRpFMbY=\r\n=ejfb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"63a5ccdac9b23a6c70c2bc776e20ab703cd1dbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.01da0cabb.0","@material/base":"15.0.0-canary.01da0cabb.0","@material/shape":"15.0.0-canary.01da0cabb.0","@material/theme":"15.0.0-canary.01da0cabb.0","@material/floating-label":"15.0.0-canary.01da0cabb.0","@material/feature-targeting":"15.0.0-canary.01da0cabb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.01da0cabb.0_1668589999703_0.6306018609789319","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/notched-outline","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.4ac393164.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad666d0e3b483fa03b596c0c75b4d1c6fd22cffe","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.4ac393164.0.tgz","fileCount":33,"integrity":"sha512-T1zDMJOWKbW22tsqzFhVkI+X4r/bocjP9UGA48NwxlHdra2SQm333di01JXFOhaD8UDrrhnaIiPVBbKq1BYBbw==","signatures":[{"sig":"MEUCIQCwpuwxJSzqQ9l8ZFQ3XgsA51aUxDBB2CvTUu5neHxe6QIgEqwEvzCTyyp4KfGgONP0ltuEGdjvckSc9w6sA+caj8A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQyoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2sg//UtBFvLo+1IloZdesWalQ3bfRT7/Bi8hJvfxgs+MQ2QM+Gl/G\r\nk3WNBeg8yNBMZqHMFDOYVCJkmiVcNfz5mnk/0s4Cmqr6NgsrWzpGi3S8g03C\r\ndjrGJgcs+sZcBZwJhjw4sLQtDy4KmFSIIHyyw9AZXieQ8PXUvXVAlibEAd7t\r\n4goUJyHrprd8+F7T1tcZx6RtYZUoA+M7lOE83wkcLY6syGyrf0yg8ZA8Nozk\r\n4hHi+kKnnr2D7y7aNxOO1JOIebXv1LrpY7dsMfDXUuOqfNR4BEJWreFBxpQh\r\nlieBZKoPB7wCog3m7HxlGnhKYMt8YyNYz90IZ4sJqc8XUsfJUFrk2ZAuzvaI\r\nvI6D4oQEdA+v4WqzHUEPOn/9wSPHV5SbkFY6OWHxun+BXRColvPQa69BSifL\r\nnTDERSNMnwqr28d0HT84fhxqyAQ28EvIMpaoj06yntb1Tj8rZCxiUr/yFgfe\r\nR7WWVpG/Mq28SpAhRguX6RMu5SF+1g+WVdCGEY6uW6L1VCHV9AUCzaOweLA9\r\nfldTupoOQ8XqgeFpdjikCgr1PNWFjQA3WHfDtBbaYt1MtnfIQ6YGRNOUsNuB\r\nouRhFk/FLmZohQ7roHflR6SZubR3WKZUXi/ysFFfF1+6vZ6u2Pdha1kRdHVy\r\nct5qQYVFS7cSufi1pzPKuKkuNw7jAkIhHAg=\r\n=DpKJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f14d3444d266ac4c6c92142c377275be3fbc5d0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4ac393164.0","@material/base":"15.0.0-canary.4ac393164.0","@material/shape":"15.0.0-canary.4ac393164.0","@material/theme":"15.0.0-canary.4ac393164.0","@material/floating-label":"15.0.0-canary.4ac393164.0","@material/feature-targeting":"15.0.0-canary.4ac393164.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.4ac393164.0_1668615336529_0.08070318005876853","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/notched-outline","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.6048fb563.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8474c3f65cb4672f72dd37d5a281eea0a03f1964","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.6048fb563.0.tgz","fileCount":33,"integrity":"sha512-ZsZUTYIJ3Q8iAoo66WUxc9rM+SmPt0IYzYmQqHIjJ9ymOcOn2nwIV0SHse4I+iwT4yYUDyEoFjWmpDHol/g/3A==","signatures":[{"sig":"MEUCIDsZ4jMBiJCdTBk9wql+MhZL7vJMRBepETFUE+4noHMMAiEAlr+DnlaeZsMdE/PbGOzUaWXWek27yJjZgmCaN59Fykc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ0jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpB9w//RkIx7mij7JKsHbCCyXx961X/wWM4k28VxsRgb8whzj+nPoQs\r\nS6t3i/C+ENUY5porvqxfDil0580WNwazIiONkjm9kfaSCT08DZ/xDQpegwYc\r\noHXm0NPyEt2tafevvKU0LyEGP5dJ22pr1UDg+cC6DcB5lsrWwvSXdrKCjFiF\r\nVF79Nm0Qp6ixH8ojZWCdst8d+Y2qrwbFsosNd4sElQ/lZx8j60QeAxiHSzo4\r\nJ64bKQuTZJWJtVJVB2VjNSh7me+JfLDa0ytRXfvUCz72NlKH8NUvkKJJ79sG\r\nnI+qDZXaV+NOOxQ6pcdbBH3EWUS3CwIEBHaAgca5IBSB/61YFJasBhMgTqJq\r\nG2hbynorE5bmIKy1di60sl+tH7CrjgNWstvUEU5AFo2Ek/F4JWRAjXRIZtHx\r\niJNOxF1pixYi6suWe5jyXu1vyVDh9IzT8fZxIAcgwhEMaHYA9DpgHaI5AWxJ\r\nhJU2G7GoNGwPwa5oaYwV9JAyUovCCV/7D6wcslvgQWIlQPElegRsoY0wQM58\r\nsi9lAZ3y+/XA69s+fWYeG5jVF0T8rkgBWgd4RMV31af5tCVbiebs/tFpcsQ0\r\nMKqJpaTecWMiO7CfdJRo0s48uLw8RU4bVwB1IBPgfE5a+xKoMvsGiLc42G/U\r\n7+83pWzVT6/eJ2OFJuVF2RVFKPFSHqhp2NU=\r\n=sp+y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"590020431978794ff2128a91f19756dff9dbc37b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6048fb563.0","@material/base":"15.0.0-canary.6048fb563.0","@material/shape":"15.0.0-canary.6048fb563.0","@material/theme":"15.0.0-canary.6048fb563.0","@material/floating-label":"15.0.0-canary.6048fb563.0","@material/feature-targeting":"15.0.0-canary.6048fb563.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.6048fb563.0_1668615459486_0.4195453848375712","host":"s3://npm-registry-packages"}},"15.0.0-canary.3777b03cb.0":{"name":"@material/notched-outline","version":"15.0.0-canary.3777b03cb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.3777b03cb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3078ec4615ac809712635c40841e83a0d54f9a91","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.3777b03cb.0.tgz","fileCount":33,"integrity":"sha512-QYpkTq0+gS63c/DMMHksrAS5s86Yu/354Pjrnbp9tWyexx95kk+YMYsNKMwHxKX2lcu2XrFlf4YZQTkk7kJFCw==","signatures":[{"sig":"MEQCIFXepgCRoVW3jBWW6lnJuml00HG5Nw3bt/TSpXqe8+mFAiAVOzbTqu5CcMJXhwBzq55R3dSHcUYMjMBl3jQyF0o1jw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS7bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKdBAAoN1rbzd0nAb35hRKTqN8Xz7E7kaF14tK9JqLnTOF1zW9eHX5\r\nVjixAt55RhH4Sol0NHru41L/qdzDLjdj6igyH3KhGDgAUMqxW+s2OByASu7W\r\nDsw/QTFusHSStOYHsfDeSirEnvGkuZMn4YhgmGsUByxMeiLezjD4/YPna+NR\r\nacWCDRQfRjq7vWua0L2X08mAyTQpyBFpbkom9ex9PQEuhi+HuafGFgjzCopu\r\n6qUQ16bow84LWxj+pmJbclszM0IHsSqiCVlHnpW3C9b6NJ2t/7Ala9ht70VZ\r\nmmTT/W+F/V0FDhi8UtqRuwiM74FOIh2Mowos610g1qC2n8voOHgEtNyp42BI\r\nxe5WiFlabTWB1lxEFdiKvwDw9VQQj9+9E5RVggY84eYPHxfs1QMR/Lr0pgsW\r\nQ2U4XPXwJDGj8NzirP8eD9X92TgFvf3fkkuzyTqswtJlE2JhZJKaxmGE5R1n\r\nLQ20nI9Kbz2LHd5TMqwgXB3IHGv5x7Z5uO8geLOapnjZrWyw8G+b9TBTX/Zd\r\naWvVFvSjRyDQLmNMpMWdYAw+8h4K7lbCM0HwqNDZyPS+gkHAmOUkkvLL7hil\r\nYuW6VvhshFijO01U6I1L1GYHizECGEMwdl4YsmC6zQUptFQQsSnjUrjvaxGl\r\nTRdDiiuUFuHESlMyc+YfxtjipH4JtjxWJ1w=\r\n=RITL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e02f6251b19559b874fd1998a9f0bea7d651e41f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3777b03cb.0","@material/base":"15.0.0-canary.3777b03cb.0","@material/shape":"15.0.0-canary.3777b03cb.0","@material/theme":"15.0.0-canary.3777b03cb.0","@material/floating-label":"15.0.0-canary.3777b03cb.0","@material/feature-targeting":"15.0.0-canary.3777b03cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.3777b03cb.0_1668624091466_0.895097609248459","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/notched-outline","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.f7f56fff7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81e4c2a446ba34b4fd95c9efa59b0ce6e573455b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.f7f56fff7.0.tgz","fileCount":33,"integrity":"sha512-s5lpaCy+Ew9AObyOBq7M3Dr7OtzRiUGCull2y3ORPBYEb47nL7hGjvI6n3oCFwi8WQbW0qBiIBWhIzZ3MfP9Vg==","signatures":[{"sig":"MEQCIB6Mj0puXBQQ9WEufzkx9mk2OL9hgNIaJWWqLUje8+NvAiBhQInmuh+LK8XmSLDuuhmB6qlmgpqamzFJW7GFfYvjvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUBTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLrRAAlnO8ZomXZMGiAci8rdHCfXXALQSHhM+TAnimZjpsXe3teI1m\r\n2c3zbnoR54IqDx7E0EAc5XUY1W641ucV9vP3CKqDzm6MVJa36G4QB+UfhH7i\r\n9TSe0mLU8vP0xmFDVYd7i0b/xgvU/VKm/EhPoJTmFa3j/K1XVYTjE8lJWctp\r\nv4HzZK2A88hHWfMyWEuAw0ggEuHtxCin2mJfOTgIljUsZcFu/Vd5j94cvwus\r\noJ6m+5vrxKUXWQ1qilys07T0V8LYcdmbyvV61LDVR4dZU6aEBUZ3+Fys2/kx\r\nbulEW7Jbs6DKlILb5BU0FXHqg/rPaqM2uiZuhiOLcgazEsRKq/92iuMPWLQa\r\nWInRwGQnTnS2qS7La3W6L5xkHznpGmFwPmTOeuzIDgBRDx94xGpR+fiCN/oA\r\nGMZ6HM+nOunCCvGm2+d8svrYTDZgmF0hwwBxggC8+sG7jAuAk4KtYCNbILcX\r\nMk2kbCEzdb3ICX/FdkCeyuDdUu3pXqO9pot+6tROcAlwYE5+RfJwu96pIVYx\r\nd3lsFiuUfFXx6aaPW9ZY+FDUc1oF4OvI0ScxxELRimjvCBOO5yBzpzKj18IK\r\nIAJ56/9nqCINnAxE5o7+LC1RjQfuIkbfQw9RFKE87Xfejd+Xrpt1eMhGUgWX\r\nyRq3uRPN7Q2LcwjtEKpI2YAjl5k/qSfNDi4=\r\n=OsIA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bc90613e754d04f738197ec3f3f4602e9b362d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f7f56fff7.0","@material/base":"15.0.0-canary.f7f56fff7.0","@material/shape":"15.0.0-canary.f7f56fff7.0","@material/theme":"15.0.0-canary.f7f56fff7.0","@material/floating-label":"15.0.0-canary.f7f56fff7.0","@material/feature-targeting":"15.0.0-canary.f7f56fff7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.f7f56fff7.0_1668628563443_0.9891028357675826","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/notched-outline","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.7c73f6134.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"524e754fb01bc1f18e896eca71334d6f236f292f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.7c73f6134.0.tgz","fileCount":33,"integrity":"sha512-m9h7kxA718oYw7OyQH2X2CJcXFgQSb8WaRV/kISDmVoMUSsOd46E+s1mDbse6n7aHpYY08z8EMuVJ+bizyAqQQ==","signatures":[{"sig":"MEYCIQDK7XObRaPgH/e9hl2jX7ZgptyDz6pK9vvlsofsLwHeRAIhANjijZjrhVOGftd8cToVuNAC1OQy2pTiBrYYsfOtdq60","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUEvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraXBAAglyoP7KNIj+YTnpvqFU3nACkw0/Jj0K9OZ8u2d3IBLtdvnjw\r\nJuFtPUwkSHKcazt9aDJ/UAT/HUO0fyC8aDLo4KCkb/UN5rzmwKmG9XCVmjan\r\nB/gI/OI6xvIR818AISjpovkrMbhhmP8LWgi3TnWqqFRzQEz26OufKjj5kGoA\r\nWHKsu0hCIjnlW3xYDUh3I7jSowAzGW0x1K96hYehyNpzMzp012BusRPFIwLh\r\nX2CgqMkPwqRbF7yHBZ68DY5wvwSl2FI7TxeZG5KHsaBNzImoxObNrSMK5CtI\r\nAQ1b2wfxmz2tLYshN35asGwh9w1mPOqfyK5dAZxnwzXkJVwfidutUUXL5Wl+\r\nWo3Ok3s1Cahe6LE9389ulQdUtsOqshFNrxQPWOVj/hAGXibQKm4fLBOYE2xZ\r\nm8OWp2AmjYG5xTnBYpw1GP7mB6fPR0yHgAEf098FfSwOB/mJUagW8h+UmVob\r\nocXN/VS99xRwwL+VnMYIyAJCyqm2OQbDleo1ZsGbP5vglMOOgIRkVRmXzja1\r\nlK645GpfX/KkPc2sC7k8pzJEfYkQZS920Z0aBwjHdTUQR6aIESqq0s4kdGUD\r\nA0sZiyabbXEe2m3vXXxkuM8g1sbP84t/3/aQzykH4nC5w+jW1lLsp7+rzdHq\r\njrgwuosrPjPUdj26RS54pEFJs1PqtCMsIeo=\r\n=oz9p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"14f53e565ed77defe907254a486b9ecce4b45146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7c73f6134.0","@material/base":"15.0.0-canary.7c73f6134.0","@material/shape":"15.0.0-canary.7c73f6134.0","@material/theme":"15.0.0-canary.7c73f6134.0","@material/floating-label":"15.0.0-canary.7c73f6134.0","@material/feature-targeting":"15.0.0-canary.7c73f6134.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.7c73f6134.0_1668628783638_0.5786055338024121","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/notched-outline","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.f1e037150.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b810a25c8d02d826916c39e73c135bcda3aa1980","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.f1e037150.0.tgz","fileCount":33,"integrity":"sha512-1A5bAQ2nvzCH/22pqHxYKXJAZtobFzb9h4sOeBU0NNGMTYAfdAI+u3719RSZ1qvg8UYrwjgiFYycNc9raSMi1w==","signatures":[{"sig":"MEYCIQCu7F9NeB6m+c62cdHDQEUh0iEBdRNehYNcGfXHrJp0pAIhANYt9iQAQqUoVHt4RZsAjw+9gb75e2DPq6uYuVgnnJ29","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUJ+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpv4A/+MSFOD1W4XpG3LrvgUFbIFzj0Rmh977QMrApsEcCvvg6IfoYA\r\ngUn+lbsU7dK+OUPgm21yySne+zTTh1YPnUZnZI/XUzat/iGswGOxiERg87r1\r\nnj0JjIGBB2YieOvjxClk0ayrrytvEykdhqQaEf4bwE2WiGsHbuynINIIl2aK\r\nvqu2dPgdQ0ELQw/qqlTLu63cXEWdLb75VDxGMgIoMJdgQAW1qEIu284z4ijr\r\nBCY2ivqog4SaFJDWpYVV3Tq5eGCJxxvpmwt3EI7oJWI2D3pnHd6ui03RgCpA\r\nu2Qoggp67TsIV+vDtyOo7JLBODzJFDkHw+vSuzHZwM5HP86FIDDRYWeoAvQ3\r\nXMg6jIZ4NVQwW4Z6ALjPk5p//n0w1RDFHr5jPcR5TCTp33r1eaNAjjicvUZF\r\nLOV6h/kVQncPfPF9+FLK8G1IPd1beuRKCWrH65WWN83SH37vYRzz65zbWxct\r\n2HuYBVYRcloAGXuv7zXo2A9dcgsKiIDjTtPOeK48R8aztGhSIVnMbZVJXnx9\r\nVydwAqE9Jcy0Pgs4Ah886Aha7dwmGvbdZaCRIwcvNXrTn+uDJznuAmCjuOML\r\n73HQvjuVFUumJdJTv0ryTi6+h6++fTYVMe4poBDUfiry1ngnCsjIV192wYnn\r\n5HvgfZk3FDC5NtE0F2wdxfwWY5AR/GvNGUk=\r\n=GJ4L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a639195febefa28bbed957ef46942b3da6a4cecb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f1e037150.0","@material/base":"15.0.0-canary.f1e037150.0","@material/shape":"15.0.0-canary.f1e037150.0","@material/theme":"15.0.0-canary.f1e037150.0","@material/floating-label":"15.0.0-canary.f1e037150.0","@material/feature-targeting":"15.0.0-canary.f1e037150.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.f1e037150.0_1668629118745_0.9686496422660325","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/notched-outline","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.40b18d043.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eaa5bc9c6bae6e38eff9447d1510c0512a9f1c45","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.40b18d043.0.tgz","fileCount":33,"integrity":"sha512-Yz7CNDmBG6rGjTkV+Te9N/5U4knBGyjsQZQqJ5xeDhKsnjHQRg49R58GvrtTZEZcreBV2BNzXQaiRhQR0ZTnmA==","signatures":[{"sig":"MEQCIAHbLoEE+QnlxsOFOkiQqte3Cxv9WKK8Kldf8/WoBYYhAiAvZlt0YVK7eYLtpdT0x2AeUyHOau+gurgr87CVICMpQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWstACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5mQ//WxVSwAh907Tw5kzDxnlvc07FCv1TuT6TIKZ3JzCuYvPYDBMa\r\nZNMoMGNQwO1fa7uUtOAljg90M8JgHPOjRssPzzttct7AepATVPRUDyB+Ufl+\r\nODEg8cmzeAK6fCY8ewPXJUspeSx29aNJpZxnW0aVIAURMMGC9+qab/d4S4DA\r\nKUUIovho/pjaRy0+LcqSpfmN/hNweiB9sxXeqKEe/PuEVdJOgD9xvU+xC//W\r\nRogMu8Dgfm5/dD4rWYVP7i0HhnddEWrINqurJ4KQJC1pzujdfk5q5O66Nv7U\r\nxIanFdlvhBnJFlhp5/IDWj9ddRG/Nt71cQGHjmb4oiGDv0I1XGYjQPTXXcH4\r\ny1bEEC0ubmBAtgHaGDX/vMCErPWB1l5pUiukligdCziRNILVuhKoAwsujGBS\r\nwvgMxBGOKc8pJ6Qw1BHRnVYlYWJOlqJ9zFBrjTrNE0YZgaJLzkPXAzkaCNsf\r\nbWeQswjC+RRAcjB5/l23zhkJWoNvT/oCI5dSp+aawGB9CHHpv1VMf0OJXV5U\r\n6toxRoVtf3jgRxEvynBEmaL7pG/N6B4vzuZLv9YXHlPPiBMseNxPadje8Fg8\r\nnsC0SEMi3wFnB8NESdpl6aAeZoJGhmVMj7kiGT4mqrd02RUtisPTjCrFz+Gd\r\n+/BCtsdRmPamNSV17ZsHMxksmDFKKhiBia4=\r\n=XBwF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9ccfc97518c89cfcc2b5e776dafe81024d137f31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.40b18d043.0","@material/base":"15.0.0-canary.40b18d043.0","@material/shape":"15.0.0-canary.40b18d043.0","@material/theme":"15.0.0-canary.40b18d043.0","@material/floating-label":"15.0.0-canary.40b18d043.0","@material/feature-targeting":"15.0.0-canary.40b18d043.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.40b18d043.0_1668639533301_0.36578323618118413","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/notched-outline","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.86bde5c06.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71a43514b8f2c005427e6f236519e1e6867309d0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.86bde5c06.0.tgz","fileCount":33,"integrity":"sha512-B1LK0VHPdCF2p8opPGklRXnMVPQSyfXdt1l3VLwkORd+EAgGB0YKRsVyJW7gAn07Erx8SY8IvBWz7KH7mRs0+A==","signatures":[{"sig":"MEUCIQCRVp0mI6XRcKEP1GHZEUW0sdW+WIaryn7o04OsqqXaCwIgUZzIn/9q48wTfohnL2ccjQ9b2KukfM4eO8Vc7fYBIRU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW2MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4rw/+Ngp8tP/wzkl7wY6k7QrnSxfx/kVaHA17j5zgbfhGt6YetQh6\r\nwjmABaueEYfzuyHiw0j5+O+f/n4pC7Optwz3GgIzKu3W5tLvhu/pR3Y63sRW\r\nu+dbEKGnpXAXK1OyOJVcR901RfzOun5kB8S8eLRvRv4E87nISDb/A3YJwE0N\r\nRglLakobJpGWXRiNA7jXcAfTvQzywj/0cZJd6vq3X0WZ1PlUTPz9fJKYvJtZ\r\nVbCgp9s37QPU33BfFShcvAqJ7ZbpQ5Kl050j/rFAPkFGY5yW4X/4AvkEFn/v\r\nqKGMPYzXXhzxRU/aQ6zdHTN1qFCEVN/kEghp0QWPCPFmF1N5BRbfQVMJNZXB\r\no3cQGAHIjIsjFj0ineFGuUQhT4kt6jWaW7CjO1AsUsbRFjmMMoCTLcY3SDB7\r\nmxkI05Xra9yO8bshpAVIeeJg5KWAKEm/bosCd2W7Hwu2eU1W18+B7sUjKEDq\r\n61JxuiNlqF3Vcxfi5WoX9vV48BWOPp8PV+3o5f/H3HhhF1s5Z7TKb7kptqfb\r\nnR+97Iyvpkrsw9vzVgOH1pTpTsxd4fvIC519J5rmmZlDG2yRFg/3eYFjEKC6\r\nBz+qZTFe9S0g2Ry71vO10LEAQPTuyCnQb+P/CZZ1m8mSLFXaGAyoOVnRyO96\r\nzho0MJzYa1Yc1ueJldGqEqj2FyvYfEGGb+4=\r\n=j9Jt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b9cd39d4936a1961536e39eb1df855c5164d5840","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.86bde5c06.0","@material/base":"15.0.0-canary.86bde5c06.0","@material/shape":"15.0.0-canary.86bde5c06.0","@material/theme":"15.0.0-canary.86bde5c06.0","@material/floating-label":"15.0.0-canary.86bde5c06.0","@material/feature-targeting":"15.0.0-canary.86bde5c06.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.86bde5c06.0_1668640139906_0.9230038760902466","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/notched-outline","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.bb7751002.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf94073459df657bacdfc9eeaf8d0a05292ffe9a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.bb7751002.0.tgz","fileCount":33,"integrity":"sha512-Oa2MpN4M/Kvk1Ixm0Ng5IkkWzqMe9Kra5l8HtHo0U7NaoVqyaXx6PDQVO7cqg+op6GXvLto0+uUeaYzzuJCkKQ==","signatures":[{"sig":"MEUCIQCCkjlE/ZcTgQrQzuz4a/zSljAPHFpXl4+XLEe0jQKkSgIgQaumzr/XI8BTSPWVsYayJuFeq/BvkemsZCr6BZP9+yI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXmNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFow/+P1aTNN9HY3CaUQdHTPWQPT7jJX/mQz1aJitTXWZQ5yZ46d00\r\nMsTJfWabQuJtgCwinv5WtDM60NLIrb9tBPZ8kU+PvkCH7WaBbGzi5JDoxc6p\r\nSY3Im6yqkXj5d8GjBwHP+bcZp9N5kWFYmGlU/KnclYo+NpUvP6CLxh8dLmxf\r\nbb2+kLBDW1Nbr4IqNE5Otqkj9IZy3gEYIc5LXm+D9MZ0HHwbbQjBNvjQ4sHi\r\nm3XDh+DwStcMQnrpaFniBYD3EZbj+rRpuEarF1vKzXnNaoIE27riZFIqgDW6\r\n2sx6MjakXrLmpzp/fzz/kMvfx3WWdpFkfAP0eyFX6YLKFGJHYYOl+OztX01M\r\nDcLXmczcmp/tguriHfurfKv/ObUfDvM0EMo6qQ1ED9iarDxvl15q0lzkaaZI\r\nCTY5ponbr/Y4WgwbyS3aM3s2bLYlQ0hAROqPKI6n5DYMOULq4d15jyA72VTq\r\nfWMaPaM4198msmtdtlobL1kNfiKmWOXNQaQIKowKYia9jeYYrvYVF3oKxZLG\r\nv0Ktw/CbA3LAbC4J2e4X1xdT4AzRMUNOfbtJoFKjaEFMKVUzUM/hFf/cuFeM\r\nAWXMP7v/pbdSaGI5rRPCZQv5uTUzH9a2G0DZxJ3WZfyoqpffyKLtYWVrSsz9\r\nKNFchF+Y7/yQgWIUzSiu3uLpdtRzqoaKs0w=\r\n=1QEf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f83cadc3a1330a69930926dacdce7fdf10432f98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bb7751002.0","@material/base":"15.0.0-canary.bb7751002.0","@material/shape":"15.0.0-canary.bb7751002.0","@material/theme":"15.0.0-canary.bb7751002.0","@material/floating-label":"15.0.0-canary.bb7751002.0","@material/feature-targeting":"15.0.0-canary.bb7751002.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.bb7751002.0_1668643213043_0.11912415852480907","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/notched-outline","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.63aca9af6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"834cc49ae54551681e56a3c91481b22c4bef453f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.63aca9af6.0.tgz","fileCount":33,"integrity":"sha512-FibEJOlX0AUFYaMvN8TlhWw0J/YHt14ecMOUlsduyQfp9GNMsc0zdpCS8tL61tp6gjnhLvWWSMSAVx7Lv9r2Og==","signatures":[{"sig":"MEUCIQC2F2vCK+HihnT0GRrb2OFcCiwCSdw7+S7CjdeN1xiHfgIgF/zxK4/N0DQm6vM54IHWlx30o99VHRSLYj2Uat56w3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoUAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoX5w/8CSP7Ul4/n0S/EIwVEZq/DGtqfyM/EcvbxaZfvR8Va9VVTug1\r\nNlMylm3POj+t6TtoYrtLfS0tBwkbq2Sl6AM00MKP/OvTKnainuB6hPSYNIqr\r\nG0twfRNIXXAS8neAFLlBZiJFg9QvDYDYPkk9qwHz+xkkgYe+Ev0dg6LCTEmk\r\nceeP08qMjMKr/6Je9znr7SefmRCvyXdaLtT4No8SDWWJCvnfMTKlFNXjwo93\r\nbkyui/hqJw6dyPJ/pUQGo2tT0HaMXvt6GUK6+0elOcaqWdlTzlMYEb6tuyqj\r\n+CW2jQY15sk+Ki+J/FUilTnhch0IqNESfQxTlgmaTampCuHJph/tI5brFsES\r\nvdyhlWPvABWNBZCzrEnYNJH83Xj2Gy032fsnf9Vgf8dYt67N7JK603OqLRco\r\nKQrXoamQpqCE8lfV4Vsf4tU3oHIE7b6E6f13ygbvk9bafFi1CNjimDnZmdYD\r\nkrxYAYjZNppa0N3WJXIasfnMZrUyD9XiN7mL6rQ14thmQPqylQVF8OOJaepW\r\nm4VoYSXwhGSjrweRTbJLRXns0RR5YoVaMvUQJJK4EBRpukSE7Z0C+JtXLaQJ\r\nVpDkeov8i0lumdernrDl/d1HMKmivRqO8heU8Rowcr5+947Kp8nVMK3Z4aEN\r\njcjtU8nUcrCn0sgTcZ7sBb7u0i33K50KdUU=\r\n=/Gf0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c2c841973403116b6a405bb9aad3ae8476bc028f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.63aca9af6.0","@material/base":"15.0.0-canary.63aca9af6.0","@material/shape":"15.0.0-canary.63aca9af6.0","@material/theme":"15.0.0-canary.63aca9af6.0","@material/floating-label":"15.0.0-canary.63aca9af6.0","@material/feature-targeting":"15.0.0-canary.63aca9af6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.63aca9af6.0_1668711679991_0.6359941154567827","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/notched-outline","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.56482dc2e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"988b4ad145579e3ffa1b514d6d481daebef67b7a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.56482dc2e.0.tgz","fileCount":33,"integrity":"sha512-V5OYhMsg1dfUMuuEnl5BDu1fMy05UF51TXizIrkg9hKNq+sPwtL6Nx5sLwoQhgbhmvrGo6BjTEscFWtb2wZAHA==","signatures":[{"sig":"MEUCIDsyGomXDTP4r9qyzAu1PTr8L5Li9C7BT368fEIQIZOOAiEA0QqMfTnfa0Bg+CrJ4NZ4Aw8KMeTOWW8IlI+y4UWK1OQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq3IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEkw//e/8ujarWnsS93Z+n37kggDhHT4NPkC0XfGSUxWRxFWdixah1\r\nYXZtupEFPJMLVpU4rYHkJqFPb73sxC2q+t9vzT046+qh49ITE9ohz21diLt7\r\nXCnHK+97so0aD+OC2wBp3WeGkIfDVAeS77VkjBQV0mi6kkmbIkzjjDnYvFqV\r\nGW4b27aaRfEy7WFHZSwwcIfBhO22uw1cJ8DI7KNQ8n6AQP7QxgoStLwSekOD\r\nvUuFHxuAdsGkfzwDdITsnMzsM7gz88V3pF0iC/Pz6BjksRXpTG6wbFszCcUs\r\ndc5WEnc+B+MYkPXaK0pk+Uda7Wxjf76fymDDBv9tu9pwc5iPiQU7CVln5pFv\r\n4WxZ1LMgzYmQ56kAC5XJX4S1DJfRn+6SSPM1Ak3VGU6AxWaSdC72kUNRZaqh\r\noC0ZPK/fCl0jSx7cg6vBiPIhj00CwTUJ8QBiux9jYkNI3ra0acJGqxjGITHx\r\nxarQ+4Qp6vnmqRg0Q/UaUSI7zIqz3AgeozFPoZX0ZZGb4Rb/a4a65HqwdIVK\r\n9PPsAu81fnt3YhhIt1x0llyZHda4JKXW+mNR64udPBHG1H6irmGSv+I27WS+\r\ne7i5WOTIXuvtCXpZsfK/JOf+jykyHjzpWaDKKzhh+4U9Z82wiTDfND8/nvmF\r\nVtgDV7LtIHQ0rN9fWnlTomNtyhzPjbkYRCw=\r\n=oW3n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c65945fd8948c8e5ada035d0f2538dc2ced7a28f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.56482dc2e.0","@material/base":"15.0.0-canary.56482dc2e.0","@material/shape":"15.0.0-canary.56482dc2e.0","@material/theme":"15.0.0-canary.56482dc2e.0","@material/floating-label":"15.0.0-canary.56482dc2e.0","@material/feature-targeting":"15.0.0-canary.56482dc2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.56482dc2e.0_1668722120164_0.08060602401400319","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/notched-outline","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.953e689f3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ee8f9b918ccba6ce16e7beb511414ca3a53efa9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.953e689f3.0.tgz","fileCount":33,"integrity":"sha512-knH9Eg+ifWfVq82lxijbqL1hh0zj9HshsOZU5dJk6+Ec9wODsPZLzTOJmc++LXAdz8nvhRXsEEFn+fxY8eeu2A==","signatures":[{"sig":"MEYCIQCUEUCmcAlPP9KlhXaW0Rl1UzBa7bUIJuvD9JpWZnVlzgIhAL1S9/9d55/iM9SNZtH8BHGjXyXarzwli2YyAcbLq2dv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq/8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/GA//XtcIaeXO2SAWfKAxuQ3+t0GhBSERIjvbEP8RkQ67t/G85yC2\r\nuNn40DT2UJzw/+Tt/I0AVxm0swLusOBPFBTyrFrRQ6Bz3rUoOFx4+fUcUAKQ\r\nrmKkyl9NrGpgC6NPYbs/6B/ZrXcqXjIdSk2JazxS9WFccm0o2GqRJrL97Q6n\r\n+XQUUNu7yMjG/QXyNHO6/OJOjNLU+aXm/DsXUASvF6Gw1QuuWRMRMKi/Xtrc\r\nOSAFZBcVNv6lAH8gyZnd54WhD37HAX5JrVAdVPyEbLBNgRQtbG+E0/r+ObhC\r\nqpK38Yu06X54RTAGmI8+5owu7va/35sWIS8HSdVsYF0pzxKASp7h8RJZP+mM\r\nu6QfZvJZNRou0Cqq+ilfzczQVNBM7zCdigwUEkLvztP+Ok2+nqEcJWYJaCB2\r\nucHLnEtb5CWWXAecShxZplnYs7JufF2Rgn2WH/svzDjRuthwr9PnXamIoUaz\r\naXVWpllhnF5IWTnp4h60fUFUfgkML2xbF19SQehF7DG3fVh7R3PEypS3+59A\r\n+imVuIilQt8ua+xJpmYea47ihda2ot6qfpH6oZR4wC7xsCqCTOtZyvTgfwgn\r\nPzYZzVgf3uF/CLuN15T58j0pSIacAoFoie8U+EbF+/du0dWzn5rG/FC3WpNR\r\nCQca3TK9b9n5KA4C/GnRc8p2xl/TP0L5x/U=\r\n=giGH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9b9adee0b4f10a2d6d77fc10e9291c3aac8be42c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.953e689f3.0","@material/base":"15.0.0-canary.953e689f3.0","@material/shape":"15.0.0-canary.953e689f3.0","@material/theme":"15.0.0-canary.953e689f3.0","@material/floating-label":"15.0.0-canary.953e689f3.0","@material/feature-targeting":"15.0.0-canary.953e689f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.953e689f3.0_1668722684637_0.20944768542871994","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b5606a793.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd21ba88f0ca9d2fa486a6f1bb7a2cbb1b519697","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b5606a793.0.tgz","fileCount":33,"integrity":"sha512-baGvqu4BZiTE+6sNX5heo58GU7UnvIngdVIEtjjMJISwAbR1RCi5G6MgtKIa3Q5iTQZfb3ky4RdRUE4BQyGgcg==","signatures":[{"sig":"MEYCIQDWKOC4nr0xTw4Q6jSoVmb9tbbOF+ZYX30me33dsr/e9wIhAI8E7tt+Sr7bKz2CELf/TALJnLxOewxnz22LmEQPpFMK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1ydACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobIhAAhWwY1rnNtqox7h3HJ+JTIeiKtM/8pBvGQw8cYGAaykGKN6m/\r\nJOmqpKIpQ4sRhw+speA7sTQS5NSvX4CK0uzzEJt301cMVB+cyx2mob7mh4vK\r\nWwe/WMaGrwENPoA+IBUOfImvBIyOKbqJbetTfoCwO6/E9DGkXiDh8hlGq72H\r\na5RyAMXPZ5kw2U5Zhra94Gkavbt+Mj4Q6D+Y+DlcujeIWt3M65mLxiIrLYD2\r\n79RCkToFJ6NJyaXN1nU7JYdU65UetNw1tn3wJiQ8TMEC5PrH1YtOSexhl3mo\r\nynxq0CGg8j3u5TpnQsIrt1HYZy6Wq9ThnRwA8U4g4JkPNfV3aLh05Xirbj4H\r\n1TvHYbn1t8IEF3brnCc++X0n/qH5fIFyLKbH3HEnSM/BxrpiQLRlrGWRKI3V\r\nhqr6fyj3iTAQ4LsFCTY9d2JGJKJNrJvdvksxDhRBA4ve1GkXzsQvuxxVGayO\r\npW6lCR7wK1to4k4DQMNxVc0yfAwIL0VQeMzX6eD/8J6omsf+/Jghm97Yjvzb\r\nWY7VtYg8UEcnlzdsgxp5/9cyZN8Wyvpkg71wQb6pm0ZwhT6dfxhodIAGN64O\r\nZrB347QscFR7dySFzwWcoTeAYdoXxEjczlMowGadK+LPFZio17DerRZr7yFf\r\nB+xzSByjWb5fpiauTZyIyy+LgobFFetH49c=\r\n=pRc4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"681685532cfc9993a6190aedd85bf5cd1b3f80e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b5606a793.0","@material/base":"15.0.0-canary.b5606a793.0","@material/shape":"15.0.0-canary.b5606a793.0","@material/theme":"15.0.0-canary.b5606a793.0","@material/floating-label":"15.0.0-canary.b5606a793.0","@material/feature-targeting":"15.0.0-canary.b5606a793.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b5606a793.0_1668766877136_0.6970795142369914","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/notched-outline","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.8c5675942.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"884d069a40820f935333ed650ea39efddc67f879","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.8c5675942.0.tgz","fileCount":33,"integrity":"sha512-pwh2WE/U7TxEZRYJfgMnNQiLdIOWb8oLiMsGLv1QwSUFGGESI9u6YH7rbBIlSvFd5Ue14nYJXDUcpjf1xp60nQ==","signatures":[{"sig":"MEYCIQD8Gq2J81nuKxZvpAwXfAvgzKQALafY4ZG9k1F3GCzY7QIhAPh2/dzXv7eLJ568AX1mIUBgKdWyS8l+VVlIWmZZpAlX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6HEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqduw/9FXaOy3QzW5MiBzTUx2IaWyyjaMfv7GJ2AHUDTYH0TNILM3ww\r\nqhr7ZYjOF0OpcDoq0/+lx8m0y9ALhF/vr5aqTTiHNjYTQ/Sf0l/CHFgDFIZM\r\nOeOR9aWBrh7Bea09ncVc2mkm7qy9QskAjXmvv3IUVcgi4/UFfdKHr0tRJDmy\r\n+MN4t8O9dXjfZrilua6+dexoC71vGNmYdQINFfNzl/PinVkmSGrxBg6/Zx1S\r\nvEpKbjCn16hSWb7LvDJKvXP4OeDrBc0aQFW494lfoB0QmuX2shJOpDHsT7Na\r\nVbw3Mww3ObyOUnlhU/unzhZwdGzgrdaarcaXNL1eQ5DrmMA0NjdFXGB+H84T\r\nRB0ktrCkvFhmAGACISwjeC09sA1JZS8dJJ394425duNYjbmC8LMLI0rXPOtt\r\nyXvT/XR1FfztOYRBffHmSIZ56w48gk/Azvk9t5PJ40KnJLA7iysaXWBJUv40\r\nueeUCzjoRU3Tt5TUHst85eFqHIVQ3DLWSarUWHNzrcT1t6PsoxewJ52qx7k7\r\n2YZJJ8ppLS8ygQ/xT+o5p6GamjZ4PHySlTGgQixSBZe5sEK9mnxc6SMPzfTU\r\nUZLu4IJXkE4yj4svV01hU/vYrKu9D88Xyo0RBhZA3n4uhXc0J7db029CPzHW\r\nl4/5LVatCFAfvWXNRz4o+UjWxRjzk4uA9TA=\r\n=LZQx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"46367ab28a14e7ab75dbddad4b3a00d97443debb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8c5675942.0","@material/base":"15.0.0-canary.8c5675942.0","@material/shape":"15.0.0-canary.8c5675942.0","@material/theme":"15.0.0-canary.8c5675942.0","@material/floating-label":"15.0.0-canary.8c5675942.0","@material/feature-targeting":"15.0.0-canary.8c5675942.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.8c5675942.0_1668784580091_0.11142947172199724","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/notched-outline","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.697fbdebd.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94871f6df52c59c6d61b7912fc689ca32a44f4ca","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.697fbdebd.0.tgz","fileCount":33,"integrity":"sha512-s9LjreUGMCnPQxBk52jd+UdXBTCvTHIN53qp72aCV830hol28UVqwvvv0Qc6Hws3lWyvoBthlvnRxQSChIleZQ==","signatures":[{"sig":"MEYCIQCwH6Jf21SA6X5qwkM/rCYFHE+Ci4CHg9fcm4Z8SdSvcwIhANk1Rvw9rsu/EGq/pre2oRTteiRieTPO3tDclygfG/X1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7pEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTBw/+OclI5CgTocVLcFEmrgFLOCfy5NDrXZRw5tnK/SnsCjCmDiZC\r\n6Hyf4s8gX0ubHdC92X/dOL50gG6oXG/7FM6fBsJ+QqgrV5o9mGUwlna64GvS\r\n2RQjAeGoBbifDHKsr3qP4otfM1omthlYC2YgQo9t9o205dxXp+Zo03IMs0l+\r\nKCYVGQdvVYLUWWS9Sm0zxHILHQ2h3yIYqFM9guRLcJZXFNbb80TWuwuRdSc5\r\nrH2lLEj7qe6Gv8P/lpExTWjT1LJpH0BzsMVZmkHexI90mr9MrTRLLpaAXPMv\r\nM5t2GPvU5RCepU25VeOp9d2AtzleThujJIGtHpXFzOPxi5CT7JKVwKlBhyKU\r\nZKQ7r5wjZ2V6OpmTqYQYTcy4Ge1VdHAWtMD/cRXTbDF/cpzJXrqH8ei3z5zM\r\nY0RkIFgu5BGBzvQe2CJ73jHIQAm8zw0g2n8PR6RSM6Y3YnX09JvTbKq/1xZR\r\njmVyszusDUdjd5se/E96GmR8V5iPwwe2nyPMRF9I12ud05eyCVk7KkZsnVbs\r\nyIvyuS0YgbtHETL5aaiXVfrlf2Tl6gpHIB3slOMqVoeYNVKW5JPm5C5/1zvR\r\nT1Gxd8emZUkXOES0yNd8yMnp8AWFnfzHVVaWXu7lbM+j/NxsDjJNj8PqR+Qr\r\nzeKPBlNLJ51fQG/gMYhleLiPiywMTs94hX8=\r\n=i+0F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"633705dd01d68334d80bad5e354eb7e71d9fa30b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.697fbdebd.0","@material/base":"15.0.0-canary.697fbdebd.0","@material/shape":"15.0.0-canary.697fbdebd.0","@material/theme":"15.0.0-canary.697fbdebd.0","@material/floating-label":"15.0.0-canary.697fbdebd.0","@material/feature-targeting":"15.0.0-canary.697fbdebd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.697fbdebd.0_1668790852235_0.5785863002767293","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/notched-outline","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.d58410453.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a567952748e79ff63a3624c38c220ebf383f56b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.d58410453.0.tgz","fileCount":33,"integrity":"sha512-D9ilGM7hm0Gm51qr/zOqxqKz05csiMpFYstmfz4lxU112oln1AeCL4ZT/KBC9wFL2KJXvQgrk5T9WVT80DHH9A==","signatures":[{"sig":"MEUCIQCS/9ibbSGAdP2JD9aIijahbUKESHKg0JuJEGs05FkviwIgAtSgmtHNP/vOD4zm3JEIBHn5inZSkWixa9UTjX5N+Qs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9wXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhIg/8D0UFJfpLOeKMtrgIkWnHlssr8K9EkDaItVgRmz/XECnlkko5\r\nkpO3aYlvu//oC02DJfZWiaUZYsc3NnkfJ1PBnS3DWzFHPaLptuDotLwkidF5\r\nIuWKi5V/h96TuBQeSZ7b6XskKPLK3O1ofbbZ2gBXk6fETOkd7RvGbzT3k7P2\r\nFxz3Y1N4R1Tv9uJpb3AXjY9M1QxWZHFS3ZUGWMcLZdh8UCQW4bE/iMsJe9nN\r\nyNmv9b7GWxt5gtLkZbtJ3KTVSv0uklShH6uAXC8O/MJxP2QKHvjhuS0G0BOh\r\nW+CSITZfLjGLEajFCzc1TWTUnT/whL50ftEjJIps21192J2OzVa1cNAk8hD6\r\nbYcQK1j9IIxrADGzhfT1w02S48d3zjWv/XAP0cKSjzg3DykhGuuVxWYj/EXC\r\ni+oUddBBu+VQ+wYfpDYFrp0C23uV0O+7xvG40hfNR7xBVb+3Zb7yAomkPr70\r\nUPWof0OecwbxnKfsO/IIgoiPsAYLnDPgDkcnX3G6xq1k7LFmf0lHFckfQ5ha\r\npvzyhnWP/zOdyH+6/E1IXxeytcxDtLC6jXaPE6yhN0upLHQjlQ09U5iLs5qD\r\n5bcfAzMYRzvhA2yapPhpksowFnqFTq8l9CnDNwTfygb1Np2ckk4I8RfdvYIQ\r\n3rDhBxXDu3T/YUqVwwcO9DHd4UpYYxG8DKA=\r\n=JbUB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"65248afd9a1318b7afdd324f3def6a9c8e67c90b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d58410453.0","@material/base":"15.0.0-canary.d58410453.0","@material/shape":"15.0.0-canary.d58410453.0","@material/theme":"15.0.0-canary.d58410453.0","@material/floating-label":"15.0.0-canary.d58410453.0","@material/feature-targeting":"15.0.0-canary.d58410453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.d58410453.0_1668799510828_0.8015904566026564","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/notched-outline","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.7971d6ad5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79de44d8d960cdf2c50fc8937e421ec336020132","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.7971d6ad5.0.tgz","fileCount":33,"integrity":"sha512-kMUDUqZ7ztvnwqCENZukztyA0oGZhY/mqd/WIaqRhIU58Q2mnDM6Vfd9fifeM61rIMnXHER2fvjjFzim50mw4g==","signatures":[{"sig":"MEQCIDx/+Vmrz0/flBGrjX0g2sEpkLaKSq2zEfj4//B/KUwLAiB90ZWCRu/Q9cGrwXdvKl5EPiG670WAHx1I8aroh5LFOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJefACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMMQ//ZUyqInY6xpTmDmYHDTc/XPPQbIMiP1pbWFoEPf79hsQFur+u\r\nw/gc4nfmdURK4iSM5XXwsFeJlLpgTmZGvZPwfnCETWFQtB0JRbTAvCMGlLyF\r\n+q+iF196937ZjIpj8EzdHdK+LdOj+iWIFKp034khygNf2XARFJPfO6Oq001k\r\nhdqTGNOyBFWE9puicg2itw2U8DdOqAxH0p200KyW/y1sQncxEZJ+0i05w6JV\r\nledmntwjH5P84QDskGUNGA0BxroZHGQ/vodpGjxBj7FTxeHbS2CNl/Xjz/ye\r\nrRysPz09txYxLFyTpBKh97MRGGStLdrKqsdeJ+tTI3L+SwZqnoRygQE3aTrv\r\nCKtu1uxSUAliXuvgqM+ORZByrnskMGJpMrUTfnB+98ZTz5jT7HILta4wXNf5\r\nInbOaIb6wLCgclmSz0rhJw5Sgn6LLyhOjEgWs9QdxhvIonTnDNnPTt8tsCv5\r\nP2+dj6AG8yHHadhKk4FjY1Yc3sm7mdmPtuW1fD2MmMwrGVSr/0zYqQyHHcV7\r\n91Ic7XKNtKi9e4UoCmc6TwTCjtLeHPnyEREzmMCMaMrwbn5b/wHuniXA9GM7\r\n8kDjlCQha7rP0WCPCqfW7/JTumnFDioaapo2pHyzZPhFnMBu5dcQy7PIKubd\r\nFYuuXv9D4b7DBCDL+W6tUYnTFQ1LhiLJQCc=\r\n=edNi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"caa68cd6e7b5cf4d64e037521bea18e312048e69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7971d6ad5.0","@material/base":"15.0.0-canary.7971d6ad5.0","@material/shape":"15.0.0-canary.7971d6ad5.0","@material/theme":"15.0.0-canary.7971d6ad5.0","@material/floating-label":"15.0.0-canary.7971d6ad5.0","@material/feature-targeting":"15.0.0-canary.7971d6ad5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.7971d6ad5.0_1668847519289_0.32794617594636466","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a0ae73b0e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afab6ee3d5b385f294c75d0418f5136b010baee2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":33,"integrity":"sha512-r7r9f6UXlYIAoi/E4M9hIuVYZ5YvfBx+FWvwEr7tqjdkNUyMe6gdGaL0aM6I1h2nZoyGtYRDTHUMKeqdqNy6zA==","signatures":[{"sig":"MEUCIED//ZHyaCA7PyxnWRkFsUx+G1t6W6Bx9Kgto+S2gZVkAiEAvO8F0lH5/i6mxgRsOQu+QiqHVLTGuuAiYQ4hOVvwPjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1jAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJDA//Y6vUdbLHHSQie7sXJQzczXx8zch0mG/Zk7T92kFjWH4R9eLo\r\nReRBLWZ2fBq5DCdSDTpR9G02MLNgsDUbjlJBty/2iDuKBqExVjsGiGMvD67D\r\nLy5uwH74F4JBBVAXskFBEarkrmCOFsDKVtUi5OVinw2lB2/10uZ171Delhdl\r\nJsCV/XicTApChyFUhybkVqBRjUK7h+MThJBQ1pJUFrdd88ZQA7rWkTjFa3ax\r\nAQ7kQjmfXCo1ettTJn7gvXngJEMFkCCmi4VW2WHpo5OQQwz5hgg+829z9EAz\r\nmGm03Nq00hjQ2R0ZhfDGwBNjImm0cmLVbAr3iWWVZ0a4Uvlgckh99TWGuva6\r\nC3q5buYpYzlgPr88u7RJDyfe+9Zgm0IsMXEqbSs32eT3nI8wlLoF7qqGYlKs\r\nuKBzlxIlSL5WPpfbo8yTq9Rt9ZuOBk53rc101QsYHuqRv+WKrpgD8WI8WF9q\r\nH611pBthx21F2UwKWCmNg5H3x7jA6sJYkY9D1YH448R6oW1VS3ePYZ+CW377\r\nesOkfBf1W+HWng1ZAjyHkkCmSLjajYiLQpgOJMs8exmFSa9H1N3b4VmqzJMn\r\nMuv0Nw2gOVeOBLa4R+ZXggun55A/RIP7aUmMaahxKm8Y0j0M5fVixp/MoGTp\r\nhLtTZYIni+eeD8AP/NYww1xEDFA7GOUV5gI=\r\n=6dLj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"92b496120a9385203165ec42657a2edf41099000","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a0ae73b0e.0","@material/base":"15.0.0-canary.a0ae73b0e.0","@material/shape":"15.0.0-canary.a0ae73b0e.0","@material/theme":"15.0.0-canary.a0ae73b0e.0","@material/floating-label":"15.0.0-canary.a0ae73b0e.0","@material/feature-targeting":"15.0.0-canary.a0ae73b0e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a0ae73b0e.0_1669028032115_0.929380807857831","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/notched-outline","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.96f472604.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a91dd29c59ac6076d2bb7af68d2ae3b22cb0c2d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.96f472604.0.tgz","fileCount":33,"integrity":"sha512-dMx0lbvIBTPWPpgSBCbSpKAFq+0T5U6b4kJNyg/RFBDLrpaedQO/aU50rsVvknlnUzNEGEbbzZhlpFtiyF4cLQ==","signatures":[{"sig":"MEUCIDyUMmLOzNrpuiRRW0JwiV8jv+cQiOXRxbxsSj02tbcTAiEA40VgbIneatReruzOxQcxeqCmCJ1UAJQy5QSzUZVYRyg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3ShACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpb9hAAlRSLIfUXlDA5oBbTm3p75CDVa+PQdW9OnSjfDgRTbe+Kvf/p\r\nK6VkytVeWR0VTxmPRohEu+HOBpeSzdHegFvku9T1SvnWRXI2cA/cHxKiz0Z9\r\n4VTwiJm+O/UcRNkIRl0lUpfjT4voJyc8Lf8nbmIhn6LpDA+r4x47H8wCKYZw\r\nIGcbRp/6kYghUNfiAjIzedwomuAENUnrSZNUjfZY8FwfM3c6Yxw/Kl9kcya/\r\nUeltoh9SakzUAJsqPaO5YqRJ9R1WlUKGygE0aK19iqM+Oc24wpd0WbJyuhiW\r\nu11d6PKwNq/bKGGCuiAJNWilXqFvpVGNqZJg9l9S3ANNsEalZEFd4wFJtWz5\r\nAhAr3TMYY/1MXtDr8AoJPXf0JnF2fvhjZpXay9csxDeFKfepT9NRaumzxYzi\r\nVPrtOXL3O7L+/AcSzYf7JG0hlMsdaBVTgIZzKEAIKFiFsjJFiIXowvGY/Zx6\r\n8XJ5hTQE1ZoCbE9vxcc0sITnfSWqco8+eNGZoOBKtze4apMZgWGfztwWO80K\r\n5P1ziAN3ko3dFXU7i/IEgt7E1f7IHL4NyNPVRs3WB+8rQPOhKETxtZcOMejn\r\nhRHsV+Zt+dshYn2g75UXf2gdvc7KNMYXF46aRx/n4uXIPhTO74vwR/Dp/goH\r\n47YDUuWogaWcuq6l8kkOZohQbOHsssXnAPA=\r\n=Zk1b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"28f313542547c982f69fc57b98811983600931fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.96f472604.0","@material/base":"15.0.0-canary.96f472604.0","@material/shape":"15.0.0-canary.96f472604.0","@material/theme":"15.0.0-canary.96f472604.0","@material/floating-label":"15.0.0-canary.96f472604.0","@material/feature-targeting":"15.0.0-canary.96f472604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.96f472604.0_1669035169702_0.8541245260442814","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/notched-outline","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.18b8f31e1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3c50b4aa4571fa246acdce70875b3227e23030d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.18b8f31e1.0.tgz","fileCount":33,"integrity":"sha512-4Ljqf/d3sW0Vfo6nyUpaTf9bUpsIE8JM5WZaTj7pSpFtvVJU9LLS68wx6KN+JS65+KW6bpqpNVG5IE1G0+2LYg==","signatures":[{"sig":"MEYCIQCfg3YrMQfIRLYB4K8Sp+I/kF3nsl93CIEolGwlPgwDdwIhAPDU9J/mJJx09MaxB9huZ9CtZvwL0ycAaGJpDk9aZ7xi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6EWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwWg//cbXccJyetZgCC9aDZJ+OE6zJm8WkYnUI3Wv5PcP5OKBgP0qa\r\nBhAvSScVXdIQAV6yDw7HUwuhcklsQNToiZIu9uA691WBWDGmpXEAJ2SeJcVs\r\nTYj+i5CNFrFpPH7YCyaELOASf1NKfzTtLll5oXw/NXTHr+uujxlvYc6A4dCZ\r\nu2Okzadrn3ZUT9rNUYrt2xmFVqhDwuGYdObEZG/RPKPTvyH33AXy9vvXFsTU\r\nk4CwqDp8FegvXJHd14+6UCvT7+D3h9B+exNcjgbx6urozxuCSWwZn1JLhyDH\r\num3J7yx+TkBLv31KJiYe1LWrghHY0s48HGkso9/uzXK04D9Vfo3JhdK7binf\r\nQm9K1sNNXCH+yD+ORJrj+tVjOaRx35zF4/4p0am5sOdsSJ4fi2ctQ4MTojbz\r\nQRiKsM0vfscZEMJNeKPkrN0re7m1qPujlCzEwV9Iz6G//i+ysrqZd4dqUQ0C\r\nAFqxOpOOGLVrPcx+7LBEpNiwzAWp18rgjSPKrE8CasKx85Zk0RTNhkJmrhwQ\r\nD6/TP4yAmvH7TxCfcZ2qmVTO6rD17ztZGmaEKg63oRA3uu+j5GM9j3UiKTNS\r\nXyKVwHhWIK+9IXTaEl3ru9Y6RT8WR7Gcv+KnFacI6PSuNJwLxFk+XaFjtAr2\r\n2jE8y10qNGNlWhaWH+4i1PZCylLWTLgnG5Q=\r\n=7QtU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"99a6c50dcaf8c9db8b49ca9378d7bcc70fa3d276","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.18b8f31e1.0","@material/base":"15.0.0-canary.18b8f31e1.0","@material/shape":"15.0.0-canary.18b8f31e1.0","@material/theme":"15.0.0-canary.18b8f31e1.0","@material/floating-label":"15.0.0-canary.18b8f31e1.0","@material/feature-targeting":"15.0.0-canary.18b8f31e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.18b8f31e1.0_1669046550320_0.050272694317719635","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/notched-outline","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.912f33ce4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5646dafe233c95c3e741708c33eb08eaf0419575","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.912f33ce4.0.tgz","fileCount":33,"integrity":"sha512-aykcj8kQ4aZRW4xRAuN+0yRAvidOfOplj/FqIZcE/YcJ/8yVA0e8zAJSTxTwiXlYTho2PKi6o9Zfdd8UNoxaCg==","signatures":[{"sig":"MEUCIQDigP+yGV98pbFttDT/0+NYkTILqfflHwbynIYPdlNW9QIgBKdwfk+jshhAojTyvp8wmM7iYcmGJr7xB6B+t0RuKD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7s+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoe7A/+OtVfxLnCtBbKgnVpYUtkbRUQ0eNevp1nCjKNqDah+nMT0e0h\r\nDySpnGR2cXHKxBR+xHg7gF8CYdCqINEpSzSr574BBUl7njqyA8U+GFvz68mf\r\nW4I9tHfkrgjgUf9nkxDhNgc8ZExyWtAf81Z3ognVcv8F+PllfUgZjC+JEAz7\r\n0qRBSl0JjvJ7j092oZzVIBWU+NgyDdhOVmq1UllQe9CSN1mA+D+Abm5+NFP9\r\nsFHAhFbERa8uh7CpyiaZwnxNLsumJjlyBk+g4AVhWZVIPw2+sX+whZgPSsjw\r\nIfWHt6OxLrpemJzPkY3TeCW7TqWGEykyYuavPsblNXILI5tyehEA2yWSiAoz\r\nWbhlRWpAneuoTzapNMtxCix+VBRMSMak5UFIPgzpblVBNOC1P2sRNDhAvw1n\r\nsa3EKQCWCtddxJYHJBtvOX6AxlRkdGSCvkOfpppk3h2eMyDuCPLVH9mcRaGY\r\n9/TEfk4kGGGWZOMAbUoEjL9LiyuprRCOFv38hkh1XxZNSLyusdf5n36v7LSn\r\nmqt7I7tn/pWUKasXdj8F0q3rYeHOjYqDYxW3viP4i9nb00fwLPd4WOMJd82u\r\n1oHak17GtkD5k29rw0QK4FnU79LoXGB6JwP/bxishItPkKb6S6cwqcDnXUvT\r\nm7/qASnqt+ujs9SCyecVh2LuCUT3Faa7j8g=\r\n=JZ/L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cbdf5145fa19b6681004b6c2d5de771b50f5b6f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.912f33ce4.0","@material/base":"15.0.0-canary.912f33ce4.0","@material/shape":"15.0.0-canary.912f33ce4.0","@material/theme":"15.0.0-canary.912f33ce4.0","@material/floating-label":"15.0.0-canary.912f33ce4.0","@material/feature-targeting":"15.0.0-canary.912f33ce4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.912f33ce4.0_1669053246174_0.47262759599505055","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/notched-outline","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.1e1b1c369.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00aa6dc109de7ee6364ebd00cd0496aa510dc14a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.1e1b1c369.0.tgz","fileCount":33,"integrity":"sha512-V0TZM4LMBgUqYVINI0enSZESYic22Gnyo0Mme7cHo1vSI9dPufbUfnm1QLtlGjtgsOVZuWvjetoVqL3q1UGnew==","signatures":[{"sig":"MEUCIGbWua/sklj7vjhVuAGi+Uha7Ij7MsDJca4ipmhEOqDGAiEA1srXHbcCjfMrmvhCB8tvS2j+an/X11P6fmEE5y0QByA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm3eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYhg//bbVp2fLFjnB6nxMXkhLkK4UE9CWzfugxiXliStkyv0sqbMqS\r\nan9SYmQt4xY4QteGyqQNIDkkz5M3GI2AYwpXGyKejCZc/cGtLaocPcRU2dtA\r\nMWx0j4z1cw3QyI5DDbQT7XFInzvVJ8uWPi6P/CoEP5xZB7xN6WCC05B8cxFq\r\nqMsD8aEmHyH0xuUlBfao4CW8LDifV7/hwuRNe9fAYssHPJP3YUBtKhat7syL\r\nN9eyGmwQzUXWCpm3Z7UGnDRliSOxihNbZ1NrcWTiw8/TFq1dJxCjA5o5wb9t\r\nkUBVBYK0W87Gu/kUW0C1J+ByPJwdIhUkUKOQxdst5O07OtYbHxScrkmoSYG2\r\nCeINZiBtgSQGyCNHdcx4JLLtTQpbPjZSPwPhbkTzGrT0HmyiuI3xSnl2M/u8\r\nPOxxuQ/j7+t0a4Eg3lnTmJj9vEtg7dZ66U62SRrPb68VZVY7unS0fAZfeHyH\r\n771oRSHHp4xoQBtF+Brbnk6g6UvYinKEf0mpZVkNEn4oSGb8u6mKjkqlvv27\r\n/NRsI16THW2tdZ7aYXogru0bUFp/0MRjEXxZ6W1uJtIPxMhKxmFq08jori3F\r\nnyVA6SBK5OpzyyLAFpG1tdTnL1Tkgpy4U2AT05F5tcKaeWJsbzk3MP4wF4DZ\r\nm/A0o9/rV+blqej7DZSSpkkBQXgUbLSLPZw=\r\n=wHxy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b59baa6ec6a8114401e616de0c9d3675a34e4206","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1e1b1c369.0","@material/base":"15.0.0-canary.1e1b1c369.0","@material/shape":"15.0.0-canary.1e1b1c369.0","@material/theme":"15.0.0-canary.1e1b1c369.0","@material/floating-label":"15.0.0-canary.1e1b1c369.0","@material/feature-targeting":"15.0.0-canary.1e1b1c369.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.1e1b1c369.0_1669230046091_0.9214512417220158","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a2ec49244.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"487882a8704b2a45f1853d9ab994998c5b941644","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a2ec49244.0.tgz","fileCount":33,"integrity":"sha512-tYUuB4PvAsWqp/XAhsmhG0OPPaOfVUlxp+F3CWhoiM0c4ztAIjw1ck901W9Ws6tUD5RtTZpL6KWi9IRHIq23Jg==","signatures":[{"sig":"MEQCIAzucMPQdtiImMwJ4WYOQLKkzI9bW3TS6lEVFtxlxqxFAiAeG24h97AX75uP3eXDZheyMAOCAd2mJJ5rgvOppmrDZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnT2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrE0Q//SGVyBJrwm2DT/WM11bWF0GRo6Zf8rF7rdBtScpokq/q/qKOI\r\nWrzvOfVQvPVMyN//sItCvY78oxDPeCYBBhni+vFUxxeRNuC0xwGS3Ittu8wW\r\nN+gzVdHTn8tLcwfF/u6OHl8bZn3TpnAdGIQe5N4fHQl/GLHjtcZhv929iqBn\r\n7wP8zV7xjD+hzzQ2o3SnaURnzbKA9OXyezyJj3dV/Xp15HkHLmfdiK5/jZ/I\r\n+X683TMm6pne7XFmWTQ2GjbCdgs3m6x+OaH+8BIW7FeFpKMmLAyv5rO7nK1h\r\nidr3l2Ezc1H1HtWRz2Bm1YLv8UPfwC+A6toDUuv0rLoIsKykcThc53SrCjvF\r\nQD9spsj4o6b8K5LqpLsgGinv3dhuRWesxJO5JMw2I8lEKoXU7SPVNRdfOtgO\r\nnc/1Ph+TPl6lGJODaYAe4qIyOYcBml7nBu064iw7Vrt3nwuGzik1wcNktxc/\r\neTqA7X5r0Ew1dWPM7AhNVid3L/jmeyfNgRbZINwgTit+NWyKe8fhnnRnu3SD\r\nK+cLQhnnvITcb15E0upiczwFRKeHOsOy8SK8fw79/4VKHfxCEjcBEsHjuaiY\r\nscUUwg0T6XWb7OqjjIem2daX00MgDKoRfc2QKLEhDdDPZYMk4LXRUPyEX349\r\nLNd2iJ7FzmZJpjQh6e5xz9TLcNR1G2BhbqI=\r\n=QzkH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fc59d471222d0010e05a636e8c3a9a5a9abe2b3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a2ec49244.0","@material/base":"15.0.0-canary.a2ec49244.0","@material/shape":"15.0.0-canary.a2ec49244.0","@material/theme":"15.0.0-canary.a2ec49244.0","@material/floating-label":"15.0.0-canary.a2ec49244.0","@material/feature-targeting":"15.0.0-canary.a2ec49244.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a2ec49244.0_1669231862519_0.6124261896464085","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a7458ba0b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84226941a4283a2e4fa2e80cc699c145bd4bb5ec","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a7458ba0b.0.tgz","fileCount":33,"integrity":"sha512-fo0kK7MeQsJj2o3zyg2+4WaFulagVKNhuyDceqq0lL8xSfT9Vw/EyeDGZhDks1yfi/qeViyLYo8ChnAdLFLBFQ==","signatures":[{"sig":"MEUCIQCAkHEY5J+utPCjkNhNqYbTsMnx8tIgrOvoBRAGAx/ubQIgEPjMs5qZc6UfpcXVqDng4dbSk8kTvGTUYWKiRjB+qsE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn+eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpt+Q/9HhN23MUQlxcNYKwJtun90YBY7BCScMMNTyxpnY1Z4bX+u4w5\r\nR6xziaGoyOfCOjSOfSosjxLJ7HeMIgjolz0L/Ktg3yQ9Qhfpdgln2Nnlkqrf\r\noXJ7bn7WwkDIKT9/atWTV+0/XjAMdafqp6x8tNoPlqsGsNU5kPcBATcgO0lg\r\nLOq7lwMg5c7KmTbHuN0Wju5ow6nhua5nTwu/+glW3FMprbbPT4Dh2+sbZIvQ\r\n4IoYYccbC1+lxvAA2P0YhlySbTPAdJ0eCBqBjdvtI94tC5TVXScsv3sjnyGG\r\n5Y6cXfefNUHRLKtGCTmbTO8rdPf9QraC8gX9ErdCr6lR+gQF8t5r6ACArtcn\r\nDwplasYCV+y1WAMHIR+3iHGK7tZm3BJ+fdMvBcQVRtevCP/uY6qp3f9cw6aB\r\nIJW79/JbjIMpgyeQ0d/KjrI5/I+TzIAxWgmoM6P/DfVLdZhfcpX8skHcqiuU\r\n9QyydXXm7tDS/PxemPaqzM8JbpdJyfTcoX+6BZaeb5anUNKg0cpISospqw4P\r\n7IYzodOqg3xkEASaftZaMwjZNdvhA8DyzjnFGU0xA+RX4r2gy+EU+ImUi1HH\r\nZQGIu/6AHKFhDK1HdgYC0nYzsYqa3464160NTW7GxuUsLeoYPHeCJgXs884O\r\nYZ3F09kYGsA/8SQZzwxHcsY9OZjIUShAuig=\r\n=O/Q2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"62e6a15e0784982b77df0a1d824f81d5a15cb6f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a7458ba0b.0","@material/base":"15.0.0-canary.a7458ba0b.0","@material/shape":"15.0.0-canary.a7458ba0b.0","@material/theme":"15.0.0-canary.a7458ba0b.0","@material/floating-label":"15.0.0-canary.a7458ba0b.0","@material/feature-targeting":"15.0.0-canary.a7458ba0b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a7458ba0b.0_1669234590177_0.2670954407653827","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/notched-outline","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.7c35e5036.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"556522983ee22bd72f976d391a6538c774279fe3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.7c35e5036.0.tgz","fileCount":33,"integrity":"sha512-cCVY6BC5agoIrYF36FTLqJ/gLd6AuUqqdHYwIv5H7srUh3W7DCNuhdGjMFo8cFlRnpPksVj66dOhcryVAJykMQ==","signatures":[{"sig":"MEUCIDOFc6LPfeSpuMBaWYi97UgiYv4S0v5bMyTQVl8bxN9mAiEAw9q0eaxUz3BjfcRi1T5Idu4jXm3/X96irklaML/SL60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy3FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFtQ//Ycv7eUr33OJu1ctk0crgTDygOKaeJ59gCa7egeWCSZ29l4NF\r\nl+24FUvmjfMm7cbDUUZSfxqfD6xWUNFyKmHHsm89KlqM8M5K0S/YnEMhN9Oq\r\ntHTZ6301tOtNS+Dqblo01ft4vxSX59BZuIWqRaIjC9bPvOTx2EOyWSyY8+xb\r\n10Kc9/sMpl3bcWcYS0cua7HrtjSjoPEr+7ThrxwWerZc6TTX3N0VgdAs1eHl\r\npc+C6A6VlQQdGI2hRqDjOfNSFjPzrG4QJh+6sIP4VjvTUMMDmsxsrTge1Mpb\r\naUV9N0VD60oKtFYGKO5TzPpS8CUBLeYxi5ZfScpxOnPTE+hLbXRHEqCsP0jF\r\nlrcV3GMg3sttAtmG1cb4lGM1dIxvIgLTYhz+spRXN5UH4DhE/OILlxzwzY49\r\nPv63QPRG3jlCY6CCMGu3WrDOKkWpkfwmR+tik3vK5wLFkC14SLcNMpaCrBmi\r\n0yYNxm4o9xnvZ1ajJnBfc7+qabqLIIV8O6tdsCsMn+JUugSXBfJf5ipx8FV5\r\n/lUU2jX4B3artN90fEC+dod4Co9G84bltMCtfWy5BY11BwRndWOPP5StYTmj\r\nwzFxWQJ2SRuNENxidwaEChHgfdd/K202oSLCLSxCkIe5I92Zzb4Sih8vU5na\r\nx2LPuODIiGe5FK84ggfIEGwjjCYIEmgI9j4=\r\n=2Gr8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bb1e9aff747feef28ef92f415776fe33dc1216c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7c35e5036.0","@material/base":"15.0.0-canary.7c35e5036.0","@material/shape":"15.0.0-canary.7c35e5036.0","@material/theme":"15.0.0-canary.7c35e5036.0","@material/floating-label":"15.0.0-canary.7c35e5036.0","@material/feature-targeting":"15.0.0-canary.7c35e5036.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.7c35e5036.0_1669279173601_0.3730583574116715","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/notched-outline","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.4356e05c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d46b88c8a5c742df92b0084a3fcd8485fce3f97","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.4356e05c5.0.tgz","fileCount":33,"integrity":"sha512-f/2aKnlREYM4jRtj7aXq8wSweffhq6K94kWLSFLEvEgGN4rbTmvXFzdqbCyUj64De0ht72hNJ0jWWcrxXAnYRQ==","signatures":[{"sig":"MEUCIDYZztugY7sWj8O6FL9YQTGF8c2s4nSRIYSMfOLtOYt0AiEApgP+i2yCRT4an/JlJ3/3dH/ky80b6cx8dZZiatAg97k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfz/jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp68w//UrcEs7OzytEvUxP7L3IXe9Ot54t25/90yAV1FrYRa8u81Yty\r\nj7UwEVPYfU4nT0f1THI5HjjEmpvhf1m1sbgXGD5ldpg2NXwe5DCxn+qEem7K\r\nnZw8x+aSfASOWuQIXNvmYbP7IVdQntola1s6xyaANiztBLq326qTnbxmFNEw\r\nj1eqs0wosI6XgcDQQd+NaHJG113Q46dOnZiun3CqBmgsqMid0flPU9L/NetH\r\nsaNhCdE7CaZAlWRHSwo9fS1AlqMHaxRZoIQzRRNZ/eCbKpGAbpJUp6yJx3Ka\r\nHq8jdD8OXZZzapBlxeLxuZtez/QLpOrSM7uiWCyVp51T/5r2tS4cN7aFOe5z\r\n+i64iOcm84F2z+kH4gByJb3hHsygpZ8MNva+Sjm4+GjzUJUI+11VNdfbE0N2\r\nj7T+lIXPSDS3c4EFA7ugvO/cYciKfJ7f17Zf0p5+/ImdIBn5HqKnLrmcc30T\r\n1YWVVeL2Jmo4IWIFBMMZB9MER+tyrM+VWpoCb191GWcVOp05o/OqSUl6WPdA\r\nTLlhdB1jueY1G2AuX0G5zYFhGSiSngi9/Eon1mkTfOm7sHoUQDYShPChtnEY\r\nkjyJSu8DibT8g8/pF8Y1cz51uImaoHALeAvLbNsW3zpkpZypqGQW7iEkefOb\r\nCcPk3mo4acsiRaX/uhddjVBPaExicoN0PIw=\r\n=y/Vh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8f21a6abb8b52fe9aa5804b940eac0cd94256fd9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4356e05c5.0","@material/base":"15.0.0-canary.4356e05c5.0","@material/shape":"15.0.0-canary.4356e05c5.0","@material/theme":"15.0.0-canary.4356e05c5.0","@material/floating-label":"15.0.0-canary.4356e05c5.0","@material/feature-targeting":"15.0.0-canary.4356e05c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.4356e05c5.0_1669283811420_0.6835066463842423","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/notched-outline","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.cb605f8af.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d02caa69295c5fa2f5e815a7b65f163f255f9b8b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.cb605f8af.0.tgz","fileCount":33,"integrity":"sha512-TablnKBb3PByhk9wPYpyhymWuDpn6Oji67NTE004w55GU2p9tg7QPs7UwOVzWacewXiw6HHAEL4IlYxYBlzOLQ==","signatures":[{"sig":"MEUCIFY71uTJX50As8p+ExqlPatMlJNciIqSa6h0RtN5BcYaAiEAxyES0jw1uCHjY5W5zozPFc8qzWWIsiwZGKFW65H6YSw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0RTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4YRAAgKaRTK5gX6EU6kNVTkNf4q1twfZnyWj1Fkcwlz5bL0TpT8vb\r\nFUbGLklgThJT8C8OtQDPsrs9G+zonS8TzxTJTD2GEXt12exAZi4KoXHR5ya/\r\nXpW53WuD6vbVNJV+85SspjoGMVH3gxlTa7Bl6CVEPbtTRE7lVjG0ho4rxZEZ\r\neivjv/eFdJv72aKF3WoImKi6K0xEfpiBvdRC6Egl200npAefYGI78qv+JJXx\r\nHWxpFt2qq9S/jCrMdZifsIKm56nCHmgan2Yuw9s7TVHfswaXpa9QImL+lmgz\r\nSF4zbJXRhzDA6pdw2MYB35xOSCT5Z5ZvIHMBxn3WucIyC/UB5cMAiGa5Cfyl\r\nZw7dmQPCTf8DzrUfcfjkPKS5vAErw6OxlAUwb8LZBmu1cYI3KeLaq2MuI8Va\r\n0kYt/S4j3o0oM1L/XSctVv9+Bz0n3hZlT7x3STn0+cZVwSwCNxY7qPo9gcCe\r\nXJ1IqLW/evxQAyxjnwiqUn5CLDRb2BsCYfYNenF5IEHkJtxoYKrj+zo8I/4K\r\nCiw7Mn9NkXJWMfahnKQlL3zpE325fuvYcaFTHjtCRSiywcZbixKKR2NBCNo6\r\nP+RQpIyymIK5YNZ9lpqLH9nveCoV8pyL1No8gEmh6dCnFkNWUmmeyRbdW/VM\r\nDz8QE6JI8H4ClzTliK4ogfszep6B6XQIm4w=\r\n=kzSf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9d617d11bc1506bf595e8a4f05413067775d3880","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cb605f8af.0","@material/base":"15.0.0-canary.cb605f8af.0","@material/shape":"15.0.0-canary.cb605f8af.0","@material/theme":"15.0.0-canary.cb605f8af.0","@material/floating-label":"15.0.0-canary.cb605f8af.0","@material/feature-targeting":"15.0.0-canary.cb605f8af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.cb605f8af.0_1669284947587_0.015144421868453106","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/notched-outline","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.05fb07f9f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb7fe8453a18b7afe2632c8041c4021ebfafd151","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.05fb07f9f.0.tgz","fileCount":33,"integrity":"sha512-U5Vphw4PO49Zd1KkazUWzGAetbMx0OK0SsBWwnxh7Q6ynSyNqhfrildmh9/FD3E9KeCBBPkOoRwpPceDS9QdHw==","signatures":[{"sig":"MEYCIQClIZi34unP5Cgjc/R7dsO2hF3MHZEe4aP8n3BX1UEjvwIhAJ7q25/wlt7UHdUyO58pAzheGx78FA2ZL8GCgL5nMT18","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6ZQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8yw/+JAM456PSF7xu26VmUBM7nS3gEYTENvVEZKC0VkioSkxul2kD\r\n626W8E6cPKI0gXHDQcSfsnve5vSdWw+CL2UY5ULqxnKDmdh5DSQI9XmfeMdV\r\ney9IgkokggZ2G1EBA/z0bwSdK8+j03TugzwhGkQIPuYbqGAbGbkXDcRNRSfg\r\nRSfLvR8ffw52BHlBTWCpVTqnGTLGuDomsw76vznJHGg9Z7+k+Zzoaeo4EsBc\r\nuv1DDZtkwhmKkpxiJwTXzdxC/E1orbV0AqwyM4Vd24+jYmNVr2zH/HtfetiV\r\npDqSkOy2Z7tf5IBsWTt33bvgpO5/Ej+URWlQuf4wwdG+P3VqBVzMCaQdRGa+\r\n6Sr/Tlmg5MdewW+0J/KP63ebaYLkEFyRxcNibLncHoEFQ1lEMb/QhLQPO0tc\r\n/7gKb4xkX3Aw/dEmpF6vUhVEbRWAOO0VN2FUTrnRIoMeaG4ZwCLhwOJtZWkJ\r\nN0FF7ViZzvUmyQ/DWq/WtG0usr/jgDj06F1AbERdFkrm/7XcMQe54+yANHtc\r\n0qoaUhnHxQKnXGiMyl9n4dhYKAEHuULKf+a6Y6eHk5ukH9v5qX5ki7SpJmqF\r\nAutpxhdL5zl96+DfFldH+6J3W6fAr5LzWJP+gKcobkZVVvW+GWxRO6ptcAxr\r\n47OROaB7FnnZF64AwJpMgTobws9NIUB/CYw=\r\n=atiz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fbbdaff1715be513be46d4628f7aff9d8f7e27fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.05fb07f9f.0","@material/base":"15.0.0-canary.05fb07f9f.0","@material/shape":"15.0.0-canary.05fb07f9f.0","@material/theme":"15.0.0-canary.05fb07f9f.0","@material/floating-label":"15.0.0-canary.05fb07f9f.0","@material/feature-targeting":"15.0.0-canary.05fb07f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.05fb07f9f.0_1669310032572_0.7712119151486878","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a911b386b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcd6fb2cf4ee9bb7adbd3403886fe0c3a2a01798","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a911b386b.0.tgz","fileCount":33,"integrity":"sha512-N7mtOZJ4vVlH7HYKuqyR/jOXzuYXxfkZz+IRoo346g+Kfc4MM8045GdgekTU+hRFwLTH0V4HsLhjZOVd/JnzHg==","signatures":[{"sig":"MEUCIDrmI2ev0A66RKzytdbzivEcC0HiJJyj0EKKH287UgVaAiEAh+m5LiKqNz+ESNoX1yVvIEq9IoXnDNZMt/8lHM0Qics=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOYgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnmA//YOq6pH+LZrJPKT/skgVysXzKfIkIhzm+LZNvzxfHF3HH3ye8\r\n2XxeiBxNTLRpX0YPuh5QzWJM7D0xb6+YaADwwu+qq/TSn5ySp3gbpvIziThe\r\nfONJm3yp58s4xhswJL2qLEZGcplsNzQpE3dTM8MXw9qyuLCtdSHZuch/EptC\r\nRdKvysGRaXNkVIDnTIkuNN0LgqjVfZ6u/1xDcV3RhJ7i8mvAAwJBgd93Xh3D\r\nU2uzagPMCflO42KGSk47LO6k38svFkDU6VT3y1zHThCYcUoptpCp5JvZVIlI\r\nEOIRvTtfOF/Sr0HuRuPvo2KJ8hAwSPAR5KlcWQjCxY/YUVtRkObiu/R4CkQD\r\nVYPp14yyUuLIaWPHQOKby4nbOR/rcxgjWOOhuupi8XCvrC3uQlkg1YbaFPgp\r\nyglPnaEgYse3b1yGJv3T5YdgKG/KYG/41oVOvVARcW9sqy0+GPeHDFOTeaQh\r\nonrTGE+k3qcs7D+LGIIgvlICgWGrr8C+4ZWq8Y8/IUAm6TD72DfOKuEMgSUZ\r\nXjNufoHOm0CFQttF43aw886wss1MOF49aOZig57oElsxbPgNsTw27/eBHarq\r\nzhvnX14WJM+bgWhjcN0fnJrNswskrY4xXP3AmqAO2ySyx9pxVY66nxY3a8vA\r\nKpWX7aWr+50OhOSX2hHMG1DM+c+pQkRM5f0=\r\n=WrFQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2487492bf1103f4c82913b328eb64ca5b71b9f5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a911b386b.0","@material/base":"15.0.0-canary.a911b386b.0","@material/shape":"15.0.0-canary.a911b386b.0","@material/theme":"15.0.0-canary.a911b386b.0","@material/floating-label":"15.0.0-canary.a911b386b.0","@material/feature-targeting":"15.0.0-canary.a911b386b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a911b386b.0_1669654048614_0.6673584357051374","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/notched-outline","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.2aa8050b4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ee932b74f129c1f419df888bce084d1e90e99d2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.2aa8050b4.0.tgz","fileCount":33,"integrity":"sha512-miT4hLYfqxnKA+nLZnj4XpzhPq1johkKdYDUSqV03oYsbgODUZ1kPSYmrihLL2JoW6zReAlVUKCyROqdOcoxvw==","signatures":[{"sig":"MEUCIEJs+34GkLDaztx3XMTMahuKOQjJcJBzdl44tVebv+QUAiEAjISk37PL8rR4TXbzuXv0wRLa4EH/9rQac9WKbs8rT+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQfxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzcQ//UM0aWKqNT6UcC7VSsqVFB6rBKN8OwQdmwaB1nRdWfB6oHYH7\r\nqDVI8+KDlGt4degcKYMLjvKF61kdjU0yRIxUO7T80tootajTElMSyjMZ3UNs\r\nrprw5z1E9I+aDHOYR5R4XRANNG+1syBqX4338h2jNmnUi/o4GDO5xDqMn72q\r\nNJ45YJrOmJrNmc2UXh4N89VWS140s/eKa0UOZLYCEEdJIxb7oph4uAR7whn4\r\npmIgoZprwcQ46imUa6xTapdXnDHlQnB7D5EpbCGUYcyq7QhDoo3SWy5x8P4w\r\nle4sFN8yWFFiMKIkss+FBJ/nVoVjqyL/bi1MHwcI2khRN4pItA4CCYPU+okI\r\nPf3HIhKWEANKKiLZPo3bVlzubG5wXkvN9fraG0WKzMQpHqjfOeBupkI2kpA5\r\nreHX302GC9UBBpdPCwTKZzFag4zvjERADMIAVrBKqkO0BjbpuhF9HfZarP//\r\nkcybvADbBzVCtZ9zdEFgybcLWw7ATDNYulBUr6y3FJi1ENXhYXF2Gj15Tuoe\r\n/lTHrAlRt9LUsNuL6CucDJv9l0hBWllcwpk/QBR1o8uEnrBTQ6/0Q84zfxL8\r\nIxIg6DaeELurEckEi0fYipMIajTJoLMiLHPIT0j5omog+ZsJ+EU2iuJAiOnC\r\nTvS+iVmNa46fozU3HJpEC4UiDQqfG1h+y8s=\r\n=CXbE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7ea9b47d90d470adeb6f1cbc0c1c98b88392e56b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2aa8050b4.0","@material/base":"15.0.0-canary.2aa8050b4.0","@material/shape":"15.0.0-canary.2aa8050b4.0","@material/theme":"15.0.0-canary.2aa8050b4.0","@material/floating-label":"15.0.0-canary.2aa8050b4.0","@material/feature-targeting":"15.0.0-canary.2aa8050b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.2aa8050b4.0_1669662705169_0.26444347137723945","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/notched-outline","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.323904a9f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccb50baae7adfffabc75da092d5aa0d633815cfc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.323904a9f.0.tgz","fileCount":33,"integrity":"sha512-J7oNLGog7u0rqdMLBVtVQCZLZ8OOAPzhg2XRCS2fT/tjUNabky/x+liFT8lZiXrYuoDOYVl4qLfwXIyaXpzyZw==","signatures":[{"sig":"MEQCID/T40+Q71KTWOvIw52utpvK2kKOPuxZxucD3k3W+M8/AiAo0Gz5xhithLew0JwvhDHi1og06SS/8TSyDqx+izfR3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiaIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5kw//adlnC2qIOH8OgFo/JPqzCTioyzS3E1eTd0b/YYed4VzYFV8c\r\nZFF+8xn5BOAC35bc0ldSWimwtSfOqZAekpw3u43KANonUTtJ+LWWAq5tU12+\r\n19DaTAVs83L7EqfoqeVvf4MVHEObOPyh9oNfpLBr24S9kTrgAD2rn6bFTXYv\r\nboki8LTuGbUIEvhLUoHSMovB/RAQzUyEApWJPwNk6OOJvFB4nEYwOhPS78AJ\r\nmx/jPXrjNALus4yJIKcrGUH1EO6iHzB6bElvPE6Ddl/GjAiNQRcB/cXH0ZGX\r\nVc5L8NMRvoQ7O85KZTKshwsO5uGYW+7ZDczTjtUQwWPF4+ohXaB6vel8DmUr\r\naOIbDKvJhTJAtQOumxRq9HEcTNjfaKCibVrcgsk9eKn1rzVh8/Qe2pzo2C+w\r\nRv6oAPmwpQRxzwzXjDodcPyqPZDq18aj1ABk+TAwwNk1dnjDwKbCyS1kaVCw\r\nOitZHc75KzV9ophBYS/Cf6JueIv/SzxJRSaw4D5MgWRw/BRdUkR7o/WPwjIn\r\nvf0g27OVpHJPaWM8gbovB3zhAJUcStuRzNPIiWkHLZWQScEb5xYe1mO01Mtj\r\n7+sBZAxDBUNnqs1zhV+Shhf+1fd5EYu/c4l8wC3q+gsPKfrLQUqsfuO2/uEg\r\n77aGk3NvBz5gJPsAh5ZGi9a3qU2RI/UajtQ=\r\n=hILb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a69fa8c7160aaa07d868f5bc365076bdb159bf99","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.323904a9f.0","@material/base":"15.0.0-canary.323904a9f.0","@material/shape":"15.0.0-canary.323904a9f.0","@material/theme":"15.0.0-canary.323904a9f.0","@material/floating-label":"15.0.0-canary.323904a9f.0","@material/feature-targeting":"15.0.0-canary.323904a9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.323904a9f.0_1669736072603_0.9892186899355009","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/notched-outline","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.168a629a4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1afdb071fca3b1ab56d48018d63c47d3f77f6864","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.168a629a4.0.tgz","fileCount":33,"integrity":"sha512-Np8OmQ68ox99SvrPW6/dFEuefUNN/uYesE/Oa5bicW8aqO5nydZCFMPBZd9BBtfQVhy5CtLQOilhW6iD+WVZ8Q==","signatures":[{"sig":"MEUCIQDJ4LlYC5V8cb22kgKCKXulnjX1fCg1nYUEwSOrorNQ/AIgLylLB7tbxY1x5RjR2I3UktwP/zFfgmGz1y75E2wH2vQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjgAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHeBAAje3b9Xls1zl4A5SUSP6Ru5vIdpH7F00KFKj1LJdVjKceU+u+\r\nvm3pySVhBJSQlX96Z/05Ri8X4fs03H8uKHrXo55Euh2eFM3fm3w2ZUYZnG2J\r\nq+8K8ekSC6LtQnUp6bHp3k8nU4Ip249inmZtoN1YOPeSvXpAzyLo3cttqf3x\r\nF0UfUEDEAuu2nw7vdB4Y1w4LbVQ7SP8ThNKlKc3VgzsuonUqLuV7GZXeyiZ6\r\nVW23nWs3VA4O6JHPctWh/gW1lrH3JHum+l0nTbb/RIughFThfj6DjJgkIKzc\r\ngLNfzpN6D0KkgT83BD58oTi1mQqh06SPe4DY7kZC0+mJoEZm7dPPcfDRR5qX\r\nmim2+z06/5ENSfTSRnDq/zDaBhU4TtvlycoWzYtM5kS8QVPH2K73AdUg5U+4\r\nG2vrmdapwPiyxREI3HD2Bqb5ZNCFsWO1CEJT2EHyW8oy3bOUIY3yGCf5oYrP\r\n86qgOJNgHFCamby1LeC7XzU5myXC4xMeIP5ZJeeptssYpvdtGJcJWhTJgd9a\r\noAxuieCgLQHOoqlF/8lizQtotV7uXjMV5tD7vQBrIhVIe9hbFDlkEghrQ3eG\r\nuNqsyYFnYdSNrZgcFt1a6rZuuHYuUdEQ/c3Ala/5U3iZXK5wodY1I92rRxa0\r\nQS8VQUmyRRZYiIXaJJwcqDTZtbTHcBUs+lU=\r\n=a3Jw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3091b344799132cce493f92839da8e544fec7c05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.168a629a4.0","@material/base":"15.0.0-canary.168a629a4.0","@material/shape":"15.0.0-canary.168a629a4.0","@material/theme":"15.0.0-canary.168a629a4.0","@material/floating-label":"15.0.0-canary.168a629a4.0","@material/feature-targeting":"15.0.0-canary.168a629a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.168a629a4.0_1669740544522_0.8839061796207788","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/notched-outline","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.65c411674.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59b1e91a49f47fca00f3298fb7de691b31d26af1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.65c411674.0.tgz","fileCount":33,"integrity":"sha512-acdky15cK/V7LhyRg4E/3XX/SheXicctTTPYZJi4iC1mvhcb8IPtpYtLjtEua5t/PeHy97BEVfhjsD/N9keyfA==","signatures":[{"sig":"MEUCIQC/l4FD+0KbQSpbbF5xFYo5Z/D8PoxBgYHMTY7yqLcRWgIgBIt0fOcq42YKF64/m5DyiwwdHt9Qt4s+zdq9S/Kzc8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkOZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWjw/+OVz1yOFNdZ5oUcuMqPWzZOYUvCQuzcVW09tm47A4QswBFdf0\r\nNL72WfiCxtZyrAbjKqKejeEq093Tt4Dg1ZLHn9Bg3L6nOFPxmS3hiIUQYCp5\r\nvQXJ2LToym21hKvntdXR+eblqz4eg1ZOiCqx/djd7mgWoNT6bJgb0Xq3WXkz\r\n10uXzd7M6wk8x4SyzMUoc6XJFgcr7D6PQIm5q4atzOnlUhExg2oviRQzsRjf\r\nIXsmNe27J9JwBCIIbsvdIPLqnfah3+dEQyEZYZQ7iKb3rvvdyi6X9JtNH6fm\r\n4ryiye8JKsOUBEjKCHXQE9NzWaQYltUzhiE+ULUvYa064WoCM28mqRcPzqYK\r\nujncGjs0dkbE1DPU5ZjBlH3ghwS3ZJLikBF4in8Lp6qkxxgGJ8FXfdcep005\r\nlCWcYbh6HojffnfQbZdA2JoG4ekWAK+306vevPKxqHldNs9LU4sVK5d0Uro8\r\nwnlSYjlELlz9qbZ/fa0EipEhn1ij5y4wlLF8FnSJcHBIlBItwfl+vi24s8Hf\r\n6dTtFTCrdKJt+8rShFfgpC55lLcRFm8RUUcxbFGbN1aEwp2HKz+sN6nIjZJD\r\nEgv9wf1hSE25ATPA0obzjDqfezv/gCiYejStnx+F0fa/xnvDziHpZtHXuPXL\r\nSyfC+O8gd1Pmx5Q36MgGnMSBwl2XATkl7+Y=\r\n=Ear2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d80879a8c467caf0f52227ec97481bf5b7f2cb16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.65c411674.0","@material/base":"15.0.0-canary.65c411674.0","@material/shape":"15.0.0-canary.65c411674.0","@material/theme":"15.0.0-canary.65c411674.0","@material/floating-label":"15.0.0-canary.65c411674.0","@material/feature-targeting":"15.0.0-canary.65c411674.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.65c411674.0_1669743513428_0.5595582595581632","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a86d36fd2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77e9c5a1d00529d388e40ce3ac2a4869ac8038bc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a86d36fd2.0.tgz","fileCount":33,"integrity":"sha512-8C1+/UBghT7hNEIzFY1uRkfHEeIQTyHfXZg37xqS4UUG0gqebfjPN/QCp2Q4d5i/DgmGOnzuQqZ4n8VdvioQzg==","signatures":[{"sig":"MEUCIQCr95MS1m1vQTT6pW29QfiLh4DaDDMnO+eKk0Uz10D33QIgFzAHObXz/4OYNgUwuq0CnAGaPY8DfhHwCIeWy/phdik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhrx8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmop2w//crbCgbzKcoIXp4r/DueSN782eouqC9nWL7Mu+g5wX5iOZ/Hy\r\nLCQjpDRDsF9sNH1NPSb60dm83L51UZQQjVAIXT0jnGeoh90AlOcLv46O6nw0\r\no79+1370oTcUB92bU7rrOXCUUra5RbhR25kKEdy8zLS/zP/1xpk6hVOeaNc7\r\nXLodsJMxNasEJC1jlC2PSJ/n468SrKuMGIArrRPB095+RO7gNWdoZBQWvflm\r\nbkdPP5YnWe5cth2xGlpNB7ZPmQ3U8ZWXbH0e8AgxfNpXZAVUcdWedoGh/ZCg\r\nRyUkGeWK2YntkAj9AwZQWC+2ApT8+kcEKGgVnizT8xaojYleEPJ+0HaGEoTD\r\nLYivu2KfgB1XVGjaIJIFajMZ2qk5yhhu2KV0cfd4AOKZ6Uj4ajBl35dKhUM/\r\n3Tzju4aajNHcsIqT8Ysv0kB1tWVGqg340vYICe1LbK3eIWu7llqTJosI0B/C\r\n6OjiO0ra5E7eN4K6WSIvqUBfhSN7pYC/DV7o4YKj5J9MCp5bHvpwh++K9IQJ\r\nXoWJCeRyrYjCzCMVQs+i2zLraFHPS+c42uBaRs6M4RqEki00Ok1am0LHqKmm\r\n/kPQWlI2P48lVMWV334ZwHffdvCmnH6Bat8pUvuEkxebC6CAOHL+FqT82eqH\r\nnBa0CFaBI2xGYxPvmSPYY4j5INjrLty+lCg=\r\n=jTIR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"85d3ff6d42516ecc839fe336441543c8df62326b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a86d36fd2.0","@material/base":"15.0.0-canary.a86d36fd2.0","@material/shape":"15.0.0-canary.a86d36fd2.0","@material/theme":"15.0.0-canary.a86d36fd2.0","@material/floating-label":"15.0.0-canary.a86d36fd2.0","@material/feature-targeting":"15.0.0-canary.a86d36fd2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a86d36fd2.0_1669774460669_0.09647158401022282","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/notched-outline","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.3a1f46c66.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48142b54299d442070ca8ffdd0893cb2e78396e7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.3a1f46c66.0.tgz","fileCount":33,"integrity":"sha512-aA99sN21aK7CUQLeodlnuR5WOuz9xCDwRXv/zDSU8V5ugDVsheM0PcwsN3zQAKATFaJqH5YvYYfXvI7It1/cag==","signatures":[{"sig":"MEQCIC8fzVDFmBeIZqRTxMCvaYZppIUe0f0kJqurWC3ifVvdAiAPXN1SIzIVFggkqoH1uqgaCHp7vl2EvImfLnjnwoWCZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0d1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpm8g//YhJd6RX5Q9+qlF/bsClqHMZrsg9O0x26wLJiMWWFFDg8upss\r\nbmWdSg4LQR3f57NGKn+Alah11vIv5BShGDnl6tAEufBSbdJSBbCQrSAXU1UG\r\nuVQfKd8NQ2I6dgHYwUWpk72oLufB/RLluMh9KAZm9PL9tJzhOj7BeTGIGpva\r\nhumWKc5eTkSxBV2vkCOEfVwQL1tLilICY8naHqEajq4k1SPQztb55ILQ2Bdp\r\nnq7U/VEBjy1OBQJ2nIJIUKBgQlhVXVzGqeNzT0pqaAMOlvcFw4sF6m8ex9Eq\r\nFJoCt+qkAT6er3E+Wn5RPQdbIpMkki07WUmCFjx7yGHsA6NGw1jNnsQs22hE\r\nKXs1Pn8+VfkoTRtfDR9fa1mnGiD0AgFN1kxVk+7BiXbAIcw/9n97Qy34lVs7\r\nKOqVxIXztDy/iBipBGGMuVcoEd8gTJ1G++MKOQXl4YhVsgmMR5KGt1R9kHqB\r\nWnhA/4UQBeKcnMnATdk6ISppSmeJ9C2Rgk3nQO+1FAKUPHdoHz6+omrFu9Fy\r\naGy4v/1eUS40ErJ7yL5EdQBKNyACCMwLuE0affFlLaeZ7hxZOeNJrBuZP6/a\r\n4rRQizMID8cGcTR+hFuufndGF8z7BfFqS1wvnFqa3Ipzastsr4RuNN+BRMZx\r\nLTKERqUabqag+OdEHNFDDKgoE2J/WeR4nHA=\r\n=XAOY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c3f9c47a1b8fbcf554e1fce6da44837b6d412e2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3a1f46c66.0","@material/base":"15.0.0-canary.3a1f46c66.0","@material/shape":"15.0.0-canary.3a1f46c66.0","@material/theme":"15.0.0-canary.3a1f46c66.0","@material/floating-label":"15.0.0-canary.3a1f46c66.0","@material/feature-targeting":"15.0.0-canary.3a1f46c66.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.3a1f46c66.0_1669810036822_0.2909745484692108","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/notched-outline","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.32d8a9648.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5db613be78aa6e42f6dae2eca352afd537ba1d7e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.32d8a9648.0.tgz","fileCount":33,"integrity":"sha512-TazZW4AuKYZjpS30YeEsiH1NdP5nojgEJ/4x7x8UnNDTFpsiz87uN4cFs+Z1IBRXq4L4zkmcvFEn9n7SvNBLgw==","signatures":[{"sig":"MEUCIQCdMystbsBzqfOF6ZonG0thC0H+J1NTCsD4nP65wyYNhQIgAMM0H7ejPfCT+DuO//L0+NhGVxZX8N7+k9vtd29BS9Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiORtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo88xAAkJNzxe2KyphVroeGAjJT2brnRo/LGQtO4X6OZHX1fALssT4q\r\nLjPjRyioH36u7s7kZOYWhYlDqVuLM3pD08dsncJcyN3dA8ieO20zrjyQr4/l\r\nNASMwPBpWU+2GsEOzeQNUVWSoUii9Br+KtwNyCoOi7fSU9Z6LoVoZjKskuxr\r\nIsZtztDEVUP4DbPXKjqm/OXCaKAm7ilM8zpGeK5JLQndGoMNpuUc/0gVsF2j\r\nIMX+BlQEM0M1ZDbKIkTAqW3oNAQEFPlLtaTga2rkjhFrnh3bJqm7CRtGOLJH\r\ndm6XG+6qKKt4xO2ANVSR8GNP+RsnkBqT7iFNeBh5Smz3meZ/NMnj+EhYlswT\r\n9OTS4lQZyF9AbMjDjIzxTaigjSraq8P4/lf0znSp5YY1tBn7VgFzOssLwHyP\r\nhXRZzj1yPitv/+CoJH/lWldEViofub+Bpq3fAk4fTKheAR1FuaRW3xFEy3gn\r\nW3lYGDLAe7KBbZRbQbo8QHoSpLNHLrhdxt5VZ3RYDmsRiWTTowZGzKSdyXTi\r\nVs2jx6t3LUThEC5Tb6prTaXtUgv8TZQQXAJdd62f4TgBU9eNp119j0V+LW0p\r\nIDal0+HnHtYPcqsy6WQwwm4d1t6fGLeWJRDuJX+agRq9vhSaPCkW3xrRCSqO\r\nKDdIqaoOmxCxOdaD4p7WTxAsGav27fHYtb8=\r\n=pAvv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5833a540d2f362be3d86a707323bbeb6cee2c627","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.32d8a9648.0","@material/base":"15.0.0-canary.32d8a9648.0","@material/shape":"15.0.0-canary.32d8a9648.0","@material/theme":"15.0.0-canary.32d8a9648.0","@material/floating-label":"15.0.0-canary.32d8a9648.0","@material/feature-targeting":"15.0.0-canary.32d8a9648.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.32d8a9648.0_1669915756935_0.18809433951687504","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/notched-outline","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.03618ab70.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a40467a05c5ea52b4af76e1fccfab13216d8d99d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.03618ab70.0.tgz","fileCount":33,"integrity":"sha512-B40MvGdrHP6HGaz/0JgW54fbhQ2C79pjl3Og96P9qeVKrqUucrF0ySfip9fIuS4QrC59zLncug5HiXt5AGqkbA==","signatures":[{"sig":"MEYCIQCTJVr0eb5w6ay89Kgf1BnoYbPsuRg10ltBnbcqI0vWnAIhAOvRUE633gV8TH2jOLAQRMzd1nw3kDav/qe5kOFwP8OQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRSLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrgfg/9G3QbKeU9cv3weei3iGE1P7DmFyupZ4zKxbn4vm9grsHHDPW1\r\nZiZISjRziHKHcazOqHx1hdW1nWJnaoB95eXB9Dk7LbvAcuGbDOoqUmVut9oC\r\n1CEC1LraiiQ5pBjwIQ6iiKdSyAfiXcedGP/6grfhvAx4b8mFxkH6Iqlq1A/f\r\nJDwv4xRPvGNLJfufnjiCXIXJxDxhwMSjdH7n5poqhLKB5U8soKoTgc/1DRHG\r\noJHk4iF7bMpUWVF4pHQI4RtPg/4UesH4Vjo2ohg4rTegowOdE/hU8oi05vO5\r\niUzLlwneotr3JDJp+fsTjzWIOVbnw041LOnKedesRmxoKwKdkK9DZ/zrZVyH\r\nLupAinIuRwp+Uegz+8lzhcSDJLNA4I+MNiwee/yFpoetNs+n4cIrBDRe4yIk\r\nwQjkuC24+sQE76fsnD8LF/RXO4nNhXVHp5Xu3Al8tRIrDYj2AZw5v7A0nWwW\r\niZa7lOFGvRNehBIeQSPnWtl74UMVV83L6gTb3yg+jEZe3KaEIA0KfxepO2ZN\r\nU5TqCYTDjJQUyTRk2qpRjNFIt5+cGHzZnvIlgs/aoeHitYbsvo29wkmc68mo\r\n668+s/lpel52EC0lgm8bbo3EOlLKQOhSG8LfEFr96FmvpNsom6pVG0eBklBq\r\ns8p0O4JhUqonL0uZP+Cph5nqwcEEvbqcenc=\r\n=Jm8R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b7755627c14a2cf095b6ee87d1ad15c14430ebad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.03618ab70.0","@material/base":"15.0.0-canary.03618ab70.0","@material/shape":"15.0.0-canary.03618ab70.0","@material/theme":"15.0.0-canary.03618ab70.0","@material/floating-label":"15.0.0-canary.03618ab70.0","@material/feature-targeting":"15.0.0-canary.03618ab70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.03618ab70.0_1669928074851_0.7188145509912203","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/notched-outline","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.68aaed940.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b867941ce66014e51ff65c6c00a7ebb7ffecf90","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.68aaed940.0.tgz","fileCount":33,"integrity":"sha512-GIKJsTaAf2++pnhv/jXpjCyZo+mJ1936N0rrldOl32MsQW7nHm03O0pNZC/a3uf+PNK2507R+1mQQzihFMHO8w==","signatures":[{"sig":"MEQCIDgU/1fjaybJvJKQv3jH3OlHQK90lfMqgjKP+a2bWN9TAiBxZLxkCWJ8TwFJ00cPpWr8KNEfStAh5hUe6ww5+YhwBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRt/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCwg/8DwpTdivOr2hf8fPaawZ/1Z9PXdFgrXpxHQu2PjMVOEcfwJre\r\nqL4/nmPaFew3mYwZaVY5G6HYATohGigarWC2lK1jEXeaSLIT7g6ySkf8A8IN\r\nbhaQUyaVJ6g1+eSdtmdgJ9vYBLgvF/AKvFoOpYAfoeA51KxNW3pZi97gBPlW\r\n4vDLmcBVcLVquwkftEerlw3qAwDKiOWBk3kny+HpT9+u44KZdX1ihyiZrjZG\r\nVcs9L+/a6JP8ztiYUXF+DOmLBCUcSMowBLU5FsF5pqCqYxjxlWgY4uiYMbc2\r\nngYo9f08iqrWSxlW2mv3ZNbYNHCEwtMbiVDXqJrf6GI94xGVjAVuMCwP3546\r\nKpU3NvxzdwvnQL6qOW2+J+LCBLbo49lQMhcxuUvqJ56aDpq19BV2QyvIxPOh\r\nU+VQm3wWxVYrcaHmKvNtaKpAazuvY8FZx/vWQw9E+UbGImfWyY38xFLe2HMz\r\nBTwbgmAR1FX6EKmd+DU6ak+qwnACMaK3pY2kNlQacq1t+TbKhmN+TcHZrxgB\r\njjvyENSHAPrB05EQrFQrTdGFh9hJOgUnU9EBGI42Oj6pWZlupGrfdCtTK112\r\n+2erjYkPJvz/ZicKLPtPX+dqrMve63vpMG8/QrYtjnKVdZA52uDsXOkHk4pP\r\nlTmCpaHts73mg1VGiZ10TADMWKuUq8RRb40=\r\n=4qdx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6092c4f3bcdf41ae7f55d37c6ad51793eb8f040d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.68aaed940.0","@material/base":"15.0.0-canary.68aaed940.0","@material/shape":"15.0.0-canary.68aaed940.0","@material/theme":"15.0.0-canary.68aaed940.0","@material/floating-label":"15.0.0-canary.68aaed940.0","@material/feature-targeting":"15.0.0-canary.68aaed940.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.68aaed940.0_1669929855596_0.2328143097955464","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/notched-outline","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.f0a0bbc75.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccd63fef2423a0aca18fff5941f93ca02e04d6fe","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":33,"integrity":"sha512-C8W/16T4xQym8uquFLoY0mEHpGYqsV1g/3h8nmV0HH5HEyNx3cfAEP9UWkPDzM8gspJfiMMXuTMIfCEJfTLq2Q==","signatures":[{"sig":"MEQCIDHrrzXnuDBWzqCvpW1U6GWBxMDFGW9/hWdi/kcQmFr1AiAt+bPVPj/rg5LZBdxF0A5PZw93NgQT1EgQAZVp3Mkqqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib8GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+2hAAoUvAoarlGvk6I0MTfAJD8RKczFUffsTG08/ZPcmJ3zgLIDum\r\nMLtX086Vhsy6GWJnODUW0VNnQ8UqP5jV05XzcbuJ+D7vqBCAMV2e8L5nAZw8\r\npe2fPWpwOewEtKJAHGNidu+WeFvwn6DuuqTIIuRG5v+MInSfHRqBjCdj3Br1\r\nPQpYlbWbHVffOQxM+ExsdVc41MjgmVEUoby1RjX8K62qIR9bZaCccL0fEBLu\r\neVBQut6RrOOiVoto/Y14Qq96jsHygO5SV/ho38UUbtRIxSDhbCelX+D8xHpI\r\nhH1qvouDutEmFz2g16pk+rMY8R0zttTKhs356CLhPGBI8/GSfzDU5eoFE2s9\r\nIqOqTa1RaP+5dgE6Gun9LtOsrFego6LDq7EmTBxPkHFEU7gtpUX6OEfNyb0t\r\nzocHlcuWxVmNz1SM60Oghs0WeArTVYPQOrITpvo//I/nPV9bAMqqdO31ReOa\r\nrNoiFy+k9LxlGRM3t/WOh1iXXP2Q7pnTsGUz/ww12AH4mTtKA3PQzaJm11rs\r\nTTOB1nJyivqQ5p9kOvqqkxhqnBB+8vRyySI5hKfJXXoRTaxFpdlUClyzVWWx\r\nj+3nR7NINqIX+mqVliJiULg1gMroW96d89OyB38kFRZCwY78iS1IzfZMgQpD\r\nI1YOlA/PhDA4UiCdjFjUwaIpkA60VZ38gKQ=\r\n=1CZl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5111125522be9e3847929d9bbaf323f31e9057c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f0a0bbc75.0","@material/base":"15.0.0-canary.f0a0bbc75.0","@material/shape":"15.0.0-canary.f0a0bbc75.0","@material/theme":"15.0.0-canary.f0a0bbc75.0","@material/floating-label":"15.0.0-canary.f0a0bbc75.0","@material/feature-targeting":"15.0.0-canary.f0a0bbc75.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.f0a0bbc75.0_1669971718428_0.9574178998645873","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/notched-outline","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.dd99c8764.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b4e89e5ae371d167e9bac6c28859712d2873168","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.dd99c8764.0.tgz","fileCount":33,"integrity":"sha512-AYoP+ecd7kKjXmz6jRcs2tB24nRmWlLpee1VgXIKDEW+hpkoGNTSMZfcR/mAOD1u4iGHPZupO7rdRAuBbWfJHA==","signatures":[{"sig":"MEUCIDwXdOWiTqZHcpS++A8kqDk+oQadeXuIy7dvZE/J4/yFAiEAhK53YAgYOsabuvgUVANa4ShngN9xrVHf2myioJTSAGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigUjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTgg/9FGHsWieI8BAPoFl64O9RA5jlwIkBXO34Uk7ec7Kt1xJLAj9s\r\nI8CkecxpJieR3C9ZfwqP99BhkVhB0uLqZoM5UETIyyTOhJrcmrXowgFVN/hl\r\ngtqyWlIRTM+4FtMn80t99YSgQ07rgFSNgQApCYuR17bYZXT7HfAdF//Gh1Yt\r\nLGJOQdLPe23opHG1gapnd4Ii5xyCf0eYFLo6HCh4Sl0Yu8vPMyYO17Tmb9eO\r\nVlwkCDXTcPU6WmuLjWprAKG1cA0AbMZj23aNaKVtMqr0/0aIxb+dYdt0KbTz\r\nWTJRs49hdo/Fj3cV0YkSYV/6uvzfA/pJxDjVHgfUQf+26SWARLbzXXEFRBZ/\r\nhwvcfvVmo/8eudU7N9mYvYaD3ya8u0pGGo4VJmLOkjWZ8YsojPI0A/aKfv8t\r\nv5TKEPj+mqTwxWmEAEh6GM2OmXS4Y/fkkmArs7n2Uoo3TB/2xD4VOmIu3EPo\r\nU+bI6gq/tgBs1loG97pmNVhE6dPJV/O+3hca9kad1+wddCcLhDM3kPoW3Kug\r\n2PHXOItldR2s5qCyDCVEiK/k1lkFt5bdJIbGVkQymwg8i8QeHjaxiq5kM/W2\r\nlgXNeXtmdjv0zGXseHOpPLXto1oRX4SdxsvGb1zZjx4ECX8xRzI0xoXSFoPg\r\nFDJmfNz55T1/tE7b7gclYimJsKiCWwsGiNc=\r\n=XqL7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a9ff7973c7dab53b620d5be8d56e0c491cc5e7ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.dd99c8764.0","@material/base":"15.0.0-canary.dd99c8764.0","@material/shape":"15.0.0-canary.dd99c8764.0","@material/theme":"15.0.0-canary.dd99c8764.0","@material/floating-label":"15.0.0-canary.dd99c8764.0","@material/feature-targeting":"15.0.0-canary.dd99c8764.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.dd99c8764.0_1669989667137_0.27364158079887124","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/notched-outline","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.fabdcca3a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd71ce51cb2af1ebfe700bd03dee794ded971a59","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.fabdcca3a.0.tgz","fileCount":33,"integrity":"sha512-zKodb1svT6xJN5imT0BNSJ0+xGQZJaYLbmCopxlNYEVrfRXYmTGa9+C1OY1UPqCikPk68My4O2ZLYqkg/AXTfQ==","signatures":[{"sig":"MEYCIQDNCAlT7GdQtbF8/83Hz8/rrCZWnekwGtnnTngpBnmSmwIhAKujJhiUv+nregVdYVsGtrURkrBQCegcY8Irpux8EBSg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihSWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKwxAApI1WoUyTkYHn7eyX2A0wDC4iTZkCxM+kq59SziEi2TjmrCNh\r\nlZtSchd+CPxSQVQPCnwrZjcSden1XraPWvYKGbTRS0M2Lv00ytEtR2jjvNSQ\r\nHTf4gRPeAiw5ulUhaDkpqXW5thaBXINvpnYsefqzEPV6W4fsd19yqUcrxzZb\r\nGq2Q5f46P9vSiirvIUwYdQfo7zv7yiv6r/Pq/Cz/OxBDUn7f9MQSAOhDtbnn\r\n4o3lKqJQP8y8j62P5Sl8rWVLeX3Yubi98kuV/RN4iS0erE+FwegFYfyyGEwu\r\ncfG0ZLS594UjrvaNBRZPeaaYubgDjvL7F4NWA/qfawseyTNjIpmbt8Jw+cBR\r\neDV64rWW5FGb9H9+p3w3/YY1xpOhUUVAC+gxt4qecf4hideGhP+VtW1kfBeg\r\nEKba2m6mjQl6zAD2hyAR/EW5PMHHPSYnSlEcQEoWPcgOHLQHwsvH6BmPUKht\r\ne/sTQZwUZktVbOcMRPHB/322+yyKTFkIbFL/x3KNSUdXqgREJLFYTkA7Rujw\r\nDO3tarQfSKKZ9X3V9UhLfaYNN5BMTdmXWicf8xxLKYPSHpe/M/ihiyd67kCH\r\naixUn61mD/h87CxwUc3f2PLvASSuhqpt52sTfGF+5jlcPS8EQ4q+5dADvMun\r\nEF1vTlpdzzFo9atrTVqkHt7E3l2R3DCvd9I=\r\n=x8l5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"18ea36a1261419acae3218fc917dab4ca111bb9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fabdcca3a.0","@material/base":"15.0.0-canary.fabdcca3a.0","@material/shape":"15.0.0-canary.fabdcca3a.0","@material/theme":"15.0.0-canary.fabdcca3a.0","@material/floating-label":"15.0.0-canary.fabdcca3a.0","@material/feature-targeting":"15.0.0-canary.fabdcca3a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.fabdcca3a.0_1669993622334_0.44672182118255743","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/notched-outline","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.2d26722d2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8307284a84566dad6cf3822faaeba116e931a205","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.2d26722d2.0.tgz","fileCount":33,"integrity":"sha512-lhP9QHBnplqGY5UtOcf0ClVp5Uasg/ctSb2mvGqd0Ty+JAahOA2y7FR6FrFaRZDldK8wTWB0aA20nZLoNXpS2w==","signatures":[{"sig":"MEYCIQDUvLGabfk0T4IlL2x+jouXrVVGpj7uLcgopVDtQOSCuAIhANjTl65DRpOCFofmNDa2MoA4P+eAv0Xc6RylYWig+5mj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiidFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraOBAAh/YBnSjpXkXuPNgzfLH1TYrfTOH8V86rx4/bn21DiujNt6Sv\r\nLDhP1CcCygZTqu6IQq2Pc8lXg39Ou5kvf4UWsB5/9OmigEbfaqZVjczEscdX\r\nKvBP9keXPO5bF9XzkcvnB0wl6OyKvDtNNQb6wdAziK9GffNPxhyMk+GoZ/zS\r\n3UgmtEbH8clQJ04gFWSj5abWlXua5Bw5nmOysA7SY3/5WPan8HXTVDjXLo5X\r\nEdpP8CiSEkxYLxe2BDdAhmXZvsDKuMDZbIKcq2W+Z23ui6Dp9rj0+gRJj4BJ\r\nwM1HGjMJZhxHuJ78RyZOLJs+HN1X56lKN2lZw20BIkWZd5SFLhArzaeedUUr\r\nuPblg6m7WLx0zzVzUHnwkeKOW2tPoMapwKCte6AcJPcGGebla/PN8oMxFJcQ\r\nlIW8r49fauw9Lm6aIkYGQwF94vY1YDPI4DLYba7ULL5b+K1KBgCmAZiG14wv\r\nS7BE/lElhP43XgygwD3aJSCd5CfHflbqwwzmR37FGQBQiLCzuyTdsjrxHYaI\r\n8H393AVygM4R57k5ArI08Jvx5WBJU4ngY1kV7oJ9w1LJiO0jljFa61Cfgv1d\r\n0/lpdNgcyyVSZ5IP7G7h00JPS9/XjIL99esNdSxdXDYbyhVqXDWwzAeDCyrX\r\ngApgnzbiUMSOJ3a4Yjc/he95fpfJLtQULl4=\r\n=v25f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"76df2659d7f71f74a86512b38245422ca356fe12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2d26722d2.0","@material/base":"15.0.0-canary.2d26722d2.0","@material/shape":"15.0.0-canary.2d26722d2.0","@material/theme":"15.0.0-canary.2d26722d2.0","@material/floating-label":"15.0.0-canary.2d26722d2.0","@material/feature-targeting":"15.0.0-canary.2d26722d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.2d26722d2.0_1669998405166_0.22684204119018658","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/notched-outline","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.eaa0c3a86.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70517a6770c314eb5c22d7f0df979d2977d3f15e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":33,"integrity":"sha512-nxIubBkD8XFGuOhiLlUA2btJbFl+F3LegTWRDVUkKVWjCv209gKa7l6Bh5t+OuTGd7jy3b3JLvsz2bxb4zPueg==","signatures":[{"sig":"MEQCIAf5/Ow4o2/EYpxm2Ckyldl36+FOeqd8E7O1zAGK/EYiAiAaZj1sxTWV3KK7jT+R/Klg7E/A9z9lcLRcsT/iNXJqUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijkaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmom7g/8D2YMj1MuMoxH3a620/84D5XyG6ngnoeh3ml6MWaldMrJOIj1\r\no4Edir7t1lVI7A/ZUR9UbQR24YgXFDbgU4zq7OddbB2SpM/kt+3nP2hVRcD5\r\nU3TiBC4N+n94XKVrERdU/8SMtx3HtK0Whg0RtdMjI2wmpEQoFV7+H6M2zVme\r\nwI1oAqvYqsfucwpeHDk2Zc3kiFLGfsT+t1VEVvhmkLMhVEi99L5dBNSyc+DI\r\nye5o4UulRHipR515OMVQ9BmH7Z5I55yIw+in9jqeNu97Evbl6YtoFKUepNT3\r\n4aC2Gjphuh4IOjJDQ+BNeyKCMBoCmEGHVKq84OxRIZoYQVODgazwukJwNM1m\r\nTiquQ0E25rRLO3G7zeKm3yXHZeWVgl1vwgBtPN9SnISR9ZoNKJAO9y134EIC\r\nun0/NqficZiZcqCZ4LPrevYFVDmJqX2picZmkxVSy+h9Hur7XcxCPS3CCw86\r\notBo8ZG5hJ9gb+WJ4I2aTkureRFyyZ7pH73wIHuoUHHep2O1qwIg7nCtrDRj\r\nYY30mSM0hqDm8Ym3hgtCCjpa3YUr4UNd35p1I1A5Gje8kP/P9zq9blRonVe3\r\ngrP08c7t4ol1uv0PUj1DuZ3efKlEwOr3rsOOhLvRd26jDEviZXZVvZeyZMvp\r\nXYamAU4AvdaZhTNsew7rBe95fj0E1gJkq/Y=\r\n=dR9D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c54316c7c60bacf8254758124c9235dc48d44064","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.eaa0c3a86.0","@material/base":"15.0.0-canary.eaa0c3a86.0","@material/shape":"15.0.0-canary.eaa0c3a86.0","@material/theme":"15.0.0-canary.eaa0c3a86.0","@material/floating-label":"15.0.0-canary.eaa0c3a86.0","@material/feature-targeting":"15.0.0-canary.eaa0c3a86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.eaa0c3a86.0_1670002970204_0.9467394487950374","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/notched-outline","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.79a613bbd.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0c3d383e26bf823cef9f00aaff4774490f3185e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.79a613bbd.0.tgz","fileCount":33,"integrity":"sha512-qrcFAyj46UCHA6Xa8SEBluz8sGBGDEhAuUWJ7GtecFZxZrzDWQuYtGNJByViiflzL5zj4ggHVG8Awzj20iuomA==","signatures":[{"sig":"MEYCIQDOzMaOeWC0c/EPC6dFhl1roLvdrLVGA8VYb9Hq2FdHVQIhANL8OlgTZ6JoJGW6q/HaBNg1fW1hXF16x1XoOr7qR6ul","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1DvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr72Q/9HzuvK9ttWsnfvPDUtEJFwI+HFnh01P8Bk9f26ueGMRsKuNHb\r\nqoAiHWPvwDSwTEU88smaMrVsP96XkCaTHZMVN7zCQdO6VmodxGIcpBZWl3aA\r\n1qx/36uWyuN1WN8Bcfd0HICUPySCdreGmoFTNnn/vp9VwoWk0MPYfQ2Ins8m\r\nS9//Qqqf3BXHcantLCrZSyvxw5A4OJ6AjakAX9nEj/v2Q7tlKkRXea53CGxC\r\n4WaCwskn4hRXHjQ/Zw+ea6pkA2yQgpavOEbDKZ4YsLn6/PhqrHTaoAMwlufW\r\na0wkvRfrtEcNWv2+pOdWQQcTWTBIQcb5IRONMTE7w+ZHEMKfwV4x7HhyAK8g\r\nasNb4XYHOnA8PzUWHDdvJUYt4pkOqkWQ8dY6VnLqohRlPCoQHNm22GnZ6a31\r\nI63ZeFi0YjJjhwfCgPRXIjj9JTawZG0R/zPeVofkhHB2skUcugpjQPDEuHzc\r\nVcc94hJFfTPFDVYHYqR4I/0snKFkSFn9rWXZJwKM+VsvjnJdBwRHfy/ASQd4\r\nFMYR6MHBjOp9E1vL87XurROOwz9Ep4FuMzr9rz3mJtCE3CuSMs23w8Zd1HSB\r\np9nOJ2D/+SpUY9n28QqDbMQ4DrPEkLT2VtHVt8M6H4VVO1lQe9Q5ZKkkGQ0l\r\npxUrpJ4f/9ifmSdfDTbE7bxxmRf1AXiccvE=\r\n=HCxz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"755ec1ef0b2cccdcb0c8b888d199b4748e3ba10a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.79a613bbd.0","@material/base":"15.0.0-canary.79a613bbd.0","@material/shape":"15.0.0-canary.79a613bbd.0","@material/theme":"15.0.0-canary.79a613bbd.0","@material/floating-label":"15.0.0-canary.79a613bbd.0","@material/feature-targeting":"15.0.0-canary.79a613bbd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.79a613bbd.0_1670336750946_0.13519191978486078","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/notched-outline","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.c871fe61e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9635162cec92ccbb8666f1db5e9251f7e25c360d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.c871fe61e.0.tgz","fileCount":33,"integrity":"sha512-/Dj+OsEGiUy41ampdK/jSPboKvgJJFChA1NOqfY5fxcMe8rcv966ILctdIFKIBUk8kLjezxlg43SLG9z1c8GfQ==","signatures":[{"sig":"MEUCIQDGGrDuzU4VSFzPGwBABmoY/WfPcSuLyaUVET5yHG6ezwIgddSqWDkJmbj2arLBmUqUsS9gXSv6NMAIZAi1iZX3jIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEYlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJYg//Z3ohrvmWbMCKZTsNtC34WhK7KZ5KO0UpO47KNgybUzNM0u+Y\r\nJRktvuNnAjuSudkNl7M6+FQduHeE8e4NYeiQos707oVR0RpTyrwHImdoHMqr\r\nrM9cQy3WGmSj5SKLTyIi+7kqEWIpGFMcbkJ7wdgY910dXpfYkalReopb7zhT\r\nXSymZtU6Hl63fRFR9CmRz+x8IcwJMZUpMlN4wY0ELsPxRBwf2U44IR7MsEpX\r\nzBeZz5jWq9mK+xGI9jmBk9/lu3RZnsISY0gOGcRL2tpiP2UNou1XpaiF5r20\r\n4sOz3yRWmgsEF38Zar39SiRTag6vmeSBSNAw+Ix3l7X9HeABYubxAloBez6H\r\nFsFfJ5EytSFw4fWHN+wwQVi1v50deTMAw2dRSIOVABC0tEOpIQ6WcrUIz3+a\r\nQ4oip+cFCkIdq5GExki2Xd5/Kpgqzt/3Sjry406gN1dCUYhruJjcyg80Xwu4\r\naTnki4hjjFpN8TZ+AisltGB9Czb0TxByWsfME12r5E3y4fflkhaIY2ic+7rk\r\nBYYDFqVIuzGib4KuaLtUNH0M+YjafVW4abwrt0BErqliUcYl6hucbWPeZikO\r\nVr8LqBDtcOih4v94Pwk4JJhHzKOq4sYMR6qCMDOyzhz3jKRb02lL+O3crCYx\r\nJ+lUmIOFGIaoD+0sbU0BmfeVZWU2JZDidJA=\r\n=A/3G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e69be4936d1304c30ff7b83af8488b43c0ad5fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c871fe61e.0","@material/base":"15.0.0-canary.c871fe61e.0","@material/shape":"15.0.0-canary.c871fe61e.0","@material/theme":"15.0.0-canary.c871fe61e.0","@material/floating-label":"15.0.0-canary.c871fe61e.0","@material/feature-targeting":"15.0.0-canary.c871fe61e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.c871fe61e.0_1670399524911_0.28780874245125876","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/notched-outline","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.9eaee7936.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00c81f584601f2dc9c02c072ef1fde5265cbeb93","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.9eaee7936.0.tgz","fileCount":33,"integrity":"sha512-iifySdoBT2Z0SAsaLU8i24l3n2j9covZJmuCsPOSoYf8NhvuOVzexj1K5dpQqD1KkDdSmIrs0krinSR/4YzInA==","signatures":[{"sig":"MEQCIGwz1z/dwiHt+lXtzdY+uh2murZVO164ZBjASw6gdYgwAiABopt4D5VoJq5eL+aPja2Ezs3yixyqHH4l5dKqJ/iEgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPF4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLOA//Vo7ibgNeExafMOBf6CrK+NjiFMBhcPF2/wKYmlMe1TatRBKH\r\nKbl8G28VRxzscuTqWfc1AUOoATuoMst3Tt3I7WOOKY9m6FeCZ5y0iuy4Joi0\r\nxjpbsSsWmQqDrmYWkxqu8hFxoNX4znwtFXUiQZR4WkT/XwkH3FlFXGQs0PiE\r\nm+hgZNvF3B/w4lSvtXnVREEipTJ+uy3xpdO8IyNusASlwr+PL59yoWkPjSrg\r\nAb0CyJ53gqkoDGN+N6wujZstRsVvcX0nG/hgYgPZn/DJoFKn+Snw/n+w4k7r\r\nfdg+A50d4CAmpfaoDUP/qPlNqdcDzzwbK+UTDUuznE6GINhcWQ0YCYlQkovm\r\ndvPxHVSBP/f6SaudbYOx/H+0E2fk+KiLX5RudJ2DAGmhHbbULFj+qYuFmsmf\r\nmg0n3fT7UprjS5jajIFZVFsKLRK4em7HTDiebBNHyQTnL4FRNpSoYTw29O+g\r\nyMidH3bRTy/gSRbZLrYQduRt1oHxFP/UJKRrKNknBM4zGBjSTlSy0nUUlNE7\r\nOPNPEDrUjxr/NoosyxbtpObNLmZzFwAI7MoWTzmG7/9sdDgMU8Fb5rZIESOs\r\nWY8RKNyglLO3Az0L4oHfALH4G7QhdlZzUY3SGlgQfcyz3QlmXdzLGVR47vFF\r\nLlMR3ucAjf2DvGD9YLfqJlYNdEe70sPT8k0=\r\n=rE39\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b1b576e68a716d1a80dcdbde7a572c11ca937fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9eaee7936.0","@material/base":"15.0.0-canary.9eaee7936.0","@material/shape":"15.0.0-canary.9eaee7936.0","@material/theme":"15.0.0-canary.9eaee7936.0","@material/floating-label":"15.0.0-canary.9eaee7936.0","@material/feature-targeting":"15.0.0-canary.9eaee7936.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.9eaee7936.0_1670443384292_0.5616513330138775","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/notched-outline","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.1d37bf601.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f222d08fee64e77e471e95e56d39de7a491c93d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.1d37bf601.0.tgz","fileCount":33,"integrity":"sha512-WLEgPvOfldTfHhFJ6VfLU4+yCwKJrNotfRnMTKa/JPKRaKuL7IgvmhYnx6v8rXLz9CLXRAQ0rxS4xi+2sLehRg==","signatures":[{"sig":"MEUCIE+PZ6SC2u4Cr5st0Xb0EwEbrzxxtLIJWHRaWoLmS086AiEA0Jb8Dcjy/teYmxyUK3ZaYuRozeDMUulKc8POiMO8tD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPp2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQNxAAo3f9wHkSzBRXhEeFjtqiz4o9KKxAg2Y/C9Y/ylriRD3mOOis\r\nXCPmz1c66pkgDfTrYZwhQVlRqFC1Thk13OpzHoGl5imR/pqCtefYcw/Ru90z\r\nY6c2ezjQpRL/C7ghL82POgAB4h2amMum7oU+Qm4PAOL2QYw07guIxzVg3a5Q\r\nUCu/BCzKhcjUNx7a2uNvo58cu+0pB/UCP5LDIz306S5bb0d0A/9b1xydkL9E\r\nwEZbtIJHuq8dVAU1OM6taJSxAYJu0f97L2blb35UPJduVhhSAM00DuNvlnGa\r\nIBgNFOZ8gwMd3ovD1L8ChQFn5K8S8tYuF8xTonYNmWmsDUBfQG5RvP7xkM9b\r\n8VQFcBQtF7j8RjRTZ/0JK6s97icJd6Az9toHdgDgFDANe9ZiM9AshfgQCanK\r\nSaSa5wYmeBMObOUb1RwefGnn0CQSijK7tIBjzO0bX20oq01CiOPEAYWCfSY+\r\nXx3EgQRKXWyKGGV+/WGRUsPoH+xDb45QBjsY50pHS+29uypL83jf2Gd2+8QU\r\nc3/NmyP/pF1tJz1263vH+YZfkZpM7J2xskEchSkXFsaTkRTK7s5zpelCN9PS\r\nDADXYE/H/lzH4nfE1VKHgydKxLwrZOzOGyy3yinrh+LqaAhsJqEF5/3RaU8W\r\n8c2m7xDucZtJgu4DR3v/EPrzCdns4LjX28w=\r\n=kgIz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"747a03f19fc88f7a2358a382989e729013e06df4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1d37bf601.0","@material/base":"15.0.0-canary.1d37bf601.0","@material/shape":"15.0.0-canary.1d37bf601.0","@material/theme":"15.0.0-canary.1d37bf601.0","@material/floating-label":"15.0.0-canary.1d37bf601.0","@material/feature-targeting":"15.0.0-canary.1d37bf601.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.1d37bf601.0_1670445686417_0.1076203342771298","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a5fe069d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f896f58d00044481d968eb6f1f538126a95c4b22","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a5fe069d5.0.tgz","fileCount":33,"integrity":"sha512-h9yN2uJTfwy7pC61GaCE0M52UMoN3PggWtsz/8IKFjIY5MQnreC+UswGkKfGqdm9pwpEa9nXkUvO+tMogmy7bQ==","signatures":[{"sig":"MEYCIQDKefJLMyU45Y8T9z4Zgj1QCUD/rSrvOrGXaFnNwswicgIhANo16ZPYmb334JYM56Ir8l/TSMTOPR9cZOY7+J5Ybqvq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4IMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRXQ/5AL1SbY/oo+fjiuTpfU4AGS+N5MvXqLVzcZ28ui9hmbDnKDvu\r\nRSekklXse8GNkUcWfIuEKmoO1ZVsSrpmy+ADym5Hw+Na0k2I407A+VmyHmXT\r\n1j9zXTlxHfHS7n3tSekRfHcpx0cFdduD8BqF/QsK2WmtcmzI8Kr6XSN2KJ7v\r\nL2vgwr6UGwpbVxJ88NpjUmVcAYIicD6KNTlvl/p8PdLwUnLxEfbDSvxpLVde\r\nqhK+KCGQ86NOul37LUdZDSMIzXCMa1KyVki5CAsjIgbERGH3HsMU15DFYTf2\r\nGNfVtS5ap88dolQ3nOxAJjWS2dv/XIh9/FvCNxqKavndV388QJUSKiruQk1x\r\nTZztH8rpsImorNgV6osWRYudsQZdiBy4Sf1CNlGBWvLPXTFCDuARpK2yHvkc\r\nzGVG9k24TGBf3qOBmXsnhvsj5PQRr1yWSb1qtr6pw/Uj8ooSjxXq2zcP67AX\r\ngRxi+hMhg6SAeHjellLNW/l4dnyjrsbAVqyFC8G5ImCwU0BUVcP0VGCkJaDh\r\ntu5zWTg6yK+m1IwWv9ZjtFxfmzxsHTvBQX3rjn/EdWqSsWgzx4o/vNm8DJAC\r\nw3YTuzEV/6Td9m4UdZqMOOmLDT7+YoMPsFdDF2ENNJdvcnZz4Q15uo1MBfkV\r\nlk2r1S3oqO+4U45q5aGKEG8gf6073PjKCdM=\r\n=dcGB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c41dbe93704a7d03ea10d8f1b4de13fb8c6e19ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a5fe069d5.0","@material/base":"15.0.0-canary.a5fe069d5.0","@material/shape":"15.0.0-canary.a5fe069d5.0","@material/theme":"15.0.0-canary.a5fe069d5.0","@material/floating-label":"15.0.0-canary.a5fe069d5.0","@material/feature-targeting":"15.0.0-canary.a5fe069d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a5fe069d5.0_1670611467874_0.29098735030855005","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/notched-outline","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.ce8b5326f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9c40054f1584784dc57b83c1cfde7bc608c18a4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.ce8b5326f.0.tgz","fileCount":33,"integrity":"sha512-GKcdt4IXZ+DBlonYvBPAJEWDM+e+JdDblC39Q3OTGyZphJIha+boANiNYEnc4QU+qCqA95A3qB4tM8Fl1y6bwQ==","signatures":[{"sig":"MEYCIQCMfnET4KvhPhqRZxOgMqwcJYrSpaIHTOg/AiXFUGYllQIhAOnhFR+BxmbbV7U5RNjGu/V6bo+RF3I6aRB/jOSNWXCg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8UxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxvxAAgCFoBybDFJpXDfn9dV9YkNDTwoTIgccLrg0z5XZLx+Z44gqU\r\nvY7BREoQdUS/7hZn/xqlm8th2vLFZNuzF6nIeFVkNCGP0zgwoA1+4GTNwCWs\r\ngS2YQAu4AWwI2NfZmTXQNIctJjd9XR4F8dVOC2WD4bsknHlJGY7rN5sivFHg\r\nQGuxfpMsTeOFL6NkCCYFS7h8wt6qFqb8Qntcuoiw1Z0jMJwVCVLdSp/BzPwK\r\nCXUI5BtSh8kChsnIWNOxMeI2VJqLAr4QsdjsUche+ioJCp8eFX7NrNNu6hlq\r\ngTWV5fp/K6qoWEWTwnh9TMy0vO6crB+HwM2n0yuCghflJjxpRro1i0Se4HLj\r\nURn0EV2ntnrsIK1Y66oSOLHe842eT/vf8ivm6BfVjSk7ZYzYtZn4OGSQW1xy\r\n+OENFLYrWN/HF9ov2JUEiQ3yNZTij89LrDT/phIvhh61Hglvsqa8YtnHzM2F\r\nyf8+TqTi0uwNuI08OOJmQjUT/Y/3G1aqA9UmE1vzajZRz1+hHq6K6krb38zB\r\n+wzF0O75wV0xV0PCQW+3fK8A4w5ZeaIQr/MSUxVyPz+tJ5EJZdD92IhT/5Xv\r\nDJrUrM/PSjw0TDkL/+MsobKuI3ZOzeHN7N9B0lZWW8/0ZggaG+vd08pSF7wI\r\nmVWCZIZrwRv2ETE66skYqvP43fHX/HFeCSs=\r\n=Et9C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8ff7f9974a16b8178376e943748356193d364587","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ce8b5326f.0","@material/base":"15.0.0-canary.ce8b5326f.0","@material/shape":"15.0.0-canary.ce8b5326f.0","@material/theme":"15.0.0-canary.ce8b5326f.0","@material/floating-label":"15.0.0-canary.ce8b5326f.0","@material/feature-targeting":"15.0.0-canary.ce8b5326f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.ce8b5326f.0_1670628656828_0.7140658525004235","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/notched-outline","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.43f5323bc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de1b4cd6e249b10f07e689cf50fbfea6e5be1672","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.43f5323bc.0.tgz","fileCount":33,"integrity":"sha512-WkARj8XKjo8lm/TBPUrw7vctZv3xP+hn813MwZhbVWBig0JAhHLf4rJko+H19wZqWcXzfpWPfzcNtrOjreQl3w==","signatures":[{"sig":"MEQCIAjvZTbHCl3uWUS4qkq/znP6+ZJ1jzFPfMdNo4w4QFIDAiBls/mhYF0L3sqIWMSOlK2EAK7TZz+X4wUnGAPq1TA8Mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1sGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrczQ//RQN6BAqep1qmdXGXmDoapZV3B4uxS3FDOue03G3VbRKHaUK3\r\nKeCJjH4R7VFR0DpyZgtiWAFka5zL9gQVCaidozzkLfWoaGVSLMXad+C/Go5h\r\n7rv1OOzKS/Ou1mLmKD79UDUiVEdedyWA/C847KQcaXqyqXODeidDkv/6pq8f\r\nh0rQS0MvSW8/QHM61Rz3edUtjRLg+sN8NTmaVCuofEEoQEqaxxW6drPkjdoG\r\njpwAcpp+tXZvd9tiPxj6hKVBmQ79IsZA5Gqfyu3V5nbktyrTDTfYsMWqtjKJ\r\nfWmUO0X1dPNIwFmNa2GlEczpKAcSldwvZyYO5E5RZTBHhjQfpNbjHDj3EYDG\r\nTtloUsx21syNfJ2BH0wUmEZ8HWQjNgKHk/BtE0teaaDy4VCrnRPgKv/cvpbB\r\nPje9DZj+MPHwZGzOEQ5nMrqV9UklRE3GC1gTJdvPijoFIvy/zIc5IoxZXZGG\r\niKDvqx7qntwSqU2NahSUXp55wQ/52ACt8vSD4/q88mpMv08DVADUlkEWlmLg\r\nU+JrzBkk6O6Hmd62fTaZkc4uSZPFl9hfxBNqG5QMzwSdUCuLUwTwNdVLIQGU\r\nSeFAWyQ+G6/e1Ae04hFiwVOTDgg7Cf8Si8B89xOkgjGle/RkpB5M0KaHT0FA\r\nGBuno6PjjzVO5xjGyXl/sNk+jUUNSvRTuQ0=\r\n=e4Ew\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"00be798d56184d5daa74ad6f53d4992db90688bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.43f5323bc.0","@material/base":"15.0.0-canary.43f5323bc.0","@material/shape":"15.0.0-canary.43f5323bc.0","@material/theme":"15.0.0-canary.43f5323bc.0","@material/floating-label":"15.0.0-canary.43f5323bc.0","@material/feature-targeting":"15.0.0-canary.43f5323bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.43f5323bc.0_1670863620934_0.38075666248221385","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/notched-outline","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.5490e32e7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db6cbea9c322f98ac33d1b703a36b964ae34cb60","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.5490e32e7.0.tgz","fileCount":33,"integrity":"sha512-PZA5rKHGWYmH73KecncXhVnFnw9oer8CZ/OAJOc4iLZcaJ189RqxtP68oKcnkz5reLgqCAWSxXLiV4oE45XrZw==","signatures":[{"sig":"MEUCIBXxUMY1nqBwrwNcJrZrQryxmBO5b3uwVONNJCZU4MbFAiEAvzmF/XaXnDAQuz75uIwYTDDcFWYY/7TQ/XcsZXcUClA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl16cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPjA//UInNPQBSQI0ynaflymmjA+hZwvNssBDv0vXv3UPXt+fCuip6\r\nagUQT9WmNTFUmzAqQyu/lZMGGGuM1fdn2YxHE3ZZjYZT48IVm6oEuv9OjDi5\r\nE4ThvPHMElKf/qhWRVen6Ble31EPGdLNkIDROHzW13FXjiSF6DdXcHQfXIP0\r\nfDqRTEEEQvAqTf32ZXpdhYDGgbe6FEn7Ycq4QJFWy9FqI2RgdfpS4V+HVyQ6\r\nu+mjN6s+RWjm5JDmd+ZpLnUqAUKpCBGPiW4IFluu5LoKzk27FnCzI2k5Sx3i\r\nDqA1yRMKo/WzNPzrad9MoxQmZr9ohywpn/Z4+2UNU2P3bXw6OM0E11lU8ZIZ\r\n4Gm4tks8rplvL8HQqZkOHo5iTPvjk3zwsDFT0QrEvkK6pYxzhS0XqDJ/SJ9Z\r\nh7+IZdS1rB97pnqRYV+7z7AbUJwQtb7usodHMBWqZ5+ww12UD5eBydgEVQrc\r\ndagfZsCTbXzaREIYuCa8FThAClSn+vD7mBYeih+Be/v9gLucWrWTxgA4+Rxl\r\ntQOF+sL1+ZBhbymw/mRweajjvyJfkXWlUar4dz/1qNOf9zqNJdZ+1ao3pdez\r\nsaG+S6rXrk/axIcjoDWIK+41M92FPd7tR5NjogK3bunnxFvyTjOVstofWcdX\r\nTqFCnNRsYkiUjDLoim/OOZKfkiDqezwZ3Js=\r\n=K+oG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"968b84204c7a8626355569e2b90063abd574f7a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5490e32e7.0","@material/base":"15.0.0-canary.5490e32e7.0","@material/shape":"15.0.0-canary.5490e32e7.0","@material/theme":"15.0.0-canary.5490e32e7.0","@material/floating-label":"15.0.0-canary.5490e32e7.0","@material/feature-targeting":"15.0.0-canary.5490e32e7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.5490e32e7.0_1670864540245_0.3342164763864428","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/notched-outline","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.817002c29.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67c976e01961f89586d282576161472d8b5a85c1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.817002c29.0.tgz","fileCount":33,"integrity":"sha512-9fGRUQtwrLt5zb2cW687c+mNsuIAsjTu3ktzsNFfukT2OD9QwzFgWHSKVAL1vtaxfaMBxmvSP8FRagxX3hlO1g==","signatures":[{"sig":"MEQCIH3Zd31lXmxXvVlthGn7yimVyQdQpRpJlV+ekeYZkJ/hAiAeuvIzyJAIoKXrEYCFLtj4G8NZVT6zPrI5XzoqrYRuew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPSIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqddw/+L9g4HvyeiseYBg17bVkZ8sDdRw59c9JU9UnfTJgjrhWxPzDG\r\n1Rr6DVyqe3muqlZLYheFXWwruCpwrbhBecONyF7ua7tjUq/a8h9m4gjhme+7\r\na7SJ2eUr3268jufasN246XEbC/cDJkKcwg7SaZoGk4V+9GY9FP/74ltYEuBl\r\nQ57gGSsFdziP1DwU9P1PpujMXSMeZlc/3A/QOlsJWcOL9dsORmWG54VRr6H7\r\n16k752ldZ5vBr09KR1XB9KTUiQBgUC7XwryFcTOFuEzSIg/r1qHCdyTwvvbp\r\nsdiV4mm01eb1B1z8M6iraMKB+hl4wnquC6DzYKNVKSE8BDfTHnQzcpLo5tSG\r\nsn83ii/b8BcizhjImkQoFlzsIBv1fx8Fk9yFOS0Bogputi/2PYC7PeeT+zR3\r\nIzekJeGxBnRDMDnJaFOedAWAkudEf0HYBA1fajXn75X1YUI3vWmHpyRXdoK4\r\nilwiv9ldSTUhzOUwynDqzwUYtTqzBj85jYikJnbIUi7isXQNK9BBwk0DEwDW\r\n1TshoH7K7EM0CGIMqdiktbJziM/ucqQebE74Ugu0jRHR0wsXxXQLfwdTZ6x2\r\ndDrLHVhPr5PRpa9XXRcSAcgDMlGiYwFKppZKfXmrWM7PTeU2goueVepZa/ET\r\nLG8z4gaNVQRRxzpLI39zgbzo0f2psfheDsc=\r\n=LL1c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8a85122d0f4bac7142c66fa54e2fe9a569e7c4a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.817002c29.0","@material/base":"15.0.0-canary.817002c29.0","@material/shape":"15.0.0-canary.817002c29.0","@material/theme":"15.0.0-canary.817002c29.0","@material/floating-label":"15.0.0-canary.817002c29.0","@material/feature-targeting":"15.0.0-canary.817002c29.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.817002c29.0_1670968455858_0.16277455184884704","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/notched-outline","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.313a1326a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0965e2ae464b4f08d2427f21a3be099e29ddd35","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.313a1326a.0.tgz","fileCount":33,"integrity":"sha512-cEZ1C+dHMo65N80QWjlpxVQ/Z81Otta3AryIY7wF7MVkFc2HSwpjCaOpGchcTo5l0uRyqWxtMHkm35NMqk0FFw==","signatures":[{"sig":"MEUCIG7lZvNpIMHbLcrMawWdn0PJKyEry/3v3yfzJ2EjvHNUAiEA/D3TohlQW6ryU78OBUGGR8jgFmpsvWhs3Eo9eFTDlP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaVtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwCQ//csmUm8EPWZYbEgG8x4WPBFwWH6izZFr0CTKGw+Tw+0ytPmfx\r\n3x7RY36GrqBvkF7D+XDkkhVwymjfCxqj0UcUh3gWbbwxWYuDLCBQ8l/RK9qR\r\nurPtWWlRR/hmHWEeJQrnxAUFDZN5gQaN1qCr+FGCIPEtmP/3gsSIm3goi1oI\r\ntMZZnukwk39iIWmx3grLhFl6q78sSh6hJLOrmKLKVqnCpxTguBRXhO88PK0I\r\nbbl6DsaCirV7MukNX8Nhf3Q70yEDtBF4RYmRRuoXU9Ghjbjgcg5FPChsRMD7\r\ndSgIkk4zjVets4ZSQMJFakFTmwAmpoOOCVrjY5PnnqYkBoRstpk8/bnfI0j3\r\nIUdyUDomXdnVOWa2NLcB12C/7PAnJVFWCXyofW6ZyqA3mSL95x9O8+QQV2M9\r\ngnNqzSY04PE/Vyip+bD2ZkK5oDjiOL9te5uqb4W/VtBA38N22b7z0fdeWuT8\r\n+dZB1gt4SqbIdRwnCP9zuFdK5+wm5B5EbVferCFVL9AV9Lk1ychto55OD466\r\n6c1Ql0x6/KlgZURxZIgEqPo4ScBdvsL2drKDVqg2zJHHD6ZBIggUROqKOf9f\r\nyCwY/+8Xc8mQQSEkk5FWh0hXCeF2ASb/fKroq3vHaTGcQZvWRJqSsc1ZcgV1\r\na2KooFDBbQeX5ego7ht3R7lgydDLSiGw+Oo=\r\n=UNPn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"899522d523dc8a23968f530bb4de8698a5b0e78a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.313a1326a.0","@material/base":"15.0.0-canary.313a1326a.0","@material/shape":"15.0.0-canary.313a1326a.0","@material/theme":"15.0.0-canary.313a1326a.0","@material/floating-label":"15.0.0-canary.313a1326a.0","@material/feature-targeting":"15.0.0-canary.313a1326a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.313a1326a.0_1671013740849_0.8327842683614803","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a69c14e10.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18bd6aa91c417c403b3904bd2fd26b073419e5dc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a69c14e10.0.tgz","fileCount":33,"integrity":"sha512-GDFfzI7sforIv14RAxA80YVhW/tZ36SrWb6e4+JkNoQymFF3IzVhs0nnQ7Q70aKwhlXCgvIe2HUsCg9LjcIrPQ==","signatures":[{"sig":"MEQCIGZS8vrkvx25t+DR4lxqOpxNPI9S19G/65G+//A5dRhqAiA60ly12S0M7rOfgmZfwp+HFZkUPyYoY1TXOso+yeNpUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbE0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrr2Q/9G/knMr/usDtaN4WoiiIqAjAnKtLjDUFjmLivSKRQ5EvHsEC9\r\n5f/eHfe+88PbkS5qkRAcVMGpcFA69nzNfwM6DIRARFLR8xZiJpNuqayuz5A0\r\n61ovWkNX2pdqwcmbnRZpYGwjhnI5/K+NCPFENJy3i+2BN1Lo2PI7P4RF/ler\r\nMLMkMiqKlVHHyLNfVRV9hXxkpzs6tMC9oYsbWD4rwtfvWvYrCKCoAb2rhr50\r\ncZeg7WxGKrkXDq2VR9q6SsUAefeU159HK1Pb3hWUtnMWXlGeeIu5rfGYeaDV\r\niGIT6jGsntRp9siwe0l9EQ//PQtyaX8/Ot+LiYzdb3+5qolAW2Hx7pd3acHL\r\nluTlhiv9orEqsdbcz5OAZrl80hKXToXT81mZjWWEN5pVk6ME4XAGjLN3UybV\r\nL2UN6XdvBBKEA/SA8iBAtN7Ygb4EXYdMXhNJ1ZqE6W2ZtPRbjVICxE1b6T/t\r\nLftpCuEod4cHWvX0oqndovlBRLJ3a3b+VswmcTRjZh1G6xs5d1tSid+Qy2Ux\r\nh3KD12CY81EwQNzvGUr/osSXXfT4d0jQ1fZ28r6iw/K3051qGtDWuS2eLkis\r\nza5gPn6mFLrik6WxPpHwwCONE5g8q8mt9b4+WWDqBJhrEjFuWKOmgezr5WLl\r\nk7kIQFQb/2TAmj59YK5/WyUFVbNQUqm9DEo=\r\n=javX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"39b456415cb22d1c1b4de3d505f0e2412c1f5316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a69c14e10.0","@material/base":"15.0.0-canary.a69c14e10.0","@material/shape":"15.0.0-canary.a69c14e10.0","@material/theme":"15.0.0-canary.a69c14e10.0","@material/floating-label":"15.0.0-canary.a69c14e10.0","@material/feature-targeting":"15.0.0-canary.a69c14e10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a69c14e10.0_1671016756004_0.2711801901283326","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/notched-outline","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.f43e0ceb5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7e31e5c5e32dc51a32413591adacebd7389df0c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":33,"integrity":"sha512-WfTqXFDzfT09vhW+2pBC7l2T8TwnQPjYkphk7ayD4PzDpg+WR/NjcpnYu3Di11AKGHD6MHaVFf2Wk7bDW2uuvw==","signatures":[{"sig":"MEYCIQDmv7Mcp1CwnOCg4JNQNNhec2cgocLfIoG/CdBYWz9jqAIhAI2zw0JxlqfwEzLBhdZ0uD4ZW9O20ES44KK20vhIaL/t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf2QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnnA/+NwLU5tAZJbxo1PUyjj87RM3TdotJfM/+6Oa9dKteiITCJNbX\r\n6qE5nclJs3xIkayILyL4kAsdx7Hbft3zN/eCLz/Rahs2N8+9HYgGV/gIm0sE\r\nEJbBdvhh1iyaCj6v1ELyM6+FiCQHr+GakjPf7UQ6V7Oka/i8w5yv2miQ9tNS\r\nzOR3NgdrXHJmv/S5Sri/dnIibioqrAhRjp7aeU5YyWW4HU9DB5fmJ+//t9VH\r\nZlD3nvzb3utM2a6EzfrCtXxEIPgKmQor+wTLbKw5MgVHci5YSGDRk2as5uCo\r\n+AH8KcOWsd7Q0IH0cwT8kzcUzz/4lmMWALl7eUOVYebWExGJ62sqkHLFkzOR\r\nMviTVNv0xcbTFYSZN7q4SPBlEZD9b/U+zaH+KCsFg1yVpmbuYMlSK4lPrt3g\r\nvIghqbItdo/mPBcu593YhVGUdVHbkvJZ1GqCZ9641VMG8zGr4IZud7aXVQ46\r\njC9SEwESiceTq7ot9vJmWXwWJzqlsbFZTdR3UE3NwHIiJWaVgUo4OtwtWWEG\r\n6KueNnnmo1kP2p2lS7lrgKWZVtFZ9Q6y4POH48AAOedGTcvhy5PLZzw3Y9vo\r\nVf7R4fa9Cx5sb0tKdIeauORtBrTuqPBsDuSjir7zJcESv46DpeE0UNj3HQ7v\r\n4YJdsWSmHV+vL421jclRbWtWkmbdzZNiMBc=\r\n=uZ7t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"35662ba23c37e102fa09f72d61e38e5ce3b10881","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f43e0ceb5.0","@material/base":"15.0.0-canary.f43e0ceb5.0","@material/shape":"15.0.0-canary.f43e0ceb5.0","@material/theme":"15.0.0-canary.f43e0ceb5.0","@material/floating-label":"15.0.0-canary.f43e0ceb5.0","@material/feature-targeting":"15.0.0-canary.f43e0ceb5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.f43e0ceb5.0_1671036303888_0.20751720798214568","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/notched-outline","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.34767110.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9163cd6b16b945508ec7b210876f2841464a115","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.34767110.0.tgz","fileCount":33,"integrity":"sha512-w7/V6R/mZadESKTjWi98s0TWiF0TSeNG3R4LenrSxgXmiQKtCN/T4Y5ETDD23PZFY3aWSUVLnK2qcxq0xgwmpg==","signatures":[{"sig":"MEYCIQCxCSXGcKvhlTTNcgCMwA2azpNS7rM7M6UiHIfDEUE5XQIhAPFfdk65Nm7EUoGc1E4qX6fzjiKK0RTnnbQEckw+C1x4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgYfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSPA//VmzXl+288uXSAnfIx+PQj4pwvr2gghMImTs+EQk3nubLxaHy\r\nFcJ51Tp95j3JFpDifrnV8lwWmHkF5C0M2QaU5fRJA256nsVBHcMcUSt12Vtt\r\nZtIl1RjKV9QhhcasYd8Nqeo9YJM2p4Hx+5hrNt6fcI8I5kZdfFhjBkiPQ6Te\r\n26A7jfnXm+E8bEoNztMechZarjvFvY8ItTJAZSdFqmNnIuphmer9XWs+epYO\r\nb+89j/Eyc0ZYdRe7qT2oJPr10aNIUxzA7H0RsTYT7ZidB6ddM3tCjm3ZQRGz\r\nxJxFx7jyX333W2mlu2Sa3g/A/2qotjscULoWximpVYIzbRzHb9M/bA/BFGtt\r\nsw86uvHttDmGXEyTX1LciBwelcJ7U9MlgwwPlqdyamOIuYenP62eJxa+As9J\r\nB2IGeT5pWNVfLmLusoO3mWa3rtM1YKoAJmHX2WBWMluYzVAL2lk5FAa3fu1E\r\nuOsMBnNpPdHR9m2c4tttFdzwLT36lwTw7MYyCbmy5zD923OBWLtgclQUtUIv\r\ns1FljVxNdaqP2KhDWWXftUKOkNcV2g/EzHgef/xdgisw1cgyWX8vrEPn2ugc\r\nFTamRQZ0+IBTBO8SmrICYAgzUemsekJpyqnyiauTwy8zK6s0QorCxuZ1b4OU\r\nXsyk9cKXtNzmzQvzH6nOl18wkNKIX0Pz0T4=\r\n=idix\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ed8adbbccdff96503e43dbe6291e95b5d2bca2c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.034767110.0","@material/base":"15.0.0-canary.034767110.0","@material/shape":"15.0.0-canary.034767110.0","@material/theme":"15.0.0-canary.034767110.0","@material/floating-label":"15.0.0-canary.034767110.0","@material/feature-targeting":"15.0.0-canary.034767110.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.34767110.0_1671038495491_0.37884389215853975","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/notched-outline","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.1f99f3c50.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19db19506288f0d5e02de1f78b231f762ed9221a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.1f99f3c50.0.tgz","fileCount":33,"integrity":"sha512-aKaLUFlVnYqN7zHTm0lmySrCWSEnfLeBpPk9zZh+exAS3QRty6CQObRQSl9goqyNxNGZg8HDoCKztnRj8fV3qw==","signatures":[{"sig":"MEUCIC7gOxE1ocKXSExR0u8vXMiRl9CsatCZVz+czrnVtbkKAiEAuc14vEFRyABVCnw1UQPU86xbYfZBfqRZmNo3oCs1h4s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy5rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6JA/+PhJJk7DgisvNUW8w9D4u75mV2UTDxp+4BTpHETT28TVCWuyk\r\nQoywDVc1yUKmaTFPS0LR6362+y797XaKDVVdqe/wPCw2VkdwLsXcIxHGj4//\r\nCVmrU7PdbweiAZixLLCJd6my25B75JsBhFu5aLO58JuaoX8Fq/0rwqshrQlf\r\nmBQY5NItz1mqtEl16kzeHsAXm8UCaWp3KMq8eRhphkWtq0ujjkUZgh2wNSd7\r\n+w0ywq76VVxwHZ9rbfTJIONykk3lPPUID3d/ZioOrSKGbWBJegVPRvos0gfV\r\nRTkgcZRyN2Ow7JBk7yiLrsbe4xIyFI1v48LY2TmfaSKCOXyAqfCXbVFDer+G\r\neBswQA9DTShxxEnIR8Ugp7MOBYHK6cXeC/d1qxgSzMEfqrol5c1FmvFVB6kk\r\nC6HHvKIry/Pr8+YpwquxFkfFcZtgEsUEHQko+caP1hy3E7rNTdWUQyKbyV/T\r\nvF4KKRmWHMbquxxt7wBPC18r0EELt1i4f2grlRo6dr+BUJPOEAbh9WJDQhcD\r\nULJcR3g6tZKJBTJHgmV49j8Z6XsslDvd6I4BlKD48WGjqJ49VsiZsci4MMAR\r\n1AJb6reJyo/XuQJGzwaq6B2kXwCeyN7aWDHnuXL7eA8p4Bv0IM6PUcETM5qd\r\nVwXMdF1xyb9miTUdGgNSvd53JhT84hf2Cv0=\r\n=2XuL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c9094e8faca1eaab158d26f7ca8ee4b42fb54bdb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1f99f3c50.0","@material/base":"15.0.0-canary.1f99f3c50.0","@material/shape":"15.0.0-canary.1f99f3c50.0","@material/theme":"15.0.0-canary.1f99f3c50.0","@material/floating-label":"15.0.0-canary.1f99f3c50.0","@material/feature-targeting":"15.0.0-canary.1f99f3c50.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.1f99f3c50.0_1671114347164_0.7237373520939276","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/notched-outline","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.cfd69490f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88dcdb71d6126a2fe1e3f5c61593d5ac820c6195","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.cfd69490f.0.tgz","fileCount":33,"integrity":"sha512-93uoAHYGAQEZE0p6WJseknZiGnMSWd1egh+W1EZiRZlHC7Jrz6driUAolDhvEwcWgsBbAHecqhhb674qgV1dxg==","signatures":[{"sig":"MEYCIQCxSVl//5aRmjOE4dzuDnNAwsupn1Om3JPIW3tdePV1uQIhAPPJySWZ8NMPzrrFYJ/iFtNolLahPKfd+lT34w5/yII9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNBNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRDQ/+KnpMJRZybjik4uAllIk+5j4V+I/ixugX50xtS3E8hDucZLsu\r\ne6k72Nh5e/kPCsI5BpaPCdJE5cS6M5U16UU0XfIRiULffAdFIqhuf9gy1WHH\r\nHvM37LJ3c/wlO51i87GG9VAeWCCmcNlhAlZelXLTKYjUw+8Rron6dHd3BN44\r\neHgsTZlCkdI1r98gBv3Od8iYgvOFJNZ0XK78QgGSthGfJe95EOSn3WKeUp7E\r\nZ9ZsLbVIu0gjpNtKFqqaT0GaEAGoOIMbcs85D+CUDxwffA2sDv3XhZcGYk5O\r\nK8EGZt4Jdh+0VJk5gbyMUixDjrXrajUSBBRIFx/4aZtAmadh+KxOsRu2VP9O\r\ntdZnRt2CxE26Ah0VHlXtZZVTVG4Cs4POrV/qUJKZ5rghMdxqk9tCK0KZElkT\r\n6C2YWFleCjddAXDf5lnC3RBg4GEE0fk20Ga8sS9HKrGnFEW0SwqwEWW4Ygcm\r\njgc3cRMLyPrG3v9+FWszbStnTEX3HwjlRYTE7COfFE8Y6iZ/gdoSPAWThRY0\r\nzUny0VIV3kWwLvmv1iwRxgX1EPLN1u7hWnUdoAfVD/xFx0hEldew1b2Pkb4q\r\nXXJynh7E5gIAZOcD77D96+o5DFtfVEMlhIHpy8wQAq5C7qlQDbFftE+QtpBo\r\n8U4iI3AYXzilUIKkC6PdtbigZ90iu0oGr1Y=\r\n=akki\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a7b9218e1ea7572b08b54629159e6f3a98970096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cfd69490f.0","@material/base":"15.0.0-canary.cfd69490f.0","@material/shape":"15.0.0-canary.cfd69490f.0","@material/theme":"15.0.0-canary.cfd69490f.0","@material/floating-label":"15.0.0-canary.cfd69490f.0","@material/feature-targeting":"15.0.0-canary.cfd69490f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.cfd69490f.0_1671221325271_0.30517024672538606","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/notched-outline","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.94ad8d986.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4ea4d12255ea305f0de04e5f5517ede4982009a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.94ad8d986.0.tgz","fileCount":33,"integrity":"sha512-xdd/6pccRoj45fKutYfAt5lEcNlC3/pRlPiQXRc0qGrI0Y4kY6VgC5GJl6UmPf4/j503mWtfZdwwD2X7D+ZeZQ==","signatures":[{"sig":"MEUCIQD9m2TDpo6akcHow6Dsoov6LAKAtTOhwBvfZPID/0hgWQIgPYLIvZC/Ycsze7885v6hBA9Bztj76tlbeCQsV88yj64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLsXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIPBAAiZ1NSxfhmPMdWuFgQRTR6wQjfdN/Xgc9JeW4q07uKwj1BWgh\r\nYDOnPo3S7amZDmIZX1ODuq2l9B59UEKTVvRVlXPInGX28X3FzGgkZHUSHR0E\r\n3T/Js4IXOBJY7D+meu1zYC8Nw3JrTZRFxBpB/pbDXCbQYXe/N+SuPIqUjdoX\r\n16LP0jBryUd30Fs/oaRL6mwmw4QAPmDvuI1B5SzhjUnA7uiZMqjpQkaEbBKt\r\niINYIbaeHxYFbEwsY5rQvWJNgTVZX38pSPDe5SQY810p3Ein9h64rzad6QtM\r\nLZAiMMhODspne487vkDMJNR7sO6e4xb5tvMVRDbLsSQKULyVpwn8s5Obl0WS\r\nEFv93hg4Cv5R/tEco2tBuXrtDeoBiHi6dyX0jdwtg1dy560YfOkb3fQ1sl5F\r\nPoejJWS0FJSUwN4omoMR3B0IoWaWSLdF4PdS2Y/5/A4o6pw/u69DeYw52ebF\r\ns0ZJ0bsPGRwhNf3YXC3MnAHGeNwvlFtxBNEZjGJYLvqgM7u6/alLTM+oo1u7\r\ni5gPFiAw+8wapTGBsfbiHoMtVTrTy5Fz7TZolIoO8dT8r7M4PEiwZOH/wz/J\r\nJ1u1mAxcB3dQOhNzGp89tXFO6PUxZJkcsR3/Zj4+C6Apkb3emnlsjVZ2wcLT\r\nw9fWpejOUthEAU/ObkzkTDOfR0RMRiNHwtE=\r\n=vq6y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8e8a69afb313ffa8badca57ca15ad4a464b9f718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.94ad8d986.0","@material/base":"15.0.0-canary.94ad8d986.0","@material/shape":"15.0.0-canary.94ad8d986.0","@material/theme":"15.0.0-canary.94ad8d986.0","@material/floating-label":"15.0.0-canary.94ad8d986.0","@material/feature-targeting":"15.0.0-canary.94ad8d986.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.94ad8d986.0_1671478039297_0.243620243328323","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/notched-outline","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.604264203.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23aec4da1ba69c13e2352c16918a6c7d5527d24d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.604264203.0.tgz","fileCount":33,"integrity":"sha512-vtAE6p0W1XOmG5fEBU67rTi2LAtptSB7YEarvYsHVWp+vTyivXEXuOETn+VPx2wGlnu81TFtr+Gttwktmt83Kg==","signatures":[{"sig":"MEYCIQC/hkxEe6czCq84zrafpEYS0DslvqYx0Ep5QBGfP2kgKgIhAImIXqlaPhj87YSxwNEOghSWOwfofU7Kys65jY5+yRC4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo31rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLMQ/+LFBQ4irIknmE7IXrFl0EbtyI/rPBzTsLpTgNZ+Vv91GlvPzK\r\n2f1ZhvQR3kwWuorErsMOPIrI9aw0FLDJpY5FaRfNcy4aTiYONtoXNjrnnRFu\r\nuDulCzEpL8A+T7Nuivq4zP9Kcgapd9U7v+F/kZFvH8CpHuRbFdrQqRXJSgDz\r\nNBEYBORPp+dhQUGtojdRkWe3TfBFUeHLnzcQZXSMqlmYeP8gKTlwgt855d7H\r\nNybd4i4Bfza8FerTtxRzeKUQ4O3P98ZCx09gKSS450mgX6i3IFljdFIbNkFm\r\nFxZSD7RYN9RlBNifNChMHej7q5fjdZh/ddz0Fy0ODKyQ0L0y1bPnbaY+uTGQ\r\nwJhn4TRjkwEKd/OY489NbOu9hrYMYaH5iXvHtPigbgB2RAtaiUIqo565qcaz\r\noIJoP3aHcmcnfX83bVg4SlMJqPJJjmxC7b0wazpnoaHeGX2IY1ncJwIjqarc\r\n+RSihKtcvJbm6nUR21h4YjyAIAu6saJPrwlj8dj9Khj5uUi86ypRWl4cniz8\r\nNdTE0Xy/HkdYBhTN9olwTd4wbdkk8Dm8QKAtGJVJim7Dj4416Nf4XvZefgOc\r\nuqhunqp8YBWaTTIB2qCCelLRZ55CQVd59INN81T/9NvquZV516uFB3OhJLX8\r\nC9FhF7OCCeBIGQSCcadtqRc2i/az+7iEQYw=\r\n=EoWP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e37bb80002397246ad3ebd1bf11a465b2eb763e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.604264203.0","@material/base":"15.0.0-canary.604264203.0","@material/shape":"15.0.0-canary.604264203.0","@material/theme":"15.0.0-canary.604264203.0","@material/floating-label":"15.0.0-canary.604264203.0","@material/feature-targeting":"15.0.0-canary.604264203.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.604264203.0_1671658859596_0.17871973831007848","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/notched-outline","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.85bcff6af.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b5abca01fb2472f81aa0349f341dbc87bd904d6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.85bcff6af.0.tgz","fileCount":33,"integrity":"sha512-JKogb+ZlWTIuFDQY5oweNMru7vMa/dVRF5LyzxoL1Apykj2VskP+L6EaE9QLBtwiRedMLZYzL+tIZTtTG/osdA==","signatures":[{"sig":"MEYCIQCOXu/60FLe3BQiXwcmmxw8Ez80kGyhBgLBUEo8i3E6pwIhAO9Qya/+PacsNuUwpGTqJubh352wlFhlr7uXhMOEOMIi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDCdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraUg//dxCo+IuixhMXwGLPJ3z0jPUfQ7igdV7rVkO4hWqlTJsa+nb/\r\nXrtKNb6PdUE4ioZAMpc3usq/VTBvlTRG24wL/i7E1biXDjcXaepHnWGK0733\r\nphZah3xXighHUjNeGv9X8KYygp7cszMIG5WO3hPjyxdquZSAnLwKEt4J66e2\r\neVFvLslHLVI0Z/rubEFeKe0C3gTGO52SVcEH+E8fJmGqzeEmkZywb+RnDyhX\r\nFYfEdk4oOs0HRSEdvxpPbnbnEQtq8ojP10vurcdiE312YBYL5KLX/y8mATRG\r\nGP3ykgZIWibJ6m8ITVvOJOV9BMsF2xH/iz0o+O6bvpjAsid8v5Rue/Pc4P2Y\r\n1/e4PSC6wukYKCi1LLORJq6C+7vMykdz99pu0Q9GRSmf21VVRDUYHRpVdBd0\r\nGxMMrGKdgU+D7cozyvGtmQTxcjHURvaNQK27kj0lHRZDZRCQ5NFx3UAOZAoV\r\nUs8dSqtoqghYAVUJYiRARKwA95m7nqkOsoxXtbgtfV02Gqkj49P0OiPgdVdT\r\n46Bgg4qSPe18GegNRxa6iK7nbkIQDzD+bGo2aX73oxHLNhvqXdQes5k4rv7C\r\nkyTPwUtMpF7+eCemlVCsMrYGliWVXKMScjKrYqlOcsFcFMyEU5e+LH19ZbEc\r\n+qsaeNI2Z1FatB5HniFA2YPigV9vEWGgfik=\r\n=OkW+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ccd1f76fc7f93266cd894275969c05a833a002b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.85bcff6af.0","@material/base":"15.0.0-canary.85bcff6af.0","@material/shape":"15.0.0-canary.85bcff6af.0","@material/theme":"15.0.0-canary.85bcff6af.0","@material/floating-label":"15.0.0-canary.85bcff6af.0","@material/feature-targeting":"15.0.0-canary.85bcff6af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.85bcff6af.0_1671704733027_0.67783279878353","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/notched-outline","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.ece3e8d21.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9486b425f21895747b47335e52afde08a6b4fe3f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.ece3e8d21.0.tgz","fileCount":33,"integrity":"sha512-1+uQJ7rlVgPx8ACRf40TAnE8/tOWAube+3uwyrbxOXneDuIann068gZgihjPmtSn4p3BZ0jry0kKWqyJ3PVjkg==","signatures":[{"sig":"MEYCIQCbWxePUbXk2SzajzSRFjmPhhR7aVQRKoDz8yh5MPLpGQIhAL9XLDonvKa6tTTkDQTlpCg6uRUsuscRcW8i1rVwZgQa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpI/8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqV2A//eFrTNV6SNPNAGmkW5iZVTDP1crqtCKHoHH03cfPZkkpy34D3\r\nLSh6uoYRmBSRMY9mky4ZbSOvqXSBj5NHRQMrnISutGFV+h+RFthvdjdN//yW\r\nboB9Sf3/aC9uZVMckmBhsqk82NJ9S0kPlUKVTNW7SDrn81k2Yrluvhxxvquh\r\n1WU4uLm3jUeR017onrEtA5JTd91/BNpv7e6rLsDKZS40YqEm7DXt0g48CKO8\r\nM6Jzpp7iAO+Ok1SE+ihcqe7dYejdA/6Hzzxuqlf2cWMq96N/Q+T22AiO2FlN\r\nXsBGri9mdjeFomZ8M1+OpCgKPRCwLQFNt89iWEMm+T6ySrv/VjQZM8g04suD\r\nKsP8V5QFL5T8DNZIoBt7IRJQqK6lYxmB4HNr3ao3MyzW3yD/DetDvYfaE+6O\r\n+Ayp/zJCUCtcvtqQjZVJ96J4eaKaqNPjRpYSVEKph3kIsMHhmEZIfQGF86O4\r\nEbMqd9+5YUuUGHY1PUR4NP9RcP1v34eQ3loxn6npsmrcTj2pj2xpyAnOdA5Q\r\nZ4yG37y6ivGXJAIQmmR+iDJj85OcCwq5nVeMc8xygxwfOEqmS1+6XGP189/v\r\nxzmj1zUul0rmI9RgE4jK7ydlMkkXkLw5aj3GZcYivir65PEm96c9iW16MlEl\r\n0qC37gZHH9YKHMPqmQK63a4vCH4yKYLdt1E=\r\n=s5YT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1a4efd7042befb584384fcbb35f1ca445adaf1d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ece3e8d21.0","@material/base":"15.0.0-canary.ece3e8d21.0","@material/shape":"15.0.0-canary.ece3e8d21.0","@material/theme":"15.0.0-canary.ece3e8d21.0","@material/floating-label":"15.0.0-canary.ece3e8d21.0","@material/feature-targeting":"15.0.0-canary.ece3e8d21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.ece3e8d21.0_1671729147781_0.7685982374093747","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/notched-outline","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.278ad53d1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2de4fb0feab80524533493526750b990eec1b82e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.278ad53d1.0.tgz","fileCount":33,"integrity":"sha512-C56K269B4lirROMDupz4Y0vSS6Aa1KGoldbNiLDVguXiEanTFB6UFQ6HVS3apBGf8GFbxtVj7Dh4bP6oL2ytdQ==","signatures":[{"sig":"MEUCIGA0jY5EajFL9pTRRbh+HE2Mhvgl5AYz7AAiub/O+JMVAiEA5HI56utVG8tNGy6/wZYwy2p43gw4+4Eah+VjfOk6gMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyXLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrV8w//bGJ4pTHk6PNNJDLAAZF30G2SyQyb1xjDu+AEA+KNsehHnHxN\r\ncxNF4N9cETbgiKRAJ/eajRSjLgoVDyZ/G51nfCfeNFX06sx6jUoBe9aZfvZx\r\nLLsJUJ4xZPdBA/wIhQu0OuPTPcYHjElGa3fHLlOkzp/0z6U0bD2prtJgfW4l\r\nvjBx+KC3Bobga888t4JpniGlwGe4C2ooW1zL1+K3vT1fOmu4MEYexgmrXBaT\r\njuw2weW6R0tGVKyWO9t+Lx4okYMgpmAwdUob69sS8jvIFEuOYFpRTYcxt0Lw\r\nuE/NgJdJ13OCRHzDSlUhfJsOJK3SgJH/xurur94m1+hjPs/C63EuiM3h/mbF\r\nFz0R7zFj9f4jBPUfNEiz9T5TxYJJyQU1DU07LkX78GR3WTmq7+fS3VAH4BF3\r\nS1yD/2ITM9PrwLL7M1Wkl4l1p0WCMyc5FhSSdEfgCt3zERY6Gh7N1WMCqpsg\r\n3KK6J5tjUC6nRcmAZzUqqKlH07k78dPhihPOeLQJBt/osb8iO+yfTOzFwfFB\r\nYir1/ZXoCndiIj1hLa2v9GxdmAchk7CgsrOvaI/V8xvguu2elAwm9D1g5xOj\r\nQbc/vv2gghwgruzmRa7TTOmWD+6aIj7qV/fqC9PuaSumD6PJJAcR2U9OX9BQ\r\nB8gLOyW3hyMKuFzcr8C58SyzNiVHOfawUGU=\r\n=nSDq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"967cf83d2b9fa8a3e6bd992aa107c66182e0c65b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.278ad53d1.0","@material/base":"15.0.0-canary.278ad53d1.0","@material/shape":"15.0.0-canary.278ad53d1.0","@material/theme":"15.0.0-canary.278ad53d1.0","@material/floating-label":"15.0.0-canary.278ad53d1.0","@material/feature-targeting":"15.0.0-canary.278ad53d1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.278ad53d1.0_1672160715380_0.7289865465015481","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a7d8389e1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af148764710b2078eaf862b6ee1de8b8a34f9729","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a7d8389e1.0.tgz","fileCount":33,"integrity":"sha512-m0nvfeGofUbtRBjb9F6qXU7+VwMA3JZzyz/c0eJzrinc3VGnYJhJHFdRX07x3uvMT1pfE9Cfrrlk3vAi5qxrwg==","signatures":[{"sig":"MEQCIBJcsnPWavAzMC9izqVhUQf1tdYg9tndAngyFgsZde1bAiAJJbdaEPxcsNCR9lTBajxw6L4cYjNrFFRjuf3Y1aypeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0GiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrU7Q/+MuyAYKtZD9SCAY7Qe/glir/8MDZp6nQWHMgFGxFZjIOImDpr\r\nKt1SdVttXVnvYDmMZwl8RFTj8eCDxQ9YBLSc/LhfLVTDsdXO0vk0pdkp2c+G\r\nXiGp0wYxvbcQY33lUEXpW3thVew7ACeOmWKKo7ORq8GvTtzeX3LvQ9mcr/s6\r\nf+jCbXLAF2Wae6u+fRB4CRYN/kfYf/mb8pW4a6q/yM8SJKGHwRNDYyKfFcF7\r\n8MNfg/yFIrBibYEZPkxqpNUj6MRXUeyCebKCgtL+NxiLR8EhixDji1oGBTqr\r\n5uPykY/gTnLyjs5lz0Uw5EBbUph/P/X86BmGiKOrfNunY1R9XV2of28X+dIn\r\nBNv+EOI32SIn1f6DPcj8UkpLfJ4WuquCf83mcRVZO3P/81Q785O29dyUqlh5\r\n1Mq0VI6weFLP8QIbZL7PuEnu/gWPiEcTyRitAYav1gR+3ds4GZpcAMjFgylu\r\nmMirethoEu10YLTkWMSbO6veg7s1fkh8zRnr7j16o9cIiemW9pMkCIMcLtpg\r\nFLh7xm2rI9YgnMyPwrkovBPrlvGLxvPUvga/ewXWJ7uv1s27GiQVFCFqHeg1\r\n17ePe2dQC0C5niamFbj8fKgbsE2jt1YtDLZssx/nONC9rDhnbPDffe2PWD/v\r\neI29IhfTf8G20SyTQhqdw/6AzYN5JrhSPpc=\r\n=RS8o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f9b27084bc44ecd4530cd2252389b0dd8116709e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a7d8389e1.0","@material/base":"15.0.0-canary.a7d8389e1.0","@material/shape":"15.0.0-canary.a7d8389e1.0","@material/theme":"15.0.0-canary.a7d8389e1.0","@material/floating-label":"15.0.0-canary.a7d8389e1.0","@material/feature-targeting":"15.0.0-canary.a7d8389e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a7d8389e1.0_1672167842311_0.9444678518787772","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/notched-outline","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.8175d5eff.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2da3cd519ae6ce791f9f08e8dc82671eb333444","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.8175d5eff.0.tgz","fileCount":33,"integrity":"sha512-EkY57l1U/q2D9JEbBh20KDgGzaJWYSAmGn+bct73JdcaVdnaSZll0s3YOZAfDcH6y5AH6pQDcgC1hZBhivyR5A==","signatures":[{"sig":"MEUCIDOHgL/d2vb/RRVs7gY7eHBRRA+WV2zx4VQjj+1nBGvBAiEA+n3u4n8KFDFrQ+EZIjh1c/DuvVnHqtgdqKtKMvNTJuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6E7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2xhAAhG2kbhSxINnDrha0kIA+xa/EY6dbxtbaHbRFaA2HNrKHDbTg\r\nexo2Pmjit8M/41jHvxHMvcPit+ZVOnj07aJ/GEZjyyvRlwlx+VxVn9HLpE6D\r\nqfSen2Y3si/hajj3GtcCf0jQowg+cI0sPi+LVp1u9bkEHuLme0Q3SeRlWkO0\r\nGmI5a5InLpI22ayMls6sX6gJPPSHcSQIOQ/U3pMSGL9vt+a+FB8fUc8Mn6Rt\r\nLIvrhN9Ubaed7eSyJ4p00ofi69jdST+1fxFm4fZ7wqCpvhdapTwufyvyHWj3\r\nyA63hwmYMol7aP8sSl57K7+X+785IO28HMIcTlWMYQiS+8dvKy/2gjqCaBzY\r\nq+wBBRK0JiXNFLHNTzc+llAYyk9lKMByg6duV1Tx/aHPxrLxp9e1p2yl7OPq\r\nj0VYI7d2ja2x7ySTQA/3hDXTf3XWdV5ZAI0TUaXbQE46ONfCryUmDQudnwkp\r\n9+LwXwm8btQjfsAHL4GsK71zsnw79egRJuWpaZdGgRdeJLI4HMTmh3lJ6bDI\r\n4yOX+1vK2JqvzETbE0vFs45gM2pyTaT0MLMuOn47Y4BCPZAK9AoU/GZNeMvK\r\nxQ+XIda5JLOhXJYkrgdSsR0HgEPYZt5IHX7vUt7FWpT64NUZWU5UUWn/SBi/\r\nl2fsRExaVHWKZ7zQ0RFlldUO1ftM0w4vWS0=\r\n=eNps\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c3bb551a6b32480853dcc8e29f7f8513d62154a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8175d5eff.0","@material/base":"15.0.0-canary.8175d5eff.0","@material/shape":"15.0.0-canary.8175d5eff.0","@material/theme":"15.0.0-canary.8175d5eff.0","@material/floating-label":"15.0.0-canary.8175d5eff.0","@material/feature-targeting":"15.0.0-canary.8175d5eff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.8175d5eff.0_1672192315729_0.8870728350502493","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/notched-outline","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.e21dcb86d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe0a978f890affbe47d1879e2abe1327efaeda41","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.e21dcb86d.0.tgz","fileCount":33,"integrity":"sha512-ggbk9Lxza5hrsmp6VYXYMnE8ytBjZp3GsWArMeAPgNHXKplg+2G+uUgTZdcdiHULUo5v/mJKaKSZvaOyqqXe+A==","signatures":[{"sig":"MEYCIQCHk2Pw6hRbN/MXKcANHh20PbfK8V/OyL47bkcAxDkHawIhAL+rWvPZe5P3JjrW82NmjQCz3RahlzuqWJr7AqLcJWjC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ3wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQ7w//d7P4w+LxQjGYHGzIAtsfsSCmtVfF1vM1qV2vz0YRfGyBTl50\r\nFsqmWs+av7rfUWN4uEF4RVsNPYS384n0DTKybkIYFyJbVdL/LwNDzvXbSs0x\r\nCTR4Fyw4oSOuTSKANEGRHOYMBmIFPWavYA3kYLAqrxngUri5+dWzk53srGvr\r\nUwqjf8BrGuhclZJ3o+i50W+3UjL8dO45Z+X8mAm1R7/47Ca2doawpQjrVQ0T\r\npORg6IC91LTNoyI7GO/KJ5qNXw/y6klZrkMaT4oy+9qDMYgBE+jF2TpAvT1d\r\nXUrQ4ZaMg+DfUvzO80A4fc2VPg43Oa83ngAfaP/PR+llkleAWoZ/gDu5t+/n\r\ndlp0r272lA1q7iL/LMKymZKcfn2zgW7pqWWKLzd8mTaO4d4lN9ULMsuLz5Ul\r\nG+qmxBZhA9Wx5URATxI9A9mo8kPuVeQufvL1gOjkDJhvej8rU7f+CCZVdv+N\r\n2W4a4oIg65u9ETnnZKwE+OgHvbFifpKqID4GKU1wykVJZhZKuM848fEVzLju\r\nx/cJRVDmPy4e9JXpMCZ+c6mTtEIIDUE1ekMbCkyMvDaLfo3iEbaUBz+fhuPi\r\nmXHINhWMkaFViXTS4B4pZtThhbBYWFAVISZRP4W3BuTMkHIQ+LmopWBz+ndr\r\nAOU0X1fxXe8Ezr20qJGrkJf1Q+3qzititkc=\r\n=0waP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a32b4ac6d2bad60870533296fbc4acf050735b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e21dcb86d.0","@material/base":"15.0.0-canary.e21dcb86d.0","@material/shape":"15.0.0-canary.e21dcb86d.0","@material/theme":"15.0.0-canary.e21dcb86d.0","@material/floating-label":"15.0.0-canary.e21dcb86d.0","@material/feature-targeting":"15.0.0-canary.e21dcb86d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.e21dcb86d.0_1672322543923_0.5603844324764804","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/notched-outline","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.20ab6f5a8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"debaeb34331517e4a163f2a994a749f63a6e4070","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":33,"integrity":"sha512-del6H7DvhXeBoqHF5lmnn1TtzBjMA984BrKoGYptbNuJ/SLah/8ymmyeiBQU+KJJRkpb60Ml/6m1tAfvchb3vw==","signatures":[{"sig":"MEYCIQCAmGDgzS4PCOORvEt4hf47JtAiOy1fBv1sihVgO73ucQIhAMA9pCnUdgwUkepUxyLAgi2l9JiU4j4aEJ17SOGNrPAE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre1YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5bA/+IzOW+F8VFuZZ7TtK5cBEZpL8CBPOB78nJidCuaduzAKBL1EA\r\n8ZR5a6LDO3Llv2xk3o3uaiG+7K7gtqaR5Kdz0OKWxFWKhd1dgLvaahV2UAHj\r\na2bxW1NnC3D/BdmKmR4nzog6+L7DyvWor3nDKchCp5rkRgOspaDhyRkmPFIH\r\nvomstmgFd+Qhb9BW6hlI2ZVpgqW+kV119U2GLK/K9EiYK5ntNSbyJ5vusR7r\r\nZaRWSb5WjKmhXE2zh43EH3mHmeSSWx+9hFpNjlWcgHQuz8bbGs2SrX+m7jDc\r\nX8OkmmxWCwFaatAl65SVc8eZGbuyQ/A3CcAsv5YOaZxxS7q0f/Rs5RUCf6WV\r\njI1g8ytll1jm6DkzukTzITMBtCcjgNehNCB5XtN4imp5xTJkceN976MHmU75\r\nqZVMzJFpzFwLPRx7H3mnDLLs9K15VraNi4+dA4VX8sAK3wV60xlN5Sf4ViKV\r\n9VAW9PRFYbkS+17E1TQiyy6Gkd0kmQrIHm/10PVF/QW7pPueC0Y6MqayiA/2\r\nRlHZ31+7WG+1QAhikQBFMB0jbzZhe5viL3irLTWzh08srPvvLd+CSeK/2uoC\r\nJ4r3bUneVfm1EjgcMEwGONV1otIHh8tfUT65qVMT8oPnL7B7I9LLPKCsGgE7\r\nvp+p4qa2ItF9uYKJqfmtZxZiLRGjaHZ8yJU=\r\n=7gLI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"abf2135af6e71ea44b6e6a4de17493e5923f7255","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.20ab6f5a8.0","@material/base":"15.0.0-canary.20ab6f5a8.0","@material/shape":"15.0.0-canary.20ab6f5a8.0","@material/theme":"15.0.0-canary.20ab6f5a8.0","@material/floating-label":"15.0.0-canary.20ab6f5a8.0","@material/feature-targeting":"15.0.0-canary.20ab6f5a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.20ab6f5a8.0_1672342872083_0.1445595435868241","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b9806f623.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a58480a85c1f3978d8bf6b034f5fd382edbb7a8d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b9806f623.0.tgz","fileCount":33,"integrity":"sha512-JJmTFDLTkBZYeCRGPZiE2B7QReFhsSQExq5P54X+BQvG+9mYh/5vgW16B79yD4hWgJfma1X8P8/eSHE5M5h95w==","signatures":[{"sig":"MEUCIQCwXxbh/+52Ejj9z2JwmgdZ8kUpGP7bn4lBxQZREkgOSAIgGTkBb5D5jIppS2atWoJfYdxEpI3shMIhQcQossCohSA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh1cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotGBAAk6IIm14fOt+TOqHuj4uwboxH77Vz70L/Bwp6Y69cwdG3KpDI\r\nBpoCjdxBxiCE46zIF6qZmwm9kYmxFlV9GF8lVawqqx36R4VytvUfbzl762Pu\r\n5yRA835bXgxobng0jbumW2nDTUB3Pam2In2jIgafqTCG2bfge5IR6LzGLJzp\r\nuZ0Lwf8IRlzLDcDf2vGwhK7sVmvjiAXh03n71QK68tk5o9eM4L1zpO1SxXiB\r\nZiktUIAk56AJt88H4lnnTwf6++ggVvE5ubIFK+nNBwtY57Nv+Kuc8Jwa0p0a\r\nT2Wb+oWNzlwPplh2ARBpFXpPn0GeRj9Sep2TPGzX3g/boR56Tk1b/SN3CSGQ\r\nEnIKxaF6hL1m6Lb4mpztmn1jGdf3AFKpWVMEajBh3ibA6gXzOgplaefeoZt4\r\nphBBTBcurMWVHPg5JznGAhC9hE7hWJUWBhRSD8BctYBy/VMyXTCK5D884Brr\r\nnYc0XxyanDH/8g+AX09lJ7i6Wa/RxliMUi1+dx2rEZ7o7M6VQAOuUU3nc1u8\r\nyJAnVxPUXWM6QroEfb3nmkGUf7XYpSxR6sUsBnHqZMEgdNzppHWC9VySfXSo\r\n6+g7CAr+B8si1fyFiyXJej6UcFW5/A8jtGKs4iwD8Lk3pG5wmVof3jYV6dpC\r\nCgGoBB53E1Lkg8rFiJ4zIpr+mTn37reUgYc=\r\n=Mdho\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0eb4b8fcbfba4d68dffe3a2b5c7478e69e2e2eb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b9806f623.0","@material/base":"15.0.0-canary.b9806f623.0","@material/shape":"15.0.0-canary.b9806f623.0","@material/theme":"15.0.0-canary.b9806f623.0","@material/floating-label":"15.0.0-canary.b9806f623.0","@material/feature-targeting":"15.0.0-canary.b9806f623.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b9806f623.0_1672355164280_0.6596781728080889","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/notched-outline","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.50c9f550e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd09f5a72dbc93e5eb6f96c50c1043311b2b3ca9","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.50c9f550e.0.tgz","fileCount":33,"integrity":"sha512-i4O0m7JcRROJnWgogpmi1AKvowpF0XOmRfATYuhMvajiooty2/cVI2YKEOPN/InHuDH8Rd4SXea4MdB0gZW+AQ==","signatures":[{"sig":"MEUCIEVIWOx/jQtSV7caNtG1a2w1uMFmhWFvoufvXCEdZ99+AiEAtHJRsPP1oSo2c3x6HiNBY6/BjLkdqhvGHk13TaDjaKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE4pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQng/+IsskIVR8gl2PMpngwcESe+lY3EMeXP8dGWcDrTxqeYcedJ0R\r\nKk8+UHcriOxjn43Wa3vgiT/RquxbXRZ/xsMHpTgJjZA4hDYB7snbdfBRkJ7I\r\nQaibxHS4BfQGC0LZh4CQP/G6rxv+asVvucHETpfsd67pomKN3UOzs/u1S2EZ\r\ndss9fahp5bDgOxxbfYCdmguIqkWBELDf7HHyXXsBYlDKCkzqbRbPBkjvy8Vg\r\n9zhsL7ZdpElb30MsksTYgpR5fFKWCHuzjADkgDuOX48fYazoF3mLYL9DxRkQ\r\ngVHJWQTep+PJsZrKVcm6ucTyUptDLuKGmc2lDMRAO3eNS0s+sfkgLA+OZVzj\r\ny7AghBgiTeVs1FkxyZ0GqeuZajoly2fuEmbbBmWRR5yvn7EuayqrP9r9hfvD\r\nKgIMNpu/Cnd58vy5Oi4Nap73WlQWn+5dlLusd4eGJ6jmBIG4DZ9Dh2W7Yw9V\r\naTxz1ILB8OiuVR3g5WWwu79nfw+ddB/OF9V9e39siGq5WrNdiXcxi0i+43dz\r\nFCarkeytQD7IRNi9re0WsVf09cJLsnbB2YcgCjwEECncuypSC4uYFdXXmwtg\r\nwnOI8/1cdO7vXdm2CdbzFktED6LFvm34loXj/pU+Z27gw9pNLt+f50SrD3dk\r\n+WCI16WSw1+QtBuckHd+KuAXYuNt5U/qXkY=\r\n=d372\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d020b19d0ab5525ccca1f803a00e184efafb15e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.50c9f550e.0","@material/base":"15.0.0-canary.50c9f550e.0","@material/shape":"15.0.0-canary.50c9f550e.0","@material/theme":"15.0.0-canary.50c9f550e.0","@material/floating-label":"15.0.0-canary.50c9f550e.0","@material/feature-targeting":"15.0.0-canary.50c9f550e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.50c9f550e.0_1672760873095_0.9724216417722653","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/notched-outline","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.af490a848.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95987c8969d63883a1902f6d1e975b7a0e4a2011","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.af490a848.0.tgz","fileCount":33,"integrity":"sha512-9QO3OhRv1MXgPc7BlahWsNDmmHUOh94ijrv0VEt2ka86qsW0n9Odwm9czmYhug3KRnG/IuFqH+hve3cS7prGhg==","signatures":[{"sig":"MEQCICa9cEvgEf62+njfU/2DcdUDx+MVo3ejjhBFzCfCERpxAiBYjx6un/bLcwpdYtPjrGS30n6cXUJgcZomIfDBhl9gJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFBpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpA6BAAnmEzJODW9AeqOiuTi5skmj/oy1c8f4eF2sPVrj6gEF0+k4wy\r\nQ/o6LFVsTeYNLnifRzeYlsT7v93yY++GW3sOruHmnSJH06fv4O5HYV2rA4EQ\r\nsUsZbq8AE5a8kGTwj752M40UrYfKO1iQBR795Yhgad7KHwaRv8bSd3H2yZDA\r\nvxM7oKkz6RLTIM1Wq/6ldDInH+MBgj1VVXBfiQ8AAeRu815VihN45mCXtSNe\r\nkQu5Dzkm4WGTzus0K5gDJ/oJAwR3PXZraRMjyQuLeok4W1lPCCJZGZjxIJb4\r\naYIzui6GUo0aUjqaklSlc3/5sx6ME+Hw8IZxodkzTm1NrFl1D1x5Hvmuzbom\r\nnN+ICpEE4slDLgeIFdXebDGzkUmsBcD7qVhIS+WRjTBGwMZ1kC58X6HtYY7d\r\nhtORhghUHUNz3zTxR7qr38Fk9wI0K5yRiH45/FI0iHFXTXV69bKe/sP4gOSm\r\nMq3xbHi0sAm1MOR8XNofgfzQtScDLrAUIjGdKNaHdsQEh9oEdRlHSBth6lfk\r\nQkAtv+6F+jf6J3Vt1bpsXPYWV0QKOtHVQ0R/koAR0it/x9xcNZSCTvtuvje8\r\nEPYRZTFytN5P8Lb16StWxlwErKrAOztLo2i5cMTVy7vNZohvrVNsMwexZQOp\r\nte7O/leGDLM8Dyd8fnO6tc8iAch12NnHQwY=\r\n=n6Kn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"95f5499a3dea1763e53574fb3b884e8e45cc974e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.af490a848.0","@material/base":"15.0.0-canary.af490a848.0","@material/shape":"15.0.0-canary.af490a848.0","@material/theme":"15.0.0-canary.af490a848.0","@material/floating-label":"15.0.0-canary.af490a848.0","@material/feature-targeting":"15.0.0-canary.af490a848.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.af490a848.0_1672761449082_0.02054749935884259","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/notched-outline","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.7cf487c98.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfe82656d94f400408295b65f06b284d49da36d3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.7cf487c98.0.tgz","fileCount":33,"integrity":"sha512-UWto8TS9RzrBWWKzm6c21vGx6/VDjGpwU8hKgsZRnMUFwt/issHRGkcsJCFHL0dLP/+KgGi/laEzgmmefLd6gw==","signatures":[{"sig":"MEUCIQDxHlAdlQbwV7azDYEw5qL1daug3fa6HfwueeiFbaoBMQIgPoPDPquJja1umanOLDWijFHPrEMG08Giv3hdB5lpbU8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGgyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3aA//ZugO/RWPZ+pMl6ZqTsJSgF6sTDoC1EQX/GlLueFTIO5j5Fs/\r\nrtMmXFRGQGtb3eQ2496jqd/mPOHXc3vH9S6DN7fgdJYXWUiQGKFASHdc8FMe\r\nLn4e6D9hP/tjRlMYf2cPXUAUWJnzuOYAf6bdRhFLTDuYD3NaIpDDtF/ymq2c\r\nVsqKTfIjFq31/MqG43AjjTn87VtYAgLcod574/MqLn8assoSyfodzGQ/pHGn\r\nOva//PtS5d8L5/G5TUBGbwhyBglr5Z/+YUoAuqgUentLIcIEz1aaxyKqDQJP\r\nwb+H6lxPU14Rw8OoJQDDRJBtgfTBn8c/nWdpZmfjGaJP1E97UvlWL7HGNrcy\r\n7Bhwjwd3yHPUG213cOTh1PLxIkvUn/IgLvFmhQHmVSgCCZUPPaw7FfKW9U3j\r\npJQHAIpX8Y6QImn/FIknWNIEDd5bg644NF16FGtY9HYlVrXniIhr0EkGXFNh\r\njaneELIlbCtfwoQFsu7XgFplafCbAIiLasDhLHLHRL1yykcFsZ4zXPi5NKlK\r\nO8gJ46u05u2JV2pFyaCxoaMYUl/9P0ybe/4IDMQjO0EYXe1rbas8N6bpOa8S\r\neKlThKYLSS7mA5vwdHJClV6qQbuEkmkQGdNUZdVuycD8oCK6oGhBMBD5UDtf\r\nMlHbIQqQL88JY/x101VmarWZfSzBvHCOGOY=\r\n=6LCm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8d246270c785ca072651213aa63882309c7cd5ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7cf487c98.0","@material/base":"15.0.0-canary.7cf487c98.0","@material/shape":"15.0.0-canary.7cf487c98.0","@material/theme":"15.0.0-canary.7cf487c98.0","@material/floating-label":"15.0.0-canary.7cf487c98.0","@material/feature-targeting":"15.0.0-canary.7cf487c98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.7cf487c98.0_1672767538225_0.6950393424497874","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a52be2d5e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdbb7ec4e74be4f20f5ef5233587eb6a051e3751","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a52be2d5e.0.tgz","fileCount":33,"integrity":"sha512-Rren+ifmOeBPMcya1I7IzyzcdDYfxRxxUtq5aAiLmN+v3O6n3BZfxP65iu7nAQzDD7xvij4DhqkjstKmceqPBA==","signatures":[{"sig":"MEUCIAt/3W0th/U2EHKRT64Ri9bxViZgpjC5HhNpuIbM8zv/AiEArQm2VQ4OHgtiXJrDe+6YeFfAV5IMPSHm4R6VZCqwHzg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH5TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrK/A/8DZrXq9M6DnwwITqqmluQBMtESLV7SjVavX2PLRDim1KqMyP6\r\n9Xlqt3cIMm1qiUmWoZoTrCM2VXyXVgkdLeAKRX5buAJKo7zkc8vdFU6mSLAu\r\n0vH0s4fIm4G3hLE9q2clCLp7Dh+0V0TGjxyCxoQhnF+7dzKgRA/zmWQm/lat\r\nOUE90Af9AIrBl47vXX9cI36cFsyZoJGcb+Myx/MhhIntJrTwo9XB9oKv/02s\r\n6Xh1yrJzgY3LI0aM7ymM/M/j6kwqxFpB8PyL/aH9MoK9X9/oAr0fZhWRKg1n\r\nd7f1WdXDMfbkHbSUdSyoDaOJu6BWECmLHsyw1rvDX0LItdT7/7kSjvLaTwGp\r\nGJy60Gw4hCyE5IzQuRoSpQHFz8R6Z6sZKW46IO+g1qQkhmUZng6HABZiz0yk\r\nsCcbHT4XzgTlhzkacCfERb3lehRl5N2u+tRva+FZzk7JSByuj5HtJTS0/veQ\r\naUzy7wlPAIZdJW1Xmv5tfsK05kXciMx4hxEBFvQQle8egzj+L99hbn89b5bf\r\ngN1OSM0VUIHfDtgenyDLjJRjIf0DI3cZ3ddVSY4LACd8NgWOIgAiZVU2PAyx\r\nVEyyGVve2f5Ssy5RaVOl1JmZV0tVgR5TB14u6X2vKW/cMcxeK3mLZ47x/Cdk\r\nBuLIpRJE5Y/Kh1l3R5XZqDO89T2iE2mTiSk=\r\n=J5LN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6c2c2b2b16d0188fcfc620c5bd95622d34ab600e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a52be2d5e.0","@material/base":"15.0.0-canary.a52be2d5e.0","@material/shape":"15.0.0-canary.a52be2d5e.0","@material/theme":"15.0.0-canary.a52be2d5e.0","@material/floating-label":"15.0.0-canary.a52be2d5e.0","@material/feature-targeting":"15.0.0-canary.a52be2d5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a52be2d5e.0_1672773203130_0.31370069279083035","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/notched-outline","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.e38ba17c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61c901c4b79d37f042a74ac7de80286f87bc954c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.e38ba17c5.0.tgz","fileCount":33,"integrity":"sha512-oTNDDrTb3Gs5uZx+11Zq8u9F7K1kpYd6bafHnFI4fquu+lTxPvju7MtAnk0JV5TADtJSCLr65BBQ7eaAc0FHoA==","signatures":[{"sig":"MEUCIQDbjNyFX57KzXhE/IY3VDvFJQHxL00ct65rP020KYysFwIgBJmp4P8vLItolyQzzgaD3qdQlNoMasltABy3aP5n3mA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtK0LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSsw//RuDVO6xeoaOIIX48rwHnBLrwv7VTWKoSXySZ02hLmb6JrRnp\r\nRWEuMcmHrHnxO8jm05OfdgU/gYlhMXYffsUT+9XUqw8eAzdXBqMIDLsHkXns\r\nkQkaVSA1uqGBcne8Q9JS9h85Tbt2LzR3ABjwXr3zn79jNbsJS6n/u8O0wNEC\r\nHBMy7eznJkMpPvAyZDMKsEPJIVOCMk/wSEA9ksbepq+qxZbvzY2DOsy4O1tx\r\nyYZvcQhHXmbjlvS1yS4udsw1bjRB8rDf4gNqxW450ff7ig4pTnmK5c1Xj1IX\r\nzJ5prpq0nlJ6roiM5zc5+MbEMWD9dCnpgDTeH6naor7jvv5bnl4D3HhaiFwM\r\nfcrBVxQswa352a0rns8ZQ5/YzppArmMMy0Qns08Vgfc1Mluia1Vwruo0atNu\r\nSQUT06Qf5iLD1SE60JM+ZgcmEq60owC2wfNp/fJO6QXlFV2GAKi7PHCp8vd/\r\nO8Fr6WYPz4UsITaunFqeLKAQK8YD8UKDUYYfsXDdlobeH2e6jmAE6rN8ZyUq\r\nJrNntkEfiSUn/dNb155MpFV+1q6TLfV1G6u8Uu5l+1YIH7EJDapLPBUr7QKb\r\n/0bdqcCEoBT3dHiUfjzNrQPPGu3WgrOpx5WHacPzoodQp0SsF/BLI3nxclxQ\r\ntrEZ23P908i9yoykTkIGclKuvqNxCpodhXE=\r\n=lMvO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d44100693c450240b468ed28efc3841fdde62da4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e38ba17c5.0","@material/base":"15.0.0-canary.e38ba17c5.0","@material/shape":"15.0.0-canary.e38ba17c5.0","@material/theme":"15.0.0-canary.e38ba17c5.0","@material/floating-label":"15.0.0-canary.e38ba17c5.0","@material/feature-targeting":"15.0.0-canary.e38ba17c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.e38ba17c5.0_1672785163338_0.8159099926879751","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/notched-outline","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.49041a6c3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5dadad036b64ae8738ab56b35b9837822ab4382","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.49041a6c3.0.tgz","fileCount":33,"integrity":"sha512-M4m3TcAzIlQUsfhr/vf6coJetZkgMKek8OqxMMe+zbWX6ChxudkADnRhUfqoXe/rrcla+K/fB5O7IfNi50SRXg==","signatures":[{"sig":"MEUCIHXj4nGHoPxBZNAs08E2F6OLfZU+YqZpp6il7ENTd+DzAiEAocrDY8RZVO+QJaJcK2Ifp68vXl9wllx3Irjje0rB7Oo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZijACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXHA/+InA0qOGKAV+NOdfItX/uH9q6XM4IsL2DOU59vk2Q6vm03E+v\r\n29lomMYk/r5vBIH3p/BSRAckWYWCqbwYwVkQhS7zNKSgH+skVe0zpURCcu79\r\nDG6xVqhVmvKL/PRaezVYQWwvll+T6yu5M7WDhqVYjeFGVPg7apNJoOkLY+5K\r\ndzlCmKgOD5HjwmERI7STDPL5IqFdBKRFLMHTW2nz0WSpvO0wMWI0Oeiwn21w\r\nYTX4gT3uDcTyXGSVb2DdsMfrQts6Q2qyI0Ue7e27SrtQO09D+phbZizd5ndW\r\njiyNCuubf4fhnmNSDWAjR1nbymfXCe8Gi8US8diCiepct2H6qMrVaPkpGDMk\r\nsvflGz+xYWnQsBDYR1fFL0Wqu+StI6vgJBWYj/IsW6Vx7OhAPYbwlnLccQAh\r\nm0JhpfhgGinwe64M6QvjH33EzdrtTgfuAwAlysrEbNObn0CHhASOQqW3M5sq\r\ndzgzv5a7wueGLQeZ7lZ+3iL3EWUyaY24gHk9whj6XQm4jyb5kOHpm9MF0ZcW\r\nSFo5sAzAXfV6+ZwR2VInro75h/y1HVgWMFf/fGPWT/n3zWvGfX6I8zUZREHs\r\nZEM5opdSJnjjemHng/ecpls7GqoRnGIYk5MUYr8WEaor154rD88DHQrMpT+W\r\ne+4NQ9t9bQxj1E7ps8fxW6x3wyngjGj6bGU=\r\n=AFeV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f012497ba1285ac3de691b5e25afe7a21ff62bdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.49041a6c3.0","@material/base":"15.0.0-canary.49041a6c3.0","@material/shape":"15.0.0-canary.49041a6c3.0","@material/theme":"15.0.0-canary.49041a6c3.0","@material/floating-label":"15.0.0-canary.49041a6c3.0","@material/feature-targeting":"15.0.0-canary.49041a6c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.49041a6c3.0_1672845475706_0.72724732256753","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/notched-outline","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.c492898c2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1dfa87c70216eddf91367af711db42d5f1b8a7e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.c492898c2.0.tgz","fileCount":33,"integrity":"sha512-B1wHmQuwtLW6qOodv0zwWlGbpzIF+gnOp7z5DkxiDWbbg7sJEs42z8tOdhQRVihEMCxPxM7VrKDdEp9uWIgMzw==","signatures":[{"sig":"MEQCIAV184xyg8RgZcaq91wIWQ5GV6DSr7zIZbo7rRM1rmrEAiBC9vt3doOa9SuiOX91p94Lx06wrnab6+Ugk6vt/hcSoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtblaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRDQ/8DQJ3SlgTpIMvFPJaneRK9Bcva4+VzLcPM1TNf7+f5ivRenW5\r\nuen7BG+9yqlAC+/TFsvu+QYyTeELhf9F5In1jofKc4hOP/quh5KQ5ml3swgM\r\neMssuXxZvlThziIXTsqjP5QVbOK0dXdkgDDXom+yAa94AwoaYmzVsaBEHWTH\r\ncUilLF7KJANcHXa82nv+4LP1sHzuikt0v1pFayJMam+2i1sV9PhThBHU/970\r\nKqge8RuaclXE8jUOGuZoU6vuJk6X1dFFLl1FtkDVzE9EXuUJJGaxmVQiuZtZ\r\nlRxS5tPCnTV4D4vY1M6O/ZG7c8UpQoGyw9UZUSyOJC0ZTt2gZ/DrQ2h5oD9g\r\nc3oKaesSo25C2O5fGC4mamuLAGwwSIsnwDzPnUoV03O9AUybO1G4vEJNBh9R\r\niH7uDcSzBnmxJ1qYXMy7Z6BH3agG75VKHy8w7nwUXH7T+aXwFtMMr4lDMUde\r\npSgrLxYSQlL6MGk1vlzPf7pju8HNeQCKNkhpRWSI76EzvcZHNencHGadpFr9\r\njmzKHR/t5l4W5JHArYv40YhKWWIptsCcxqZ9u0AcH1yu+154DbFar9H8zWtE\r\nN3JZxVwxzkJNVjnVZoVBxHTQct8OLqFl/bXTUxjXl9Ry7wSgfh9zIXxKzSWF\r\nU8i4+Z/M4c7Gia3V7FF/NqtqPCz+1vKU/no=\r\n=joEr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8f57d41cc546a15258de2fac7e4ddca48b2987ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c492898c2.0","@material/base":"15.0.0-canary.c492898c2.0","@material/shape":"15.0.0-canary.c492898c2.0","@material/theme":"15.0.0-canary.c492898c2.0","@material/floating-label":"15.0.0-canary.c492898c2.0","@material/feature-targeting":"15.0.0-canary.c492898c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.c492898c2.0_1672853850634_0.8775719915624622","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/notched-outline","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.d7a2277de.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd20eac86b1bab7b89cd2994c3d3633f7a3be64a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.d7a2277de.0.tgz","fileCount":33,"integrity":"sha512-tYaJfY5ZF8llrMUdI4VVIYHjpDff4x6XgKAGlqN8P2s3Nsrb+OoMr7zsnPbu6eGyJOXC/ZtcxI8AuavrEtzBYQ==","signatures":[{"sig":"MEYCIQDZUqFr52x0AzT4n5kzx20mO+XGUAgUWT46uxYiBwT1MgIhAMkE1IxZNet1jAIlY1WxgIW3yQEC5pW+lRvRIzzUMNAi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfE4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwlhAAmLDw9ZAHAYi9LOi3GkeEYF7TnLfDPBFroTL37/ibdVz5Tjfb\r\nzyJH4GF0joKt03wN8AkjF6zNQUPmeA5ZFvCFM8SqCEDEQ9NwLE+3zqxSG2st\r\nBB7lOUDd3aORex1EYnYiaZOjhM/QUgT/hsv5Xi0wXtpUgULQL6ugLe/oe3FP\r\nPdb0stg7XCmmTGGt2GAzaieBdIPvyjskYS6NYJxa+2kC/uKRQz9+cMaESJ9r\r\nb5DOz3kQfqieEbWC2GbnnJxajSA4rLEY88HLQjE8Pq5e/RLDKd4WFtpHmuxr\r\n6/NZ9WDJz4AVyVT0Hjtc4pluyz26NMIro5ls/v08eN/AE82fZjR3AYlS3QiA\r\na+t4UH0d9YMBDNphZIvk68dVb9DiFR2fm5eUVLuFXWIt/TpSlm9mD2rjLG9R\r\n8fVvoxR532Tk27ZDiZu8oEWDofRgN6DHuuioGT+tIWWi3dMRM+WzCvPRVNn2\r\nLJl7BuS9wYTSuNn97oLefmQ2+6KwXw9Ug+odE/IKrzjPTRBMAi5kHFOPjmXR\r\n/Wdzq8w/cYNHqqrh0ntQNhiGMwH7hZ6OzB+nsijss/Z5fyebfdN5hSpa+yDm\r\nBelyp3Jz4V0x+91ORONsvBXV9OEjzeI0NFsrbqbCO0E2NjiX8oAQiHj6k+gC\r\nCwJ3NcHkgb3diCb7B5OV41VTkS6RFJC+pdg=\r\n=QDZy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f9c71e947019fdd0ca8837669de0401f3752d1f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d7a2277de.0","@material/base":"15.0.0-canary.d7a2277de.0","@material/shape":"15.0.0-canary.d7a2277de.0","@material/theme":"15.0.0-canary.d7a2277de.0","@material/floating-label":"15.0.0-canary.d7a2277de.0","@material/feature-targeting":"15.0.0-canary.d7a2277de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.d7a2277de.0_1672868152649_0.7281173378128136","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/notched-outline","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.fd95ca7ef.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"495eee716e3045154725c8cbc951acf9cf2338bb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":33,"integrity":"sha512-pZbDnLBNPIi/2zHzrjx92wmW77mibBrEZMyEa2ir6WfeumJY4fEgfRYiixfvwg7qBDoCAz9eNxA2aPO4ngJ0Jw==","signatures":[{"sig":"MEUCIQCIx8nhCvj2shl1Wz31VJQQdqEVTlTFA5q9G53Clw9LZAIgTYjydp7rtM5l163e1I9PxO5oACOx/Qp1IY06cmfGuPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiHEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKpg//dWqICOjcbiEETCR0bpzGB0lt6LNl6nuoW1Xv2oro7pIFwSHI\r\nf4FnWZO7TcbY+LcDXVO/Ik0xZiRc+5lNNT2A7OsaoY6AY76+NKjk5XMvT2Av\r\n6Lfrtf7uGETBfDgTKWfS+GNX4WcwIcQfUXv3jIWOmN+TPQYP+UvOub+V5mIl\r\nVBPBKkaEwEUpwQpIMTfiY8nUxR5Zj6bezxwR1+i4vX09wImTxejGC+5TWfuT\r\nzOzBsgsPm5cYQZbKfw1ayJtv3u1+f2JZRlggu9Hf70rt9iG9o4CcJLZYv8EX\r\nfM28oTyNjhqDF/LlBBGDlkhX4dy0cNCe3GwmQorW9XP1lr0zMeR143qlpPYS\r\nv7Dm60CH1jqShbNw3vtzagUo96ntNrW6ODH0P/jevoy0P+H0RKuI+40W2pm1\r\n3/BsDfr+KB3SyKX5DyEFycK4k50GMVmyvclxontdooWyT2Q1TEqvvyeywaAO\r\nYrtJfb3kPuM3NdtKaZK/YtEEc0IFNqXP1oLzUbbctH12inrTGIzRO6q0a0U1\r\nNWc7DiMfZSl434SZz27z6Z9mg1WDZjRU3kFYM5iH6S9qjwQN8sAeeU4wXao8\r\nF6znqGU0MPy8ypBSsd7crZcw0njfUOuY+C//gq54q34zmWHBOq2TfF8GkDk9\r\nTCZpTOh0GMSIEmHTrRx7uAj3PMsFVXrtaRA=\r\n=3xhi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b0d2fa371ec4a3d0a8a11e19d9753b1af5d2d62c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fd95ca7ef.0","@material/base":"15.0.0-canary.fd95ca7ef.0","@material/shape":"15.0.0-canary.fd95ca7ef.0","@material/theme":"15.0.0-canary.fd95ca7ef.0","@material/floating-label":"15.0.0-canary.fd95ca7ef.0","@material/feature-targeting":"15.0.0-canary.fd95ca7ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.fd95ca7ef.0_1672880579826_0.32361046160515317","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/notched-outline","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.1eb44faf9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfde40dbf737b7d31c0bc4f047a272270672e073","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.1eb44faf9.0.tgz","fileCount":33,"integrity":"sha512-9hr6ixK9ddoOUdNc5P6M4IEKTjotCJcBrzHSfmfp1T0blYcV3+PphGY1Wu0iWtDJDgy+iq2wdln2Pv7STDy82g==","signatures":[{"sig":"MEQCIHWK793T/6XtI2s78Oxu+Vgj6arzVh6o4rfl2yOlzbTLAiAHHm/C7EQmfiHLPFLImM5RC860VRdkOdaPQqQjUTO3mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpPOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmradg/8CBfC41Fp5ekdZo4h39kDbHl1HVj9JOPzY7qOEYHsuT7xKyAJ\r\nPyhAR4ooLaqU/TzIz6Cq3/oJglvlYD+jIrQKD/jDdOeOqz62R2A5qryhouKo\r\nv+Dksvo3GuhIb+PPpj1f7rzFgX/L2UPst+GxcVDihKg0xl11xVNrepJDQY8Y\r\nT+plFAY20kGTnnJ9H/TQ6xBDE3LqkGsKlvRfAQFHQIm9nJd6c3cl99H+tCTW\r\nFpmpmlHVKpKVUK2MtuR7YXJc+HbaNXcn94OL3e+2bsJvtdOi3dM5YaS1sAK9\r\nWFEygZtibjWGr+P4gCibfmQ9vDh17+Bt7/xQInHMR4nHYEpKMBxnDFBVG8PW\r\nZtjjgiiTgqggnnKo6YYLoSdEH7clVQibN/e9hs5oK+0PaxJEynGM635Wam7f\r\nioPi+aR+YV/01tJX75cW1eRwGKeFABtOqkspxhivAsnIyhL/gOM/YNW17MUU\r\nMmUyruZjdsoxqkhet4BeQD2ztOlZJtS1ik8VyXWbznRwO+w23puDOtxNBGkk\r\nM3QBQnOguBdP4UeYm/EyDoR/UGrFbpBB9JNaqmxKEBTnb033KFBKX/CrC0ru\r\nM7Ll2g9uynA42r0dBKKRQXF6Gae1ThAiCqlmLvKBFpvubtc3Wcxy7x6JXcm8\r\nCMjcDxaxi+Dj7cCHfosqhvIpcGko+pHpOCU=\r\n=LoRv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e0eeb94598a14217ebc97ec3e249d126a29a13a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1eb44faf9.0","@material/base":"15.0.0-canary.1eb44faf9.0","@material/shape":"15.0.0-canary.1eb44faf9.0","@material/theme":"15.0.0-canary.1eb44faf9.0","@material/floating-label":"15.0.0-canary.1eb44faf9.0","@material/feature-targeting":"15.0.0-canary.1eb44faf9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.1eb44faf9.0_1672909774776_0.16849827926910432","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/notched-outline","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.adcdb7db9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c158f131ad9831911c00233c8acfa255069ddd6b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.adcdb7db9.0.tgz","fileCount":33,"integrity":"sha512-TQeNy4qUAKbjSzdbEyPjwqHi0noA+G0YXQ1wfM45iGwF2c9PI3idk6MSpwuc/70+Z2sTwsVia6wultEYFem91g==","signatures":[{"sig":"MEQCICHIp2uS45EkRXs5Kp2uSpEiaGXzBU1MaQoxSY505zBnAiAohcnLiMBMa5L+qvrlF6zfMmIjy/6cYiIY/7ldmSaRGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvkkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLPxAAhwVQ+AzYOypRlF9UygXG1ZhNIWeHviK2JQocSqxcBHv+S2t0\r\ngeeuEoyolb1MvMsiGvnN3+0km1DVyq/AtqWLvtinNj6kjKtvycD67MxKACfv\r\nUMB/IMOpiOjejPWPO2xKDFev3mXnylgXmFyHfv9kHb7RmC1Efw1gOE9cKZKZ\r\n8BGLFUGKu8/iM+rftGtreLNa85S2Ing4t04Jac2t9QALP8XhbGKjmxqR23l5\r\novQKoiJRQ8UXb+dIArvxGeLlGiz29sYC53W4Pvb4QCvF3KSPDxMv7CS1A5UL\r\nS4bbMUshWOm3zVLEJJEXac54YQgcPFfZPmMAVlcr6lsZYbuEktFfiqhXvvsQ\r\nk2I+5AQo/zVCsirEW9VCsEkPV4A5O2qrf8b/B76bAibGWslQbgLNINIbIAlC\r\nHuvPMDuvTak1Xxs8gnVvBTduv+/TwVP38tzDUkKTLdbUhsX4knauBlcSvHvg\r\nOvS6zHkz9pXeD/0s5VC/merYVNq3RXARHRiNQtoFk/muiZlNK9kYnroaeHmV\r\nWOHjM8cMrA8kZ4C+R551gUpsM21PS5T9D85naOheVJDI20aJiquI9cNtyYq7\r\nydTsJOI/QTrce7Uj7GhupXY5r4BXnmMJM/IjG69y8zLXzHQXm6MM0/djH29Z\r\neiXIsnjTY/2/hmFZO/LJrFYgMLjYYO2ZVDI=\r\n=fm8C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2bb419da8b7b393c085616b6c5f28a3eebf832f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.adcdb7db9.0","@material/base":"15.0.0-canary.adcdb7db9.0","@material/shape":"15.0.0-canary.adcdb7db9.0","@material/theme":"15.0.0-canary.adcdb7db9.0","@material/floating-label":"15.0.0-canary.adcdb7db9.0","@material/feature-targeting":"15.0.0-canary.adcdb7db9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.adcdb7db9.0_1672935715886_0.47777916850247104","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/notched-outline","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.067af7eff.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a040b100c6fc808d988c54636bdd0115b06fa552","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.067af7eff.0.tgz","fileCount":33,"integrity":"sha512-lohUkYU+lJyBWbD/4EjBuQzLgQQkM2QNlBRq58oGPq+IViI5XR0wwpse4GUU8+Pq0HEu8TFA4cDRmPa6oG4Fgg==","signatures":[{"sig":"MEQCIEzpqlOCaHregmHk2idHj0QRWm87LqcJxAgAxn6WI1QEAiA4b+ykIqJ58NxkA+eoQ53VCnFp6J928Y5mrsxUB9lloQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKvDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNhQ//WYAw0RFRIrd6ZuSpwZ47rYbYm6g8U9Lm3f9/1Jg5gLQb7y//\r\nvVdgnLZY0CFjrf5AYu0TwG2b49w3eo2lH/mBfsXNwNFJoRSej80r1S9ed6L5\r\nv2BlV+8I6NJ4UnVuyifx7cPWivDcffirPRoxMSWs6bg1leh7rrnd0B0LyHkO\r\nHo932ikjNGBMNM08VZPLxVHhamXa4UsXa/ENh5cIQafa9irkb81p+OtAWGro\r\nja7AwZx/ILoNVpBjVA4cRsXOM6/WR1IBYmN6E++8G0Y0DiHERB+UtQ3ADqZ8\r\nqTcmuWZHu9m8UnTOgHhaha1Wx5oDpUJu3dg4Ip7eVUBzs1nu/9KXXLSkYwJd\r\n313sDEL8BUQvYnUECo1rdncF/XW6v+7+almAtsrYOmooMrq/6WWDgsKzd3np\r\nkubizN5luyQqSAZoIKL2dtWzoKMJQIvqokcbwyC9sjhi/gu2zL/wC8ZMcIT5\r\nBBAi93l3SKA2vvs+I//LqfxqTUlEQmx5HKg3aTompjJ+HWvb64xudpS2LUsh\r\n4J3gLsehyorOPTV8lNTH2O7fkmbDvnaF6OkZUIxVXdz3+L8ortNQ5ObHRxSp\r\nNKzQa8Knr2xjW1p1BqjvABYidQcATHG1Niji0G79JRwZBsdlUaeR9zKU02Cp\r\nPxzUorHsvfQJEPUcvDOLpN2VxcB41i/ZmlY=\r\n=EF3j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1fae2c792ff8ce557995a8d5d858676b4355c7ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.067af7eff.0","@material/base":"15.0.0-canary.067af7eff.0","@material/shape":"15.0.0-canary.067af7eff.0","@material/theme":"15.0.0-canary.067af7eff.0","@material/floating-label":"15.0.0-canary.067af7eff.0","@material/feature-targeting":"15.0.0-canary.067af7eff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.067af7eff.0_1673046979656_0.3145686794203979","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/notched-outline","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.21d1196a7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"947fbd5f54507db11e5bcc42c659222bac4a8a37","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.21d1196a7.0.tgz","fileCount":33,"integrity":"sha512-w2uY2ly2tI9kXBA+sbxi7AYfDvWVYvBp798Gg9c1iOOTHbKnYiA1NujatVsRkScc6lQGO4o3hqoS+vg1FHei5w==","signatures":[{"sig":"MEYCIQCStaiJUU/dQSNzCUCCckRlAfIVDevexwd/g3DXAdwKgAIhAJPgF00q8qwh+VtkV1DMpSJ3C8kD5K+dTF26tI4sXAqA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju+/PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6fQ/8CW/rOMgExiBtNk+EBbh9udj6Q9JVR5q7068tlG6h+aq1ulNF\r\ndwKiDJ6yn+nIkO4DkmSscX+fp2FYcWSY0lgpjMQfUrDbnvCGffOZwjm0BND7\r\nR9MIO8igMy1OJF3a6xZTJ8FDIKMq+Jy8AdCuzfZl7ruuP1TXR/auj/y5Sphy\r\ntKTPVuMBfXtEeLnlIRnQtY/H9reS/urHHHe0JbELpJMF9p9kOF4TNCi0HBD9\r\nUTja6ZI0K6PTLxYCNABSld4R3jltmXSE9nk4Bwf2iyCF9/A+S9iU6KEQ/tSE\r\nOUvxHftOZ0EmihV9oBqNFBXK24s9CMGH3hj8bZlqyjHKFnxuE6T2n6t3uG3c\r\njf/ThIrjamk1i+PLsNhC38a4szVEtNWHZNp1NddkLI07eVW5lh6XXNqw3+SH\r\nvp6kKCNaRBhgb7ygNJRt2mgqvqd/5LyT6gXHf6ZVt/0YlxTc/9A3AehdMeF0\r\nfy4+HCrxGASa0aAC1cAR8Gygp3dnBN4WKg7pDHnmpPOHfgB6OZpTTFe1/sGk\r\n9cdXIWfvXQYlVm4XSeoK6+L73UVQVe2vzvG7EfQaswxUkqRexd27sJpFjAmf\r\ncFtdX/Coqd4FpS9JZZlreGiW0MVwHxSmYbM7U1CHuoznuoch44wKX8bMcZiE\r\nxRY0JcdvFWOH9Z77lWXQknyCS1WC0RihTdw=\r\n=2eKO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"361e536c54e276112f021b419f666618a20599f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.21d1196a7.0","@material/base":"15.0.0-canary.21d1196a7.0","@material/shape":"15.0.0-canary.21d1196a7.0","@material/theme":"15.0.0-canary.21d1196a7.0","@material/floating-label":"15.0.0-canary.21d1196a7.0","@material/feature-targeting":"15.0.0-canary.21d1196a7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.21d1196a7.0_1673261007282_0.43631144365460317","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/notched-outline","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.8d2d8d3c4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e81658ca4ad3cbedaacd86fa37a5d737042b936f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":33,"integrity":"sha512-bKjDVgL/ZUsYQfuz7+0tP+c+3mnNil/u5m/XJ7hs4RMMoKQXcP4708D+5xjj/mF2X2CqDFRnv5mlaT6mF36IjQ==","signatures":[{"sig":"MEYCIQD7n+5GSOj0uxu49WBye+AqIg0egPpIgswzFfurAknktAIhAK+edG3ysP1ggybscLojruSIKk8dkFpRxWH+g1ivYyhi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJQLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqKw//dueW4UeM/ENRh477Q3Zyx7jLSIZpzra3iCC2D0m/QtFthjGc\r\ncXpaerz2Jzo6H1AG2dBNVsw1WsxtmW/xo2o1JCaprMl3A5Cmm95/4K1e+/9u\r\nyTkl7lquS7d6klK5rrmk3InYTcZGVdAcx6F58FxXcme5Dh5FA7feQSDdNNsI\r\nqX7ovf9q+XY+qeP3QsTvUlK+0dQY2njiO8me/AozB/ozIOVYy+dYnmx3WAyh\r\nP1wM/lY2UbPL4Z2oIwjD1mxuSqrjoIRRp27gRbDOwgpL2eF81mA+QnWSvfyp\r\n9wPfsdjtEAFcD7zsRGeeQVYj2q9HHXHwuTmWagQQxawAhswQDELTjLqr8aGQ\r\n+EE6LHL2v+HY+5g4iBrRHYxmYprtbhG4MNBxiNp+XlKbhy8XGxR3uwHY86lk\r\nFSQQbbFckRPns18kLkM0PYzGjeqH1+UwVu7OsX6GBPhPWbJIDrXuyjq/9jG1\r\nVRQnObKgOdZoyOR1gDZJ50IgwjDjEJLppgd184ETt/+2Tjb5hFVF+pOd13Zh\r\n2hlggQzUHBrrvVBno/1/EyzxLnBiwL09PVc0b6hFbmGp8MZ4zuEGXOQWKFru\r\nKgirt9Fjqsc36Q7kr0YhwYMVqAtpa7ltahNUXwvOw95/zYjchL+SlhZQ3uCA\r\nGlOKe/r3d1jzXjECFQCA7zuPM97TYAeUdVQ=\r\n=c0uI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c2df4624468d99280d9dcb0894d04d839fc8673f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8d2d8d3c4.0","@material/base":"15.0.0-canary.8d2d8d3c4.0","@material/shape":"15.0.0-canary.8d2d8d3c4.0","@material/theme":"15.0.0-canary.8d2d8d3c4.0","@material/floating-label":"15.0.0-canary.8d2d8d3c4.0","@material/feature-targeting":"15.0.0-canary.8d2d8d3c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.8d2d8d3c4.0_1673303051395_0.9177084136246967","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/notched-outline","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.fc6ee6c32.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"facd07da7ec78df53b43a01c9d689fc14f738c9d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":33,"integrity":"sha512-RKEFMZBJ8xxY/RXT23B15F723HNKGtsqBbSIR47P3uDsLp5dPAlpSo3yqUOY/O56V5xexDGiO9JjspwTZP6R/A==","signatures":[{"sig":"MEQCIFETtehTxNDCf5D0lZBMzFelFmtEYiroZr8iLzD9k4dXAiBAKx6uY0ReALw9J6Rn8tElXRMF2dmrdwF0rnhKbvcDeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZIcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr02Q//dJwxVdrE3YXXUXvY9edmcbetuD96u68IAR5nWD/mesANCf0f\r\nnpbMFvF1QM4RVogwsPTjQn5V1IUFXt+g8mH1rNSdd9zXRlPWGN3cgfgnhCUi\r\nA5+csnBdBPNeCEsbYjbxkjcVg1y0VE87zKQJt/e70ttDptWjSpF2PcIq+2zX\r\nFVSmXR0I0IzG5NwpfyvCnrhgzuk8zteezG8FvzDAXQuu9Kb8CC9BQoENalHX\r\n3+4dgKnE+wNANR8PBM3BOdBLEWmUNqEoNcV3hj5aPyOiyunK4CBBbjZXo2+z\r\nSk9fxo5xDGY9eJ7+3BbKFF9tr+L7tFm4YXplmt+oSAgxpdXrW+VIHSF4Fz1o\r\nO9DoRa3j6J+LAunuXZXnguznq61qIS0rdFoWlRnW31JE+ZtJI/ex//ejdIZU\r\nJ6qMbT0gPij+aoo7WgUATp8nxuBmQYxF3VRHYRpPL5XBZd5LHs2WX4rFQ+b7\r\nNneYt1dudx+CnskhOofH9F6PfNgJ6wjKnFCm07Q0Ly68IEkjjw8hLYSyKKk2\r\nzbxUrwtdZ+ZXFTGS3gC9ALWEV7I+E1x2S1+tBD3cFecX9M1XBG4XUbQrhEfm\r\nZmmyzegwfVPWPJBOxX+O2rSmEBkKSw1uuB4QYrkjQ3dPys2CaZ9yWrooWhMG\r\ngLD4uriTPzorGRuEdi+tsP4C6geOonn84Ug=\r\n=LE0U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"225aabdf74bdefc3d2f70f268ddd04c501a821ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fc6ee6c32.0","@material/base":"15.0.0-canary.fc6ee6c32.0","@material/shape":"15.0.0-canary.fc6ee6c32.0","@material/theme":"15.0.0-canary.fc6ee6c32.0","@material/floating-label":"15.0.0-canary.fc6ee6c32.0","@material/feature-targeting":"15.0.0-canary.fc6ee6c32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.fc6ee6c32.0_1673368092779_0.3918384206960266","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/notched-outline","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.73537ab0f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5b782283ec8fdd2a07616019e452360abd12831","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.73537ab0f.0.tgz","fileCount":33,"integrity":"sha512-cMh7MEriIw+LGPx1SdIFPxfCp56bW0PTlOETyc086q/ETPAj9oeHV9TS8q/BzVspYduyC3DCT6yNUtU71toa0w==","signatures":[{"sig":"MEQCID4NfrbR1Q4aat7pstO8lq/uyBfDqmoAO48Bz4ufsFoEAiBOUg0/cN8iaL/G0YoADagtKRm0CEwSl1H8nxl773Odcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvaphACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqD5w/+O2ZYaiuN0X9wbKYO0KT/O8aHfa5439RpRBVimhAyQFui5dc7\r\nNlbr6CU2gbmCv59DlGOXh/iTSABrSPmNhW2YyPd7amIlKv4tcT9FC54cl58g\r\ncsyGXWvTR9z5IWiWmsFw+imWTvls8KcNoqUXwZM3Vv1EaBBEbKKmwjbERuxD\r\neRxETM5rgd5GPMTRg8FG6cCiMN2rt0goKfJ6S6JFfeHefNmiW5+eO89TGWLT\r\nIvkFwNMJewNCtFVhYLkZveZkVWZlLWk5qnVY0vHFStoCTbD1Pzxugoe8oMt1\r\nXOv5I7MQfPG7juUw8jgToY9o3fY2W1avEZBXITJMA2BVZOSi8qfJJbI87J00\r\n21FTP/iHyDaXw0dJAIUqcGuHz4pkrv6vVrou+kTzJYULxSOovLzHwjnFkL40\r\n+Ud6U0j+DypkasoMP3DjVd/A0fO3rLLzlhfadgFvL8ldORSZXqEYqoLtqyFI\r\ncYLaghbpknBkSlOxxr4UjbDYnp43BPfKNWVQS133sLNmb3ycH3FnU0vE2Cih\r\n2ZhLywmyKDidl8jBrnljkfusleeXbC7H8nj4RjosXfGl5pZ+MrDE4VkXH8fx\r\nzYnLdNcQafzOpvSdCEIrF2ACFIq5kDc4s0wf9juSLohhGg1RdI2af6i+wE5N\r\nf0OwlQIOZzcRRJEyLn/HzwWOD2AyTxDMGNs=\r\n=x6Jz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cb3a480e7be3c8c7bc8f8ee0acf1ee8145f266b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.73537ab0f.0","@material/base":"15.0.0-canary.73537ab0f.0","@material/shape":"15.0.0-canary.73537ab0f.0","@material/theme":"15.0.0-canary.73537ab0f.0","@material/floating-label":"15.0.0-canary.73537ab0f.0","@material/feature-targeting":"15.0.0-canary.73537ab0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.73537ab0f.0_1673374305754_0.29062833056561055","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/notched-outline","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.684e33d25.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c18b48d8a9d5153717e1dcb13ac51fcec8ca8489","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.684e33d25.0.tgz","fileCount":33,"integrity":"sha512-9YHcBkvJLPVYzkHcWoTpBZAFrEd+j1hjhGxLhh0LuNrZe8VroUkZD1TTnUAPHRG3os6EqEWWaKb0RN+aPIF2yQ==","signatures":[{"sig":"MEUCIQC0Tjn7SyZso47dItZ+LxUw09GLoA575ZK3bpMnVZTWpAIgZ7z0iRz0v/b6SWrPIriNCg7yP6iO4YVA/g07I8EejGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvboWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrImRAAiiNy+kOsZkDSUUseaZvl/ksbq2BGz4pcY/VlEX+ypAWB3ANR\r\nNP1l1U7D38tdzvPv4x5T3wfzXVLIABuFGTq8tqPgXSqzlopyCE0PuL2XeQSS\r\nlEV7/wly2NmWINPCec8TXkLZqnKudIwTziq295sWPU8Ld7E0O16wjJO32F4L\r\nzxJ09mNghORDtqAHgdtt7nHVpVSbklV3QvpV2hTQck8Jv8DYov2GA+LDgodO\r\nxFHo7YmLSJXpxGSr1KkMv6vYRZ5PgCapeAOW/EwPnS86Fqw3iH6T+hbVHS5h\r\nIN13FDs4yUdtAfO73gDfD95MYf0VHnIFphwSmawIScYc/TiJY88kTdr2XKWx\r\nLIIWBlFkwD/58ISBjJ3fPqMjjhxs7lkQ89xyek7DWa2pnzqHE0Jc0rczWris\r\ny12dQaxAa84avZJYJmnNZmH2g+IcFIautMng0pAxYx74WPKdwIfBMrXLgFdB\r\n6OZUXq/7yM2s7TcGM3QxRe72Zbq893bTygpRuyV9xTX01Q7kUhkA15Jp58SI\r\nU2aKrnta0QdsrB9hUbNlL4tSKbdPKcyEl//7hGVDfXcXGDVIqiAlO9cu0aRP\r\nx4912PduO8xIzZ8gXz8zdTZjwrNEdQCnH5R+KRb3uxtmXWwH33z/wOJmYyEO\r\nZD88NKU03IIeEs+KCBJEPzEbiU2jMfyBxkE=\r\n=9k80\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"518d26a1e091925c1b3a87f4d4f4dc828580a863","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.684e33d25.0","@material/base":"15.0.0-canary.684e33d25.0","@material/shape":"15.0.0-canary.684e33d25.0","@material/theme":"15.0.0-canary.684e33d25.0","@material/floating-label":"15.0.0-canary.684e33d25.0","@material/feature-targeting":"15.0.0-canary.684e33d25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.684e33d25.0_1673378325860_0.18299000488793404","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/notched-outline","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.0e89aab6b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30f72d69b7b2929689f24ffb2f6b1f1d0eebacd4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.0e89aab6b.0.tgz","fileCount":33,"integrity":"sha512-f3Wz6LYKNMCZxSB8JbfKr5U2moyCa8/kckgTCJw6oRywCWg9Q2HolheKB6kYbunstnw6KOzZEfdf5mfpsSbVAw==","signatures":[{"sig":"MEQCIHvFg+OTXQUeFoHWo2o3aoisD9cbQ1fZeM+TGSooC4XAAiBRZjzslAlvQr8WZrKzzCpqXKlGCl1GI9ANdWnJF0u/HA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuEyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoB8Q/+It1QJvx0jF5nBVBPCWxzxEEZcTgKJV8c5GLqAQCQvgdv9KSG\r\nDOY/XdM1r1dbQ17oJhCgjfuP3r1TcNUw987cb8YXUpWv0Gn2PQI/29S2osuQ\r\nNIP/jSZL+/wQGuFTep0bA6BjsydkveRMmHoRneyIVXA8lPTawn+IKUckOoGT\r\nz94FNIZdewp35T/jliLqxpnPtsdccba+EhC9BDIKFUtJT3E3r3L4O+SUTQB6\r\n4sv7LAFjBCw/xTqYbWLNfDX88WZSaNXoUNdpv666zTQenxBR9ZplNnABF/AA\r\nTE2cDTbXZr4dB1F2G8ELIRP546GdvPJOIBz8G+49dFO853YZM/NKSMqmScm9\r\novd4hZi1WNYKqNB65TSyG/d9P5HcGigVPAU6nKkuwyVGDdUcYbB9HVYsE1zB\r\ndZRBGoft9m6kVDJdIq8QjJMHiUSViZXK513usCjXAYxFOhYlK7h5No2hBnwC\r\nkmFe/gF62ka89t09O90ZDK7aSm+wP6Gak8HnUb4tEbM8HHm4E1+SZyl+2QD+\r\nMYNrIn1VfeFaBq58kP5EEkU665X2htZU5ViNHSRmlVDuWA7s8l3YqwzaAEIM\r\ngWpn8wPns7goYixoDyaH3N4n5SMfMSVBY8MMFHBiKBRaZ+cg/OagOeRxDetj\r\nLkhw2DWT0nZsHqyQ265Lg3lQY/TBX3xSvng=\r\n=19jd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e4a9f0d636d7f4d6c0fbbf49a7016627715eb3b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0e89aab6b.0","@material/base":"15.0.0-canary.0e89aab6b.0","@material/shape":"15.0.0-canary.0e89aab6b.0","@material/theme":"15.0.0-canary.0e89aab6b.0","@material/floating-label":"15.0.0-canary.0e89aab6b.0","@material/feature-targeting":"15.0.0-canary.0e89aab6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.0e89aab6b.0_1673453874464_0.0635893979349269","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b0103d10a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea560108ae90f3f7b1841d31a4ed26ca812c02bd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b0103d10a.0.tgz","fileCount":33,"integrity":"sha512-7Ze7AnRC5g6cOVxlnAE7pDQHpnAhdGDz+aqVdtdk+UYIV6K7RrXjqTtY2aU+J84d0KEWShD9tZ2oca8gjrcu/g==","signatures":[{"sig":"MEQCIAx74k3PRwKQkyyNhUrQ342qsa54gNGIecK9OOiYwIzpAiAid+hPyLdmnipoaefgSOA0pR3uWNJ9XU1h+7ueSE3HoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwoqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeFhAAoCtG7Xq0bPnyHGXSWmEamn5F3Fr0li14b5bR+BgjpmgWpqgk\r\njm9g1pUp90KRgdF9BS/J2a9EpWAGDk5mU7SROakJK7N05x0BnKFQ+0DZKTMA\r\nlfAsEuBp6d3vuCEuWBmwN7ZElX5pJKSN/eOrjL9oqsFP3WCwThT/ytXfsKms\r\nwXEocvRbBAmkrLktzkEu6LX5b9Y6q4DAIFdkuaT6lSldOv4EVPIjzTtOP/yn\r\nb87dzKmcnb0vSTkNZNBnQq4fI8kVBuhvD5C5lZQRRtK+O3sM/AQbSrGWh/XV\r\nnFr3+JrHdkqzKDag6EKRPvAvkXKj8M5zHUQHFSPUv9oyuaSdZNd6qdODv/AA\r\nA2qOFnH63tQUbgKfPkrMNvJ6Q0BwCquPptDTDgDGrKTdsaSBj+a5VLFldip9\r\nY0ieRpDazZ4N7gAVgu8gUGEE92+FWxg5rjHajXmMxurLjR0iDIka5NLy3Hh9\r\nkrhaJthAB0cjPVDqjHn84rlTMSHefXZXoQdAgF4ZI2PtIU/JVsXGS7he7Dzz\r\nwiu3jQkeePoz1AaCqNJs+XVSTMCzEYCAYLjjA9lh1pHWOyVJCJfU1UnzLFJq\r\n39VAlhwU0c7zsnxzSPVKAWSAZTzNyFQ1MpTvRdvwd67zYmLhHJNtlp3h+mB9\r\nZwSDGznl9DdtsCHgMU15oqVl903GPDKcDBU=\r\n=0KjV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0e133b89a4afcc8020dbafdd4d22c734080d2d17","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b0103d10a.0","@material/base":"15.0.0-canary.b0103d10a.0","@material/shape":"15.0.0-canary.b0103d10a.0","@material/theme":"15.0.0-canary.b0103d10a.0","@material/floating-label":"15.0.0-canary.b0103d10a.0","@material/feature-targeting":"15.0.0-canary.b0103d10a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b0103d10a.0_1673464362777_0.2101497291537333","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/notched-outline","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.50e7a5312.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"287e70e1b84fa7d90cdd8a85765f81c0fc4ff153","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.50e7a5312.0.tgz","fileCount":33,"integrity":"sha512-Ah8D5xU2fcD+bBweFH3e3dul6dQW/4Sc6uOnCVhm6DECFtWC6+yu0tHwdApdGW5HOufzUQLZBqzk/0f1qcBCjQ==","signatures":[{"sig":"MEUCIEm0my0ISKGQK1fJakhfVq4hS5fUvfba9lIuL1B61mbTAiEA16JAxHpaN/7IrV6abqdY5pl1BXkMclnTINeFU0L3Qos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyIBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmod+A//WJgLctGUv7j1ix5Wov8D8hEu4gqmrxqFk+JRkrBQp5gJyUru\r\n7ZBgOH9fxrSFAzLwkEyhmDL35dEUpCuzX/9RAFgWIS2SGueNo6fVHeXj6xr+\r\npDeB5lMDOFVTbZ26w3I1bIW7aWBhcI0tOxqiyMOuX1OdfrD5zeTonMzNOdpY\r\nOAHTbLtm6M1y3NxfG7An+IfF9MCrB0OqCNYI4ESo2332mVu6g4/P5fRcLHkz\r\nEf+cMWLuzIeJ87XB4xp+nIsTjOyvwXFOQw9f6qBw17PqybC5aA9hYt6n4ZB5\r\nzs86/KiLPzb10IevPpAvWoWemOKxThGspznOaiet6loEyXr9bbs1AyttnGVL\r\nhgeyBg5oxNE7Bey4YAoNxZ/TzBhj7SY9LquSY/rfrnaHOWlJ8XAMkL1jkA58\r\n5JoInbotvqHg/4TODhxyp57ShbUEpLNmfZk6Tn5RevHZDi5IdDYPXvGe8DDL\r\nzp/HACLN/cwgUWJEOJrO+c8swwwpmvUI08UHs9pYEMe8zyAAJCM7/OWRC0av\r\nc1YWAChb1fUJtTs/v7vbLD3is4lhGrmUt1KRL+PpJiyu5KLwPgfMNhw5FmPK\r\nbpWTJnmzIalfBmEMmXJf2o6WsaX353/WH1jh0S2zXYmHahBsU1pnaZ1rTBui\r\nzIug7JoT2qw0Eh1D6IkGDtZIAFtDonTJF9M=\r\n=/SGn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2d4b8df3edcb9b5e9fd8d8b6645dc9519d92f376","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.50e7a5312.0","@material/base":"15.0.0-canary.50e7a5312.0","@material/shape":"15.0.0-canary.50e7a5312.0","@material/theme":"15.0.0-canary.50e7a5312.0","@material/floating-label":"15.0.0-canary.50e7a5312.0","@material/feature-targeting":"15.0.0-canary.50e7a5312.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.50e7a5312.0_1673470465294_0.41655582745520614","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/notched-outline","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.202823f54.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1e792999b1bf4e061f329b52fe3296fffc69bf3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.202823f54.0.tgz","fileCount":33,"integrity":"sha512-h3Pao4KvWDhO2I+UTwoyLC2cGnTScG1dnNQ+iRdK9ChlVboRSp1lvuFTZAL4SP8nhbjacJDQjKRCnSfN4vyUbw==","signatures":[{"sig":"MEUCIQD1/cW1GSUr2rQ9yGi7mFEQ/KwymAj/CaQ+B8kwz0/jAwIgd/UqoFV8kTjtMMPfS14f1YFgi1Y/Vlc56OKGpZM8JTM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyu7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpF6g/9Epfvu1b1soM8t8hdrWW9ZctsVqf2/SXmSmv4Tq4v2oXr2stg\r\nqIm5Vi81zYxLyYlXPUxpyMZRURzeZPV5GhSNLyb2eOeZz7D88unr8Jx9HIhu\r\nRCw0f7FBqP9X66fz8jy3pU5o/hemz0qkb/jfDgCJsAG3qPxkMCytX7M+3bf1\r\nONMhWhByJ1h+u9BBgm7HnltJ6GovLJte+DFw4FK9kZKl8PnqJSIyES4DXxtp\r\ntChHuCm03Tli+Xuc9vnqWmGenlDbXpYQXRdSJmGYzTeU33Fql6tTRa5sZkVT\r\naFyfaUzh2yFiB9tZt9AUkhDTiwc6k/evtgtC094T0nDtEAA3XSrJeJV96O73\r\n2mdhB9S8hybmaNkaVFLLPKBRABZYyP4NK8U5p0i5oW6kHsi6zqpT124EyxTO\r\nM896QUM5KBRa8P731KCtHNT52RVxUOTH+UdSnA3E7o/TUuR6c7XBd2gBvrEa\r\nDVvQr6Bf2RgnX9a6L/XjIdMgbZ58treCYrBKLwEzLL7qRvqPLo2tbBgfCQnl\r\nw1ouxfqs+IFwiASptJc574QSmwb7Xc0LbipyaL90qHvzwSDa0F65e2x644WW\r\nfKlDxz6Lt1KJmZF5spQye9QscyTHFwAdQPfvJ1j5Gcq54wGlLEQjxHF1N0TA\r\nn1IiDupJOoLXgYMpzfyA8bu9UkozBLiACjY=\r\n=+IJ/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6a4dbcb0b4c7d96a85ebe59a5ff66d2469e177a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.202823f54.0","@material/base":"15.0.0-canary.202823f54.0","@material/shape":"15.0.0-canary.202823f54.0","@material/theme":"15.0.0-canary.202823f54.0","@material/floating-label":"15.0.0-canary.202823f54.0","@material/feature-targeting":"15.0.0-canary.202823f54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.202823f54.0_1673472955397_0.4722495647762228","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/notched-outline","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.199fe2a2a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85747cbb634bb1e64b38647288adbda257004c5b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.199fe2a2a.0.tgz","fileCount":33,"integrity":"sha512-G0XiDfbtmovbR1FvXDpcuYY6441R1XNBoYUYr5SRih4EX2U+4y3wQXl75tsUC1VK5onhc64PDJn7LBtq4W0KKw==","signatures":[{"sig":"MEYCIQDJrBftuo8q/V2Oy3zx2mvGdzW10ovUObyCmwG1hJ/FJQIhAPsmyHUK4cg6jhaWwMXW41wlGYszXN3UxzF0ah7lUylL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzBpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5Rg/+ONDSF1MeV+FoMcORr0Ph8Z6QiC0yJ1BxihZqu0HYOLf7i9b/\r\nkMF40Ok92/NUu7SK0MEHLbMJqFrmp9xpk8J4sMqP8duR2X8lvq+f4WbTXMtf\r\nc4VW0bxbhe7PvqjxWU8Unp4LeROFmeHRyBdgXDXqSaNeC6oMse2ieXVYVuB7\r\nr7SSYTqOizQjzJsw16aki6BiaA7JTY1COjWWowyUD9Cuzgkf3mpwEyrHPOtt\r\nNcbITFkMAuwRhDpYxKIoj4AH1Irv2D5OgJBwiFCUIs4MxqeNNMiNQj7Gmvxo\r\n7i9E3WI+6UnePRUXU7E11qZOnZu2umb/8iES8k4PLH/ZNhNdcZqexUmyMUfR\r\neR5iJRMcYQdk5u4KzoYYzWa5p3fpC/JJHlf8+yeIlxUxtF5SzT4mKGgTQAcZ\r\nZKyNKU16UxWTW/sx7U0brqxKE6mKS4t1sMB9hl8PcEkzD1Y9gjkcT2BlVErU\r\nZlgKgIR0HDVGTcgRlrEyPtVSq8SB395TsXhYw3i+0RZMtw87yZV5tSwGrHLG\r\nxF4iBF1xFpUPA6LFzgmG8oHigODXeq9gaBxl0rlRAtGiVscVf7XiqYzmfUM3\r\nzGq4oQGcpgfen4W2opf5KjFPhoOMHvLTrUgXrRqT7/aOE0aRbo3xofYbGRJC\r\nL5H/Bo2/DSVbJYZfxwYnsNMyMBldKl45J/A=\r\n=yaFQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"eb39fefbc3ca102a52db83ad19b42f1a2b52ecd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.199fe2a2a.0","@material/base":"15.0.0-canary.199fe2a2a.0","@material/shape":"15.0.0-canary.199fe2a2a.0","@material/theme":"15.0.0-canary.199fe2a2a.0","@material/floating-label":"15.0.0-canary.199fe2a2a.0","@material/feature-targeting":"15.0.0-canary.199fe2a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.199fe2a2a.0_1673474153484_0.749999508121096","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/notched-outline","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.8c0786d6f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bcaef616a39f51dcfb3890c91fd4efb9115adf8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.8c0786d6f.0.tgz","fileCount":33,"integrity":"sha512-eh2+6p/PnrE15aa3n/BkLxdf2O4kE2hes0aCiRoLZvNsL3hIIrPfhNYhloDA2JaiWedGLxYP8jfZY8tSBcaWqw==","signatures":[{"sig":"MEQCIBGbLT6nkX9yd5bxqQLL+c91A4S72ECzkQ8FMtYvpU3sAiBZ1ZQRz0kN/ElszwtL89UovTu6aLXTOb0TeE1h0jFnPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBrwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoubxAAncUdCqhAWBDyK7Jk/TG+B/n09KvTElrR+LK2gzvtacufNavV\r\nwtYpD6bXOXpHXLj1/KYC43xzVzi8OTOzZNz4qh5vgiCP5xZMEM9ZgTpELEZ8\r\nTSKxhzv0kRHXVayFUyNlbTndblCBZznq863sa30TbRJJQhLcVtT6d3PH/JpD\r\n0tW/IQLkbLturtUba6vDHKUuOcLMw1Qt3JJlDtAOf0oMhuuZlKGQO6X/9Blr\r\n4fDpzLCriDsCf1fpQWBZ9wGL9F+ZBUmyg9qEDbz60x+VbsPnHv51dyV1mALk\r\nU1xYPhANIVTd1LdRQBNtRnqwOFvaUzLjiHPJOPkKEK00E2WB8McoS6/0wXgZ\r\nA6IqFMpauK3bCYooTAiOsTEo3cQwAzXxgvKPjF5d7I+jRQ7na4HALCytnbhn\r\nlw9yXtFC8MFnr2bKcBt9iOBuyAbPpYo23954a8hJatOwKvJfk+vs0eYgeKRS\r\nlfpMiTxf58RYZk9AMj3cnGRXpiFBmpqq9jf0l0TxrIf3M28g9dnZo1qQBGiR\r\nvJf92vcOlprdbqhAVctWmtmAvtQAf23mGIo9w/aYCU3THyLNgweyPh7dnc6u\r\nHM7k5qLoiRgE/0XsJQesB1cIbYoJpSIVRgIgVJXak9FnvSxmcmdwqJwNFBMz\r\n/2umX1/GDZmquToFHVyJvClhkvAi2+SxiG0=\r\n=7E8v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9016794346c3c3cab2cf31154ef6a35eb5598994","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8c0786d6f.0","@material/base":"15.0.0-canary.8c0786d6f.0","@material/shape":"15.0.0-canary.8c0786d6f.0","@material/theme":"15.0.0-canary.8c0786d6f.0","@material/floating-label":"15.0.0-canary.8c0786d6f.0","@material/feature-targeting":"15.0.0-canary.8c0786d6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.8c0786d6f.0_1673534191834_0.6651595929774758","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/notched-outline","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.8a74f7c6d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91b15510ef8ab25a8322105fec5a7f00fc42670f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":33,"integrity":"sha512-/okv829oQZWhCDfWrvxMQ0TXXPTCjMbvmlVGrMJPyk7GdEWg3hEbinItFG/mxeXRver7vZ+wWM0DQwHJhqIfng==","signatures":[{"sig":"MEYCIQCTGX0LyqDwrpREgI/S0y4IApgP8qhmw4WaIWta9fGiAgIhAOvckP9YaUJLt2sNA0oMYsPaXrU5EwrKKp4dvyzH7VVu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvX5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLExAAiV1RvFn0jr/8jFBpXcbdWRY+/XL6oX1tmaXaWAdzLf3X4BZt\r\ncGDMcbgfHCadiSap/iOl1mJrEH1VZwyjyTqv2pIgvnF+Y92aJioNa0MH1dWK\r\n2ZazyuJdHyHOcl/JLgOUe9r0fRHR9ZfKqpE0c2DcdzaxQPG7JvmXVDOIBIK8\r\nkUTW+mdMG/578E2fn5HnW15e2RXV3YOLZOOjX4wA17JFAqOc/u1c/mpmktMb\r\ncsH/+y1aLKv+UwMg2fFDlaS1v+6mV31LBj5vHqsi7vgfj0qpDifbtkxzUpyd\r\nIr7r+YCJv+GgfzY3qmHiMpdbJJXRLJCnfm0Q+zw0nWkW7kCOvUhqUyut68wp\r\nyf5u7WnFW74vYSsSDcrij9MpwZfFMGWk7fv9t5Q7ljzCHXBfhe7VPBQcgId3\r\nhKrjxOY47lcKBiIjpUF5Xvyw+XqUs5e8GckAGRCsDZeqa+2vMr/hlHyFABTa\r\n9XDKfURvYy3gCafcf4OvYxBOGX8O1j53d9lRn0t7IuzJI9KiSNGVfHXEqRfP\r\nI0q/NQOI3XpXQPFxjjqXib0gZALK5KAk9J41ZbOEMwIiJoMzpGqI7wVsODu2\r\nHjIdRL2tV2Cg+IB1PdlUMGfyNszNKkJyzRr/9cwfrzGrx+ANA/nagsPRI1JZ\r\nQlC4bkSFSn6w2GSdgYgV/My60OFUIGnWYM8=\r\n=nBcT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9c676a1e4329c32508a9e7110198a336dc704f58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8a74f7c6d.0","@material/base":"15.0.0-canary.8a74f7c6d.0","@material/shape":"15.0.0-canary.8a74f7c6d.0","@material/theme":"15.0.0-canary.8a74f7c6d.0","@material/floating-label":"15.0.0-canary.8a74f7c6d.0","@material/feature-targeting":"15.0.0-canary.8a74f7c6d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.8a74f7c6d.0_1673983481104_0.8015962907199743","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b4687fdc1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65573cc0a12ca0ad3bb2e1de5ec1a2e42c6bf626","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b4687fdc1.0.tgz","fileCount":33,"integrity":"sha512-3d5kfboav2ywGiFCxcm0yzPUA7zyN8XePsWvftyNAUwEENqZ4UEJrXvtUW+cytKeRgDDO4N2o3Lbb953Vcm5ng==","signatures":[{"sig":"MEUCIGw4r382B48N74RSlavzZ1+U/ggDSlIp8DTr8FrBVURwAiEAiKcRoxLlUGri1eNhOtJeqfIv8DtQVY2JbOLJt7S9BYY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ7IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9zw//b1HV3A7HBreoKFIpaBc943/r9luGKJewRulBzEzcXpbc6uXl\r\nnK8WFLtb3Ikm4DEcrG5Tdptma1FDfDIObOQJwkqH00rdGNqIcvKxGDi7Yiwa\r\n3gDMQNZpdd1VjXBSgze5k50/147ex7erxGaMoriBYw+ckB+v51NuzjXsWU3H\r\nQsdolxZsCPARb87Li4s7Ghk9o75PIyBiGv2RNY9yXLSyWi7cVYWD7GllEHrK\r\nJ90AI0owbtaL61gChQd+o64gXKA6nxYdx3u4lo2DOQQKaLb/KYinwyAkeur4\r\nr/5jzcFGDr58lFx4uEeAFG+NM1D7FfLFmFy6qYZ16iuQWshPIMBcS5lg+K4/\r\nczXjiAsHnltX6diUYqMLFRKRosJ+5iWsuxSLdu55Ao/VwJlRozZMYr5uDhaN\r\nas8CjKcX74p0v1SH0B514sTHSoG6NdPbL4Tn2saKB93EqXlE4kGn5RWgXVhv\r\nyOi+BA9ARV+V2/TAcxL7TmLmiujO35cHCUfIojh3CQuGsiOkq4LVULnAng3Z\r\nljlc6ED0q7WGg5fmw66YcZ4Kr2Mdc7DBtXcE6/5in2sDpul39TzLXxv0PGhv\r\nt3NMX6+VcCN/3jNTn2136T56pcIb5CSPFsPw7vglE7yZ8f3p3rfpoPa/gFx9\r\n9Y8bAUdQYPF4lDPsx1lImy60G/BDLlTyNr0=\r\n=ZKJM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c9ec43c7d66a73ecf591f982a42a582e639a50b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b4687fdc1.0","@material/base":"15.0.0-canary.b4687fdc1.0","@material/shape":"15.0.0-canary.b4687fdc1.0","@material/theme":"15.0.0-canary.b4687fdc1.0","@material/floating-label":"15.0.0-canary.b4687fdc1.0","@material/feature-targeting":"15.0.0-canary.b4687fdc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b4687fdc1.0_1674157768635_0.2088784947996314","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b836b9892.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e03c159078d86d4e51ee977fab185c8b01694b2a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b836b9892.0.tgz","fileCount":33,"integrity":"sha512-/VGHOkmrjsURH+6YV5LdCREpA5KB+vz41Jsbgq381+XogFu7+TOQLAyxiaMpP3WAzJjGxY7+Hr1cxz0yih3p8w==","signatures":[{"sig":"MEUCIDLe9dz+5WRFT2fLaYMUeFqSvA53Vs7YP6OIJzZZ611MAiEA/IO4h4/8bOvMXItFkQfKXa4T0ULwyGAvwKGKiBd2LP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F4ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqi5g/9Ff4fgE1lrfEgrU35ZfpapiDOjAbz6kvixCisu81PI0jM3nqa\r\nu24AzVfYmMWxfq+WyeK2+KiIqT15DkO1WRUDObCVyy+OYWqlFjUlg99g1LvT\r\nQ2jSI/r4qn4EA9C2+1VLVL2Lv/gsQPpzXAY3VA29ckQMg75V3taCoQwGX3Xm\r\nkr8x0ZRkOFjMfbZYehI2yN7MWH097xtzz+U8SqdNUa7sCHrub2svVKRhkWPK\r\nGufKMbIIQG92KznXBBNKQfIki5yIfxdT21TCQAJB/eHqwfp4QYDGBMZr4U/z\r\nmc+hijin7QkiQYcQH69uYnApqUdM91gz0GA5HfcnH+4V9wryPuSjbmTumuns\r\n4sbZnQrKDvYiPBRPOtF+qVs6R79lTAyUI/MC/SYH+zylVjlUiz3uO10z4tN9\r\nsg3VQZWoxGO1a19kvF4vNQG7UaBQ5/0EynCePqZ8Q7uMJh+H7PmtmGVEN9nn\r\nhknU8JdaLlw7UxsRkeBbtet9iDERr2zHDS2XhtoF/hpmhTkLIVrrkmSlKFOj\r\nTV7/XmyAmkuKBZkS/bdrXUpCRFpyA3NI8ORrV87jk6RZ3muluv3p4N2G1mys\r\nZUA7vi5EgVOsDCNqomPrXYekfv6ZTFZAbWW8Ejf7N0UppRwsQCqF4MQge++k\r\nh1zAcNIDm+H4nA9uHRJq7dpA3E83oRTh6IQ=\r\n=AO37\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3a9a0b2e64227ef1f8979cd5b82be3767b100551","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b836b9892.0","@material/base":"15.0.0-canary.b836b9892.0","@material/shape":"15.0.0-canary.b836b9892.0","@material/theme":"15.0.0-canary.b836b9892.0","@material/floating-label":"15.0.0-canary.b836b9892.0","@material/feature-targeting":"15.0.0-canary.b836b9892.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b836b9892.0_1674599961664_0.022620390810740743","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/notched-outline","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.e8912fd37.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39069c05771cdc73fa83b6822000f4d4db62dd16","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.e8912fd37.0.tgz","fileCount":33,"integrity":"sha512-V/3qH8Tr4XRgAq9TtyGi6cbyfiPCac17616tawN/tgPVkpmq9Tbq8gX0nEuWMLFKGHeCA4U2hGJ+TD0rYKoodg==","signatures":[{"sig":"MEYCIQDLRWuyuu+WhOAGbA/35tFrFq5tg/JCdK72m6B9PZDX8QIhAN4AHEFhYbqFswVwfdk/v2k9z0RIW+Ug7i4HCH7zC7hN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0salACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8sw/9Eri+/Xn1fufGcd3AOCPLIuS5PEpXoTI3XEpA527UDD2xNPgX\r\nIh8nuUtdgvlI/JYlp1h1C/2F6brPmxMZeYEse4JMOyg5hE/jNc1i00KqNWOm\r\nLgcOo9DsTn3rQVvj9pk08bUBxnGz1t5a+OTIVEc6i5Ll7FXbVwBBthQKa080\r\nkm7t/NOOllEyxnIzES6wP2YzDE1cpC6Tyte6VxujczJ5lHJn+DEzk1dkY2Fu\r\n6dld0WGK9FGDDjSzF7KFnFEryZtDuE/tNN3X579fLmGUz8UKo1GFxFtPYvta\r\nJdKdkF0BWlKE/y2QU+acrSCRGwkkwhM/62BippK+ioHXg5b884O+e8+4mXPO\r\nv1saY7rZpEvgkggw+S9sT0TRA6s+MVe9FyrEABw4jfQuBduKepJBGP3MWOyj\r\nhGjJDtIixYBdwIvONYLVnrWL9fBHtiF4zVqVeY810l1pQSDarNRjY6OMRUa+\r\nZ8aCHPWbUM1iWFyjq218MAIEOxuZu4h+7qZy/SS9o+9vdkeEGRPbpYtmrYl9\r\nKDMR7mrHNjtIs2OgBy5AxSjeG1YY+kG9hzP/0Sya+2WV68j2I/Nz7mMuATKS\r\ny7v0EZGaR+v6R+S8k6Q1cRE8cUOFbanxAHlOBCqdOZY5ksAWkOScaF6I+NOY\r\nBIcga6hb8WDPGLs6QdDteJd+bh5+lFkNf+Q=\r\n=089E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"72b44fe55689bb591aeaddf242920ba73a6e5bb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e8912fd37.0","@material/base":"15.0.0-canary.e8912fd37.0","@material/shape":"15.0.0-canary.e8912fd37.0","@material/theme":"15.0.0-canary.e8912fd37.0","@material/floating-label":"15.0.0-canary.e8912fd37.0","@material/feature-targeting":"15.0.0-canary.e8912fd37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.e8912fd37.0_1674757797180_0.6795801576685792","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/notched-outline","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.16fbd30ff.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f33680a00d91e7049dacf5dc15144a770d4d43b5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.16fbd30ff.0.tgz","fileCount":33,"integrity":"sha512-fbN+XW0TDgXUvp/DSD1zECKkhkiDXan1ddevIxO0KxcGTpMFHmkh5f9LWseoe4qMmaDJE8c1GAwfAEGKYJJXrg==","signatures":[{"sig":"MEUCIQDClip3c//zRbgBUoZ7oZqNqoMLSbtJy/uX1hSKCDGmegIgAtXnrIUvLBj/9DmDYDaRJ1xDmKJ9J0g/2kUsvcL0taw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sfaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxCA//Rj58/WvrdDIFKcSWzmt+3UmZwkskXBMzCeEOXp+v6D1gjx2w\r\n2iT9vseOyh2DrgUtwneoDTjRLmhqyxuXjG8Uj9JZvlNBhNfiKj2ZfnyOJZ3j\r\nSkHB1KssC56MYNP4wT/pBN0oROWrEnHLGNcOUIlTG6HBJTxWq+q1rZTNXRtU\r\nTex505q10cOrGAd5zNokRo3ZsU2fVYeoeAqOxSU1goO11q+ZzxPvXbn106AH\r\n5tFN+LuR6Er2ptLpY0aH563GJN0LQloLyx62mml0jEjgEd80EBnuBfMcOsfD\r\nNVRj9jXKwZbTNJPRmCy4wMv6MZzhHpyZmT/0mCGxqYWiFj2utICa21kpYQgW\r\nWTA1AesQg6PWoT+NI9lyM1r0Vcwoou1Ltek/732K5N9mSpsWEs0ZaC6R4oFX\r\nnD0NYTl1GdSPJbKE5Ljx0C9phA/ouA7jA6tNbzdTVgEPEZLyhsN2kUs20PTw\r\nrmAXXnIr/egXVZ89bu3YrXgVXMn1CB6j899j6bO5B8RLZdhC1nGDkx/cYG/B\r\nUOZiUI3c5oAefkrGp1xhiCR1cYUBxOyj1eZxeHkKCkzCjEGh2O16z2Q0Hgfl\r\nP6QJodvN6ry/BhFwWGf/072NfUEF/0ofx1TPse7wtM5SNMOUkVL9GQd6KARK\r\nE0V3lZuiuUnulb4oF//XZwXsOGGejg/3Ny8=\r\n=31DP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f4c39ff05bbd1045563670b4ea50b0be51a91d01","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.16fbd30ff.0","@material/base":"15.0.0-canary.16fbd30ff.0","@material/shape":"15.0.0-canary.16fbd30ff.0","@material/theme":"15.0.0-canary.16fbd30ff.0","@material/floating-label":"15.0.0-canary.16fbd30ff.0","@material/feature-targeting":"15.0.0-canary.16fbd30ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.16fbd30ff.0_1674758106196_0.4674853049926695","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/notched-outline","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.033ae083a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04ba1f258505c4be1d3efa86bf140745544c1311","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.033ae083a.0.tgz","fileCount":33,"integrity":"sha512-f982wMGQWjtAwnvwkFMH13slXH/TLZo3JY9eHPz2IZekh9hJsuquSR9goOHK+ZqcjfR7p/8OVh6IWoTAvjxSQA==","signatures":[{"sig":"MEYCIQCgb0HbzEMfIT+9UEz3kRQMsvJdI08C1uW2GOWTPlFd2gIhAL8vjC0EBy3syMUjYOYg5UUbygWnJjnhxSgGW0d3JJlo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tQFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXXQ//QUMeIdq/ljuMoAJ5sU9BVgjG9loAjRKNCuy+ZH8jmqdcOdM5\r\nERDcAwAKXCd9V2pI9W13euswCl73lVlCjuEsI+++YjcTAt2L6VFfIp0ARa4/\r\n61DA+tti3FRzr0poHXGZY+PLH6nndl1J0QDsFSPXHT8M2EAK4WkrVteZnb1+\r\nIUI2Ph+i44SL4nQOeqMhNvRptUXbc8KZjOvdQHpoYqzThBvvyLd9RSi9LiW8\r\nalUVFXgev997FCWEEU+y2OohoavApM7v7HwR5o6JDt/qVMAhNO8BTn+IV6qh\r\nnO75T5FlFfYr7fIuUaiFDW+lmbGDqgyCgfw1iydFo5OnwiOw63G1Hsv1QQyb\r\nxg9mweB7d7K4V84RV+b2URMVjgERJuHYbA6d9oP65Gesm72gtAvDhmsVPVLH\r\nhhQ53ZnDujJ06zgKZ9VGqUT7/loTS8VDPIcFRw/r8Lm9Kb3cULjjxc0eDa2i\r\n6LZTo2nOsyYDwv/KWvDC0usIE7SLJUdmZJQcE74sz12cE72AxmybRzqkblmu\r\ns5jQCcx07fT/je9dphpG/ShjZ/VlGjF+hMq9F2a9tnmrMgtj3DQE4ilTIJJl\r\nL2gB2X84IWZTbeVl7nBEwk1NKvp43JPd5zHC/e9ILkEXzZgApaRxsTMezZtc\r\nLcyibjlehAZwAZfkB9xATF0nWnl1Pq4/sJE=\r\n=PQGA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"89ca938c110806d9150a3889a7d25689661c2fdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.033ae083a.0","@material/base":"15.0.0-canary.033ae083a.0","@material/shape":"15.0.0-canary.033ae083a.0","@material/theme":"15.0.0-canary.033ae083a.0","@material/floating-label":"15.0.0-canary.033ae083a.0","@material/feature-targeting":"15.0.0-canary.033ae083a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.033ae083a.0_1674761220845_0.4552971941655093","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/notched-outline","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.3a705fa1d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e8cdfdd839110903cedcc3d96299196cb4f7db2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.3a705fa1d.0.tgz","fileCount":33,"integrity":"sha512-uCw+D9aTNQtJDO+1gomXieCwe9zvjGT1DYvYVpXPnA+7+Y81T9LV6dSfNNdG/4wsQqRxdIINKR0xSXGzE3JkSQ==","signatures":[{"sig":"MEQCIAfF5Abzvgr7LyKZ0uUbSZ79LJsVlZ/QxR71BeedWLjDAiAevXtdtazceNnYi5dCkF7SuWn/OxuSHRS2eap+ue59mQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FOgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0Ew//b55NOcDQUD3zggVW33ILDb0hwafisQY6bdkbu5n4XCRuLBMw\r\nfTtCwrNs+BduTwXNM1vJtjvoqaxYp67F8BcAN1Rz/cXpNM4Hl6zhbKVEeoH/\r\nn3Whk4EyywuP+D3QLo916ALMQ/4KBckFVbfDCMJ14gWysPg2A7cTLry85MmR\r\nsUI8L6pWiyHwv9N03gQk3Et3gV6PzfUWwtLajcyNf0nbyy9o/Ntq1TkPZGBU\r\nxVe6xpITw59eTr9+o276TRLNX82TRFiWpkA26eMfOWyQknTtUL2RWO9YPdh7\r\nHQ5vS/7TtfyRkXNCVWjH+9gtniEikeZWbpGSerFUeGmHN6fuBFr2NqCXhM3S\r\n7cEcVC6t9c3sAvT1g7flGqcEcaMzdLu3F12uOCN9j+sTOx/X+8vFfE1zh6CM\r\nSgQp7Ub0QP6Oy4v27gqtcKuUp1Az8xAs3iVSGzJZ2rfY0ACGvqQ+FwINHO1H\r\nb9mWyUKrPMCE4cioMsb/OPIPNBtB9RA6re1R0KydADf8kdqVVzK+LxxkJTph\r\nYTPTGvH2EfEAp/7SbJ3vgO43LlMCn64oOyAUBHLPrECUmiSl7Xeqknz4t9jc\r\nfSPMeDZR4DSMsPjgNG3E4sULvV/3Vh9rWkphdnaBdSDNrmrERj0QH2Sqwz+f\r\nNMdaEAy0mXVjarpZ+69S+V7urgd2E8nuRr0=\r\n=C5wJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7e0f3737f51c1319f66762d8021d6aea33391733","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3a705fa1d.0","@material/base":"15.0.0-canary.3a705fa1d.0","@material/shape":"15.0.0-canary.3a705fa1d.0","@material/theme":"15.0.0-canary.3a705fa1d.0","@material/floating-label":"15.0.0-canary.3a705fa1d.0","@material/feature-targeting":"15.0.0-canary.3a705fa1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.3a705fa1d.0_1674859424072_0.13806446833008867","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/notched-outline","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.d6bea2ff2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a009f583e785f7b54ea94d36ce7025f870582532","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":33,"integrity":"sha512-nxTn6/SVmaA4LNvxMc0kX6JElJk8cDQ1NpMuN6a24PbIlARHM3CdwNpp5radpj48rn8NRysaWlM2mkCXmYcx9A==","signatures":[{"sig":"MEUCIQDI/8d9i/Yy1tp43PuFEzSGPn2kkSMo/hEOk29fNPJ+IAIgBhaELZDVuWDFmYC+C7VBDOLWyTVUROWBzeSCkK9pYz4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TQGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVPRAAh+UCL4COnP+voujCTrnZgwYoPwrpwBpyUdwRFC+Dwt5Lqw/D\r\ndf+CWoPl85uFcmIL3pDdzS77/IhXVPItS+s232P8WlS+prTZO6nVIcmLQ0DS\r\nzhwo+o+FNIpiVKBQVDeB9S30qYzunxlh0LDcVcFGpIrWRBtCRCcQ5Q9E+IA8\r\nNqfE+m9ZjzKRzb5iwkjRLIiypJ3IGlCXkS36hwSXMMy32jElnZF0Utm94oBA\r\n4vNTpEm+ONCp1REeL+3Hu7qoVxEmVUnF3rt95RRTlXHqyf2Cqv1nsi1k5SIp\r\naVu3wNLwHk2ZC8MUlkJq0khn4jtaYXqhBK7hl7ipoX2t+lnnWmGro/sEOYMy\r\nsW2t+kJO0VeKju3rO6YpbeDLvSvFp6p7Vp3Kk3+Zn4LPolimu0qPO6sdT8mB\r\nyQhCRXaiSIV7tytHgHlKKAoEfku/m68GEpAToGELdy9dQ972o9VLFQHWAuxH\r\ndz81NoIWTt/EqkvKiHRAj+2g+QvOoNEWyzWBh9jzV2+t15p5v/BsUR4Dni+I\r\neXfuzvdsOcoSyHS0DSuV0qFEHC31mdLtZ7+AR5mUvYyzzLucw4+bHSe3pDjd\r\nahk5c7OiN1H6iqZjgRR/sfQ3jvEQic5fYf0aEFNYW0r7Oks97wYXnLSTIcdb\r\nGOPhE5nyaKDKHQPQ22napsYFDs5DEAnbYtU=\r\n=dr5G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e4210a9f21a7e6ee007d475d5bd7e229dd7bbc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d6bea2ff2.0","@material/base":"15.0.0-canary.d6bea2ff2.0","@material/shape":"15.0.0-canary.d6bea2ff2.0","@material/theme":"15.0.0-canary.d6bea2ff2.0","@material/floating-label":"15.0.0-canary.d6bea2ff2.0","@material/feature-targeting":"15.0.0-canary.d6bea2ff2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.d6bea2ff2.0_1675179014365_0.745524391531057","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/notched-outline","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.0c94182c8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d30f07a925b7ec7ce3a01e1b68e76f11188ec716","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.0c94182c8.0.tgz","fileCount":33,"integrity":"sha512-bNyiSDD7oW18p6lhpCOCIaH47qu55XZvCKnpElTz6G71iRZxh8GKYSti656RQRUAg9Zug7Bh2vo9Ogfuc4GYoQ==","signatures":[{"sig":"MEQCIFZwfN2wN1tv5yCjrYUVqLce1WBrXx3GwLOYC18RxaPlAiBEdJr8ojlqeOTeJoIoQB8G2VWi2kcKlZygogr4oT1M8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qTxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRyA/7BJHYCX+86Orr/GrY0bY0rh0YlYXZDUiXLsRnBwTEl2EaF/Zq\r\n0sMaYMYkZAOKUJA9rLP6lzz1p/Fs3xtYwJkBDti9f4DJk8Cxcr7wUHkKXQbB\r\nP0eYWqyt7a/+kkjZVt8jpGXuRTdW6WblOdIYTQvhYDr5Z1egHp7+ytUTIG6Q\r\n2drxEbtX5Cvu0jFBlSVrRwoh6KRDqatElKLrUI18JLHcTFLsCMpoVJcm7vDk\r\nOkM0OoOZJnJ7Bow4mp+/crWzl4q79oIUd1xmPUauGi5fW9Gu6FHQ6WmtpENn\r\nsS4yFOJeKsYt/dfvrPE/Ni4tpWV7zFnOt3e6z+/5Z1pU2+/NC6/bDCVEw54h\r\nkqc1c1F9HQWTjeG0zBveLHCJTSHXLvjqf7hanWZRgFKEB3fldY58WsPB7SGR\r\nAYCTRMcMNkdKVCgnoKZws4O/CpgR6aCmmvCwCGpTfj+NgOJv7f7wndFhTfpN\r\n+9J0rZUkSAeruMRJPuFIwkvlnAHv1TKW9PSRtY3V+bX98MMqEOtxGPE/cbZx\r\nRXg4/yY3umE+2JpfOmnMLurBtfzskXOqcIwWu9FgM4QOWgoDKQPGL8D9JhSi\r\n6S0I6amQHQh8MrEqlsrNfYaQyx9QlV7YyPI5IT2itGxMR9BadsJuo5bm85XH\r\nwEfigTyGQq3TkZNCves8PJqRNgcAarjl6lY=\r\n=Fy/5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9e58d1edf6370fb6c26f762d83ca31f928149e41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0c94182c8.0","@material/base":"15.0.0-canary.0c94182c8.0","@material/shape":"15.0.0-canary.0c94182c8.0","@material/theme":"15.0.0-canary.0c94182c8.0","@material/floating-label":"15.0.0-canary.0c94182c8.0","@material/feature-targeting":"15.0.0-canary.0c94182c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.0c94182c8.0_1675273457539_0.11191599205023595","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/notched-outline","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.15b221540.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d05a246990a6e9fdb7561d274b57ba660e97d13d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.15b221540.0.tgz","fileCount":33,"integrity":"sha512-8o9iYA/L8/vTCMHlngW1hjG20XECFsZ0AHIOHja1y57UaDyMNrz5JL12DMbcJbbQ+LWO1twSwAE1uXYO5fZV0w==","signatures":[{"sig":"MEUCIB9fg7H1+SbXnjvyANDD6HPZ8u+XvlynXjZs1ct9nHVJAiEA4InhiS0905+/rwmrnaASrNWcWYEY5bBQoYxjtykaab8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qbqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBthAAgLlmYcOGtWy8l6W1XP/U+BUwvHzoBzq68Hds+WLXLnuQMMky\r\niiLUqFpfG03BeDE0mgg7lGTEDSmO+DLvd1/+LCH05IjVgpgtn7KKKA1oXRN0\r\n/q6d0nmV90lJYr5OUJUTNPHziq0OZgrE4RYxHxoV6VeNvjz14q6aACnuewku\r\nOL0vvDyWDPA6gFy8zMntkIELDjyN9w5bLUNvzZxXW497gZ0h9zDQXXWs11T3\r\n6MFkbcYtlScclTscX4hA0ZIApNo4Y2LuLux+3qCy7K2WJdCUKVr2vTS2+LXL\r\nerh464oGchZOBRb24lojHs2k+DFRf5Ea/rzhop5Z2oIqU3sgyy8ZsxzlV09+\r\n4tHSLC5h48vy+mIvbXWloUF+LZ8ZTR4kPzwSUggcmVx4FWjsgiaJmsdB//I8\r\nwFFdj0pxtXGM+glmEezNHQxnxyhOe2A5NJ+7PuNdh1i8vBMo64ec2dq48nRC\r\nZlZ0z2A9If76UdnbqU/akLqx2MqbnZGxGr4lOqvilFouqQJkW4kHVwmttRnH\r\nqiQieNY707jDW55nWQ5zT4pknJ2y0sRaIN5M6LVSHZJiCajkL4dx0anovmxk\r\nzK781QuMUUHc9heaamkPxxtnaQQjqsfwErcOPK5Cw0AsBPCO1A6cqkKBADXH\r\ncrWVTdacS7gkVOYikPIUqY8xT/3OVEb+q0w=\r\n=3QuC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a4bc6d32435d33a7b99197f32b85eb0b730acd30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.15b221540.0","@material/base":"15.0.0-canary.15b221540.0","@material/shape":"15.0.0-canary.15b221540.0","@material/theme":"15.0.0-canary.15b221540.0","@material/floating-label":"15.0.0-canary.15b221540.0","@material/feature-targeting":"15.0.0-canary.15b221540.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.15b221540.0_1675273962653_0.3331670243533156","host":"s3://npm-registry-packages"}},"15.0.0-canary.eeebb8bba.0":{"name":"@material/notched-outline","version":"15.0.0-canary.eeebb8bba.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.eeebb8bba.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7ed92f03fdda297013322c6c2d079faaf49a657","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.eeebb8bba.0.tgz","fileCount":33,"integrity":"sha512-7e8I6B0ZtzhDmKVaHEpy/LClIZnxVS3B+IDhQUJCnnu9TlCZAiHNX58GJlCUGwF4TmcyaIxB/RyMtojqAsI+dQ==","signatures":[{"sig":"MEYCIQD8nmdaefnQ8ELI3Ut6G844cv9WvD4kj3xlrq3eJpxfKAIhAPLvETjL9xf0trL+mdlaeKXv5WJHpSIYM50mpBY7ocrX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2q3fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofUg//Tni+pwYdi6YP8KoneFJhP97TSRixV+0RFx6u3+G8OCvUuqVA\r\n29wDV24V6cDO3fpWd5n78TDfIc76UkkBLl9MX0f1KTtSLglQOurwbjmZGM9c\r\nQTULOA2OVIhG5sNx5AzktCyMnQjhE9wxP4d6NqeG9mOQTq2BbHs3j+AStl4r\r\nc4Gm4qnGE6DjrpaINAZGPrQajjVKd1MCIhRyQmd5aDFM9Sqb3dGC2oybyQQH\r\ncMGAKaPVlE0T6uTYLy6Q+grvH/uiFG7swK39gf6O/h79Bw5gsBE3wr9bDgpF\r\nIoIjLTLftgOs6zGgdSvj9KDNBv9p/L5WELL+lV+wFGpyE/kcisPTcTmtfgd/\r\nWDYiGOwwCM2EkFuMlAXE6mL83gYyXMvp8Nn+ZsmQYxyXDiPIVUr4gubi+T/i\r\ntFzJ1uE16e7vI/WF/VVwiSbRBMamcb9OAFeP0Viz3GztfpPhQJCh69CSDx7x\r\nwHSlWnrX0/bRcrmSqAp9ER0j3vOAlbBoVWFfay83EpdGcfZJVJzxKiht8eDs\r\nIw8elOiVZ7E+kHfJBVhHm5cuhrJLq+0r3yGREiwa5oK8DxoenE2emoEFHrz3\r\nflkM9KRBo6U1SvCk4QTcr3mvz+NWa+QOYlXUYtJah7EKj2aZTVLRo5K9TFA9\r\ndJLtL4pcaKtulluJFDZFCdO4ByCue19b0EM=\r\n=JbG/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5c8d0d2ef793b8bd564888fdde6b97e8a2502cdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.eeebb8bba.0","@material/base":"15.0.0-canary.eeebb8bba.0","@material/shape":"15.0.0-canary.eeebb8bba.0","@material/theme":"15.0.0-canary.eeebb8bba.0","@material/floating-label":"15.0.0-canary.eeebb8bba.0","@material/feature-targeting":"15.0.0-canary.eeebb8bba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.eeebb8bba.0_1675275743042_0.11207030476688384","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/notched-outline","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.6a4b3f834.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed37987af33359a7f505418fff82b9feb4ca6e7c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.6a4b3f834.0.tgz","fileCount":33,"integrity":"sha512-Odh1mfOTgDi5nGuer/4AbMEpSzBDdezUzJEy2KPxSf4WfSNuDnVpuC/AdaXWUQP5GLoAQ+Le04k8ofHlYVULXA==","signatures":[{"sig":"MEUCIH1fFFQSz72AWc2pPeQ1Y21rj3JHmwtlDvnzqvyQ8qb9AiEAs9A92XxX0n4UV/LAtNwxKOzch+xVUvKVncSAIUJ1oqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rZXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsAw//b7l+NTkCXdhs5zln6wMOzQinA1+eOUGSIRuyaDD2YLaOS1oB\r\nRzaSZPmErmq2wF68hAWIpVuFLm9WabLHSsyLeKrUKx//itpH3/skP6Ch1HYv\r\n4VwjF9gAB3F5oZfdBbKIgjY0I3eP4XFOr7AzsMwbEVmi+IWH8AM1tkbkiTmJ\r\nnTmCTRJ71dP2Sf2wUJk3dTc7c2ETdBw3j+vMczZw09qua7YU5MTOhdiaELd4\r\nHJNfW6ABV0L+vkt4cT9LeyAfl8NP80hXjxI+9nyzdRI4FJ5qBAeM9OThbG89\r\nNFayTwPVntLEkORXifEPy25LcrhfgB5viFC2pLq4B3MmFBWgErJUV+GUE3eE\r\nbl+gSezw/3pTfx3hJo/U697ui9MDfCrl/viG7w7Gcxbdeoqo4PCSKhoiBcuN\r\nGn50g3WxYijg69INyBc6+LIAE2WkhKMDBuhSDWnfootdYOceW2VyXf24t5Oj\r\nPABz7470HWLmanJ2mM9iH/bnQZXDRfZnYXd4hU1sW8pqi7bl9d865nIihbwl\r\nouYI1hc72+6niqKrf4J6GmnU22NFjT3iOCLsbD54xHD/Sh6gMEr+y8v+KUeU\r\nvdOH/7kU4sM5En2Yg3IutZRfFSyzJlcnRl1oOo1jJUmy9M8PRdVS8HSoXKQh\r\n74fkAdc1i/iWfs6R7sWE3j5wEM3/cLo+7J4=\r\n=Ncv5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b1f2d06637869496d98898f4cdf709ebbd279ed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6a4b3f834.0","@material/base":"15.0.0-canary.6a4b3f834.0","@material/shape":"15.0.0-canary.6a4b3f834.0","@material/theme":"15.0.0-canary.6a4b3f834.0","@material/floating-label":"15.0.0-canary.6a4b3f834.0","@material/feature-targeting":"15.0.0-canary.6a4b3f834.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.6a4b3f834.0_1675277911786_0.13608114835234986","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b177b40e2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17648353a93b5dbf62b796b18d49235a7de5f3f1","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b177b40e2.0.tgz","fileCount":33,"integrity":"sha512-9tWmeTsvfQSuUurj8bU1i6MLt58NKzIhjYSV/MLefozZKEm+JAW1Tmom7Xw/IqHEn5h4x3z1xRUV701qy3s0Bg==","signatures":[{"sig":"MEQCIERJhajVaPyO+5qWFlP2A8IRQEWxNR8ykphelI3ZuJgeAiBypUBAi/0JMZK5YVl0/Y7nVsrO/gl2aqWqJn8dUaJ5wQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y81ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmozng/9HD1wNMYTFEUUvOoHQIblQoZfdDXnJPYpUfseZ511LipQWKTA\r\nTQB3sbufkSJRmfoxB3jW9pXYJslTPWrdp/EsU3bvu6vj73c7RQEMzBNx6zm7\r\nWkLloQw64JM3pEPI4RGS7JAF1wFwtvLmpFfwnHYmIUla5CUjXpg22XhPQoRN\r\nCLHThxXXmry/c3Ezis/HLwYY692HSJXUqHRmGfQs9l+r2zTcDQ2AwxeF1bF6\r\nOsBHGFAuQmdrBOlVjN0nRb9H/T47cwbDnGkOBY18pk171/0TUkVDMbto/s9R\r\nudEz0YCgkt2fIL5bQ78kCc2eQWiRye9oePyZIN2qm8ORAgWG0kEq1OOyVJWI\r\niaSxUf7P9qZeyfK4EH/dFw+qrr7eupQ0bEZhN+PT4oy8tZgA+RgWu1r1qlCJ\r\nJIkf1mxER4qvony2927PxZpt3VD+fTuN+x1X5jG8y9S9aP6MQmI7/puw8nI6\r\nWoiw9k47E/YaeYmBbPx2rz7dReZ14g+oeySfYRf7pxjnz05kvOpRhGTbMDKI\r\nLEBx9zeEUqm+ATXNxmQtSLOn9PPhGVownEEqqod3XZnivIlKTk0lpgFwJGXM\r\nTAqWy9BqgL9k5s6g1TwNazAlaWpBDfkjz/1smjT1KSf06v+fNXGONhdR8DjS\r\nZuXS7lTewQR0ab+dPrdJvmsfJC9sLX63pAQ=\r\n=GwL3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e3b49a7dc72f9c88710ba68c63d4ddce56a58fe7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b177b40e2.0","@material/base":"15.0.0-canary.b177b40e2.0","@material/shape":"15.0.0-canary.b177b40e2.0","@material/theme":"15.0.0-canary.b177b40e2.0","@material/floating-label":"15.0.0-canary.b177b40e2.0","@material/feature-targeting":"15.0.0-canary.b177b40e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b177b40e2.0_1675308853162_0.4157202824936743","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/notched-outline","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.d9f821042.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b6ccfa543c60b642bae3fa60b5f427df864a6fc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.d9f821042.0.tgz","fileCount":33,"integrity":"sha512-a9JAzqUKAx3NWLytIj7dyRqGxs85vEJjTCoLF+cG+pTrFE8N02J/o3UAgYM5FtHPRie67YrKzncCTlxWGGTkQQ==","signatures":[{"sig":"MEUCIQC0tTbZrNAYgVhS5kG41pkFV1wft/1ng7NyASsJXpsU4AIgHEUi2Gv69EegMFKzUEE4p9zj4mYqnVpVzygzZmAXm5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/UPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsoRAAiqj8aNPO4AQg4i7MHEZ6xc7l7Jhq9aaMEgkafB3CIo37Pxdy\r\nNX1+C3UK5sWni+l1i1qeb9yIEKEa+vS9Yp9fF+RD0Qe1UGOpPcP0qoFsMrzg\r\nQOzs/0VoilihQZB1h9fthnX24OjVws5DrFYxz5tLTyNITmqlkPC5Az4jMP2A\r\nEXsQ/rFLuQrfboF4JQXjS/74j7e5ToatP2Gua+eDNLiMxekKV67ub4vMBazY\r\nmZcgE5dXf6W+wkXkp1VKJ2WuIbepX6IoL0d3jPZrTb8vehpafrzalc4zLWu3\r\nc0o3aIEQJWGcXhFoooG4ce5PUajHRySnTNlQBoqcdrfqqgPEDSYOHbH90YJC\r\nvSqCWvcext5nWaw1HxG7WfchJzZM2mG/r7u1j5i4mAMQBm+s6AX9gEhR3yw6\r\nGJN8Fcbq1CvJF0TL7gVcIwcMOGNxRwQfDvIr5Uf+523uJMKfzSSnbsx4o/jz\r\nuCIOmyKeMnHBBtkxmqK1r2SARwtq950o78Mnt3xcNCXeWFo6FMDu8rFerhEE\r\na8a9lFqJrA0ADxVdYqx6ieYeDnZTjFjdMAZhfIrFYby+NK5cEGYZFbxXgqnY\r\nnbWA4aPktiJiNL6aIElTUVJ6Glw6fOFwYk8iTaNJnguEqrzs1XmM7V6nW5PK\r\ne7Hr/YLeojkhLFBM5bsnjiYBzDJK8FY+9Yk=\r\n=tUWI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9748fa2e1dd5886715f422f644830717544192ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d9f821042.0","@material/base":"15.0.0-canary.d9f821042.0","@material/shape":"15.0.0-canary.d9f821042.0","@material/theme":"15.0.0-canary.d9f821042.0","@material/floating-label":"15.0.0-canary.d9f821042.0","@material/feature-targeting":"15.0.0-canary.d9f821042.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.d9f821042.0_1675359503297_0.16022040339259624","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/notched-outline","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.47c7deb19.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e188079ba505d025b72375311c4ddacb31eb927","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.47c7deb19.0.tgz","fileCount":33,"integrity":"sha512-Yt8+lgpb37PC/92qm2buJk8uSUqUsIqcEs8vPwfYYXSBKhI1z85LYn6ZEq7pVTf87wDwG1moIyBct1MWIvPOfQ==","signatures":[{"sig":"MEUCIBipRiShQ3kDDDfcYlHqz64LIORSUOgEfn+oL8iHsFKKAiEAv501bI8Ft0CIW8D14h2BmlifT99B9Ubw5BEjAa1xucY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M8xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1Bw/9HXv9/gHOAOoEAT9feuiV6L1BYWhiB5bjDNUYNYTng2ZTu8Q0\r\nCzaQ6Wcs+7O5hrAlPpB8ajuWbSj970l4EH+ldJsZDbF2rY6Gj2bwDrZDysCT\r\nfqU3uM/wSbMg4KNa3AXEsGKaHiEgs64Ikrd1cN2MIRjThXtzo0PAsRUxi3Ww\r\nm51fajG2IQEHaYxTljd6i28n8ZZ8uBlxNoc9+bye0wVoD+pH8NrT10SX9WVn\r\nwZwDH/sZRgTUQFuz5G1yC5DOTLTqBbi1tSFjoQOJvB7k+H3pqnn9r9+5HRk9\r\nnh0lmyngvLYdd/Fy+KPXdBxBL9PxNfBbX49t6r3UzNIz9Qxe/lhz9q0VAEJt\r\na0CfnsydezvAbeaGKQ7YCoDorr8xKpNwnkuw4B20QUbZiLkbaL7RUej2CnwG\r\nTbihMa6doKHYerUZGi2/5t5pRr+l0pfCoRtHDXT/2tYPuUpBH9xHboC/6OtA\r\nvDzRYb2u3+If5k5sm0QH4P7ByvRqLVs389hPEnHOvNi6bNWB0rIENW/kOfAY\r\nlQOY5I7276c8RH31cwSDRc0CG45avjsuE+UztcrVDZItFpLbci74TZVRxcOA\r\nOabbP+S8wsVoLjXFW2cmIf4MyUB1qwbfMB/rmywMUjBnUAS/3QRmzauCz2pA\r\nFlHP3wmPUTJD/yP1DTVIy0ITNc+Qhq/QPR4=\r\n=WpIb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d5a6886a0dce343fed87311107975111f62309bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.47c7deb19.0","@material/base":"15.0.0-canary.47c7deb19.0","@material/shape":"15.0.0-canary.47c7deb19.0","@material/theme":"15.0.0-canary.47c7deb19.0","@material/floating-label":"15.0.0-canary.47c7deb19.0","@material/feature-targeting":"15.0.0-canary.47c7deb19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.47c7deb19.0_1675415344993_0.9697548140740309","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a16dbd1a6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1ac255ea55af64ae4f68167a1a83a658ef140b3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":33,"integrity":"sha512-5nKlaS8JCFbbsYfr1y55yIxigSG+Lv80+Kc8S7e9bxKStI7Gi+dHFdFI0iEsKI89OJrTZ8yx6A4rvUl+UnpK7w==","signatures":[{"sig":"MEQCIB2+2ZoWWzZXmLe9Lo3xpcGzFdvgs0bO+LZI8QQhmZzwAiAR0K9ktBBkOwTO5VAvL3z3DpRieFVgg1SEcJzw7Hf9Xw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3ffQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYsxAAmw4RHorSghlweppT0fYv/Y8epyAnTTEUYvBRNwY5XpAIFwPc\r\nSDdDw2oQt//qNHCHrQUwC86ogTpml5CL5Vc6ALJ7ztjBvMZS2i8jqqF8irCU\r\nEAlgMuE1tTbnPpY3GjcKT1CMz9/zmz7R43GTOfO+NOrfQRlVfIgse5lAD6ZF\r\n5UIaWVnjNTSo4OtRdZ3RFY0yQLIrcWzakIQyd56plbi5rViKneXS5Fsth6yT\r\nyUJjchwMdTm6b9PTmg/I2/X7Se8u1STS38iskGOKIof6UK1DF6RQA9X1S1W9\r\namIrJ1uuezTGS3+JIxHgPgXgOJKxSOFmQQAmCsgKgiYUDVIzZgKMlnjutntX\r\nx+Gq47qqPB5g4slzDmpqIvP9HUIY2uBsRFSMZLRUbuDnFsyGy0OL0TAxJ2T4\r\nKDOWEu6hqGU5v694GAewOhr/kdwel5TkBM2linO19rTDTCitWg+Og/T5m1kw\r\nxTKTx4/U1fphMbhsC7ydXI6wZc5tHZk+StkcJ4buT0QAG+ydSaLrA0cUEhzZ\r\ntlt0IYGdjXJxUCqAq9OO5eGSkdSCwJ7XvnflGFaazam31N6YJ56DvfdGRvSP\r\nxN5LHDyHjw54NkT+SV9A/2wiwl9MB4mo09LjuFSLU0W1GxX9v4Ygs21f3n+u\r\n0jQrGTNUQfoVjqrG2rQyA8iZsmblnSVGn18=\r\n=AhQd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6b1923aa24f460ae50c61296787e46f524bcf15c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a16dbd1a6.0","@material/base":"15.0.0-canary.a16dbd1a6.0","@material/shape":"15.0.0-canary.a16dbd1a6.0","@material/theme":"15.0.0-canary.a16dbd1a6.0","@material/floating-label":"15.0.0-canary.a16dbd1a6.0","@material/feature-targeting":"15.0.0-canary.a16dbd1a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a16dbd1a6.0_1675491279870_0.712182147946484","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/notched-outline","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.93416f87a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"242350451a9a5e6c6892404ef17f4709cec4a1ae","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.93416f87a.0.tgz","fileCount":33,"integrity":"sha512-7D3MI9agTtia5Ge2CdhAey/vuIv0QpenxY0vMPJYBbqe6NUfX3p3Vm5fzmhrAIEomq1hb7HJwBX1AxaP7Enjgw==","signatures":[{"sig":"MEUCIQDOn6wpFe/4XNv2vkVw28slsYRZPkeQ1VH325KrOjhejQIgc2N3fCBfFRUNb09ZjVsU4zdh7eu/h0wUvyGts2FSrOI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lEeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQog//autpJp0hmpTodV4crddano+BiD3zSnwtpRtpupCYTZgolv39\r\nLgzVcZ0YVjeHpDeInwsslYcLvVPcFmfUxWVOVd0DlPBe5958HIYUoA4EgYP/\r\nDmJRUJPVkeVDKJtse7MZVA3RS/3vPdjZDoGDQJOcQN2P9/528UvRDCEBwMYA\r\nPAMTLOHpR/cAtJ3BhRAMQ9HZhn8ojYilfDFZrck7aLV1IcKIKryyzFutUnnL\r\nqgXx96iCEsVRhZ4kTBd16jzQdle1Q7l/o35A9G4xv2H7XeP0yXMbOSesrjEf\r\naLNiuZfWSV0u+uF+28ob9WEog+mGyAGAXWZhTU40rJ90pdWGWXs/+dhL4u2G\r\nH6nXXbvw5g53K1EYWSiRsFfrVUfXzpSJ27qgGqlrDgz/AUXiwUIrHCzo7oqN\r\nD2eYZMM5VoBfC8e/HOPTNahpaAN73VESKHArvVoVQz/c2C2IuWbNdPeIKco/\r\n7JF5L9/qsu6KGdmWVJg/pblRW3nMyeV8W6SxaHrooZwHRdRSBvaTQZa7ZDPK\r\nDQxp/dA+zTKhS2Nrk9K6Kud4amJrde76vOwChrh5myg4zQNag9QKfmNnmYml\r\nz33fvPAbpxElV3KlvuBBhv+a+BabUgLrkhmiz6mVuf4mesRbDDhiNuGaerNs\r\nj/6FM2JiLLVxzcb7oRsnXpfO+g/pgTQExPs=\r\n=PJzD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b9f82375a462288f01ce4e4efe6047a3fdd9f9a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.93416f87a.0","@material/base":"15.0.0-canary.93416f87a.0","@material/shape":"15.0.0-canary.93416f87a.0","@material/theme":"15.0.0-canary.93416f87a.0","@material/floating-label":"15.0.0-canary.93416f87a.0","@material/feature-targeting":"15.0.0-canary.93416f87a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.93416f87a.0_1675776286496_0.967674553774132","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/notched-outline","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.49b8e7442.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e1d5accabe899caf67b8e61f665a5906491ed91","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.49b8e7442.0.tgz","fileCount":33,"integrity":"sha512-2wRm+w26OO3apxYiSXR+c+64MsLTMV2MvhsKXKa0VUpIU7cCVsd0ZeP2HYvTOWTR13iJD9kYMH6sFezK4iIefw==","signatures":[{"sig":"MEQCIGd+14AfAPkXt9GgbJOPIEPuGOkSnMqaycV2MsaQAaIGAiBb/oyuMr+0fZiiodQpkUEVTjHeulgc2UWOsaoHGOlYeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4to0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5CRAAoIJIRv+AS7uOMnszTHA3L0HbhJe5WbbS6NEeVNiF5O0+MUrF\r\nfeFP2sFZ/mRi+eywyOdSXrxd8rFUPvH4kPj5wtz/BmTCrYBZnIL4g1sz2ucZ\r\ndZNwoDB3bDOrHxE9b3q9Miuef4jwuxyH598S5WmHaue5BcMjErOON3M1I/NC\r\nXtEsmTfi37AMBr3YXidnDSGV+KJPMjawgm7rO4rhSZ1/R1cJphKAPI/buklB\r\n8tIIpLqPc5ekStNYlZdAL1k7x1hnAXrC1f4NR9u2L6+mLyPU8Db8bQoJ9tXF\r\npR4szRw9Y1LZhd0LmrgCwUFVqxl0MkufgdIbNyS3XyDRJnE2Y6TwCRDPbt16\r\nTsRLIBfOD+mufKW0Av82xWqdhs60U/ZBMJ6f1LrJudWt9Sjz07zYVBqsenmE\r\npDvWTUbgKsLTTYvt5TWYLZnnzT/b3oqaIKcJ+JfulBlr/T7cN0L05O/sphj0\r\nnnWTuStBFMvTZMfuinomiqA+079JGXGLf0wBIKPySU6AKeyQgUqKvD5Ipfn8\r\ndyzATrMGMzA2nY9EiLqu6+oSqZ36/5xt0PsWfsgFXLRnYZq4VV+CIIMuQ3kC\r\nMq8psmn0od3rbhBf7yyxDSUd+r2r7KfBSvs4FWFmFPmQyf7OvVcIgotr0Fih\r\nKYM+dzrx5Lh2ZfV3OcPm7g6jJ0lm2VWteGw=\r\n=YuK4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0ab5eaa3ea130a4b79ba5511e4e46e1f99b9e662","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.49b8e7442.0","@material/base":"15.0.0-canary.49b8e7442.0","@material/shape":"15.0.0-canary.49b8e7442.0","@material/theme":"15.0.0-canary.49b8e7442.0","@material/floating-label":"15.0.0-canary.49b8e7442.0","@material/feature-targeting":"15.0.0-canary.49b8e7442.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.49b8e7442.0_1675811380022_0.20602552290732468","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/notched-outline","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.de38de758.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7583b2397ecb5f3996a13c83185b8aa2124c36b0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.de38de758.0.tgz","fileCount":33,"integrity":"sha512-7+7N/4HxH1j+L5m6Ijil+pWw3xgIUBry3+WfgpuLbG7Bvt8hJaiwhLBh1QJ6B11/TiPrgAb/YQob3rdJj9Ik2w==","signatures":[{"sig":"MEUCIHVCRo8FW8/46uURjWbiF7eMlnIbsxEEOXI046dZuPNHAiEAxhJ+cyv7vhSbTKHUiDJo2KBq5mgoYlKWcFlEk6NArsw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RRpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGFRAAl3MdNOGvOe+uiKRiuBR6UNqXwD9X3NpcVzbBmBlafY70g1iG\r\nndadtiaJa6z/7By9L1vcwdcSYifGLCKM2ot4WgC4rPsnLmTLAiTknnndct4i\r\nBvt5JmUV/fGRZXAagHjPRfzH/GYfbNiFXfYmkZekHwKJM8XzeOxDy1CU+ddB\r\nAS/epBrZTQlliT1hXmGjuyS7Fu098tNN9V8qaC2zgzsQTEFwCuyxex9j9JXs\r\niNWeaA9GX+3kJnuOYS86Y+qPn7z6uNMHxyu+VtJNTp9NC0f6VxFEuYLSZvUt\r\nV8yfTdryu0uofrSNF2TbaO/I/6VqnIlWVP3jgcMR1mXUTgFozXFnB9EzANeF\r\nEiPsk1ADWQXVCVVTRj9fvyIbsABr5n4VOWzgw+YrjEkyf6oMmujm1OkPv0ku\r\numFqNhGo8hhecPqm9f/59puN/gw1dJ0eIVvzy4/XLBIcrgye/Bl6rg6BK+NJ\r\nGMqJwfLWkQnAkrtZ2ehm8iJmN8oiyrZdiV+66xn+TuPO/EFWXvQ09NQnos+C\r\nZR3+DAuR88dCBL6P0OyZ0AWHBDPk4n24VlYpGMR+TGMWmrUkcM2pONzRAVnq\r\nEV8MQLDC3TbNVn9Uj5KQaxU5AzAkMsNE+4q57GuNskW2oyMOTpZ9SLDbjeig\r\na296KCUQH2R660h0JLNPu53xtn693BDw9rA=\r\n=9VE4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"72df173af8eee38e00bf9af0ca5a77d5b780763e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.de38de758.0","@material/base":"15.0.0-canary.de38de758.0","@material/shape":"15.0.0-canary.de38de758.0","@material/theme":"15.0.0-canary.de38de758.0","@material/floating-label":"15.0.0-canary.de38de758.0","@material/feature-targeting":"15.0.0-canary.de38de758.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.de38de758.0_1675957353648_0.3607545325603798","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/notched-outline","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.4d62de70c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7bc110241d9221326dacac37bbba28970690ffd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.4d62de70c.0.tgz","fileCount":33,"integrity":"sha512-6oO/W/LB0v0sm9FnLKBbyHWqyrwPzStaTYPI6GBHhOjhH4+dhQQ35tPvp/2GJjv0rvS59YT4PdhDGFVSuEjRLA==","signatures":[{"sig":"MEYCIQDoFnTMnYPLB7v+uvdaBqq/DITdqsWUQgIqiUPjQOkntAIhAIUeF7qWGzba12PnctiM7rRMsfiki936xiXBcGHFx8Re","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W2gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDQw/8C2mfuP4Q0ipSzTcEX853HfNAXFtMjMYSHZGuctDt50AXy4iI\r\nvm43I4saIPdTGWSHJP6DdMrh6u5V59+GXtOXU05xyHt+I1xWSI4B2175pba6\r\nq1aj7hDsaGQNbNPaR+mkO23V9NKMiYVbqoetM6zTt7WNtMiPqhe++7lQHCXC\r\nkHBElbZptR2apr0O16Pq5Xs9jZ8J0CfnJ+QrdpHN5v/B/YvJNoVp/xfBIRQ6\r\nzYJnI7QNBC7Was0SBun4UaKb5rp6/9sh2HJ6bI7CFRzy7IUOma0VaOsdperX\r\nyyEW93oT0+9k5U90NXFXuGza+1mOptvUKWRbk/cmQJ+O+RXS+JRbromxiB9x\r\nJN0O1JWCxTOQwxDvwXHfAIDp0o6+gRQeFKXqjXBTly7SAk0vFAfs8F4VP0Pa\r\nk0sBrQWxP/BZM3hHSCtFgnxG35EEGPv6rFQQ95AQRigr3Zugygukb3ZOZ4qv\r\nQk43PTuBXgt1YGY1eUD0I47MJe8k7Ku0QPvhEisPQu9NfEnRI/weGMuMvmw5\r\nhq3kiha7i5udJ454fS1gJGzRyskr0/SsVr4NGKXfZoNx45NXxCINKaCpov2e\r\nxbTWEYEBXvUh0vMyWD3S9ccnOqVMcJMoBqOEGHM/nofqafiETPzIEs1o7oqt\r\nQDaEZ/QMPGmLpGuNt0S2ix93ZQmfaC0Z30g=\r\n=fuK9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d2081b5045fc9871ff56b0d31ddacd235e2316d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4d62de70c.0","@material/base":"15.0.0-canary.4d62de70c.0","@material/shape":"15.0.0-canary.4d62de70c.0","@material/theme":"15.0.0-canary.4d62de70c.0","@material/floating-label":"15.0.0-canary.4d62de70c.0","@material/feature-targeting":"15.0.0-canary.4d62de70c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.4d62de70c.0_1675980192604_0.3058886678024033","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/notched-outline","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.6fcd8d418.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa42f5bf648ac495b3c0d6968a05a37ec7e25405","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.6fcd8d418.0.tgz","fileCount":33,"integrity":"sha512-oDghgV0/wkwzOAlPPYVOUJ/yyh0dZhN3ytBeD1y4Wm45N54oXrGKNyB8GtzfcycQz5eXoZvaBSVrlHb7IpMpbw==","signatures":[{"sig":"MEUCIQCYED0tNhEpQP2Lvv4H3bAmQ0fEJsLtO5JcCO5LdYoqIgIgPILYDCICp1YgcXH5THYefT1VozqKS6hDl5vgOprqVAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iPmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0ow/9HVy9qryg/ztuBQP43Lbe/dzdNZbXxvw6qfJe4UFB5rD0Dfg7\r\nrJtBCud3IqA9dX1rpL+KseYrW0T1ggGojcLHOV+Dyl2HnaD3xAhRekAUyz7g\r\nN6QhxlyYvK5ImOxHtP+eAh1zlaBLQtzn3XWCbIHrGRn0Te1YhSpAaKnVHpbY\r\n8XW5LNU/mj2ce0wiO3mAxIdhnO6GgceQQq9HRH77VD7IWpqgTn/+RKhV/9Vi\r\nDc+GmLbuHMh9JQnspOuu/9iVzlf9hXVL6NcJ1KZc84y5MMZjE4b9mfQ7ERcM\r\nJkDy+ovMcD8l8UtdHVOJflIxaeikhCJup0ubtbtOEJflAW88DGFIGzTwUbFp\r\nGlw8puRWhErX0ECpEgbvyMNvtDPMy7eYMuXE205pmS1rKXlyfFGqh3A1IP4P\r\nJ0EJGDOjUjsOlp1t9fnG29vvYygxOsJJ13QB2iZzdtUkkwNypcWS8prUOrmG\r\npTRH/Th8VLt2ep7Nhz78nNldSC5jqr8RKVx8PoC0bw9iB05+w4iBayQkbyD+\r\nP1o1S+5fLuRtLwZvxkO8lj/x1Fgrq/A12wSEpZBUB0+UzYIuNwXEtTHo5UB/\r\ns9t4xSAjP3xb1N6bDJx8BDcQLWRKU+abgQo0ZsuKvZLn8BiKtOTXGnWJdoQZ\r\nXQfHNSeKheLNA7kDZkJSv7uuy4cj5peRK4M=\r\n=N8/e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"39b4fd2a38e7ab9611f614a59dd1694de0b94cb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6fcd8d418.0","@material/base":"15.0.0-canary.6fcd8d418.0","@material/shape":"15.0.0-canary.6fcd8d418.0","@material/theme":"15.0.0-canary.6fcd8d418.0","@material/floating-label":"15.0.0-canary.6fcd8d418.0","@material/feature-targeting":"15.0.0-canary.6fcd8d418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.6fcd8d418.0_1676288998505_0.6407832027398863","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/notched-outline","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.066d9439b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c39adcdcfa382d70a251f4aec072ab6633ccbc7d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.066d9439b.0.tgz","fileCount":33,"integrity":"sha512-AVs9sZbQW8rRGPz4GCb52pjgWSoofE6Wa+L5bniFdy5vqrHBtg/HfCkYUnWdBeoZSky2HN7Wz9w6YRVXhKFGnA==","signatures":[{"sig":"MEYCIQDo6qt7pPYkn4WX+18K52Vm4F32uQY0A1Iur9t4kPffIAIhAMlkzOCObhiita4+d/A74GJW/QUIDJS4fQV9XyuVSv4Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7Tk9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhQA//Z9ks/FgHaezHLnlmj+KNpAAKTGQcbDFvCa/EzIvvkYLEc+Ud\r\nvqQ7c3JWPL/glokDtevPrCYfj4yBnUbTxnRfO0das79AN8OZMCGLKP6y+CES\r\ncDuIvHW66TOxXfKCvyW/58DRp4JUB5+Xchzl3Ekwsw+EN9QoZEViJi0d6CCI\r\nlsTidFxVU7ivJqAblVK+RXHQqZPMrCRDDccXrDb0dEQ4F0JUCUMJfUxykyOg\r\nR72iyWKZbxh0YwKMcFAp/uxZI8IMgjXpFIiXzH9+N6a1kYdKJO6h7KdPL1Uk\r\nLf1PlRqRl+0vH11jvaJYFemK4Hfa9MrqIdLxGquZtR1xvwN+vgMzJn8rTydV\r\nAHfBUP6hvHJu3O7Bv7rDlz1DUHWlJb2vz8HuobEjb4y7IwFIC6Jn4XE2RuAT\r\n44olcSSUCYjnFb6JcqzvttDyg7ZzbUNhsr5kqUpoOLqdSTp3x4Bjn0O7UpI+\r\n0BPq2MI2VPNyVeKAAM5u6cSWjMwVUn4HSSfjGPwZuxQCLDwDZUrPULoPVPdn\r\n86JSTDaEacrELyUz36A4qXcDaxL8qWJxJX2ZeFXbyeoMI20J0nJ7AuNMel5F\r\nL0O14cJtOUOpnyfK3QSFWIbT4V9pszSsZ2mrBIFJ0Y7OdLpgyibSz/IkQr43\r\n8JdkL0Bo+kxe2qOgVQQ+1HZZjWPBxiEXNR4=\r\n=QjSS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cfeee3e63b3e6330deff033d8054adb710498810","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.066d9439b.0","@material/base":"15.0.0-canary.066d9439b.0","@material/shape":"15.0.0-canary.066d9439b.0","@material/theme":"15.0.0-canary.066d9439b.0","@material/floating-label":"15.0.0-canary.066d9439b.0","@material/feature-targeting":"15.0.0-canary.066d9439b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.066d9439b.0_1676491069052_0.6528659461980895","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/notched-outline","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.7ab32468c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29bb9227fc9ebd7329c80d82ea3afbaa0500db3b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.7ab32468c.0.tgz","fileCount":33,"integrity":"sha512-lxQGlTDveYpghcif32MxJ72qf1F66ofSh9aoyxIKm9KDxz9tO2Dr+2SmH2TVx1P5LS2MB7xDA+QQHZycJkZOYA==","signatures":[{"sig":"MEUCIEbQ/pK5W0nodt1Qr0bzikXE2jaPfniv+0EwbfMFrWr8AiEA3cDuENT61+kgVJF4rbElkXoYj9lNlyQGOSqM6BpvkDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q6oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6RRAAij280YuUh6A4E84wSuPSCfivsU890m5mYUk0RgWqbfDb2pXK\r\nrEbOc+UbAP/TAV8kW7ILlCOXqNREljKMZmwaZkvQA/rXyixkJm2f9lePoCNg\r\nQ07eX+ITI19xCnrQ9gSHI6+ch3N9pCfw8hth7+cdMIZRQwG+N86Sx9zwDiL3\r\nRBVwcFBoEU3uutG9F48shWiAr+zZRFgW3mv4qzwdJPm0jv4K8yPsqTj2I8OF\r\n5wWGD+TmIQmYizKWNfc2DwL1zLuS1MeWXQakEZ9ThfLVYh2TMvbeSIUcWf4j\r\nEC6qX5gWh2vdKAjWa8uGy1esJQbwGupRcZxMXqyk/qKfGlvTRo7j2J09/7K+\r\nz1LEoqBYpvt6SHK9npBgvTd4UE82j5sfCkczBFcMCEhTfXSnPOt753icLY6E\r\nMYmKqoxNBc2viMwX+CezmEMWjPMwQ2eytBC9ZXgsv0vdHzIEs5E0xCr1InaS\r\n6arwoApGqt+THSiJg+7HyHrPD7WUaIpKZ0RBDdqw3QCBcW9fNWhUy0GXK1U3\r\nGFUzGFJ9Ww+VTUdJIjl6F74n7OJQlEb8B7V4jhEfnowyavT2Ii0ibq1Bv5MZ\r\nTodymiqt+ifA7tooUF7TMOWKaJ0Xb3rOLOHXwMgXF4AJ8GcLvOg4fgx0wAgz\r\nzEX5z858QV6lsAeDim3m8NuTMiHPVovnyz8=\r\n=iK+/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"08b12f363223d69b2eae5d2719e9ff0da773381a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7ab32468c.0","@material/base":"15.0.0-canary.7ab32468c.0","@material/shape":"15.0.0-canary.7ab32468c.0","@material/theme":"15.0.0-canary.7ab32468c.0","@material/floating-label":"15.0.0-canary.7ab32468c.0","@material/feature-targeting":"15.0.0-canary.7ab32468c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.7ab32468c.0_1677004456533_0.7875650399955174","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/notched-outline","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.fa27ba61d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adfd5bb70429cc7d2ce102fc1759c412bdd6ca38","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.fa27ba61d.0.tgz","fileCount":33,"integrity":"sha512-DuqOjhzGsYI1AVThVoqfpjYut4hKkeUzLZMKFfUy9/QkGSeoBeRt4kSaRaq7H3ocYo2qgU0A/s14UuWMh38U+A==","signatures":[{"sig":"MEQCIFW0+CoXXyPa2etbT/dMLhPpbCbvpZkOaFHNabr6XlcdAiBfbvMtoJxN592JUAp0RxO5RucTw961A8lIL6IVbMjs+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NgkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXUQ/+O+vSp7agHQEcDF0gy8Q0/qu26ebKEsya6JB3C9hpD1x3Hlhw\r\nf73GHHSFByo682j1+oVmzQz3caqtI1ucTWkXaD94NL/tZUhzPfxohbKiLP7K\r\nqxXRGC4uE5KZpcN7aiujFMnXZQC/t/rFA+U8NZUvzNSM8Fo5HTjN6SvES2cL\r\nm8OwYb5ZJ4SwkqqZ3ZsA+336OIsx5m27AoaJggwJzOmhJhln4MyjtfGn+F8P\r\nDVMl1dQaogZx30B67J1n+xIbR1oVBqIFHPFFn2IX9u1lAMSI/diLE79Nzbx1\r\nKd3L8q4RkA0NDt39n6bn14lL8n5Adgqo2nShmVZJpALECaiJ5YjZoG9CokVr\r\nkLZu5sciy7ma6srMKoTvshj4dwgjXTNq8GbcoCnB7W2CQPDmYvFb/7/8wJ/B\r\nXGaafE2XQucidY4iYboZQl2pshA6GLIHGIFm556XnIMynvQGf0C8Qk6viNmg\r\n1SuaAvE/aaJgiBhSy9N4p0Afg2c6/oBiC0yb1nyuiJwzjGFwPLVeleUaMg0R\r\nS8PN+3n8e6PqDIY7mc2xPMzDgE0W/0XuEfc5+8B9V/GM/prMqSsFig50LBk0\r\ncOsRSRFQNyK4vV2TRlKa43K3q+1jK2b+c50NNAzluRuzyK7UlP5j/H0+Keqc\r\nqrtgS6E2a25IzmRc4yCOW7OG5Yb8TvAI2JM=\r\n=C3Y7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ed40c112543fe3ecfc009ace11a6f0c3f82fa26a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fa27ba61d.0","@material/base":"15.0.0-canary.fa27ba61d.0","@material/shape":"15.0.0-canary.fa27ba61d.0","@material/theme":"15.0.0-canary.fa27ba61d.0","@material/floating-label":"15.0.0-canary.fa27ba61d.0","@material/feature-targeting":"15.0.0-canary.fa27ba61d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.fa27ba61d.0_1677514787804_0.29093856033897025","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/notched-outline","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.311ab4d4a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05599cda63615cc2411e0276277958c86cc6994e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.311ab4d4a.0.tgz","fileCount":33,"integrity":"sha512-fzuY3T0F2y7Lv2KDlEAOsZqBQCXVeFdyn2hy+zTb5DnDGWMDnsW3KVlQOkrF2dZ+/cB6rvq8TkBhHeX0H5/3wA==","signatures":[{"sig":"MEQCIEDdvo4/8eCTzFqutYzf+7h8rMNFGeGF6o3uUeMuN1r8AiAHOyrlPOt3QBarpyaypwLXWVf5T/AeST/hHJCE+S+EHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N05ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmobyg//SmeLGW5c25/JPm1EYIiGn+TGRowmi+ddiATQdOm79ta/e0oE\r\ntuKkkFFwnNVjR2SzIoDTQlrmVFEpB6yuLQFYt8xTpVliJgjJQOXtIIab5tVX\r\nLmXPA4oFNO7vlEBklKUwRXWTI0vXeEllLrC1sNtgLyVAvh9qXsp9GBvZsXbk\r\n13UclJGivxd3uD5JtPLz/obMd/XHOtxsjFWDQZO4B7P+SApzpojDIjQWqfc5\r\nKdBYcQJ7UpTH2GUGb5ftYtKnBobGiNAxs+Z/0ainC16tGaN/3an7yK1OP4Pj\r\nYJaIIqJXN9XLJjs7z+y62B1Ylvd63EXuKTvF/1ne4lKAPbdCU9x1jOIgtBRi\r\nFQQ3c6zwwuuENGhZ9GV4lKBps8eX7IokuIGcxWUIaMsyupWNunvHl+0duRyK\r\nMosUURB7LFftk/2l813ZW4Pb7QqK81hJHptHc8L+3YSgmKYSrp0FoVukPT2I\r\nalz+jz6Vr74RloBArC27RIxGoGzdcPhbFGFya6m+Y6lOvc/jEGgUn8g1ONGs\r\n8VOO/3ne4Zeh4nHQkc95/bvHaZPBbXvTKwe1UseTH5rrlZmmxcnM69PQcarS\r\ngElqcIZZxVoXo8LyONMed0en88E2ds9qrWjlFNPFGWlA4+mf9q8rwFHpDZFx\r\nvLkizbF0+hRQd7Qz3s1NjjFMT5aTuDKQ8wg=\r\n=VZLK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"07f8d2f7bb4b2f30e60a6bd8739befd9d17bfbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.311ab4d4a.0","@material/base":"15.0.0-canary.311ab4d4a.0","@material/shape":"15.0.0-canary.311ab4d4a.0","@material/theme":"15.0.0-canary.311ab4d4a.0","@material/floating-label":"15.0.0-canary.311ab4d4a.0","@material/feature-targeting":"15.0.0-canary.311ab4d4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.311ab4d4a.0_1677516089095_0.970542017465013","host":"s3://npm-registry-packages"}},"15.0.0-canary.901c83e77.0":{"name":"@material/notched-outline","version":"15.0.0-canary.901c83e77.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.901c83e77.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ea23da204d07457d3f4bd386d1b7d69578a7eeb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.901c83e77.0.tgz","fileCount":33,"integrity":"sha512-AAPv+NwoGalm4ytl1eT3g5rnpUaYLzJeybHCoTS7ce5xwaB7lnm33Xc9NwWpu2L3UUGGlN7RWVyP64VudLxB4w==","signatures":[{"sig":"MEUCIHy+ro2mvPl4xevzDoXfUfARQp0t/ToLdz25KZMLaYA+AiEAzA1ZqamA3dxQUoxLHo1vlnTef7r1zuZAXZvaN1nzHgc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/PEaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQmQ/9F++Meu5LDSQEWIJDFhUDyEqTOwC5+eBh29DNohMslSraWK9n\r\nOrIYaRKMpNaLNfZOuM9f+TpKEKCBrsH8/gz4oujCoSFLRXgzYtq67/iEkVvO\r\nh+yovjEJWwbaE46s3VxkVF3vc0bN30JGDxbvT/o29fe1aU1ljSmgfh/4jTXp\r\nkhHvnb1kGTy9MXz6x4GIHaIEDCuRsW3fTBwdf7kvfINOUG7D4A3D1ls0SRCa\r\nZvw80/dZcY9Tg+JhM6v/joEDMtjru82Uv3ppGkptOp2InqijM23Qb7Ytrbq4\r\nkjCLHmlrDjrsqwcE0U3/Xop/AlZUhJlrUtQdUltKV+xr0JkrKXTAFf1Lk8oY\r\nc7YK4E6eCVNP1SrpcDNNXUB9vRewlZ1RD4s97JS3V8Xt0rysntvQ+ybrDlQ4\r\nisvB6mQ9ABChkHzHkUoLB30hEyGgXZpcJ1ZDtHqfWvbzRaCSOrXmvMI3kxjT\r\n/c8Qk1fFqQ5Kt3VLC0pPwFDgHYQNkE0pxohMLLcH7LsoUn5DBtwBJrm4cOnG\r\nlYXgAvy2R+sKxHX/5z7Em0e1t2iJ8HebCSZgIhtpT339ho2/8aKPno4lRnDk\r\nBLCa7erFCWtlsLwWboV9dxW6HtqIvte60lVZ98wvaNX9/2450u/J/1bi3o3Q\r\ncrdSlpEf4sGfWnQ6B9N5cOze5ktFNXjaruU=\r\n=FdA5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"86c988d321eecbf29bbb6cc63f7dfa18cda02d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.901c83e77.0","@material/base":"15.0.0-canary.901c83e77.0","@material/shape":"15.0.0-canary.901c83e77.0","@material/theme":"15.0.0-canary.901c83e77.0","@material/floating-label":"15.0.0-canary.901c83e77.0","@material/feature-targeting":"15.0.0-canary.901c83e77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.901c83e77.0_1677521178018_0.7691303269107475","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/notched-outline","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.5cb8e2174.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3907ce7eb3c07c5966d3f0566171b64ab9b3f80f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.5cb8e2174.0.tgz","fileCount":33,"integrity":"sha512-GEbH4vxwsiGpfXf476JXYmB8RVQjk8pcEvIa1u68n+aR0EI+iLFVcJks4smgRQEo2Tf4IoCJBP0WVY3L654Xqw==","signatures":[{"sig":"MEQCIByop2SdAs6trHZXq588AuMhnH8gpuqRa6t/bwgI7IKeAiAShChVBM+qAthhivfZ26yX0zF5wWWQEVdo3YGb0AUmXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/37qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYPxAAlXK/cbyBLMcyYK2kSYWHyP1Owu3A86gs/0EeZNRhuK6WH/BV\r\nA1YUeMjkmAKS9toVvIzqXgseiNixiJGnzmrm0+roUXt9hVXh49pF3uI/FdOy\r\neOXlBfvK+DzS8PxIGQqpK0/o4p/MdDX1MkPFQenBAx8sJ3yccGvqDbhVP3me\r\ncljEoqeBE6Sf4ZrjLHSjpfARa4UibHuqwpBBI05fwsgsL6XhYlifUJJwYxZM\r\nY+zO5YUTt+JWVCn1wrQ0C0CztsA3fQCgrtQ8N+H/UdBEg+TvPozHt5E8TuK0\r\n4TtKG7PS2Aa/cQeBU5dKK9w5ZCzLMg8FfonD7z/RJIv+JMfUae8NggAjEwpl\r\nsC3DKi5dhy/rfoswtBGpIQwOmLpmPHdRPVBkQWj2MG9KDLLy9rFqNMEok6yU\r\nKwhB/k4lhUukvdaRFPamyw486+cz8TVtBiudxNsqGLAhKeK28bxhfBthsxaA\r\nIt0k7kE9+2Dw+ZiVaa0BI30GTyssifVoIlypT0D/M62yf73alMgJTgyFLZJn\r\nHYni5KUWqlvN850ep9wSZkMdLYNTobYoC6WRpcnEG1AOl9Ks6OlzUqymHKrs\r\ncEL/qaGtDz3OQcupW3zO7EJ4prnzVUT7Y2szjAkS9YSWOObj946JEgeR9Y02\r\na7O7UVWXuEz36vbxpYVXH4RRB2JPZFHYMUw=\r\n=8+I6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d57edaa5a3a3079c48ef7c804f0a642bbb682478","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5cb8e2174.0","@material/base":"15.0.0-canary.5cb8e2174.0","@material/shape":"15.0.0-canary.5cb8e2174.0","@material/theme":"15.0.0-canary.5cb8e2174.0","@material/floating-label":"15.0.0-canary.5cb8e2174.0","@material/feature-targeting":"15.0.0-canary.5cb8e2174.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.5cb8e2174.0_1677688554504_0.8017229626658298","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/notched-outline","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.f32339937.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a6eb595f0b66649e10f69f6da404f43db8468ef","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.f32339937.0.tgz","fileCount":33,"integrity":"sha512-FR8xU/neYZKyBxw07i1qXZxre+HYjjhvmiOqbCzvF7xEQ7OdJq/y8UuoLG+t+X/UAZVp+NPPRKquJOldJcR+Fg==","signatures":[{"sig":"MEYCIQDFJKilHVw7r7q1SphO29G1Cp72pm6Pk32PyHBnAeMuLAIhAOYainvB11p0+7heGu30JWB1BCvPvG7G/QCTPUNh9z54","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgOeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZnw/+LK/i3vqSmUYZ/bQ06ZpN61I23pwZW+EyFGoOVIEWg/R9VKah\r\nlvTRzCtt1UDR/eTp5EaVll9MeUnRMC0n4LqARneUdxIZlrpcAGPNkxSTo29e\r\nfGT9ATyRFw32jRfDZan4kpxSA7nrj9/zsmz7NyCnfwApmi9IQAOWlgzwJnOF\r\n27ryi66rZdGjYSFTiOgNahHS/uw6VEpS6SeyNg6Rcilaz1/at2NVoKhVtS7m\r\nOktQLwRuhTonbvMtEYLQBbw7FyFU3VzPs5Cmfqd7N747eezNxymwmjEnn3Fx\r\nv56w2yV/tD8x7WP2aXWPStlGEkr3frLhYEkKASjAZ8QvqW7e09vTPen3OlEt\r\nhoPpG7+ESwoOYHPGD19hgkawPuXzNU2w4TTelz16T/VL8lNj8L0Wut80JKAo\r\nKrtrx3oCuc83SXCLtwT3B3SbVs8SpPBUU5tsAajvip/uZeBQNpayfdxMBFdQ\r\nubsSPKF4xadyEELe5janjkC/kLN41YZRCzDa9CbIzz1tMLCUMBH+UCu0ERde\r\nXF3MhGNidv9I3urhcAQ7koCkns086BmTTNUEWCarpvuQ9jIefar0VwNpuTgd\r\nFCj7479exuALH05emDceLLXqB+hj1SSU1exUx1iD/CdNzkhC/FgoZyg00aA8\r\np7DtCUkbGqiPeAz6bbMU9ZRojFkvpFPEz2Y=\r\n=AhcF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b6c5103b89138f008c28f70d93e0d3faed285061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f32339937.0","@material/base":"15.0.0-canary.f32339937.0","@material/shape":"15.0.0-canary.f32339937.0","@material/theme":"15.0.0-canary.f32339937.0","@material/floating-label":"15.0.0-canary.f32339937.0","@material/feature-targeting":"15.0.0-canary.f32339937.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.f32339937.0_1678115741923_0.7425239984560499","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/notched-outline","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.7644d63d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0f0e2e0e77db5b64734a3e56105794df65632ef","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.7644d63d5.0.tgz","fileCount":33,"integrity":"sha512-qRPStFFSBqPNJXOB0+Av5L+VGeJ/I7poQgU77fUi9ITCgTVgItNTZ5TNu1uIqCab+NYJVf1pNHIOi5OCd8gfpQ==","signatures":[{"sig":"MEYCIQCHc6DzcPvozFZeSkh4VIvRYmVRIKbxNWM9UtrRgYZd1AIhAJ06kZpmKv8ZHrFXEaX35jv4tsI2LORJYWgEnGh59Dgc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmjXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZCg/+MJ+Q7BBz/Nz3KumRzuEkOADQI9NiqsNaKegHzpMkLD7O8otz\r\nrjpujY/xl48m6iAI2j4+B3GfLwz/rqFXx2ML+LfsNnGnn0Yd/mjVhoGHG5Rs\r\nU31INDo3Kva3qx3Aa9eSdYTcveDbAOIMWTYhvynaCv5WhlTeYJ75pN+sQNu8\r\nxHDRYPHhNGOOsQ7fjAIb41CsZw6dPd2eNJauGh6ONRG4SkbRP6mdKXFNOA5C\r\nLkBQ8eecEHEWePzl6H0dC3/+E8AjflxvCwdhipckBQtP7VaZFvv+5m7G/XU2\r\nQBNWItXAEdLvYxJVv7N7AIKHnbT1ZO1NXixUNJ88/1mXi5l6Ohqn4E5WI4b/\r\nFBMmTnIUxWfgk+J1u0KOwJFKCbDf6scp0UJpEla1Nr3V33LQPvHHdOFC/nPh\r\nzJ3Yj+DJaIQyqfmZoA51KXNNDBKtu9cfiGw091KaZujDgbtmjfcngz/n+F91\r\nOBtmvhrtMYdjGtJh/7WuqIxtCVdF+8XNd/6oUQ38JfYGl+p7Mrzv7sY/K0j8\r\n0+fdnO8qjshJyeDQlM7EiJZqvA5XnmCKOMmlJzI5gQbeM+LzaHx9WwZzTBNT\r\nHVvasOGg/M19kKDXrcOQaX0h1ISjnGkKcGUozdElvbxnxY+fjcmzE+yKD+wY\r\nH0BbJZF8p97vI7f9tqmf9FtalaSAnezqNxY=\r\n=08zt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a0332d9af18b36becfa025c452efffd11be59943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7644d63d5.0","@material/base":"15.0.0-canary.7644d63d5.0","@material/shape":"15.0.0-canary.7644d63d5.0","@material/theme":"15.0.0-canary.7644d63d5.0","@material/floating-label":"15.0.0-canary.7644d63d5.0","@material/feature-targeting":"15.0.0-canary.7644d63d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.7644d63d5.0_1678141655009_0.8957612624128548","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/notched-outline","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.d96330c08.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dc5b9f33f6912a09a043b1db83328519988031d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.d96330c08.0.tgz","fileCount":33,"integrity":"sha512-NCMTD7MSvCFyGVn40XCb/ShTDtm9Vz076L6RMV9YO+Q1PVXNQrgIUUB1p6TMbtV7ILzue9qCi1F6k/bIYNBHyA==","signatures":[{"sig":"MEUCIQDC5TAyiVOv/OatudHGHW2jlQXATwBM2DjI6D/Gbd4x0gIgT8E9lul3aUyWAOAA+2sWCQeFpxzaVcY8Zhg5W/rZGxk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHSCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAzxAAlbVFxZiLm/LKJlMwyMkK1AWBsQ9QmoFZY/one09wtR6oSAw0\r\nMNELstjNNlUtovpbEHzkN4cL2EOIlgj3/1OVKGW1SbT0DXwlKmvWnpwgXomP\r\nEGSw/iyFibq9iNGDbGfJaXQ7eWCw94+NMHJRfbUA6aAOyQMBGFmkUlzFjxuh\r\nTTsp37a16/JP4SFMeuOYcu53cermyqv8p4qJzCW8xlTB2K/N09QqZ7pxb0f/\r\nJntz2aEv258ihI7n5Y8RpZcctrAEcfgafpBBeITTpBqgBFibrCBZ50jL5HZX\r\nANWN1qc8IAGgMVE07INj48i45ksAGpchz85PqYa93fS/0aTLF37xzCiV5l63\r\nRZrO9lnq+rhxoIw7nr8erX7G9KFz2EPtTdC87B0m3flxTgS/E70qmibc+A2N\r\nbmchRORUYhKDudIbom9gWrJ37gV4gU8YvOZ/zBxzO3naHG9SciVShTt1nkkT\r\n4T5qeSSJFvtkp0Ur56QXksJPrPypyjqAHyinnrhiWQ6/UuvDCWMdrTWyy46u\r\nW9CyWlbv/ifZxggiZBbxcP9OnxPEaA+Ln7jrdSEt6i3hDvWJGak5hNRUV0X4\r\nfa9iiw8Fv5MvXVGQbb08ggX86z59fVJpBE+uh7iwsl8dU0FyxsDEhlIuLZxX\r\nNVs8TINkpU6jaeN8m2Kf4YptQZfVfe+AQpA=\r\n=Ma47\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6a6d53aa84a0c0a10bb15c3cfb596881140bddb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d96330c08.0","@material/base":"15.0.0-canary.d96330c08.0","@material/shape":"15.0.0-canary.d96330c08.0","@material/theme":"15.0.0-canary.d96330c08.0","@material/floating-label":"15.0.0-canary.d96330c08.0","@material/feature-targeting":"15.0.0-canary.d96330c08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.d96330c08.0_1678275714632_0.9533940303237205","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/notched-outline","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.c99cae77c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25633152ee3c51d0d5ad3a3d44d9ccd14741bf19","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.c99cae77c.0.tgz","fileCount":33,"integrity":"sha512-gSpHCnsgMWrxWTzwf7KUVwDtFeI/vr9IMhuQ/iwiGGezVb00VnNg6geBuJbJA8ASO/DjpGFGcO+xTess0pYJhw==","signatures":[{"sig":"MEYCIQDndjAQ9qMH1FX0khhoejT09PQoJp21cgb5AdT6CJpwxgIhAOM2HGbOQCvq5TnQttZF65iLmsOZrKvIaTcW3hYHxR67","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR2GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpt0Q//Vf+THhYDP6VM0OyCEJAKNN0aNKVYiP1L3+O7cSaHlGdqiNWi\r\nTR8914XHzwRqrYKJPa1K5/QeKWsEnksGKSqurvRR5KHJoBNdFSQykREtNMEk\r\nhkkLZB+Pd2Iy5uv6Ir+iFgv/kkEVIFql07ng6JWtw8b5Bvj73aLAYzE40Yk+\r\nKOTQ9cEn53hWdmPPsTS2djOeAhcO6U58EVLpMykhuhHv/Lu3xyAqKIop3Vi4\r\n7BR95dD40sElbyBvIWQasol5pTTuteL563jtukef831K1LZushGBrA/T6QL8\r\nYIZYcP09SOPQSpbMAqjuD/rvrp39/qj5ACA/2l4DC5XuiQWAXE6KCOIi9B57\r\nrfmgXOgQh6A9mOeUc60S816SFgj+rKoOJrs28IgYa+q39dCDDZGENUe1/Fkh\r\nOui2OG0xZuqjgCMQUelcBmUtQ7ZmKA8QkeqI45Y6I8MJPazx9g9nepCe3q+V\r\ndN1MlXZt5MXevuLN1ikbyPyT3i3kKt8W1R05d11Rfx5Bng1gwNumhR0r/lAb\r\nMTr1wTwJj6n1BUrPSddaeDL6gSWteB4uF/Ly+GiZ5jZhjUa9jCFdsYngWc3p\r\nYbjN6hrZW64Gd9W+uQf2RSY8m6ZgC7fTEeTb8Xd3DXWBiDAV9ptRJIm4d8s2\r\n7RGEbVyEpelt5M/BmvEKMeN3Svf2+CPCyBE=\r\n=7mpq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5b6a7c1a1c133381bad395ae040de00c64b62e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c99cae77c.0","@material/base":"15.0.0-canary.c99cae77c.0","@material/shape":"15.0.0-canary.c99cae77c.0","@material/theme":"15.0.0-canary.c99cae77c.0","@material/floating-label":"15.0.0-canary.c99cae77c.0","@material/feature-targeting":"15.0.0-canary.c99cae77c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.c99cae77c.0_1678318982609_0.3152044351285028","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/notched-outline","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.6023b1cd3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67260aeaae56cbd5ee2e56b6b4a71b9db04cbe3a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.6023b1cd3.0.tgz","fileCount":33,"integrity":"sha512-wHTzAuVD0npPrhIuob2a2mV9aCI3ApDypJg6QVvRIgLYHQhyJ4AVW3OnAsDdIScZBY+a0SM3kshHOkjYTI1lnQ==","signatures":[{"sig":"MEUCIHo14JHQyLcoG75XltT+2oRJLtlfSF67jNGEEoHyMxMpAiEA8WgqjNRb5chIUfC6L2Zv0yB/5Wfx3GuVCJGcdoMgc3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCeyVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrX3A/+Nt8ks3rHDXaTmozcdwtQ51NEPsFXbKvP5d2LX05MF164FoOR\r\nLdbxY350Oo9h1zWXXKfJGggOhgu4nOIHEOAoaF1wGd5OOmZAc6jFimRoFIrW\r\nnU2IP4iftujqmwhnI8FD0l8F414Prn4Coe2obwotmPwk9pA5/03YsGu2lRHV\r\nq309g0vW0CJQhB4xaCqotZ4fjxrbou69LXSGL/MJAQdPscTCGlFnwTihxpDz\r\nd35FfsQrlZU4SVv8SvugX46SCBsDsOlngpdn2JN13dGd0F/BWc7a2cR57EVo\r\nepQrTwG4uPGqtEg8p57DrrTkqoNaR8Ee+5plZDZMP+sufo6OMSEu/g19wnMz\r\nqthzZ2KL9cwyXqj0b9Go9RDG1ReHMjdTwHaLjK/KOUJCb5rNr2E5pS7KoX4t\r\nPOFVR+J383WiIWZWKiZk43VmiX1BHNeszMSz9RZ/QyveXYzcC3vbF1RBldDI\r\nFWIn6ZsUG3yY8RFI5nA03W0KwRjiGLR2GE57PRLqAFOXqs+SOM+nLcMqdhWX\r\nuZie6kSvvOdFDfIW3W80A4m16/0pLDAvA+MESltG9urQBKhRSiPCSEQupPTL\r\nXaDncEd1Plv221/zKNYOh3XTIRvFmIZF7X88vsonv4EVMWY2UOsmIWSa8GvE\r\nEXQNWm3ZpuflhUGmPf0pGA7oJesreiy7rac=\r\n=D7m0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4d11f175faeacd8e5fe534611afbad84efceae77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6023b1cd3.0","@material/base":"15.0.0-canary.6023b1cd3.0","@material/shape":"15.0.0-canary.6023b1cd3.0","@material/theme":"15.0.0-canary.6023b1cd3.0","@material/floating-label":"15.0.0-canary.6023b1cd3.0","@material/feature-targeting":"15.0.0-canary.6023b1cd3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.6023b1cd3.0_1678371989388_0.2575264708123759","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/notched-outline","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.274610c77.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"322bb23706dea34ab25dd202bda36f68a3109dab","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.274610c77.0.tgz","fileCount":33,"integrity":"sha512-Hmffexp/KS+Crnloz/J6YRVdLJfEQxxiS+y/DnKZV4hzEaDHLZKeBDdGw9DopWJsJx1OKletFkZ2jjVIxdFjvw==","signatures":[{"sig":"MEQCIHYbwPOnshXIPcHsTL+7jllRX9jE7CitJ+T4ScLCXccGAiA+dnN7QNXJ6n4vyzJWbtltEQbmsS2SnKGsiRcSOQLc2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfQlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrP6w//YViMfgxpbIBQcr1ahO6Ac+4tWbx2g5E0Kj99J5+oTjVy9JlW\r\nnnloWfXUetG5kvBWH7tgVYwDlHlW9SCiTAsoz2EGPWgWfEVddAI7KaKFnCia\r\nkUkqDjAfeUMEtMR62uXD3VsbDTet6tXqcFH2uB7Mt7II/HRTv0iIHtvdDr7p\r\ncRKx5Z0uNWZ5jNw1681MVhmGFRHqCI7h2kcJM78rSOrpDRI9+DY7rP/56QAL\r\nplmAkS9Y3N5jN+fsEx8xsaexE9JKgubwZcsGVPIcaLPJ7Pjpg7rBflUWetii\r\nPTZY1Xpxgwj7gDGSKCD1aN9LQLiJ9PE/Pg/ywJEYUaAxzfTpvHocewdkH4gp\r\n9AuoxqL4K7ZeOgTS3VfgqKSSMDrFQBlfcKVHNGqaCmsxvxjTw91AATuQeWYi\r\nYmAuU3xID0rTyTXg9IAZmlOucuJHNgvjnS7Gc0VRtcWVmstAu2ljhvwcILK6\r\nNcvra/JBeyiR1kIM+l8LXAHJBxDk0B/YDqdddagA8I5gZAcgf4lqAfNLkdF+\r\n0O5iWlEJyr+7QAPnA6I6K6wr4yKWSZY6DZE8X5RaeavXw4PEi1UolY+NJRq2\r\nvTTDOhtzuBrGv8EZ4Nbb+QQgwpMrifrSQGLVjsnbi8ljWe+HHT+ciZ8j8FBm\r\nPUkIlPIEtFXPMnVQPTREPe9viRfFmvxfvts=\r\n=CYw+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7a2b02c682ee73deba431503de1a6f1fef211c10","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.274610c77.0","@material/base":"15.0.0-canary.274610c77.0","@material/shape":"15.0.0-canary.274610c77.0","@material/theme":"15.0.0-canary.274610c77.0","@material/floating-label":"15.0.0-canary.274610c77.0","@material/feature-targeting":"15.0.0-canary.274610c77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.274610c77.0_1678373925271_0.9350232719249323","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a274583b9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e83b2a997a2c35dadecef5c43eea17eda6022fa0","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a274583b9.0.tgz","fileCount":33,"integrity":"sha512-h/rtQJWoI5QHgZXZJY75CzrnGY8Pz2cAd8NXd6+rObbuy2ujjtocTYVD+eX+9pU5uTVoE/E5wcXkUTHIU7dwaQ==","signatures":[{"sig":"MEQCIF4pK8slWT1anZzc4r2sFTzjHcamN4b+o+uevQzP62xuAiBoJQzjt8KGp8NzvkuH2sx5AjbEfQmvcGo1FLTo8Bs/wQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjkOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGShAAnuKUWRFCcQpymp3cYQgE3kax4LQVOyY5bflkuCZIcu+Dz3ob\r\n/j0lkRTbFr8zYmbj9quGkUHBTamKXmd9kifhkW/17ZHiK3vxVDoLVNJaGq3X\r\noaUCY/+pyCrDpzPx6R0RfQjN8YJc0KidbDExXFslEnPMqo5cGVRllWxDjJTN\r\n9guBcN9opE10oElmOgK6/nfD9J7YnMnLN+l4tBfEvUyYRDrJjyJrJ+JsmlD8\r\n0zxOnajaON11utD8oGLwFVAwDDc1OTtiZuCLGfTmdZoBWHMP7ehYa/0kTMHz\r\nDf5IaFa2XPQNWajx8tZFpfeykLcIKfekuKrJ28fvIXjz+8aiOCcvL2qiiw3T\r\nwWflKEuJvZtVMa/RMe317NFGXWTGkdK631QjYuZCSl7CKyJQHuGXRT34RbEc\r\nWad/96vVLbUk0MsfsdIYt7k39X4ba+MlHpIkQIWwEImRWOZ9vkG14hTt9d0I\r\nUfZehWd7AQe2pcIb6L8Qb5WHPOac1bzBvTWTHcLLs2mbzWHXpQW+BE4BShP+\r\nujurdrV3tQmnx+/GuRP4ma/P/+f6eBWnxGowAQ+6NNDywb4TV5rCCKh8ceIC\r\nNsPVDsKcnKBpWekJ86f7IRkZdm3NX8VF2PQaUThmu4n2ECmIUcv9srSHFx/g\r\nMndFgeUFoaMnHjojzik15pFX0R1peDS8vlM=\r\n=XJhi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7a7c8184214014c45d0ba8b4723714d1fe91f266","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a274583b9.0","@material/base":"15.0.0-canary.a274583b9.0","@material/shape":"15.0.0-canary.a274583b9.0","@material/theme":"15.0.0-canary.a274583b9.0","@material/floating-label":"15.0.0-canary.a274583b9.0","@material/feature-targeting":"15.0.0-canary.a274583b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a274583b9.0_1678391566093_0.22968384300929","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/notched-outline","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.da22ca960.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e24bb6e63026a9af14eebe07c858bb338478f736","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.da22ca960.0.tgz","fileCount":33,"integrity":"sha512-iLQTWFwqtI2RuSHICbLRcLCzDDP+oJRCDgEoCIKaQweLz20DMLTmB5yE2ojz0tC6NxRNp0DUuw/Nq9YAr5TRrg==","signatures":[{"sig":"MEUCIG3sjurSMsvbK7+eIC/nJePjQPXGRBTmHB29e1G1C4ZxAiEA6+HRTL9adzzUQkNQD2EUb1Q0AKAYEQkUkv4L46pmf9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj8OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoH+w//eG+mmDvxEpMeeO9uDmq/6FpbCUlQw6H1EomR/x+A48nXPG8K\r\n6XH38CvNGkBW0h9PzjoujJ+mBwNRTADxY74ho10L4pKDsoKeQZMZh9QKQw9O\r\noCPlstDn9hxCg6/5x6AnNbcQj3Rr4Lvqxps1WA7AM0aVDpAtWmKxFaDmelHr\r\ntrP79LgvxeorMDacLZMv5lQHDzK+fEPCLclWfN8Kw7+W+gcupRc3oWD5mdZZ\r\nBfACPleyV3oN79GefK/ZkazLqZpWAZtsyQeQ8lr51U9wBxgiPiUvlfUAdR5X\r\nHhS2890tU04favd4doluA5I0AMyv9DxK9xSjc6Yp5dJtVMkBFeH+RoxwahQ7\r\nNf2yKwwg0liS3Dlb502lrpL4x9kyuyRn5l8ry/MEHUyn5QSPkU6rXxyU9pKK\r\n+M+ot+APFoAIQ8lMl/4WjkIkPTOta36m5y9geuFzL2OxLmgeL9qfsyPcPq3o\r\nfdZk1zrRwwnI5ANRseW4AaWWP+eTFcIhzsA4rNmlz3RDAva0clPeZbW1gnqm\r\nv7dS2C05PnesV2+urSogwjLqJsnjSFBxn7fD/Siw4x5kct1XHxBUXy+3WFrP\r\nkFdIjAukmRH3hAwoDIthNs6tjCm94Vylmsc+rjRfd16MYep+dmhDJS5ZRYcW\r\nUPXt2qThrhoQC81Znma9a6WyM/gRGFMGK5o=\r\n=k5/i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1b58f37865efc4ba8ba06e1190cef502dee9f902","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.da22ca960.0","@material/base":"15.0.0-canary.da22ca960.0","@material/shape":"15.0.0-canary.da22ca960.0","@material/theme":"15.0.0-canary.da22ca960.0","@material/floating-label":"15.0.0-canary.da22ca960.0","@material/feature-targeting":"15.0.0-canary.da22ca960.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.da22ca960.0_1678393102418_0.5083107640068529","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/notched-outline","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.304a94e8b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76298b8928a723e85283af27b40b064c667ec82a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.304a94e8b.0.tgz","fileCount":33,"integrity":"sha512-5ylJ9pOo7hO6lPUBs4benBeLVLOIsc9sbWLt586nRSW739Z6UJrUk+G7OzNl4BE/DLHZt0KRqGZf1i4xzNUuMA==","signatures":[{"sig":"MEUCIQCOGMQWtOi1UO0TuMk2I4bo6I+z9EG1PE3EVRIA7V/8fAIgef0yb73MBCC/id2aKesByt5U4iWJPjQ2XtaG+maQ6lY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkVRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriLw//T16MRN9JYcWFhAd7JEj7GIYHMjb3dADPxXaCl1jwvTkSAM/p\r\nDsfbdy9JlMVFolqO2WvP9nwsdkumA5r/bM2n+zIXdbEREpfMROPkuBOORbos\r\niXOIOiQOpxzv3xBAikatC1N4/Qbdrwrnq8iJsKot5QEBnhvxp+xGvoeiVNSR\r\nUHwlGc/0qpUNs/XdqsTX7nihqNyyluvN29SGbrRIwGkG2986aOWomAVJSyuM\r\ndTI4rmbEPa8pH9Xqd76fcy8Bfpt87xOs7sVMe0AD/Ma23QmvCFrW3eAfosy9\r\nPflWJs/Nyb4LyV+nf+qLr5iz7vk275a6HfBlsmLg16Fi9An4itRFzy16Ukg3\r\nxZkmH8baiplxke9zNYoAdtyBbOHplIXIEEuiosWm83vubYr70qx14YgmahO/\r\ne1hOVcBnQOOh/pDD8Vi9rEh6VItvaEqGaeuDFPqF1T1HqH36I0xfw2TFVVjP\r\nsQSROi8oejfiETz9A8fW6naHKsXQdP/VDaHHjr+tkX6GpzEFFdco3/TWE6EO\r\nmxLSW1M5a69UUry+ijadGCsUZthvGxDoScTbITnOm6Vjig+EZqjmG/4F3YSQ\r\nIDN5LLjRL1gcguccmZFvXZAOfz2uNBpMQbIyV+wgg8y+Is2NUEUAQS1BYzdK\r\nYz01F2rtl4JbfL4rc15u3+wQ2vdevRQBY2g=\r\n=O2wS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e7550e10d6a01c606a6dd78c58c4ee6e44c3f062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.304a94e8b.0","@material/base":"15.0.0-canary.304a94e8b.0","@material/shape":"15.0.0-canary.304a94e8b.0","@material/theme":"15.0.0-canary.304a94e8b.0","@material/floating-label":"15.0.0-canary.304a94e8b.0","@material/feature-targeting":"15.0.0-canary.304a94e8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.304a94e8b.0_1678394705726_0.49024860263218395","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/notched-outline","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.6c265915c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96ec167bd37565c5086f9d54c3105e6e53b2ee2f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.6c265915c.0.tgz","fileCount":33,"integrity":"sha512-bLxV2lYNvYc946yZcpsmusUTwoQLsJ15nlON+V4x+NgLmBncNJ6JKycp8JLGXxBQ0pTgLkjGsr09rpumNSha9A==","signatures":[{"sig":"MEUCIQDAQ8iuDGHVMAOoD8Vxm8LwbNqXY+p5JIyz+HL4PQYfhAIgXWPBlWjrFHvSVazwI8SvfBNITLHuGWMvgQTPm5CFg7g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClPqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLMA//d+z8P8M9OMRP1rKeNyotH7SlSCfDDgTmicHDljC+V1fPzS3w\r\nZ8Mli95VtPK9ds2Yj1Lv9hDUftUxALOu1DZUTj624PuJaumQKQfqNnME9opC\r\n39wg0mvbwDjE8dCbC+fqd1xkDzzu8nOPUk2IN5S3h3YxFGk+nNFPFTGDHrUV\r\noGGhP0UJ0PpjanhZgOsomSRBSQgiYU+KeIAi9trotfs5TjUYu3r+NMxLXgD9\r\nzLj68mrCOGl66GExNIiBUKmBAFhelFHrZvKkkIdZBfr3aZrXAQbcEyCZ5MAq\r\nJWNzv2a9UwD1A5T0Q3Duv9DmUOteqRs1kK0FKk7DN7YAmutLTZ0qeCfsGul9\r\nzkSmvGE6dHfX4IaWQGK0Jg40MXQftZw6N21067huQ3B96nFbjPo//wmo9YDP\r\nNMu0bO+oqEdhbrIYBk+FKc7fLr0lWL+XjojYIKCR9bgyMsdxYgSLoZMXZXwf\r\nCfNS37Wnb+NzRGXiDhtlUGqyvQd1F87MYgCh6mL9iOZA9JMTR9f/YS+dUS36\r\n9RmtHbaPzKqWxLEIOh//IR4b3MbMukOrznyJzYxcofOPvZ8Jpq8MlcET0eEl\r\nRMEZoXdYpAPx95H34M+ykGlb3gJLAaJ8Tryc83zEnrjomhDqTS0U4CVVBuOL\r\nhcLhHIbyYhKQHrL7OI0sjGUAi7W9LNcT8p8=\r\n=OlkA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2226d2e658d88eace91ac63729977eb6bd7a9af9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6c265915c.0","@material/base":"15.0.0-canary.6c265915c.0","@material/shape":"15.0.0-canary.6c265915c.0","@material/theme":"15.0.0-canary.6c265915c.0","@material/floating-label":"15.0.0-canary.6c265915c.0","@material/feature-targeting":"15.0.0-canary.6c265915c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.6c265915c.0_1678398441837_0.7298487795307607","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/notched-outline","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.de5224633.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9c5ce9f41c21033b343988a731a8c7f22a84498","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.de5224633.0.tgz","fileCount":33,"integrity":"sha512-jcJuF0Ww/YkdJgILkMiGiTzvegDwf/z4YzKX5JwCLxU0agRZQgLJYGjF9cV791gRTzgZLVTbNtFWA6WtZcyGyA==","signatures":[{"sig":"MEUCIQCssS/RvcjW7cut0XJGZu42COavzZWarusjW3j0GWAT+AIgNkgfqONLgwigA1ENl/b8ZC25OpVL5cv+jtpDO5sxKCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnIFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEZQ/+J2D8kZ9C0ML01SaZwbD1s2ZvgIlhcBgTXt8d53nzv4tNyBoo\r\nLDMnbUhAubMDPg+JlI1QCnJ1FASGjWAibefzUKXlv+VtDnGE3RVhBENEYvUf\r\nc3BUc7Y/3nQ+dzzniSuGwQ3tYVouiKrjCNqIhcZX5lQ5eb095AMyR7seREnL\r\n1L0DzjO+Ibg3M4bcndSH08XRpTdA2FZqlgvnpe98ApUxtjjDZnCIxi1ae1Ta\r\nnkgdwYzHEHlyLI5tGCZ2FiaBrZtwzmlDODbVosTo9l7pA7F/NKbPxjh+f2uf\r\nGU3JXOjK1sKN/wE27mN/2dI9DB3V/tFcHvfX/ZNlGkz8ncF+nXBd9j99pMsa\r\nzCHH4JU8fLC8wDdrYgZKdFfMK9gmhwY5gZrd430nAQVLkUNj5Z6O4Pli93Ho\r\nSOo1JA0UolruCrxfcOlFMb2DMU7Oauad8G1KTp7bNEE1WLIVFE2UPy3suM9H\r\nDo3kQNIbCD2u/d25kVyU8rS1MnBl+T8e8u7j8WIiGNAnJ2ryTrIVAg2g5sA0\r\nKOmXfQPo6T2eUorhTnruZbNAMr6QFOqIJsjQ0p83DMeooHu+3j5OYw28YbEZ\r\nF6JXG6Z6rJTxgcR8yDi80E2mk3jGbLCnFlj1/vJWH30VtzeFWg1m5lB8cduV\r\npTWMTcU3Oa2SrVhbuq+VgygcOu/JKk+EAiw=\r\n=fw1m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"994c620135276cf7948cc54b286c6c306c3ac01b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.de5224633.0","@material/base":"15.0.0-canary.de5224633.0","@material/shape":"15.0.0-canary.de5224633.0","@material/theme":"15.0.0-canary.de5224633.0","@material/floating-label":"15.0.0-canary.de5224633.0","@material/feature-targeting":"15.0.0-canary.de5224633.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.de5224633.0_1678406149669_0.04160559238952666","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/notched-outline","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.8879557e6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1253524911f2b2c1a35fa409e2f350bdcd55256","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.8879557e6.0.tgz","fileCount":33,"integrity":"sha512-w3Y8jFDC6XErXqdrpOWJZWNnKLWvJg6cz1Y8EgX+uCWovUChrx5FOZTDXvHleafnqQUZUyYAnhJjm3cTbyUKtg==","signatures":[{"sig":"MEQCIHLb6v1oszMytezAkQD4ADbZX5o80uD4GUwrwKOxeFtvAiA0aE1Iw6QYvw46Qj82syY2XKVEiiGqd4/8ui1f/4E8wA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzm/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmponRAAnUDT41XisReAvURvYasqG2GDZdhmLZhyJHRXaf8Rbe7hFWKB\r\n7u5yWY5pquSJxxbMkSlH5DesB7pLkXhyPstXry0mRANZZ37frm7IMxxojvzY\r\ndsDmZdhK/Uli2WxRDg4gLN94EkPJXvIsgYKib0dX1Qwx4uARkGTrRdF1C14q\r\nJU0Zz4NZ92RCCPJPcZ2cyAOdFSvj7ZQ5ZNJyOQtEXBs4cH00cpYNE72Pylwq\r\nND82iyo34cQJg/x5CPrJYAKFn+xdtP2xl+cTsT11uwea6AR5gFODkOftxT8R\r\nE3u8zoqaFlUhGyf4i+HjAeouF8o2m5ePZwFxz0Hr3U5Iggw/gKbNN17w/ciD\r\n4K9eWptCyg0rCrIe2ZVFg9rUgIXfLrWXihLlPF2YD5i2kUHc2Wt7osQcOU6O\r\nd03LQygLWb71OMJupWzYwfHg03r4U+h37069Q8CjxwgnTxvtoxfGjN6UmqrT\r\nnA/PEwURDNciDzXKdgXLhOpz18FG10+zYcr350l7DF15TwHga3GLG6FOWo1B\r\neRQYTUAYHFtVQHU9R06IDW7pbZcAJNQDqyfnBdqP7GSor2IY8ifz9KpO6H6i\r\nOMb9ddFEnQ2nEhxy1Lt0pPDgAA4yL8O3q6qq+erzOt21j0OTAJ6OQt+UC00Z\r\nyoWaRt/f4NYQRCRjdYqqlrucddO5pb8MBBM=\r\n=gVNo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"28f7c223e2bb4a686b970a425d14b1d1edd70546","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8879557e6.0","@material/base":"15.0.0-canary.8879557e6.0","@material/shape":"15.0.0-canary.8879557e6.0","@material/theme":"15.0.0-canary.8879557e6.0","@material/floating-label":"15.0.0-canary.8879557e6.0","@material/feature-targeting":"15.0.0-canary.8879557e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.8879557e6.0_1678457279721_0.48101613760140793","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/notched-outline","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.23073a303.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7345bab71fa76a4dbe285ace7e3cfe8aba6201cb","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.23073a303.0.tgz","fileCount":33,"integrity":"sha512-qr4jePnSDVrsm/wckIhmDXDHgNusspcrSSMyevZ16ormsPqUdmRTemV5C6X702DD2Fyw0NWwY1/2cuWCjC4DMg==","signatures":[{"sig":"MEUCIEtK4daMiHHEKNY8hYTixCdalSiBOu18Sz80ty2PTsY6AiEAmHN4YC/nL5DXb/ni6TTXLRKnyE4RGBwykleW18/G1wA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzteACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpaZQ/+LSnXjn7hyoSej/FbZdF2TnL8uatv6AR2uKLTqc+hlsDB3kOP\r\nM6tm27upeB41TXoCcrUm5H8+Uh0LQrnyOxkfi+z4zZyNYHyUYYGdLdvKq8PR\r\nQw3VDRARuWZS6+SYoXHM31Kx6XYArsdSm2hg+9VHptadNOse5mXYw+Lo4oj6\r\nFlRFyu/CGyq1uq36X5TR39uJn/VVDFcbB4aYoe8BIW3kFf2XPxdxoc9nCUP1\r\nEDACqf15RjVx9RPUtAEdN+5gOD+cjJhT4VtDdN1z/VmtIPBWkAQXY4U9XvmE\r\nKakQBtb+AkdFbhGdNC+LT5dU/mdpT5Z2urU8EWeTHq+gX69iD4Cg3zl5yeKh\r\nBa7n1jRbm7Vs0q+2HE27Y8NNXaogiVVlz6w9lQWGEq+JY1ZbVvdqGCS4ftxa\r\nfFZYGfdjD8lNHBOCTMi/lnkAUaR4rIoQxgR/bcKfGyvD+8fws0PxSTuNHJr5\r\nDZKoaaJpGqC07AxnbKW+wICeCZD/YSQEDZv7E0peorzToQ+x18aAYRB6tIjX\r\naTMEw9wViJs8fZ+JcCeDRygmXLeOaNTdJKZ0A7SN4rbSjk6aCMXhzRGonw6Y\r\nnjb0d+nRRmm6udMUHtGOBwBHOy+WNKtiP69fX7DorF5jW2ee5oCoPYM9VYsh\r\nomQqlx2jN392GqmE0wDUL6sSuvL3/v5YKLo=\r\n=IW/B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2d7826e2ebf1c1fde12f47b603e66ec0df229a8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.23073a303.0","@material/base":"15.0.0-canary.23073a303.0","@material/shape":"15.0.0-canary.23073a303.0","@material/theme":"15.0.0-canary.23073a303.0","@material/floating-label":"15.0.0-canary.23073a303.0","@material/feature-targeting":"15.0.0-canary.23073a303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.23073a303.0_1678457694544_0.6500686283362718","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/notched-outline","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.51c7d4014.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45e0a6018d3f364a37fce15375b7608bd411be3c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.51c7d4014.0.tgz","fileCount":33,"integrity":"sha512-wHuc8W1MN1N3A5xBzau+pL6hA6cHwEdMtg7/8wufeXg5GTBrInGC4+Iu2/SH0nQtexX0FSF2Qd4Up9erhxmYVw==","signatures":[{"sig":"MEUCIFZTQbCdp5pjyXoXJhGZTdnbMMRBpBufq910sLOiefJ0AiEA1P15tBnaO1biE1QGXn80RvCVgwCQ28c4E5ZoDwB3t+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC18eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphLhAAk9fCLPjCzzJ+QG8QFMIokGswxbrBtD0Duakh1SvYqK81n11M\r\nrFy/GJjBCTImsQLSjngKRui43yiQUl2hvFmZ28+fyr9N8cFnFzBYpEUcsNH5\r\n+hV8kQnVFsUwJFh91hdy7Wl2oCV+Zgxl0VauQDwkY6Xz+CKPXb+YvY8JWqxn\r\nYbs0kr4tYVWj6WjK86lHYn2HcwpH6PYyBokd6StJggjL5YLubR96zVPsAEZ3\r\netPjCxKHqOmUrsGXfmlS1u+PsIg9lY5oHmGVKP4PBatwa18iLKXKmsRVn7f6\r\nEw9LFfvEdJTGuzpafZzJ+koHoSksK0Wc31z3duUEOV4kvdoRBO0EGPKFevFB\r\n0UCFx1mr3AlOAbVoM35wZfZRTZyXA5zBU9XpCABWakaZli5o4jyIUwRsv0uz\r\nn+bYfojqb86mtoc30RBWqAwduIC6Wbwe+fdBlF84Fd2SXp3okK4Acu78A/ZO\r\n4PW3Q/S4as5Hu7vHvz4Msd7QSa+s+wDh9ww9v+/nL4CiCcv9/pOOdeWeHoVc\r\n2tBnZvybcPjjN0NUI4trRXe9W4Zu78LYzH0FSrEK88tOk33nIm2RtPeNYbBJ\r\n+YPm9VkIL4MIIrk57gpCOG3bl+sa8yWd97wMwqQt9lcDvEVBSiqASE6ZqoM0\r\n2OwHGySKZOG7Oe0ktGCNff5RlchTz0Wn/qQ=\r\n=1nGd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0485e6059d69163f12d83408c09b1d41f6cb8dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.51c7d4014.0","@material/base":"15.0.0-canary.51c7d4014.0","@material/shape":"15.0.0-canary.51c7d4014.0","@material/theme":"15.0.0-canary.51c7d4014.0","@material/floating-label":"15.0.0-canary.51c7d4014.0","@material/feature-targeting":"15.0.0-canary.51c7d4014.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.51c7d4014.0_1678466846663_0.9127264846263385","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/notched-outline","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.1175a5be0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7089450a5330a616203b341b8e1008fd6dbca13","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.1175a5be0.0.tgz","fileCount":33,"integrity":"sha512-Mt5CDKIGDinvWq9gyVnRjjxMtBsLO+PeHuYkriKi1PB+p+w41Ma7CSTVqoYcYgzhcBK+IMlcxaTi8xDtgGKYXg==","signatures":[{"sig":"MEYCIQD0oPKNEk80UZvzLARCJyTGQ7yl0QBC/qsy3u2tCj6U0gIhAOUbdW/YQscfbxbbIsfROIwoFV7QNnGZniAQ2c6SDz1O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5eHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq41Q//Ylm7U8o/y9lPprbIw4kiXl4QqBVaiLjMKbzEvx/91tlFLrTp\r\nZI8LJbB3N6S88FOD1mFbwsgJBWQttd7s1/KUFgRJwO9vwRcwuoBCiYLPnIls\r\nOT4yderZy0F6p4Wd9ThBGFjdYf8AkS4qvstwR8MLVMADLNnghPxwNS56KmvQ\r\ndIDGEhhIO1YE11jtH4Fa652EcIPVq8y/kvXIs8rYXumOAgfTNT/1Dr7mLmc6\r\njnBHc4PzKZuLcW+B7bokj4wXL+ENXB7c5zyPnqMNHKTOLeszemi7dRF+Z+qw\r\nCk4HfnAd66tEQx83O/pYVG8KO21ifTYoOP1DIa+OGLFdbzHyEMMzcO4VcNHF\r\ny4IfikfLb3yGvEyjaHyA19NZQRxDmgjY2yXqNcvPcbF+t/6zKLssSW6BVyw7\r\n4wHR0b5V+i/6UnGnrerj+kbT+UmXKimQgsE3tMDXx3yxpmi505C4rcQV6o2d\r\n0zVCg1y+LfXCxsGe6Q4qIqKDU7M5BGUbJ9F+ERZ0RW8rpMUROpJ1iYgzBw/p\r\nDUIaDG39YPavBn3lXh44ih6a4pLkciX5QxUz1zRLscIATn9s//gILvqygMwB\r\nkVx2oCFBHC/uLoZYkSsDT8QPRgVU9/OVZb9hhx/WA3vSp0ydvuXblQ+JqOHX\r\nNwZ2AGaEONrgy1eTwYNKdY48qw/8SVTj7vw=\r\n=AY4i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1fcae3e4ba7c60c6a51ee8e61b01e26a324b1ab2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1175a5be0.0","@material/base":"15.0.0-canary.1175a5be0.0","@material/shape":"15.0.0-canary.1175a5be0.0","@material/theme":"15.0.0-canary.1175a5be0.0","@material/floating-label":"15.0.0-canary.1175a5be0.0","@material/feature-targeting":"15.0.0-canary.1175a5be0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.1175a5be0.0_1678481287385_0.18771500083201342","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/notched-outline","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.7adf3af80.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8da90ca9bd437187d7754f166dd8f5829f75f233","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.7adf3af80.0.tgz","fileCount":33,"integrity":"sha512-EvH8gBSBZRV+b1huP9ezC2u66eHts9W6OJUzCvwXDxiWGUx6dfVA6JFMQgFulfCvieLqlAmTPXx/irrpCuPN1g==","signatures":[{"sig":"MEQCIErXjZdAWuIwOc5E6TK9yj9qjuPD/Mji0zZzVA3gdWTvAiBvmFZQcaKMoMlEIrI8/1r5VCOuTUxuqE8y3PGg9ZbKIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9hxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvfBAAkaJ/X2bAp5Uru2+3DlgZwTqKsXIWrvbLWVctcsHPwolZbrok\r\nqlvXk76P3gpFE4fbcK6yqmARrBGdoS81Vg+LlaVNkqzdHirECefe9/kxjyi1\r\nsn+R01aoNPYA+vebs1WsjcP+GNhJNYBwFPKHfojKb3Z4nDsgTPt7/hedGrvw\r\n6DbYL9+llRiYumN6dGHKSK6wpmbfFsUAMotUGKay+ozsUFEe6l0FKcDo3rap\r\n4xM1MAsOltlFV95G70bp9m4xtuMDuV/5pjamBJ1/oaVEa1IZnEy99x9Qm2dN\r\nbdh8XbloHkz7lrVaxKtFL8RBEmtpaMeI52AAfHEXMeELXIiOmJvwunkGyz/p\r\npZ7jVVqxpqNj4Jt/zzeVxV9+yY1C9W6ZCcazGGtbRQmwgKSM2lNVJzHcdtAb\r\n0A8ITHAAZ8dvLlMkA8IUpIPSN7bcGFUf4KM0wjW3H/SuHEUhRgCBpGEudHb3\r\nEBl0zdTWKJopciIbhslstw0Sy4mtVJxnfudzOWk7NeEvUP+jo5zHWfyPRWdq\r\nMvF/uEYo+wM6ZOTKUEeSY7DIptYJ1PphkgKPhXfZk7kMi8GkiYja4E7zJs2r\r\nwZQd53dLfVbFumYKki5RQ2iUtJDJeinU9WwwyloCyEVQN0wFLPMop9rnoETE\r\n+TX+pOK9cQbFKiS68lTYJ0FFv2hFNmcC0ZQ=\r\n=Dgw0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"57b0835838a903c8ac3ba6c8edf79add958481d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7adf3af80.0","@material/base":"15.0.0-canary.7adf3af80.0","@material/shape":"15.0.0-canary.7adf3af80.0","@material/theme":"15.0.0-canary.7adf3af80.0","@material/floating-label":"15.0.0-canary.7adf3af80.0","@material/feature-targeting":"15.0.0-canary.7adf3af80.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.7adf3af80.0_1678497905172_0.9889076814689521","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/notched-outline","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.82554d770.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87f337396acdd122213ff279a31fcfb897f7ed56","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.82554d770.0.tgz","fileCount":33,"integrity":"sha512-t2IDflx4Y20ILc+hc7wjalsbk7mObg13/ExMjZzs/hk5GLdY4z9R5q4XG//mpi0FF3Kg4tEwufN95QHqk+h60A==","signatures":[{"sig":"MEQCIGUE1TK2NCx9kARrIqdMl/bnKvw3JVhLNdjUc/FWwr5TAiAoS12vjG3JWm1k1VpBlAjblYGEau+a5x9QWA1keP3pug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9tQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6JA//UC/oLXxqoJq5Kk05G+Sr4lfyq/zxOreKD++5Oz4nw3+LJaAu\r\neJ8sR/bvOXmB5II/StMwfvH65IJkpMf0bN4IaolTkW1jYWUQMZ4ao5Fqd5Qh\r\n7jAzspWb2HriUoA0ROi7APvEU/lE4CfQSWnOYtBFrmqHq15dn36B7QeVn+Hw\r\nQ8b120eZ6zlSmv6uO5NjXD6v43kMwOSRLsWy34wN6/fm8AWB6Ij9ZNZZyecv\r\n7rHUCLh+OUkc0CNmWoiu4vEeklaK0pcVGB5/IDJn7ZKqWHcSjSjl4BaU8h6x\r\nlGkGtSKoK1b9qK+uUY5bC7S2vt+Re6r12+j/9D4Ml9lIvSJrpzoO5fer8P0B\r\n1qR++Ikn4FI5ExcgHZt5i+mMUo8EQgyUVEGo3ISmlchbva4qnTbqflQUPO8t\r\nzFBPWIRQZhN33S+JfqH8jPepDamOaewjf4DYoOtKuo25zeag2M2W8mygGqEO\r\nzu+PE6esdE/wQ2ZjCvxg/jQVSXVotfxChlJwIy0y0GZ/J3DoWQHCOCpB+r2o\r\nwpaLuTPbYeJiR6njPzgGVC+IWVPqvp9ezpWCRk+tla5QM2sE4m06lv21nbSZ\r\nLWzCa1cFOjFC6YZ2K7oP97nrBmouyGeUg0ZWJTR+88yLKJMJCB4P6xOahke9\r\nPUHmLmDvodED5U24qvMW1+66ViqxNGr4tf4=\r\n=MrlW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"500cec655918e97ee1edc3c86ebccdac24a28f56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.82554d770.0","@material/base":"15.0.0-canary.82554d770.0","@material/shape":"15.0.0-canary.82554d770.0","@material/theme":"15.0.0-canary.82554d770.0","@material/floating-label":"15.0.0-canary.82554d770.0","@material/feature-targeting":"15.0.0-canary.82554d770.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.82554d770.0_1678498640693_0.6359205894076265","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/notched-outline","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.93fc524b7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47b15501d261a8a843de4f5e78d576cd5e790937","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.93fc524b7.0.tgz","fileCount":33,"integrity":"sha512-3iMKoYIdMzfYk799IBkq6JUmLkjo1X0SceQGEfH8rILnrpGKEV/n7MR9jxpQ3+AwDn4OcIAkJDUip9jBn0qJwg==","signatures":[{"sig":"MEYCIQDKIgXcSOuGM5dA5q9l/g8vO3CgGZOGWQnh0ziYLnzEegIhAOI1zi1KK7IJt8fLY5sRUEpBIf6b/C5WYg65vEDJGwD/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuEcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4ug//Qw9qKDFtj0/n6YWQ5O7v+vLf96LipNuyUMEXKPArTjk2sFDL\r\nmw9vNGp25GyLlY7l+zLYHpfUxzlC+NqDoeAtQER2tpKfaIMQEpiQwFmavNPz\r\ny6SUORFzf1oCF99vIfNcj+Vqk/cVVGetEP150UhLtF2WcjJxPIHKPVnBX/s9\r\nG3/Wa6oV3L7TA5oukPoILRZUfqUNdbJoBqbT7xXLtAiHyEZGLkyc0Cz7O2aF\r\n+6TtyogPGsQq9pv+ITLW+jMmfoxPjUXj75IfyTYU/f7wuhoVJfOPjZJSNjKK\r\nAVefImhlMRUlEQl0noeDBfAawT/313X2RQAu8d4F3MmkBJNtHuRuXGRO9ni1\r\nmuBJ4K4QrsVnGhnb4qnt1BpIToJeH/whhre54D+ZPCiEP6JxXqjPFhOy4y5y\r\nlxVH+DF1FRyGqt1f6Ab7VJlkVaiq7pRQqbxsJKG/GQ2+SyoOrBs1hdQUheLv\r\n2ewER4uqkwyXHOjY3Ff+tCx8GiEMKN95zaADnUBDZ69q64tBPuLqpbzTAYTZ\r\n/f3xF8qwdPFcSFLZAB44t49WiE4w/hXzNun8JFbmYlPBemjfpthEkaTf94gA\r\nx9qpu3KUhb4p6nAcwsZMY5Z/3m/XtYu15/bdhWVi78+ar0mu80Kdl32qqleS\r\nFSFOeHh54ffz32RJcfLusAF5mI6SSjCKEXY=\r\n=Pjqh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"338daa93529c874da1af6eeb4fafb935e014e096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.93fc524b7.0","@material/base":"15.0.0-canary.93fc524b7.0","@material/shape":"15.0.0-canary.93fc524b7.0","@material/theme":"15.0.0-canary.93fc524b7.0","@material/floating-label":"15.0.0-canary.93fc524b7.0","@material/feature-targeting":"15.0.0-canary.93fc524b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.93fc524b7.0_1678696732442_0.41061306948098775","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/notched-outline","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.50be0fbae.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09f34e70b35b7896549250762b4ef6eee45214c8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.50be0fbae.0.tgz","fileCount":33,"integrity":"sha512-0S1iltQgA3skO1+Y6ZNMjswZzDqLSNceJmAv9iwf5nNvGjxOfSNQxCV/uyRuCk8D9GSYBvBVQPjLrM1nZvk+rA==","signatures":[{"sig":"MEYCIQDPWCv6ugdJnoxjWYPbx6BEUFVTesOo73/kDiSvKWzvagIhALP9AEaetYFRelAye/ImlnrvEbh2KEaJJujOW+S1dD5b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2DvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonsA/9HSZf/VHtoPRDMCcqiIpiugEHWbzyNe+Yov0eQw2XdaOdhJQK\r\nTR0u28Yp0kEEze9AWJrgDR98LHL/o4eot9BV5JkhW8N2KQmgJpc+jrIs0v92\r\nqxwVjKCQLNgU/l8QmYoMwKqgXCTp7JxEbwMJtWx7wk7tDTwywAagtfCKUj6z\r\nSuu1xPFAW0jUnJTSlYKmFIZ3D8kdTTu6Y9imfQkBd7Mqv/EIOZ2Ortz8D3Wc\r\nkUHPNGI8+c9IW9zXsT1/4tzWrGHhq9d4iEsr4q+1OMFVIQRHwyJ7nvhQiiSZ\r\nEQ1LvDGDs9O+V1zLAtBmXp/gi6nL0mlWjcBMefLnvvgQZc/OU8Al5F3ebp9Q\r\nKm/rwWJhi8EoN7zhPHB9QF/1VepsVSftc86LJ0u+Szz7U2i6fJ3DLOoGnT4K\r\njNLxYX/hd22SOd312iCOhC/CxQ1hZHzDLzazGX3OO6Ls5Fs17qhtgtoK+3YE\r\nGopjGr+Ps+gnwNVzne+bcE00+bDptJFPxP5L4Sdc0ImJjujBerm5SPtCYE+R\r\ndQhrWFhD77OyC9EjNULtJBKzcMI2ZpJl+Mu5oMR+e/375KPoC+jBXxXQOzBt\r\nH+nAE4nojTHSQLHXlOclHVfuigNukFKRny7TAOJX570jzCmXKhQ/MqtVLKnQ\r\nY2S1eCZaTkvU4HBEf/ZJdh/mAiYvm1o9EUQ=\r\n=rR4y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"405d98c2882461cee8d47ab1b16a4666ccf7129c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.50be0fbae.0","@material/base":"15.0.0-canary.50be0fbae.0","@material/shape":"15.0.0-canary.50be0fbae.0","@material/theme":"15.0.0-canary.50be0fbae.0","@material/floating-label":"15.0.0-canary.50be0fbae.0","@material/feature-targeting":"15.0.0-canary.50be0fbae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.50be0fbae.0_1678729455172_0.5246248679552754","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/notched-outline","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.6b5ffccd9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0513962e411c262103eefab42402e208eb049b58","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":33,"integrity":"sha512-iwWAYFXb188SJEsUWRQfouR49fPBHltg/1lvD/s5+GioaD4nMRuWAJuoIpWtPJxoYtQ8cve77JCEt99/rM80OA==","signatures":[{"sig":"MEYCIQDcJIFKx/IadiZozJMi2dgotGSrEG/pEZZpXYLJ4Hq4iQIhAIMPp/exE4M/GQKLV1iBsM/vO2F7MrFO802rxwY2IS7M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2G2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWRA/+OQA0ZLwoROgQFH3Mj//tcPugajJb7AFclWEdA7X22plGrAMu\r\n1UgWrdmJvevEr+MVciHzy81rN6NCT1Wuv/RIf0Fd0vEZ/G0K+HvTuEWVE4R1\r\n8ifaqmPnNtTKPkZxe2y6e2GVmzy0j7OBZJrQXueSDxErqTMcFTZ0GL70scU+\r\nrq9doLm+Ej02msLRxTpqIloQHRk0komFVs/h9vBiKtc01pQueKi3Sv00qSaf\r\nTL54XhIxAMr0Jx9sHcjM7zqSz0n+qPjWBj5yHeIQ53EdGH5t+YRFD0hvqymN\r\nFmmyDXPwZnG/D1Xwu4r22USQnZEyYW4a6oA0aW0D7ztV9SLL0SmTJM/LT1q1\r\nRj+UMIRPk/S/mO68rPK3oxaZjEQk15E/tpdVEL2x7a3SJeY9DgAIfaR2xI51\r\ndMSuoYIas8Ys9x94N3/AbadSQuw+oKHADYakMh9ZqtHHG3mSaaYFMFtc4h78\r\nyKgJ4iNGktMFZJINCrGSBL6DXIpd8jLeR62MU4vpUq125fiF87nXbueopsdH\r\nisdh6ITwjLK8W3jm2ZWcyYclPplhLOQ/dhPPijaXifCOdaf5O+lRDumS7/gf\r\nEsVTOLHYVrcaOt1iWzgk+dgqK/aJe5qy1a75KwfN+x2qitgHaVZU4huliktZ\r\nrUMsZytjsBLSj1FqjOXDhMbVQFo1YatpkqQ=\r\n=Esay\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"d30761453fd80caeae042d8999af672f9c3eaa28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6b5ffccd9.0","@material/base":"15.0.0-canary.6b5ffccd9.0","@material/shape":"15.0.0-canary.6b5ffccd9.0","@material/theme":"15.0.0-canary.6b5ffccd9.0","@material/floating-label":"15.0.0-canary.6b5ffccd9.0","@material/feature-targeting":"15.0.0-canary.6b5ffccd9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.6b5ffccd9.0_1678729654131_0.5761203272909605","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/notched-outline","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.1c8013f4e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d11087fe5fc857f7908da790c440ce84a1625316","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.1c8013f4e.0.tgz","fileCount":33,"integrity":"sha512-QF8EBEdECoYbEQ0Jv/92flG+unsjDZ1VfPMoq0uY628IMw9Yf7tpINawo2vtlxIytbChP1sbMc7uwdg4TU5ooA==","signatures":[{"sig":"MEQCIB6vCPz0IaffzmrXgGdK7bwKcsLJgqPdpZI2d1wbhMNYAiBX44XzC2LPVjUPN6DcYYDzPK0IGepnvi/CndFolEfudg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2VHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphYg//fCqAidH2YH14gWA6ul2wiGH8x7rY2Jio+slQCeshmotlYkht\r\nRXqEoQWcyW4Fl9InXlbFlQJCSB9Buf09qbcNRGWp/YdjxJE5UZdT4cpVw8ig\r\nxtnBTSF9S7BZS9JIh29uoyc1kLEAI0U/ieVtkWPzuaAFAUwOs6MdKfRBbctn\r\nW3igotlYnSEiVNgGONgymbgrf2NlVe1/vL9yh2YfnLxePyf0zDr7YLlqRPsb\r\n/2jfC8vKpLK+pq2Zy743q7RIXRBxuzmo1gQBglVGG1H8Bifn3zZf24nwi/I0\r\ngq0lzPv/V1Hs2PUgKcvyu5U9rLioPxrjb5ofyLkVkubUjmmF1enHIMcqUqh8\r\nICT9Q+7U75OuJ0rdNywc8y+VaSZnNhTN4cTPlbUtLAptVkqHVACcDQvA0EAf\r\n72YqRT6YG0EpxqgSE2/Uo5x61rtYol+LIkyfpodCAqIfC3VqMkfi+Etx9/B5\r\nzSwTITbCfVRe4kR4Q62wffEilHY7BbVedTfKoXPUM5O6Mjeglv+dOyQ0TWvG\r\ngEYcnQejFej07T6yd9b+ekCh5EQP8rioI/Mrqk+mp53oHwZbVM0qXAQBUxWG\r\n7w9jLsQXmwF/+jkAC47wncYwg0e9rrpK2EztJCeNl8EMzNdrSR6+bM6Wkyzw\r\nnFMRhccARbhGoAEvc6zBbZ0K6kzdHq2crLs=\r\n=jhbu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ce86f06ff0c2637e8cfa4965aa614efa6bb86046","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1c8013f4e.0","@material/base":"15.0.0-canary.1c8013f4e.0","@material/shape":"15.0.0-canary.1c8013f4e.0","@material/theme":"15.0.0-canary.1c8013f4e.0","@material/floating-label":"15.0.0-canary.1c8013f4e.0","@material/feature-targeting":"15.0.0-canary.1c8013f4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.1c8013f4e.0_1678730567434_0.37173922872060716","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/notched-outline","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.112715df5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10d14e4c22894883cfd8b989e01275bb2ccc84de","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.112715df5.0.tgz","fileCount":33,"integrity":"sha512-uRjvO3lfct4gR6XtBLA9Ah0R0pWM5XtzmuTuJzZJ8mUIWJuOV0fJzJaZL+DXV/vTAP6mnOJGMcdgb82uqSHOUA==","signatures":[{"sig":"MEYCIQCR3fMOneJzsi/HygU3EZwJV2Ic37EBDsFkzTEV6KCN2QIhAIrcirgUD42fl24mU8jwz2AfuOhfPASIh+ZJYJ2Buta3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD23VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqI0A/+NBfVDiFSpwqeNfo/K+b0wFjxVq2uZx1oYNVJRkyKsuFuBTHt\r\nZZ4qgAcJAA3qy/ACFb7d7GhjGnulmLaPk2J+xKKk13KxwbhOIhOISY9kCJJr\r\n5HoOeotsUajE+AB2TKeHUpObJSjx/mdW5Yo9y3JUXmZcj8u3qUrYXspAXi/M\r\nQR360oHPjnylAmpGGOHyD3kLD/U3sTK6ypLf3ratezVt3zNhExGUUseCNb//\r\nkcm+FmKcZ7odV2agjtbJKiyv773g6CoCTQo/ihepA5LbuINC3DoyIPU0LkgA\r\nkMlSYs9aUULrUYP7gYEW+u3nhQ7SuVBkrvo3DR2S8vKPYWgdKmFAPvt0EFtT\r\nye0QB9xF7J4iM6JQcrPr7Z+TWVHZ4WboLiUsS1/0lg1CWndrhAtOZmXc60Xr\r\nACQWtO3Kc5IpR0AiJAWVhJ5nqpIIQjL1kjG77QGUzqtY3lp76diP66nTqBk7\r\n4ZGKViNrf5JEcVHCS0PyUxORYSaK/3nFPTmN+ALNA5jPim2Tok09M4QBi+yQ\r\np6arfD9uFwxbbVHKo3DsIdVrgEeSxzlsWgIGfpCKBtUdTO9haFv9VsHzI2EK\r\nWsT2qtl/iO5Tws1ETXH3GyVOwQ9J60gWhaDV0ZXBSaEBrO8f4NB2wG0B7FZC\r\nn8jAz7OTKmsd6J+GqJMPdDMsorr6m5BtF50=\r\n=i9cQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3894873450b9dff1b92031fcd1d00ed1ec3ba9ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.112715df5.0","@material/base":"15.0.0-canary.112715df5.0","@material/shape":"15.0.0-canary.112715df5.0","@material/theme":"15.0.0-canary.112715df5.0","@material/floating-label":"15.0.0-canary.112715df5.0","@material/feature-targeting":"15.0.0-canary.112715df5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.112715df5.0_1678732757311_0.7207991875074558","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/notched-outline","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.d250911f2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db7497f6801a120c22e71728db7b1666d281258c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.d250911f2.0.tgz","fileCount":34,"integrity":"sha512-Ix6GW4ivG10lxkgJ9vPdOPI/CYLYxAON5cA0ceBkMSiszX85kazo2TanoYITJURp1rnCsx189KnbBG7H6jTY3w==","signatures":[{"sig":"MEUCICdr6X5ITH8nPb3n3/plb4Qe4OoEh66FcA7LU2xbXpPIAiEAliLwgK7PHQtRYQnGa+9QByNAPoIMmhiFzmWcI7RVQDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":553681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3oUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoB6Q//Y7JCJxtlHVbn8Iz9UUNdjkDz2CdOg0SBrgWC7OVVIab5euSi\r\nLcl4TOD032/TBc9weBMGOALTNcpv3PyMEvJToxO1pKnaWpJIEnwU840uDR7l\r\nWFk43t/1l4Gd67kL49DEuzK/sO7JIx+68ol0lYCqavvmdQcgSCr/NcAn7kMN\r\n0Rbf7uHr38O6QhrccYuTodXZoe3QF8iwILplt7p5CwRNyKDZ/D7WpTaR5a/K\r\nLvhKzXIs0tA+ZjXf0UmlFCVJSWufjd+yj6WvlvWUFlDGeRgNdTaokkAgPjJm\r\nEWuSfa6+JPzjbSvrAlmSuoFzEeHfprxXu75iFYrGlic2HgfMW5Cqo5EwawZl\r\nmYAWHaQALatVKyKNsibVvaUP5gI8v+hQgOlSdrIHXClg4V2vC9OFCofIZaYP\r\nTzx5C1qzdyKgE+iuqIXGcy1W5M5whMmTAnjYqNY+LTRTQs/7Rv1nW2HmVBLe\r\nxRRz5L1j9UcoGn2qsQu+NaZUTZsdmEgu3kJmf6fm1aOvUO754GWZhIDqfo9c\r\nYleo7KnLEGODRBkIWUgOoomQYJl9Na40HNnpnPcwycqaD+SQmYVNUnCXbGjY\r\n5c8lr/lZX78Yk7Iiie3bKo5EzaYi7dnwy9tUMVN4WfmVnca84riYcfJsQLuw\r\ncgL9WcoS4wrWdZwHpAcEbbMMv0O3diQENYM=\r\n=z5f5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7b4ac246b31922fb4beb9ed168dba262e499c271","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d250911f2.0","@material/base":"15.0.0-canary.d250911f2.0","@material/shape":"15.0.0-canary.d250911f2.0","@material/theme":"15.0.0-canary.d250911f2.0","@material/floating-label":"15.0.0-canary.d250911f2.0","@material/feature-targeting":"15.0.0-canary.d250911f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.d250911f2.0_1678735892194_0.8109065991779936","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/notched-outline","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.7cd925c12.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6d5c1193a73de50ebb2d2e0e36e363885d52810","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.7cd925c12.0.tgz","fileCount":35,"integrity":"sha512-0fdDGPcB17uA69p+Bl3vrTlWqXX2gq/dzY6c8mXOqL+Xsgtw+HP2LN2qyTKqhpZ6lP589jHKCqZc7Uqb3HmmWw==","signatures":[{"sig":"MEUCIGeJKScr+Dl2c/S8+ePUx1TaaR0Q+XJN8wg3ZxvShMmzAiEAq+UTY87VduRug/GFNZdiObYOE0fUHstcR0fg7MOwzUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":555067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3vYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3ew/8DPu3uFZ7Q274rr7LqhJARNxnY5c7eagLBGZ1mcDhkn1XxTMm\r\nmjswsiJuB+qp6QLuqaRjoeY3/IAAYJJgmUMt6QgY16k4NFlOX+bAThYlkMaC\r\nZmxT3JTAW6IS3eXqEFVvYGk3hcPrcsqwML181AuTRxFWxahSYYowYC6uStam\r\nEFK+RGdSrwsKk7/ouDD8AcB7egdGH5IVnZHMHcvEiBwdM4V0aSSyUeNHhxVc\r\nlClKZY526o4b/17toObTudZdGtReb+PA+6fH7Z6F08lBU0pfDUtI8XjAQJjW\r\nQ+wKf8FZSXst0OrzuD2+dUCfNXfsFqhh7hLUqHW3QRi/hnb/BcH4kbE1tpRL\r\ncjtA0yXifiDBRCuj9mtCVJn5SEn3rmYnNe81JbOPwXRj8VTVsw/HX2GnsAYR\r\n3lUYX4+Bmx7TUtpDwB25G4LZMrxStDVSgc6MMahhVFt4o0D0vh4hJwGqlo1K\r\nHx5zaTvyTtQpnu+YjHy488D4TGDGxZizJA31kkPsqo9Q7tVPZJe7bqJqiB+I\r\nWJxKHd4pFSC+lUk6ZyPazo3uzvWY+04iHomnexpchTdSZkKBb6rY+KzXlQTI\r\nbTqouchoC8UOwL/E5mhlPnqBFPTWXh0oGXNPwy4x00sfC7PEkGSSFT5FrrYk\r\nNcCt6l+du57IGvNcZUwen+N5ODfxyQjWft4=\r\n=Z4Pb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"96310a5c80e3e92695b6d6e2933e9b0c82e58a20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7cd925c12.0","@material/base":"15.0.0-canary.7cd925c12.0","@material/shape":"15.0.0-canary.7cd925c12.0","@material/theme":"15.0.0-canary.7cd925c12.0","@material/floating-label":"15.0.0-canary.7cd925c12.0","@material/feature-targeting":"15.0.0-canary.7cd925c12.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.7cd925c12.0_1678736344121_0.05803803891924808","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b2ddacf73.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3b1e1935875d34f85cb50a68001c8d87fb4b513","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b2ddacf73.0.tgz","fileCount":35,"integrity":"sha512-dIoP1BiiSbLjsY+uM9qFXj4pCbTR69mmACDF+fqWRdZq7nJxFJHD6edD97MJziIRCkoYyGsBmmGDmBAVh6Dg1A==","signatures":[{"sig":"MEQCIHHOugwB/AbNIuHUbFqa61N8vc2unGfWefiLvOWp4S40AiAQxf1bYLePHhUPySDuh23lhAI2rrC5foBb1kzBn2vTlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":555067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3zhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvXA/+KC65RGa6E9YLQ09g1T5AxD8r4s/HGegoHDgL4IFUGYqtzyuu\r\nA6Z+eMEOZrjEQTq+A0NnLGEkMs5q21Eim3jBQquSKw3j93Wcc8vK2CUlKRJ8\r\nnZK9O0c3enaLe4Wf3VnUZfM8WiWz7IbPWlyn4/RKMKagCdKSAb2oOWTefzW6\r\nBVXJDMUfMkz8HwU4TAnMozT/b2g06+A8CFotv1VFpiW7REtro30u867cPdMl\r\nxQG5cbE6prpXhxi/VTtZ4V9SIAruXqa6IUADC41OOXaSeHzHDZQg4qgePB1N\r\nSpCHqfk5mFwbybdRJ7eJfkRS4v6FDP6FOi/FPH0dHHpgC1zJUsxImAbi03y8\r\nwW+i+B46Jf5jAUS4OYflrSa2zj+u4n5cdw0DSW/UeclCK7hOL++5sILHgEfw\r\ny7ZC1ugEI+VMSgn9FasMcfi7DD0j0XdgvWAw+SQr92OoT3GVSkiiTqHjHSKl\r\n1xA8OnDK5sbIXKKonyllf9b3iQREXklFAn89NDxsr6eAKUasgq7NehRhTPb0\r\n+zhJuzucOvE5qh6bHhhwt+KsX/VOnq/FfUo054GaOphWF4ZxyfEArFQDioiE\r\ngKtGCXknwmTEVGmjnxRgJ9COPaiQasLHAvVK09NoBTYqJCQwuCEk1QTy6RXw\r\nh+RZw9KhXwp/aU3OBMhHE1ftF2OBNzcBw+M=\r\n=pECx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"860a6f0b439760b894931fa6cb354412764bd21f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b2ddacf73.0","@material/base":"15.0.0-canary.b2ddacf73.0","@material/shape":"15.0.0-canary.b2ddacf73.0","@material/theme":"15.0.0-canary.b2ddacf73.0","@material/floating-label":"15.0.0-canary.b2ddacf73.0","@material/feature-targeting":"15.0.0-canary.b2ddacf73.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b2ddacf73.0_1678736609757_0.621578255131322","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/notched-outline","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.989ae2ecc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9899d80639765c96a200f0bbe10a4831cc6e4320","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.989ae2ecc.0.tgz","fileCount":35,"integrity":"sha512-8ELjQ1o6MvzxMqUo+GzM2Qxklu3MehhijKJyowql6jlHGUTX8pEWqHV7QJqxNBbyXTja6lJzPeaOln6YGU4ziA==","signatures":[{"sig":"MEYCIQCAsksC1oD7A8be9q1k73tK7jn7oCGzGQglS87+QjEJhgIhAMFT39ekKsuH+i2/+QXpVmARARXTBCF4KXcxiohL4idV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD38KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxuA/8Du8ZgQ6dkXhZXM9LDCSfjVSfzWE0J2znaT8aGdFVLb3bXrvS\r\nZPCS0KiChlK9TMVSqREGeJG/bJ6/qP6jGiukVZnxZfuo9p2uOntEjAB2c1j4\r\nx9OkfOz6vE1RIP9YrFdEKSWz6Z05cMii63bMEXOWCKKCSk1fm/VAqtZFS+Yl\r\nmtRx/r8CELCzxuz5fo/0BZcSTihbOe3sdJVoZ4IM85NWrT5WArY1HVP6ksoq\r\nw6fRwvdbXq2IwQPWqLbJgklNt7BY7WHWs4ybZK2Az/T1HcQe/X/HdVXADQ9r\r\nf7anhB7tKrVcLkyQhx7gze2V+DNhWJlZfyVIJAv32BbJ52jJt8wjsb0BIdiV\r\nnDuq40of43uVw6NqyOjWXDcsBVP4M5zpbmM5QmMm9eTA2lnGOSrj+TM/SJKy\r\nOCWXfYnyva6XRO54HrUJ88jKwSNJqotsyqS/fFPIQzKMbT1HcLyIMMClT6r/\r\nE5+uMy6lGE7payFWnpDrHOT2jAIirwIH0O3pzLFYOcnu0N//+hM48ck8EeF0\r\nyjt1QKPwzwDIF1QaYktXIvcq+JRtoWLaXya1YUTwFPFXYsiIyJHME78Cqzxr\r\noCrk1MpNu0c80Pda19IL6N0Y18VzOSzFAGsOUw/eECIjIV2X+Cb5CUa9Cqvt\r\n10wxprgJxP4p4EIYFxj9Wca7NAEavVHZTZ8=\r\n=hX/k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"52e0f05ff74ddff1d986b27e08df13644c056b63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.989ae2ecc.0","@material/base":"15.0.0-canary.989ae2ecc.0","@material/shape":"15.0.0-canary.989ae2ecc.0","@material/theme":"15.0.0-canary.989ae2ecc.0","@material/floating-label":"15.0.0-canary.989ae2ecc.0","@material/feature-targeting":"15.0.0-canary.989ae2ecc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.989ae2ecc.0_1678737162702_0.34912024233139705","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/notched-outline","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.89c66483a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2278dee3d507218d5962f2374ceceb5ab0d20d36","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.89c66483a.0.tgz","fileCount":35,"integrity":"sha512-9jXz909QUgh+ULBsyzAPcEzzaXOVzumSoEUfTLyFLOROGLN86Njm/8cfUG6evi6AXgI10bACGtWXACOvlOpwhQ==","signatures":[{"sig":"MEQCIEB2bUj7SQpq0XCH91CDKmqgtulq9EHh4dzZDOvlYlGnAiAFtESEjemx++uOi4VYmzo7EJg98R5fWyFzYh283Iu5ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4SeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3UA//SgZXWNdydyegbWJqDTG/WqQRze4wIMNwfLVP8xz0jxHopQuJ\r\nMOxtSIKUMI7GMeTBnm9u+Iju69qDCcf7Lt8cLVNB8WF5ZvpWty/2GNCP/vQ+\r\n1+NkQraQvniHysRUOSmgpGHZzGh52YsRN2k+XfKsKdWYaPTCyNHWttsnp53K\r\nurMBtOWxMntzMiovoUYlEH+2Cwk5QbNUlDOUFY7BBIqdcVh/8PghBM/RBCPW\r\nNWtNcILQrvBLMvW9tNqo3Rnr0c05UZl+yRQ2OqSz8GSctlN5fOgqpgg0aH1o\r\nWC2ks/szac3Y9uzo4yHUEbdFcsCZRbL9f64ZuYg0z0W/K3GkndB/GCQnbfeK\r\nNBFBvPkTkNk8RGlX1UMzKUWCFHg2PaO6oioyO5XNLeYriA0hDO2zPotzSzGg\r\nBs0VxSlkGwkzIFAbF1k+OI2wnXzUcW89k1/UvUvH6RMBeU+SU+8LBylEzaHI\r\nW9wb8ojHqjngLaQOtkZr9wITn+tul+B93x9jq5kYbRzntF1ocxqO6X7N3CoN\r\nhtumlLXxyCmlZ2+JclsLDtNdSlyTc+pvq2mvO/uoVaa39YEoYsjsvZHM1cCb\r\n7yfpypH/3s02o/5FoHgGOJ/3zTgpc/T9IUemZYK+ceDKd84x77n4KoOXhWe/\r\ngDvNgEVhJK79By6T+NrgdmDBq25Lfe/6Xrw=\r\n=60hH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1e255ddead4716271020e03e9b0b302eacbc4153","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.89c66483a.0","@material/base":"15.0.0-canary.89c66483a.0","@material/shape":"15.0.0-canary.89c66483a.0","@material/theme":"15.0.0-canary.89c66483a.0","@material/floating-label":"15.0.0-canary.89c66483a.0","@material/feature-targeting":"15.0.0-canary.89c66483a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.89c66483a.0_1678738590576_0.5012052320855485","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/notched-outline","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.6a85742c2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d468fe48f467104e99f77fe61553afce1c01337","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.6a85742c2.0.tgz","fileCount":35,"integrity":"sha512-rSwDl1rsb1BizMJw05rF1RWdgWekb2x6dRGrz3Wy9t0+RzOw6T1i8wJObHg9Cay37ZBcZoLmhQ42F2zIUZod2g==","signatures":[{"sig":"MEUCIQDKAx6uqMXzvODCaYM558oQA9VJVJUrdsDspga/L0QtawIgZfXVfcm/pIZgdc+qBK25DyUHNUyFILNZQRI1OlfXW/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+A9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBDQ/7BP3U/+HZjx6e8TNV6o6ScqoUatsLgiCRQ2Wn2x/hOtpPSpGu\r\nRxLbCNOk6gY8WOms3jJXGyt58ETUKDRdYkiaBvHXSjuCpy3cIZ1YI6QwKvQC\r\nJIBU9y9LHpp2AfY2MBOXx62zqKwCni8v/g0WAozBCURUxxuYI+YUzgeW3ARb\r\nHlFxJKKVwiNOM+QJAk4fZwyjmcAOwUXRFCkp8I5ociGc117c+3gmNrtAPPar\r\nCpkFB/Ai1A9JvdJfLux+ta01jYUFGCe3hsyVBcnsBczagimu/OPDDgG7y5Oi\r\nkBLN+aPt0VIW0xm9lqcEcAhOx1yZTEyzQxBmD6pegrfyNB8BxJSYIUXKBhR3\r\niaL6dk+xFTku2Hs6hY7FZBdfcl+LQZzm5D9FJuypWDiKBwsB4OTeABL6ar7X\r\nCBG7rPmIXrvOFnfeWzBBaC8Zh3Lg79A/RzLAydf9lA8YpPLqHDScHlFYN90E\r\n1s0rKDZsp7VqOTJOYMahtCQO/liSAoqhDVcztUkkn0jpRSCEqKcL3W0/sHkb\r\nVPJJdW1IAo9Bkpu7CuciLasHoFbPcumo4GBpXPRqk7dPJBN9ml4/+TNtXS6u\r\nvDiRc1XaeS5FygLqu3B4x0YFyLIadhGnMT+VuQjvamc5QRpnehBa7J4cSbsJ\r\n84QWMEOX94Xg7dmZ0snJeC7AfyhYTeaKedU=\r\n=ftET\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a2a15aaa59054337e585758eb160d9cab97224a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6a85742c2.0","@material/base":"15.0.0-canary.6a85742c2.0","@material/shape":"15.0.0-canary.6a85742c2.0","@material/theme":"15.0.0-canary.6a85742c2.0","@material/floating-label":"15.0.0-canary.6a85742c2.0","@material/feature-targeting":"15.0.0-canary.6a85742c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.6a85742c2.0_1678762045080_0.16257111776240918","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/notched-outline","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.bb6cd78d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c76b7563bbb31c549a344ea18aee3b1140a33b22","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":35,"integrity":"sha512-wuRT01aV9YuRfuxjYa5Pm/caJyx8gtHt4fvJTbcMGKncs/U26kqfXSP2ODoI/GTX25HUrVWP9oReQQlcx0VEJQ==","signatures":[{"sig":"MEQCIA4jSNbAjrc2oAaTmxkFdyDhsf4k8uHxF9kgVNtS5cf+AiB4YyGIMf2LXi98T1dgJEO1CIFUkbRLSycte69vyKFanw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELoWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNCw//bGZrNuBmznCSM3bwzKZCvU2C8rs6PcLdwHLY/lHKEccNCYFr\r\nTAsz8Bt/bVny5c5ejzWjCtJXDl2VWPM1Rg0r8w0x4vXb2kjA6JRmT/wnvTsy\r\ngtE9OLFOc4DE7hi54FuKBwN2rNH6EfdldBnJwdLW2tDtp0BSR1zqWZ85f67d\r\nLK6vc7pcLHr2Q4scZ5pzj2VOWRgfiWQ0vvnHtuHlmYm7mQKvvjaX8InmbdTr\r\ncdPbdlT6sXSCO+yjGuOROaHIFO80vBYptZ92qY7YLdlGXMd28RuH6tgw80HW\r\nEjUvj6h+b821MxOy0XIbKwimivmGpQAZVaWvG6OfXqhHR+JlIvoiHYw/+Q6J\r\nHiKEwq4b+ndVP1t8irNOBa3GUH7/0dkwZRyt96wJOuC5pygNlWSSt0fXwNJD\r\ng2Yp2Z7xhe1ginE4rNK3zwE2+8hBlBLwUzNwlHSwfPLstdwVJTwyJhPxnTyS\r\nQ0fAT74yoosRYfMlBybUYhYR1qB34YozwT0ZvN6jEhtgisZzgz6VfSIfcMrg\r\nYk7v6zya+aVc5i7a2XesJySA5bun5F9F143kE0//ixcwUQNyNM8gYxbNV1tF\r\n2hQYcD24wfG1RHgd9tq2Y7PrwuAEkDmraaIOlPgsf7UrpBYzeii+ku4mEDK0\r\nYpP/6ADvsu0n1/vAL1flqWFbeQ8QWySDw+k=\r\n=xu2O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fe016d599b297e4e276ef5b37b829b25f0607b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bb6cd78d5.0","@material/base":"15.0.0-canary.bb6cd78d5.0","@material/shape":"15.0.0-canary.bb6cd78d5.0","@material/theme":"15.0.0-canary.bb6cd78d5.0","@material/floating-label":"15.0.0-canary.bb6cd78d5.0","@material/feature-targeting":"15.0.0-canary.bb6cd78d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.bb6cd78d5.0_1678817813824_0.0004716036968193116","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/notched-outline","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.5f94aa37d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afa81399d64827d438483b428ea7dd2ce9e38d2c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.5f94aa37d.0.tgz","fileCount":35,"integrity":"sha512-6fQb65wO6V7wLXYa/QVEp/0RrkVPvoIUEWAmvwIgQX1rj18o5onbmPakLDw9l40rW1jwlMAaOiWdkeF7leeYwA==","signatures":[{"sig":"MEUCIDLVSBci330N5NayYv1bxPOOIrShm3zVR349JQ16gH1GAiEAusWqe0y0u4yqxKhofC+g4HquVRJ1Cy1rAq9eO1uWosw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELrdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFoA//VDap7brC2aihfSzPZWTfcwBhtYKPVwiW+dS5wPMpAtklfL3g\r\nB3cHfpM5BiaQ3pcaucVXDCgj9ZHCAhWOY/ThEFISiNykH9rPBUnZTe+6XeCD\r\n0K8WGYctu7doyKlojr7VQ4rp+QMIHnjErlMCDig8gF8UirVzaoV48S7I9PhZ\r\nMZ/tWXnvv+0O7hL2lQxygw26BBxr3WbCmIufUNMFfOn2DdxPcPxHgvr1mVSI\r\nYwZqFpKBh7BehXU4FaZQYFMb7xK9E4t98TN3i37qU0XhIrsq8PZRp9s3gyT1\r\nK9IA9JxadXswGu12D8TlEq4S5CE5EfiaQyrZ2FntIlfkpQpqG3XzASPn1rUS\r\nr5xvMhsEploxab6Y3cWGrdi0/TXQ24C8HiJtZHQ2q39+f5GOe0hTthpXMF4T\r\nAGZy3chOsUsctpPUJnsr+uyZUK/H/QWHrIjwM8vzLjwjwMFqsm08DvP3Mvg9\r\n17SQr7UynOtwJp1/Z8Q9m/7wUw3ux/mri8iQeFtx5+cplCIr6b1GCDEon2eR\r\n7i0Efk9USxqHqnJmX9E8UzWjqMjLlGA3SRJ54oxzA9XGNyb+9guAaIy0FfpO\r\nZO9MSnlP9jt+dT2AnUzPL18bXzFR7r6pGAEm574UdCkPJ1KpMLIl8pSmUqxK\r\nea3t/6FYbD2enWJAWHRtagcgfFbEsnvBolU=\r\n=aCZm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"95db647ce856eab6b1eba2fb1794f3b0dbc3dd08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5f94aa37d.0","@material/base":"15.0.0-canary.5f94aa37d.0","@material/shape":"15.0.0-canary.5f94aa37d.0","@material/theme":"15.0.0-canary.5f94aa37d.0","@material/floating-label":"15.0.0-canary.5f94aa37d.0","@material/feature-targeting":"15.0.0-canary.5f94aa37d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.5f94aa37d.0_1678818013324_0.3371131267148997","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/notched-outline","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.1bd317240.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a831315c9d961a7353207d0713f4210669f762c5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.1bd317240.0.tgz","fileCount":35,"integrity":"sha512-zz7d2pD7xNmCgSrYkQJW6YVvulLSZ/rKi5o3KIEV+hm8jCqXN1vUYCI7ivZr4m8gFwyiQ1iSNzL0YTUyBmy0OA==","signatures":[{"sig":"MEYCIQC1fsPA/zJKWky3/QK30ObltCzHn1Q9P21t2Q7ucaFfVwIhANRUFpFY9zIjMTPiEZzjiaOoSHJ+Pp+Tf869mjw78+on","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELvFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcIhAAg4vBT0DSmPodSSVR18TQZYEHh69wqxjmIZpCq/anwFcRzdbI\r\ngH6e5Cjr2l7//RjhJQSRNRQmN4/peg9+xI5jxYcqGDqBT8bUAX8GA/iNiYRM\r\ni5iAPQkRwGAzTfay20gu2auqBI2kHYlSso1jDGa39BvGQt1CK9QvIDYDSDWs\r\n/DifUrDDIl/ylf3U2CEMOI7Lt7lw9PvGtt8lrf3zM0aARmRyR1XIp9orPS1i\r\njZWzIn0/11axa/isYpJR1XbMSXukmKrbX0xpju8xeGIHv3lJPCsEWLCSJxie\r\nbhB+6AnRLd1dK/zPV9eZ3nB2gCIyRaZAfooAb+bJOyyh3jjOiTv/ergNd/tf\r\nnLHV2nEruEbY/QK19ztJKjNGoEOWtBvINB4EyZO314vOUXGUqoi1X896bn4d\r\n4DfndPtMtTCjPxHQ75B+jlImi7s4o2t77HD/ategP0KNZ63+lng/QGaqS9+j\r\nlOFFiYjizy6NY1xf1FOWtb6Kvt/8D43cszVGBhrqu6gBS9z3MVzJQ1gx7k9f\r\naPj0tWZxnTKURt/otfvyt1Btbi3LevOx8hOw/zjSkKZI1X5xv3BUlRjd9vN/\r\n7iwhJEBMBDyLyHnksAtxHrUBvqemR0EVs3tmY13+cyTZ8Y0uXrEcJRkMCDJZ\r\n1r3hcz3Y6uz3eqVujjjeoiBW49f5NTw5b0E=\r\n=Ua6O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"eef3d63106c71dffbe823b04d07e86a84dfd4d42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1bd317240.0","@material/base":"15.0.0-canary.1bd317240.0","@material/shape":"15.0.0-canary.1bd317240.0","@material/theme":"15.0.0-canary.1bd317240.0","@material/floating-label":"15.0.0-canary.1bd317240.0","@material/feature-targeting":"15.0.0-canary.1bd317240.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.1bd317240.0_1678818245107_0.6529899662021141","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/notched-outline","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.d441d2a2a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9777a3218fe285868f3e1bfa7e6e9ac92202386","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.d441d2a2a.0.tgz","fileCount":35,"integrity":"sha512-zBh/33NtniE15xdzuCJE3uDEzC6tqg1kO2o88+HaRmwHrTuv1VdhA6o2EiE+8ydIvzY4ipVyKP0dHYV6kUpXkQ==","signatures":[{"sig":"MEYCIQCgbbAB8RRuuHyqB4dAvsNzUrzhWI2hOsQfDHQadtOAxAIhAIx4mgFDaLlf2EE1z4TVo6+Yp0TmdCjCcb7dlz+Fv9nA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELxjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUag/+IXakRqoZjYaavhTKYsjxt/r/cKSR5JF2rkUZQLL7jRyyrsA3\r\nE92p8wNwCFdOeJdDEbSOhXOvkX4lSk/KZoKVGo56Y1NHeB/DGdPTLAccRViA\r\n70ACgRs3YCfuBFoJcuTfoZ3ffBkTLNzhn+8DDb0/YVXlVuH5m0BBVFTNWrsq\r\n5sZhndA4D+BqfcCSVplO3tUPTnpZmntIbW7DdO3eN61zdlhBfITO54hMgDm2\r\nIM3nLWzB/aLhcc9nvUWAr/EQ1Z9l2lL+ZWDkNh/zSc2+HpuEC4c+Hnxl9swM\r\ntklXVeXFpxlaoh00cNNqMQUAi/0K1eLfQTVGQVsLawyVfhTI5xmyUJR/ZQAC\r\njqkx7UDQ5GAAASeF3smlpMvQLvCYGGtHM9kf3P0HCYiKLm2ACm1yguOGPrat\r\nUC8uzINCv4B45GgPYM1Y3B8bCcTPG62uIHQYX2UuJLpItkYbtFd2JqdG7go9\r\n3Fon3Z/ps1UhGZaySSZsw+ZeS/ULGnQS2PmWKNgbVZU9dn8PLf/nXyNidDVL\r\na7JUovbyvUnAEiK0wRCG3V33mGtFP3CEA2p7kgQr6FgPd8Qb7u/1DpTgAjM4\r\n3vC/KiomGa3SKjiEiPvplh1M1F5v7H9U0/iQBXXWGSz/o5TK4TLaD7MEzx0s\r\nH+8rpXNI4rRU3icTodfY/5FdoDMfjquaF0w=\r\n=tL84\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3a1d95c90b2fe34c5c04e44571f94badd66748b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d441d2a2a.0","@material/base":"15.0.0-canary.d441d2a2a.0","@material/shape":"15.0.0-canary.d441d2a2a.0","@material/theme":"15.0.0-canary.d441d2a2a.0","@material/floating-label":"15.0.0-canary.d441d2a2a.0","@material/feature-targeting":"15.0.0-canary.d441d2a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.d441d2a2a.0_1678818402912_0.4679695174473548","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/notched-outline","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.fff4066c6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22c10812c86014daf602e0698190b3e334ee5458","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.fff4066c6.0.tgz","fileCount":35,"integrity":"sha512-mezSocyrVkkdCMkxrIkLJ13IDcQTiY0MnOBqTQTriaDag6/ji2dFjYDtgX1QnPD73wF2uFMIuHR+h3u1X6Df9Q==","signatures":[{"sig":"MEYCIQDiaOg+CmWXhKkqI1WqY4KsdEj45irrtowqJBngxk04eQIhALCcqSy4dd2x3wbT+t3FQhcDwC1ZhCXK7cG3q590VcnY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELyLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgSQ//TePkqwl3XOzhGZ7+OP78/q3NiNpxxE3Tm7p38+Sa9maNHFit\r\noDAIcCw1ckSkeZBhueq4LJZ01feF2BGMpbJCShLj2Gf27vLMVVk+lAZk5zgM\r\nHRG1WICBvg+2IHBeT3bIEr/U7y3vw1RcKXIKqoCvX1bUX9T35XJocXpZZWxd\r\nBwB9mWr6Aq9W8kHuPca7vQp91Tul9YU9TzOh8xzd0WIXUdaknFdvnQWYBxD3\r\ncM6A1Vx8pdjWqvcjHzGwqCTH4bgR3Hfev9LPrVC3X30HEzZ+2/WEYX+8ziu5\r\nyr33/LFv7y2Bxla9H2xPUA0Rqw5Ux+F4fIH8T+Qemy/FnIjcd/6L2kSEl9Qa\r\nL4FYV4ABGUHLlUr2v2XvXSaGt+zyCD5wLaA0nx+wDjIJARDovbSenLN17BRp\r\nU0ogsyQZuZ4fZ+gZps3UO8Rzn2MRwpnq+HV4PF3qo8T3wcpFoMYCTiUTvSF0\r\nRSa523THrGx7YaNfurGEGYkBLglRqw3MhvSmp49rIsG4p2yspEMTKFsDYG6d\r\nf+eeRguenMJEYubDsi5MOSYwdbJug5T4CQ5Rd/DaO1ZC/xzv4x0nx1GbQIZQ\r\nPCsr4jklCW2C7LKpbe62fEbCP2TSvslddToRj1iGN+LgTy3XcrL4Hqqdd6dG\r\nc3L8JBn/jt/Rv0Zg1E0fPFrv0OJ+0l2Qw+w=\r\n=7Oho\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9d24b185ab8c87061ad27f4e7791690a12e10135","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fff4066c6.0","@material/base":"15.0.0-canary.fff4066c6.0","@material/shape":"15.0.0-canary.fff4066c6.0","@material/theme":"15.0.0-canary.fff4066c6.0","@material/floating-label":"15.0.0-canary.fff4066c6.0","@material/feature-targeting":"15.0.0-canary.fff4066c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.fff4066c6.0_1678818443013_0.26194096987624627","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/notched-outline","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.87809c710.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"172af24f9542b0d5e609f4be143a3db9ed9383e3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.87809c710.0.tgz","fileCount":35,"integrity":"sha512-YG934JR2DOBaU4NaNtBT83/AzRRzAdFCCnWZCBP/yn15Grmm3X8FDdqMw0GAL1OOYMxNyF07GzCbd8l1aygdEA==","signatures":[{"sig":"MEUCIGlwncNpAvNPTx2tp/mz2b0sskB6ryBqubJtv3+Z58VkAiEA7/UdGBEg2XtiXxGatmoObzU6TyVIXLqzJSC0yfb6FAU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMBQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKYA//XC33ZxvDGTZKM4ahgT2TtiGpnMmOhxGgHQGsQ3eUN01erx23\r\ntD0c+DB9dwZF+81YkHqfMxWBlrM1EiUuLs91tr9pKoYUk13czyVnlBGZo0kX\r\nvPRoSVd/5LtHrIxs/CgPTpSEFlwlQBJBjhpS9sn5j8ETYoKPNC9IBkMDpjBg\r\nBIqxY8VF1psd/IZHBLWTuXid7uur/3mPRiOcHLgXEA/2RqoyeucvNl0+JaWH\r\nXsaCySIUrdcZ9ErvAI/W5cuaWyOKt+wee29aTxCafzsDFlvvZNaA2XJZtvDb\r\nEj0fk1Fxc2YQAYQCLadxe+7E8DYwPFLvCS52dgkGdI82IwSd2Nydf1s08u5S\r\nLqcvJswSCYAU985orp/KE/sqhV4iuxwNtXgnZGi/jLy3gIanbjCHDdzWSOOj\r\nUJF+3DF/tWWoPRTOQFyX5d/W1UGZskO+PA0zF4AB0KFac1ZpTN6EeaJUxz1w\r\nYe6ts7Hr6IZRdyTWBJP/SRH8uAQQdh9b5LMJ8+ic9XEYtJ92IXthL1QewvEF\r\nJ8Gdd1YAWaNWbXK1kg6v4cfbgYCfXBs+qAnKxu7yA23OhIfXb7N+UZJV87q4\r\ne4GPpfwYX9Wv6boDJtbCS/Utgx1t3wHSKTPh7aYZRSSuomYiDaj6qNOwlmJj\r\ntBwaEi4EZ0Yn0hDNUNn9emCN9MlgzaqvjuU=\r\n=4OSa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ac65d4def7491c4e414883c6cab7e075c7374b4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.87809c710.0","@material/base":"15.0.0-canary.87809c710.0","@material/shape":"15.0.0-canary.87809c710.0","@material/theme":"15.0.0-canary.87809c710.0","@material/floating-label":"15.0.0-canary.87809c710.0","@material/feature-targeting":"15.0.0-canary.87809c710.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.87809c710.0_1678819408336_0.30055165422811125","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/notched-outline","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.48d30012d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fdb53517034ee48ff3556afeb257e1ae7a390ec","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.48d30012d.0.tgz","fileCount":35,"integrity":"sha512-QQXpH86n2UTLPFc9UHCfD7g2ELrxIYb+klqb9ZMQ/ozZdQZrc5cyNrdRlXG9Y7oXGWt3Uiy1T3yAB9nkVc4dwA==","signatures":[{"sig":"MEUCIQCxkebq5X9iSXcSwLrBEZARwLBI0mIp3sfFJs2HBSbHLgIgNKAlmpZ3R87O7l1bCRB0ieXXAiYE9ZRzqGmz1ACMrb0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMFVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFBBAAlv7uisfDKfbmtwNJi2eGPsNEwg/npnqmIDrS0WkfnIXJzYXO\r\nEoIqt3kpuGPMph/n03lIquyoLfrthYRXb+PLL+DRC5iSYVIhCSYj1ORn0LaP\r\nmfBYBb00xSesujDxR6BYfNDZ/XYhRjpgJCQDmjSkIZPv1L7gEU8RZhHXmTWP\r\nqtBc52hb+EVPmaR75WfXBB4fSKyke7o82E06f5Zb0hU5RAnYPXSxyBb+v7jm\r\nF1M5zErDoZUZkz8afXW7UQmg2CRgockCtdCHbpGOKBmqyMhiNWGbnvpmZ/PA\r\n5V2KAppVVfnnPsc8WiRWaJoa0n0qU5ZkfE0OHO71gCThL1T6krBC8uamhlcC\r\nYLTTQa6ud0fx9KsaPJhemJRRkJxXwWzvjp+3EVKt4Vkt4xGtug6zYluxxmHo\r\nn1xTl1AzkJcmbGiKsVlLUUHxMS2QPuZpXqqD6zng2TEepgeU2BJcsjYvD1mW\r\nsO7fDjrT96wnz5hPKDm1wLh8M2d+e9jugUfIsf1zJIUoyRIau5PJLNYIX5o9\r\nJXd8ODpgVUMOukiOqmX8NFDKm29J5gsFTtDMhJcbZDFBzrL20akmAp8TmrQm\r\nPoJ8dzlQfW5LdjvKLnXRTbVVjZ9UjJ0aT3VA6bMFd9Q6IKeGduXCoaTS/EqK\r\nsAq6Wir0toTmuIKidoL92/KV5Ft0YVmzRlc=\r\n=8vzQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"f2e4b43d20ea58b52a223d31b8dcd3f813d1babf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.48d30012d.0","@material/base":"15.0.0-canary.48d30012d.0","@material/shape":"15.0.0-canary.48d30012d.0","@material/theme":"15.0.0-canary.48d30012d.0","@material/floating-label":"15.0.0-canary.48d30012d.0","@material/feature-targeting":"15.0.0-canary.48d30012d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.48d30012d.0_1678819669475_0.8649213256078494","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/notched-outline","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.419b23cc6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2251a231c9db587ff500edde0fb2393201732bd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.419b23cc6.0.tgz","fileCount":35,"integrity":"sha512-ryxIJTV0p8u3NdWsXF+AoUjE2+AibQwgme+SCVvRcMnMLx1ZpJkKnDoA62Uz4dWXQUB0f5P6mYnn66fdybkv0A==","signatures":[{"sig":"MEUCIFJ2l9HWiVeStJXuHqSL9YAOpq9hXH52jOoO7J5iO+xhAiEA0LrUAw3rzKEoVlMDA/tatOgXTDxP1FL/2AaW5UYGzvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMPpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopIA//c364bAFfURDaT1TBSzoP9Gx9PfrHeQbhx3FNRC0s4peitIb6\r\nR7NWqRYCTomRdtysifk2WgI1UUNqnvbQ6jXouFwhMWXIUx0svVRFTkHjr3br\r\nghQGirtUp6NpfurmL/A51LqkVH6U+9a3638wxUi8gkp8fvCVgjlt1N24b+ct\r\nPcHkPIYyWdYOQ1YWK35q9kVuoY+2+m6UitYxdBB5C7C8KdWQDir3NjWuAVoA\r\ngBwRVp6Qub/YCohUddyTCoMF/flII4M8Pxq6IcZAGhd3jMBV0ezeX23JpK9/\r\nbBEwL1Kk3GuMqW4604u7i4qDbPoA7tihw71KhmIa0LNEE7uvEQlPr/63SHgV\r\nbV8yWX9b9uQWQH7oLB7ZjMnVf1+5wpQkY2pK7kt8DQwc/wD7EbR5Ql/ny2hQ\r\n8VykO4ZUFM45CL053L+tUpEOfcYz7lNppEEtsxQxhwct9Y3K0foinUhQBgI4\r\nvX6Tp1lyIGsZRqpdJiiWgITrb2+4a45uf3sEiW58FTVUIacuzthVbH0Qm6Br\r\nROuuVIaNWrm2+QGiovPwAVZVQJz5LlVWHLJBxZ6nGRVlj3zcMVnVVSWTZTWa\r\njAxR3ea5/YDigWBiFk70ET6YMsRpvy0mc4JGJGboy2TI9Uur1SgpAFsiHVk0\r\nJJnm+ldFanF2PpTVzGWdLh+5mBpVrzB9gQQ=\r\n=qW1e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3b1188210d22a02ba5ae948779bf92655e47aac3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.419b23cc6.0","@material/base":"15.0.0-canary.419b23cc6.0","@material/shape":"15.0.0-canary.419b23cc6.0","@material/theme":"15.0.0-canary.419b23cc6.0","@material/floating-label":"15.0.0-canary.419b23cc6.0","@material/feature-targeting":"15.0.0-canary.419b23cc6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.419b23cc6.0_1678820329234_0.034176043589887684","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/notched-outline","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.bf86521f4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35979b6ed0736ae2077c81be4be57e0e1f68d09b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.bf86521f4.0.tgz","fileCount":35,"integrity":"sha512-CkkK7Cu9wanwbLw9yorIIJSKDOrcqRW3ntzg6FFu1hcsndWYRp8p86SaFNXaxwW9EIN8YseoyTSQO2jezPO4lw==","signatures":[{"sig":"MEQCICVtNRGO7M0XKXzr0IYrXaqtaxyPgH5R0E+I7DVpr49KAiAzUa8l/CIjD/0rRvmcVciFICbPwZwcCVwSRaaDe/zsVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP+YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQpQ/9HHs9W36Gl2BL88jcRSmdLWfdwA6bKzmX+qPI5LOM+rx56SW8\r\n2Pg2eTRMJO+2k/d87UlzRP/uWXpd6eb2sHLhK7QfNzaCNYFgvrgbufApj/NI\r\nW0D/0UwC1SMt+TO2sYbYI6evElyhuX1OZpROUFyKhX1YSBSSKvEfR7pj08f9\r\nDa258rCSQUmeJ3pNeA0AV11niotor8UnT+2DAAgVwAadJxuqAdAz3DGHwPec\r\nsdefMRsEtqBpxOIycdKOqIUkkVeM9praJoC3dtbuMqunyZYZHbfXjwCGH4EH\r\nrZiRj6RO1gG2b9QrQXl3jQ2pCFw6XfXt3LQlvMsRkHYw7bY06U/aT8qumlyf\r\nKEduvCsAWpxDAsdhbgENvNNosLLXfaR4QGiCHMgQ+t22aZdRDvlvIXNEx6aJ\r\nPa/9m+baVdfrghWZkz9VMyzwB64iT0op7A+FQphR9+C+2b+Gqrt5mkvcwgVH\r\nJeqo5Itx9/JQahbkj+KDEFQHX4aLz0cYjIhwUZYsDJpnTparzgMh5XUuinAh\r\n98IjO07zKyYLj32s/jurhfZUBL1LvjQsvIs50FcdSgo25qzSuH1u7qDH0Rbq\r\nTfTo7LAzFJfCTq0rfbRiWpHyxxJ1QG9yoGCIcfbtv9QbvZRGYPiSNiLnzOc8\r\nJ+erblxCg6Txe1/mQjeyseLQy/zXsiJYUAk=\r\n=SbJo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8f5c1bf1449cde9c918f51bd033762d247655b49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bf86521f4.0","@material/base":"15.0.0-canary.bf86521f4.0","@material/shape":"15.0.0-canary.bf86521f4.0","@material/theme":"15.0.0-canary.bf86521f4.0","@material/floating-label":"15.0.0-canary.bf86521f4.0","@material/feature-targeting":"15.0.0-canary.bf86521f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.bf86521f4.0_1678835608777_0.741280604468441","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/notched-outline","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.11f3d280e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d23129a1097839419f320fa52427ba301a6460bd","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.11f3d280e.0.tgz","fileCount":35,"integrity":"sha512-prDVs6WlKw1mHws9RQKvCnvaEEg3GES7lYKOaIbw5mBCFSM9mB4RfkqfI86/Ccxy8Yi5fC0gT/gSFnZy3U4pLw==","signatures":[{"sig":"MEQCIGF+t39mK7E/LtdMl20DDWce4kb1RFMrOgzpxvdwbhTcAiAjb7IqeDR5walGKVd9DfwAcmJr4zVDYYU+/DPrlpDchw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ0nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGjg/5AS9TtDfpt02uK7LChXryXSWmYpLFrECLc4o4NRKXF0rc/fv1\r\nbNpyFvoBuKwiprThxWj78x1RxjffE3KsFuEDZ2WqhheAeyRtwhg1g/dF5gqV\r\nYB+731zs3AmhKRqERfA8TYdz5OoPlXfJqiyRu2sXdwJG8OVE06yCkQyB/Kwj\r\n8V6s9SG2O2OSWuFY754zP9n3XqO2WXHuULTYaT9Pi9ufbZvezEKhKrEToMju\r\neen+cUQjc0sNUJqCOXELeV6ShfsDi5QGOtiILnWKqAEijvKgEkWGbHxNHrVD\r\nXW9wHeSEdpnGLJNsJPWB8MKM13+PCQYYOTVT/LgdZ5Ry0QvpdvDbq5edsvgq\r\n3qAKpylU2mcT85yT4XF9R8PC+iB29Rp4oKkXy6vP/HdsOh9AB83hKqXPrtSx\r\n3hieXdyU2O/Pax879JUIw+pEt14AIVeCnXg0re+Vp3TrKL9fBriiZX3pIUhM\r\nLcWkRhT797uQqgSwdt32AVIMc7ZZEWKsPgK68u8uVfq7Gj4VM5i4Ut372G5n\r\nRFiFF7GoX74hboynEGbMc9ISSXcQD0o7Jy1TUwM2Zr+hDaSJcepyas7rMZva\r\n6j+pl7IHVf2lj78JjFzD4lXaoZVClqXRvgC2VXhNqlvWZYANG5T8x6rGiktr\r\nOPBRuWmh8IWe3ZkXy8IyOsXactSz/HcGqj0=\r\n=ouZZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8e5a0971e8b535be016fdfe963b22dbcf1353e53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.11f3d280e.0","@material/base":"15.0.0-canary.11f3d280e.0","@material/shape":"15.0.0-canary.11f3d280e.0","@material/theme":"15.0.0-canary.11f3d280e.0","@material/floating-label":"15.0.0-canary.11f3d280e.0","@material/feature-targeting":"15.0.0-canary.11f3d280e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.11f3d280e.0_1678839078771_0.4885203110357712","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b281a409a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b6c0ad52a0ffb414b110a0d062e6825ff13a03f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b281a409a.0.tgz","fileCount":35,"integrity":"sha512-Joi6td20p1viqN2akcJKiwdrh2gpR9oZqZJZnw9CoyT3EkTBNdMpa1ysvQzDnmH6x/qd9RAwyyy4S2gAXQ2vqw==","signatures":[{"sig":"MEUCIQCTq51K0evjxvNpNORdn05ngry80wFcGV3i4U6MkjWBYwIgY0cbO0YWvliB/Psan8FrQGaYtikHIbMnHeyhQbWZSQo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdAJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWPQ//aiAfklvNPPLKs1Cuxh3cAHDC6SH5MfYZtl19Ajlj2yTWvruh\r\ntZGR7evqMbJH3YgyTwW5Dt6ueNeuGeefJHUEnhU5mESvqs9uSoFOLTGwzDQ8\r\nUVoQyVgDupIXJpyrHIMkKuNLDm3mTQ+Ze/RAL9DasXshc89O+phSkY3/TYCD\r\n1dXtGgpmnjWq26+OXskc1oe9guyHQ2lkfvvHH4Mvkeu5iuoYyvKjm/xJDJve\r\nh83ltkOgkXOR9rplCXubhSWyjEsEiMcycFFUeb9tZCprtl7a2a2RkJ3UJ98N\r\n5/IznSd0AK047hT6RTZHDsxLrFRKdJUwxgLhQxy8Y3M2u0MuH4fR7a845Ool\r\nwAz6yY2INHiH4l2g0r3kFmMGTZ5BeXLp9IKAbpTikWAejldO7R591OSBlKfW\r\nFQWDS7K+RQnJ2e+3cIQKh45LxmgAJjUBAqRtWi9W8WDVv+OJ5Bcco0Cv8gSq\r\nZ/qCGWnY0TZZEy6DXfO+i3BlNEgL2Mpz+I1Y1ZYaoHQQdjS4SG6vgJDWAc+g\r\nXf7KaepE10pEWjlRnh4cVjeVy9xkzUt6xdxKWJYzu0uof6RkyO9odmSG82Q1\r\nmkgxd/5kjzQes9CDOnzkZpTE56/E6rlGf71rj13SdXTB9rgyIYJh7X+SFSfz\r\nl4LBLvEWBo8YgYMQO7BolyHOMwU5pUbhsRU=\r\n=bZzu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b924c47aadd36bf60d7c29e466ab3899ae4085d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b281a409a.0","@material/base":"15.0.0-canary.b281a409a.0","@material/shape":"15.0.0-canary.b281a409a.0","@material/theme":"15.0.0-canary.b281a409a.0","@material/floating-label":"15.0.0-canary.b281a409a.0","@material/feature-targeting":"15.0.0-canary.b281a409a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b281a409a.0_1679413257114_0.16593095512853862","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/notched-outline","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.39e473690.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9fcdfa4ac98535eb7696ae3e069554103d9aa63","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.39e473690.0.tgz","fileCount":35,"integrity":"sha512-cCNROjZM2uLTfIk4y07Zj2DbydKK3DbJ+EWnHD6Icz10a/mJcwrQ5H+RBY5qS1J6UZ0Ga+ZYx7XpzyDe0PbLfA==","signatures":[{"sig":"MEYCIQCGaexOT1AGxJbcp5zkURqxJRz/HvJio8jVY2xzsh0vggIhAPFmqey+RyRolR3cQ7PkMepOHFi+1T575LX47bJPD85C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe6bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHhxAAnYG5mjqHN2mFvsoHbrd5omYBdE+nowU9IJYuIxK4OO4PD15z\r\n0LI5ENsQziA2z4Heh8DRfTEltDxzVLVqSs92CldH1Emw9j00IBrVNWtcrfpt\r\nokThTUHRqRDWY/muioUMLwm9/necIGy2d/ffQWWGN3eaxX2qsFzxZd6iNslR\r\nkmkQEx+JYfwyK1v0xGJKZ1Xlhu0zndJ3IhJG86HcxmW+czsXMrQbkoQQR4zC\r\nGoGXekUnm0HCQelUEy98GCb9qEeSxlCVtjHVNC0jJTdfOUgMAxN21z7pE9Co\r\njm6UM19fP5uAKkHC037JOb2MJRD/RTa4d0tgu+6ZmWGwup19JCOuKEMxEDS9\r\nkJKBR0DQApA+53NEW27ZF/7i1nJcyYxUQyLrU3poMFBEdh4SDA6PNXkJWDf1\r\nZA2r1iNi/yrDpxog/uTDl0oR8v/PfL2F/9n7qL8fjeFGnCcTkGImK0IuGGjs\r\n1F8auSwxtaYvN5Cgp9R42vqBB+urTvM982oLqcKFwArVZgZUX/+ICPeKPTNw\r\nXoQewwv5omYytq0ZpbUWI+/sgoiGeMV+kIKPfSIzOvx/u7X6qVE/iU9kYsDm\r\nZc6D4JbNnsPPpOYg74AKSTsy8tgELosEm920nCBvJuPGbF2g8N/1IMtcAFk7\r\nZAF8c4DhNfql8zh/HHD+nEhfyLN0Eq8T6ws=\r\n=V0Gy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"2d372eedef7c583c60aff8d4cd51f8de971cb93d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.39e473690.0","@material/base":"15.0.0-canary.39e473690.0","@material/shape":"15.0.0-canary.39e473690.0","@material/theme":"15.0.0-canary.39e473690.0","@material/floating-label":"15.0.0-canary.39e473690.0","@material/feature-targeting":"15.0.0-canary.39e473690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.39e473690.0_1679421082984_0.2745538484691601","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/notched-outline","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.cedffb44c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f46388a5faf8fec2802f224ed5542440522cf414","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.cedffb44c.0.tgz","fileCount":35,"integrity":"sha512-rkCiSV5LOM4Ob+Mp+CJs6ph+ND3D5Mc1qTXVQ4VTeork52Pnx17w0DBE8zpA9W6JXd4nAqDGGmDQULuiRHs/vw==","signatures":[{"sig":"MEUCIA9s+AQrDWjKqrgsd/f2qBy0ct/OAYMHfBADQ9L0Tb9wAiEAxb2OMYtiZTKbOc/qIf9BY8aiThvhWhiMnLC7pQfH3aQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfA9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFMg//ZyF4AhUFqtYcDUculVyzV8gBbod7cfuCUpyrhqlr1f9QPFRW\r\nFbbzCjgDJhgPldSkF+cL/JQR857HaWsgndM2BcVh3ETsSByJzVMmhkL2OLxR\r\n8HcyY+/a7ubNLn3e+/yGfEW94jGlW2Nhns5Xa2/dVAO+ketIw6ryUq1FnokA\r\nnmYj4S0V6tS+xfW4jmkpLfrP5sOVHoZiNffTDnMJQqkJpc0pK0Ugcn++ZgD1\r\n9e5RcLj8KZ3yYc7sE2taxMelKHur29sfgF4mI01IuJaoY8IMoL51S+Ro69/1\r\nOs26NPlzj8eI5dTRMtFr1FdsdSjX4YMd+MBsBj6eN+1y5+hj/MF+kvtwoluk\r\n4JQgpYCsWpJXtwpj3K2mg9YGptxc3ISEYoaGT/JqqsuDd9imRzl2sCK7Rv9t\r\nGFT0AwXdnACpgxFoPrXX3CiZUermuUBXXvgtROQV/Qs566vuskPZRdIh1G/e\r\ncEIIdVsAhsz/XQFtWs1glZvpa9Cq2W6YseDzJnmtErUzZ+059jraQfjhlX9p\r\nye4gf8PDh+TQ/gPML1HBWyDyCIlGzTiHfCBMm0EXOCmqjkBC5d6dGqMLC1i3\r\nps3S3ksp+8cVM5DSKftS4+a2YrjslNSpzSezuvJU0TJZKt0s/uEghjoHrPUY\r\n9EmDCmGC9CaRxZcTjVvZpgU9VazEg1ilISA=\r\n=0hsX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"37783644942291b0c5d41f7499a79b5f61bfcbfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cedffb44c.0","@material/base":"15.0.0-canary.cedffb44c.0","@material/shape":"15.0.0-canary.cedffb44c.0","@material/theme":"15.0.0-canary.cedffb44c.0","@material/floating-label":"15.0.0-canary.cedffb44c.0","@material/feature-targeting":"15.0.0-canary.cedffb44c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.cedffb44c.0_1679421501520_0.7171034481990961","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/notched-outline","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.36a4cba99.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7d7f12c6f4177e128eb328509374689648fd10d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.36a4cba99.0.tgz","fileCount":35,"integrity":"sha512-PN2YQdAfaKMXeDc7yRbxIkZi7yObAn0VLe1i3gk4TvC7sSafphAHiPQtrn0Phr1NZ7IazYtOlqm4OmSvHAsz8Q==","signatures":[{"sig":"MEYCIQDvBPmaQjPqn+IM5zk02I/xThZypOAWjKTFHz5GAc3eIgIhAIXmP8yTQPXUpSok7lCMgl8JnnKvHTYCeWCXqY8wUO++","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyjQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0iw//UAlX1NYswre1/J5gzP15pvV2g817lNoW4mZ8SWWd053MGVws\r\nqSiI0nRGqaODrtENTUlfZakXh0YINt/p5gDiXq0wt/dZMFDuzMNDcVUVNw09\r\nI4p4U7zfdpDkWNl6bFP7boA6ebsIg/7xA/gVPlGAzTOkH2vyTenku+4+vCRd\r\nVIlSakCmgpWlVakwAKAZfgDVbJKaszGCHOHMj+vRTJBy9rrr6kb2yf4rmKNI\r\nN/PfjgmrdylOC6ZqnmN6M39mkDNbPaUkPUf+WhnphefmBq00DNT3qnja3X3Z\r\nspv4khBB++Amv8MtgyGbGiULVzjVBVkGqM4LCfz8TGS4f/Kz5szWPhhV3DIK\r\nFQ7W/id1kMNNLxVR2iSYAi/UTpIV152wQMq8GGToHX/FRELG4Q0NuilRW1Cg\r\nDMhUSN4KEpsxZHJUvSKVri6uWmGE3bzr3tqxHC8HnqNW7j7aVfh1NRTJIQfO\r\nVWUwX9VNVExDt4/rPiFSbLK5bftlAnBvzqX5l7/stKoEfOu1DlwRAGLkS8ua\r\nM4Jhxov09qnIU7xO/siitQy08ryTPBqwAPW3xn5GgHP5+3vAnJclWNUnAoHW\r\nVnm7sdGsJGgtImnxBfLfj7FW1UEjQ44t4wwm39yLlQs8PjJybH8lMwpTKteK\r\n6MCjj1C/zDesnu1OOmvoU0fg3SE3ucpg+i0=\r\n=sgjm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9895102e50a9e7eda73e0b0039246bc56c79a7bf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.36a4cba99.0","@material/base":"15.0.0-canary.36a4cba99.0","@material/shape":"15.0.0-canary.36a4cba99.0","@material/theme":"15.0.0-canary.36a4cba99.0","@material/floating-label":"15.0.0-canary.36a4cba99.0","@material/feature-targeting":"15.0.0-canary.36a4cba99.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.36a4cba99.0_1680025808046_0.9870452079810204","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/notched-outline","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.ed7e82ded.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"192ec08480456fdb2fc0316419ab7de95467509b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.ed7e82ded.0.tgz","fileCount":35,"integrity":"sha512-HmUxOEwwjmdna6eKAQMYIrpudtbs3jH0GvJVopvUynTIajEwh04Kmj5xTbB0pa9GjYtd3YE7K5AhV5FaYTtYVA==","signatures":[{"sig":"MEQCIE9vnTmx3i6ZWTEFHeu7DLhbBkSOPFsuX42asO7ejoZzAiAGeyJVp0GCa/p5pJahM6DwJC0sd5Ne8VzcB30OdtuO8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI09eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolwxAAhwNwX1CV5xIsldhjIckzQ2yKlUOVdz839uiLPNMCvLb1adei\r\nQFrUtybv20X9ViywCN8PWmw4yx4Vsns1ze5yO47/4QEz+7NbyluhM9J76q7P\r\n8V56L/z/C/Tdf00nQSMIQCNOs3EGDMRnBawYMI2mvKuvQjB1De1VcOj9UeMX\r\nbhddh1WmPSWSo1Jmkln6yWStveL4SA59AKifaJ4SrJG4sBJvgtgMMLPKM0a3\r\nthzdDfdDQRbZEOkhLMzn6WVyuSfXltwUyvc+DGDJ+pHpGnanbyXfQPc3LRuf\r\nyb/gszF6vjbmH+t5i2X6gJHCbJqAmHA2g3A0spSbHQ7OPDoptdoA7LZEkLzS\r\nr6MFAJBBtXsvjd6ryZ4HtdUXUl4WfBf0kN62gdINn19vxfvucGSbPyREzSep\r\nu4yxfvxdzQbxx+AkO2TgA9h8aa8r9a1ordnlTtC89E9uZF+7u8/5OtHwdpoE\r\nXEUUbSwG4ANtie9PnvJ1mirBREOmAqigqd9vgROzTg9yTFJy3Qk94XRO/VJU\r\nF6A1D9SjNBGCN70ZCq8l6I2S9zMMkYPI1MnPNZaKs7dEeZ4MzWbexG/KGZL2\r\nwpf+NyYRlb+U7hXH/LNcufGB80hV+KEGfnC2S5/sGL29gIcIenmSER0xyfGD\r\ng6JAAsfWl4a+eU/NqztQLbQyM1WvNFuYE0k=\r\n=gje6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"037c17ed14cf732acefb4bf7cb0a6c61f643b991","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ed7e82ded.0","@material/base":"15.0.0-canary.ed7e82ded.0","@material/shape":"15.0.0-canary.ed7e82ded.0","@material/theme":"15.0.0-canary.ed7e82ded.0","@material/floating-label":"15.0.0-canary.ed7e82ded.0","@material/feature-targeting":"15.0.0-canary.ed7e82ded.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.ed7e82ded.0_1680035678292_0.13763750396864438","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/notched-outline","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.55093ee1e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d78ba80161596f9a6753168be28741fabc5effcc","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.55093ee1e.0.tgz","fileCount":35,"integrity":"sha512-XsSfCgltttxfkwx+DYWLSKpURSwYHEDtiODLOyGUvimENtglVTVdkr0patafV6yTZvF2hLGJTm4wDEFrHsVDHA==","signatures":[{"sig":"MEYCIQC8abrk074k5qX8ajSrWnOPr5vktKzTIHX0XchxTbbgXwIhAOCV5PDGxCO8lyIWROFqjeoDOB6lguG5xbpfl+o/REBN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIgLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0mQ/+LCkrjFJ7rSNdPj9pm0hWrqsxMApnTKR0QXts9P+AZL3gnG33\r\nK4eXv+f6s/0GceTPuavALKdRkKIAZ36iea26siAKX+9gdd6efR4gTruyb4FM\r\n38B+XmEpbpNndujLVVqna5w6Bwx1E0pzqXMMuk5qeeNiyRhjapnEKyStpVgE\r\ny950tjgHmLXv4K9G3I7zqoKvtoDk0T3OxhhfC61Vvpcz+egQ+8smAoOPxjxr\r\nVYveQXM9oOWVSOFNXgzbbcisrly8uO1x8W6YW9bUf4jeZl4+E3G2WkQI11/3\r\ndO4/9G5djQPusC3Q5uGzO1nIkjc5BHQVXZurDWBBzjhzx7JiM6PKthIWkc76\r\nkfFVcdOaQa+g+E9w/zK2rRK7EYL4GvXHGGdhR4xXk7J+JNPJwd5x/KdBuxHu\r\n+81osftBUrBcjtprztbXB7B//yK5hnsi7mfqWGk/66/gZ7x6JtOtBJNzxElY\r\n/25IiB6CiMq6ScpDuvriXrSmFP/SJTUSr+0xwhoU9P1CAHG6A7ejm5j08x+5\r\nL7NaVpf0JfnIWAzGUzCYakERYrWfnxvvxCATZMAtPWOdCicVB3hX+3Wd0YGP\r\n8TUvIzFjykoQJH2mN3J/Cgo4+oxahx/WYS88jk2W8W6+7aqQ6bdkswh8b7gx\r\n7E5rQUmfejq2Vi0MGNz61v7T+SGOt6dctmM=\r\n=0fV6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"98de61151738b5091fc2b0e261c18efce05e87b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.55093ee1e.0","@material/base":"15.0.0-canary.55093ee1e.0","@material/shape":"15.0.0-canary.55093ee1e.0","@material/theme":"15.0.0-canary.55093ee1e.0","@material/floating-label":"15.0.0-canary.55093ee1e.0","@material/feature-targeting":"15.0.0-canary.55093ee1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.55093ee1e.0_1680115722921_0.4421033333779907","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/notched-outline","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.0c53abc81.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e89fb17e017d154e8072c343121297d15e0b30d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.0c53abc81.0.tgz","fileCount":35,"integrity":"sha512-Xm7KRP0snqpMpY4I0Mz5ng1vNBtOPNE9RC9TjVackPoX0ucjAafT8v9QwcQpyYqpo/5xWwRbqZljaey3MDwG/A==","signatures":[{"sig":"MEUCIGkaD93h0PwdeNhZiasc0He8T/wl3YauPP+APL5NQv8QAiEAsd/+4yA3nkC4umMWh7n4N8gas7zMSL61H7UkZRgjo0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3S3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmdhAAj3NWKU3zPFSPZGsSHAqCXxRscdzLW/w8amElXiaOaubr2lXP\r\n37fm4ON8Pb2BXNMDI70djaddeTi607PHmFpmvCRFEcegf3ZA6DQNJ7WuiXZO\r\nggefn8ByNfNDvJ0v+i9Rerk60oTBjcAk7xSPZQChjm+u+jQv9PLmXX/0SOOr\r\nDGnJEWP8x11bPPSrWpVx3r1zlhgl5VF+FEJA1rUcQoHj6fhxcH0MElRM/AS4\r\nB8dvmkMcy7VW/wbk7I3tgJ2wlqBfFLhVannj5mx9oPVzxg668qHaT+u5Sb4J\r\nA0u5yOnN1ExoHJLVkK1GN4YSnnkkFAydOhgDL+3UCpa/+FYbhyXsQg1J1gnn\r\nGzaXJl77Sw5uDfKj/ABiyMpBwgjpzhOqRaLsncKaR4fZierZXWusn6VfzFZX\r\nWevem+79K+ifM8bYclERvnX//6kuyWPOKPbMZHE+Wpbmi7TfF9LHZGfhUeL5\r\nAem28dH/0gq/JMWxLiGGaaviuN1epUYaDBuexKkXu3H79Q8gTbkvK0uhBz8m\r\noeTknfG5di3x8Zr/+EwEd/y9WwfKHsRv3c0Dth+FKm5oqa0tAM0vEXnrDuYq\r\nYiZ5D67P0KXGqq34ZNDKvq3/Mc4uH4H/cXMFuHEAfw3RKosvAaH7xnWzETej\r\nWz/8fOxtMdFKSsKURIoqQKI846jm1qnlIco=\r\n=3LrT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6f7be5b2317c28dc06c5b0bf4a8cd44df591750d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0c53abc81.0","@material/base":"15.0.0-canary.0c53abc81.0","@material/shape":"15.0.0-canary.0c53abc81.0","@material/theme":"15.0.0-canary.0c53abc81.0","@material/floating-label":"15.0.0-canary.0c53abc81.0","@material/feature-targeting":"15.0.0-canary.0c53abc81.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.0c53abc81.0_1680831671752_0.6299380029491506","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/notched-outline","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.51311e69e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"733ebbd06f54b768f9e444670d55824bc294192d","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.51311e69e.0.tgz","fileCount":35,"integrity":"sha512-nEUBEfcFL2Ym3pudqC/oRNVjMVpfH1eDei8PT12n38v3GKTf//MYcHigxISX9dv1jpHD9tnFlrAm2sLkpoZFyw==","signatures":[{"sig":"MEYCIQD7fl2w/sqJplzn6FiJhZCMgzN4OLVX/aIleMzCZUsmuQIhAPA0+I/shIzgWm5LMOKVSTLW+FQMe4b9oKWeKEWJZ6Uu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFv7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpszw//UGyAyqzHBEsth++/J8DicA4SiicfpkdlPOhnYJiDWBGP0DgU\r\nbaQiQJpkcQsuOlA/kn0qOIECp9b93Whown3F5fOPs5WmvtlfJri5bPzAgWgL\r\nl5srtys9sNjhaZHAl6vIkCDQ4I6tXIlR3L+WdEygdVNVOhAuxdZrDXXap5Ji\r\nXMbZFqadXiPjSdTsp4Jor3qDXp0G20YnOsBqWf+IJ6xps1PSerahnJq5qEOZ\r\nsxUcnI7AvRtbuxhq2ZNrr484rOM1jcxTwi8vgfLY8OpWXyVyuJOfcXkyrdh1\r\naRZnwP3yNjB78+XrpzuoaADu6MTdpjSk/O/0O4X8s0sEQn+zHlI7KV6CiYyN\r\nFjkvj4P46gYiMxU/jttiw++0GuH6C+3gXLwsB0kQQibzLl/Tdua/wM8ubcjT\r\nmu2BiUgquxoPSjLS5xmbZP/ApByDYD8ezPEQoMiEjHoX+I2Fd3XMlKsugAUZ\r\nhWzyzEAxrNugz8UBLNANjjpdl2k2P+5pHqrB63WU2V85mLCPapU+IE3s9oua\r\n9vhRnkNmZiYnSZJUMhb1xlJd8u1pJxYoaurJEJ1qI+FULN5IL8hsa6LxBbkN\r\nMbgZst+zfvmH6YPQcsxy/8vzS3VWK001pttNs1PnKNMsJ61AZ8A/qiSnbIb4\r\n88sFiOUj6XDozlxRBIbUjNFK4qJd7uO+vcQ=\r\n=U6dl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"20cdc4f9c3bc9046fb111c8b65ba3e9609585dce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.51311e69e.0","@material/base":"15.0.0-canary.51311e69e.0","@material/shape":"15.0.0-canary.51311e69e.0","@material/theme":"15.0.0-canary.51311e69e.0","@material/floating-label":"15.0.0-canary.51311e69e.0","@material/feature-targeting":"15.0.0-canary.51311e69e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.51311e69e.0_1680890875402_0.9046503344085455","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/notched-outline","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.113b1a38e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5c3361ea25106a250397c61ffa828f805633030","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.113b1a38e.0.tgz","fileCount":35,"integrity":"sha512-Hk/tsAu7XQKJTL42NyPjlGPsxyws0//ynfVNn5QohfJ1bkT/T7/FiIC7Wbr88ikwANMvCS5mX03o5oPmqbns8A==","signatures":[{"sig":"MEYCIQC1A5Ot5I/vrc2xlkpJRDriOaogM0v6iRg29RQ2kfBJUgIhAN1tR9y8uFWKIchshuMZR5+jQl38qNMt7Ap3EuZpldfJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIVtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4xBAAo5BCwhPm2QkQA5/LQrnUql16IHteCQMZjjkwtSu0rptChtJd\r\npalmIdXU+GaW0LMBsDTyRHA7hsNCgXiMWO7fKkJa4SwP/nYvL/XeIjMMJGNv\r\ns+JimmGOrxIWWnQZRaliUc7oz7KHIjbZtUCakmiOOsHN5DCZsh3PsLu9qW7L\r\nBQezSyQhAxUIOvs9rvpPjOvAnZw8rWjOQ5eFms5wTfKOBbpO9iJhI72TfJQ+\r\nvzWbRCeLq/Lg7yNc7BglaJHCAYhUNt3ZwteXW9mZbEokZfkTKjcR9JxHOhu9\r\nDsjoa+cclv01+6CVf/in989teiJclTRp/CZH0bb1hAQWUKd/SdZQTWeudtau\r\nJd1h3MeM1PUvE4OFHqWjG7IJtVa80gQ7xb+oWeaTBMjuanrgAVTPjRszEnjL\r\nnOGABMiewdH3iqh/aArAjknffdLSq+DKArkFAld+sPJtSvYOJaKHwnkYDNvZ\r\n2pHS6whGABclShKbeNHiIPFpaqDBMvp+ePzw8DrLgF8uW7fkFYRb7kjofUVD\r\nYUN5c8hieToDpc8Y2tLyQcEvImgNrXVKYcGESb7eZPy0Iwpe1evIA6K15c8B\r\nSJ5XcXJ2L/lXa0w/SMERJJ2L4pFHlN8MxVfgbiM9cIvYZWPLpskTOre/9oGv\r\nUKG+KkCii1UKZDcgnlt9bm52H8S6vV3TStw=\r\n=3UYu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3613349b6481f716239e1a73c710c0d5fe44df72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.113b1a38e.0","@material/base":"15.0.0-canary.113b1a38e.0","@material/shape":"15.0.0-canary.113b1a38e.0","@material/theme":"15.0.0-canary.113b1a38e.0","@material/floating-label":"15.0.0-canary.113b1a38e.0","@material/feature-targeting":"15.0.0-canary.113b1a38e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.113b1a38e.0_1681163629391_0.16017063848410862","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/notched-outline","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.ea2191426.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a05e7c3bfa29d8050ff9307c6119ac647acf212a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.ea2191426.0.tgz","fileCount":35,"integrity":"sha512-qFtml0eBwlTIjTzF7q9u3mjZ+iogoycXvCasRcGSKuNEvlPK8tCsFYgwJiVO0M9A4QzC2SWfgrdhvan78LqRxQ==","signatures":[{"sig":"MEUCIBsDMgrU/1z7WcI3g5YrK73qEO+at51M0X58sT9h5cA4AiEA33zmHeQb6mFOXpC89hRXbiOKsBlDy2I/yc2mZndya8E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNddgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCgw//dqyKQObdIvHlOaYFVbcbS/xj9dRNKyxDgI3JEPVQ9RkgmMVf\r\n0Eu31EA4Y5/aEPoaqHUfmOCKDpxTq5pGg+8DUJTvcGcqUIOGv5B/OtJTygGU\r\nOt6aiVtbK3WYSwpI0QH1Xgqa5QrdmUB/GS79ZQS9jNhl73dKWrJtlFRXGbJU\r\nA8N7mbDVAcK9iuEnXb/8N3joEjBAvMfVQKeljLOGIewif7zVMNhh6zpZNdbG\r\n/TLoXs45WAOyoyJECfCxQTFdvcvYWf37AOvbg2O+8p8LYKZgDh/RvBsriKa4\r\nQqwmviDqrU+rbw0/OCqM8L8CvPLsau1RSTcphBBaaI2sPlGNVksCKnQqHPuu\r\nT6GeGinJhJZ/4GSoQKYZZNeRKOtGCO2/1POXAKAgji8blFuQVSzr0eaWx7qW\r\n/4lEgb6UO9BTVc3X/r9pyK/oHF8MMIYsPk7cTYSNENH3uSSMTTKY/gfrR8UW\r\nt6W3uT6TNOEZ7trp81RDHGGFSefrraF6zBZvLlyfAle0ZkWI8PAOJopZ6ai/\r\n4hMGDli63fGKaLRU3u1NdxJ8D5urN3I6q9A2XHHrSBQvjo4IMj3KKlbSBhLY\r\n613yOUwlt6iYHKEDqnCfDcOEFkKj4d9VF/vDeoTEuj4mdNYwM5BYUxXds5dP\r\ngdC3za0lYGJR2qIA2Ac2XpUW6UMerzVr5Zc=\r\n=q88Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8723a8c5fa13530d57b1651464ec28e9ed1d4bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ea2191426.0","@material/base":"15.0.0-canary.ea2191426.0","@material/shape":"15.0.0-canary.ea2191426.0","@material/theme":"15.0.0-canary.ea2191426.0","@material/floating-label":"15.0.0-canary.ea2191426.0","@material/feature-targeting":"15.0.0-canary.ea2191426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.ea2191426.0_1681250143884_0.7430480628590173","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/notched-outline","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.5a5c38538.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a24297ab79ad4db749d287cbb227657a99c2c164","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.5a5c38538.0.tgz","fileCount":35,"integrity":"sha512-aTPutVNouK98sYjG16NOrZIKRMgrOUWWmYS2vKQgYaK4V290uahXjbqPk+i2vTGqGgSnicpdbQjPYjQFjzrXeQ==","signatures":[{"sig":"MEQCIAvfBl69xNuPlvESMAmsGLugDPu3OwoNd7/FtVQwzUf0AiBekhcnDnxvNL3nKbhIIzqzpLw+BFHZZkzGGVa0UWu89g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd9+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXARAAh8TWDJzuVvSaDtl4M+thSxyqABp78NzNcn4ISVfc3jWzjiby\r\nnNM5/4E2Sv9l4wo5uKUWHmGbs/7KqYtH+T73i/MgVjWXxD6Egx/wmbRrxieg\r\nsZAnAahV6tTjTL9cQ/CcqB4jf5w9TYtqxe84O9cvbzPXR/resxEQ7lrXaZzr\r\n0Irjs+gnQWsGBYVJ6dnOM8bAVIZVdTUhuHKK4mBAeIMjcfqFOV9jX99nd5SM\r\nhSDXfNVE9DIcnDWdqTMpdhfXLLFPY04H5eitRXk8bZs64x4YT2UlD/bCPjzj\r\n7mcJmnXMQUifC9JJfoUt/Ko/5dFRLey6szOAEyrwDYvjywBHfMPB4dXv44GN\r\nP5f79ya26J4oItjz+n4pU3A2cHAVh+/7ppLvPjqujQMAKjYuKvlzBu/pzUlC\r\nPYg3N7owjCnzlRVVSbHl5xag1iEzwW94ZFmb5FngzWpxpNd02tAosnPr60aL\r\n3VMkcdOQXv+88AzUsMe2RNTpApQDHSfVWSBLpaEDL6cDP/vMNrEDgPrT1Wpv\r\n+mWWJCUX9eF4eeXNC9KGQdDfwGJC33sHQfBYVnuNggo0RDPNHZrlajYBqg9w\r\nUDI9pPpxC/jxUik4DWoVz0oPOXcHqZDJEemS+jv4Ry2ivYkVGzTQstYziNEu\r\nfqaOan6j5U9/rBLnl0bksmwFx66OBzYEPN4=\r\n=QMq2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b05f00c0040fd0d1250297d4fa4236a5b6b00b9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5a5c38538.0","@material/base":"15.0.0-canary.5a5c38538.0","@material/shape":"15.0.0-canary.5a5c38538.0","@material/theme":"15.0.0-canary.5a5c38538.0","@material/floating-label":"15.0.0-canary.5a5c38538.0","@material/feature-targeting":"15.0.0-canary.5a5c38538.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.5a5c38538.0_1681252221803_0.48675309879970796","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/notched-outline","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.e4b5ea7eb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c580a67aa53717fd5227bd6e4aef2ee9312284f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":35,"integrity":"sha512-V/hBwZXyVtP+i/IjPOqa+LXmoo2p/UFX7K8PIAf9qNC4o3A3qV+JbajiWibPO5Yrs00GFTFA4yyiAlEiImNb2A==","signatures":[{"sig":"MEUCIHCLWPe6rjW1u5nqdIsQ9anEiPeFcEhUdJExfvDsLWUfAiEArbXY6jDmrtJzXJrwXdtCJ0593OPSFgkeREj7+fg+Jwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNed0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmon2A/+IRVhCYoy8HA1vXXQ8VprJL44XjatTvE7FRx2MErA1/D1V+Wo\r\nRtlEFm2wQf6ATmhcC7zsuriwSu+6T7AnnuuCKFD8KKIUVekNbphQQZpY5sFP\r\nPBIosANkMZm1jZNRNLLKFove0VtQjab9QqYU81/bul6IfsJFVe6ZedAKjLW0\r\nz3u1MTNWjy2J9KuVIPhbfrCMkpzZRQrR7VFWikgsOmz3nGaBLKotj5traEbh\r\nPghN12sxBOlJ5HRprjrhRC5DFHymhG68EaXFQBd5ehn/EHuVB2AcgE7S1e9J\r\n7T1Th32fJFyxy66HvOCer2SXfl0sOa7yxtzU5rBtrkVUP7TaTYR9py7CMNzj\r\nNpvski6L5hh96a42D/mLRtcJWKOIlWAuoAzvqR8731ZwtUJ2zleVLgHUhpQ4\r\nU9sJxQ86aIqpqOI40Cc7rLMs2cWrfAbekWD8ITYS4auZ3+PZ/DR8YTveLJuP\r\nGN4ConLgt+3FdgGqcRWfwyoUr1w7BQlPJALyerBdGpjbolppUjUkYJYpbmHb\r\n0YBRu29cpupjOziBA2P07Yj7coPa6Pf/PimY/BdWsC4TadgV83UL/Eas3TP/\r\n2o4vYCJQLlI3d6BSGDYzHKsnJ01pUSekdSiuD04//9kTxfvnUUWrIoIY1brk\r\no+3wCdDYn9m90Rhne/g9EHCuyEgGrSZqip0=\r\n=PhMu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cfe1a97277f39a7f96340673857504470245556e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e4b5ea7eb.0","@material/base":"15.0.0-canary.e4b5ea7eb.0","@material/shape":"15.0.0-canary.e4b5ea7eb.0","@material/theme":"15.0.0-canary.e4b5ea7eb.0","@material/floating-label":"15.0.0-canary.e4b5ea7eb.0","@material/feature-targeting":"15.0.0-canary.e4b5ea7eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.e4b5ea7eb.0_1681254259818_0.836394151208365","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a094dd9c1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55b20b85d9e037c33804a777284ccfaff0c59820","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a094dd9c1.0.tgz","fileCount":35,"integrity":"sha512-W2SR4mwl/Rd9E88T3/58AzrYH0o/O4MKADrH00a6nClOIKXeTeCtiMdJRUlVs/xFb2CTvaFucrUIJtQefs8atQ==","signatures":[{"sig":"MEQCIADIH5hL0U4D6W+PXXh5XyuYo8t1E7Rw0zxb2fdJwtpZAiB+qkcdyrQpU1Ju9BcvJoidU+huZkP9D6HmbAeOZF0m3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdbYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKYQ//TCGIAycZbIFz7B9zU775+U4302gtWsxKNb1/jKqPYafhuTIM\r\nbhBA4nlRPQotyQ9LyNFuUQ8Ixa0rxKa42JEQV7KEur8wFFDDdeNOHzB++SQ8\r\n1AklK9XYISS/Pvc+ATf2OToTCe1eLcVHgPy6tDbYoF1Iv2judfqkRz4S21nu\r\n1O5FymS18eIzLIs6xHOYji6brqFDzaMd1+6L3Sg5JZ0kHWtxkh112I8JdPRD\r\n9ZjCy/uuUxiRB9fZVgNl/9ghVbI53dziQHRgpLE+QZUgZfccA3YXsSeUHq8x\r\nxEJ+wAH4VpdSFjWypoHZuBeEhvtXH4MlmXa5Yy/CzlDh9GWEDds2plW3zUwN\r\nzJEZZ+P+AwyFIfXZSRgUIxdFxgaxhF4lkE67bql1/5EGjT2Lq93DPepK+0I1\r\nLH2r9xnn9s9mJQB+L6CHHX27twkrBe/+QxzKvuQNcpYtvmlmvcMCvjGKwpNB\r\nbL9Sszd9NhD1GuAuvv2mRvMPD6vQODG2JUSGWcQjPGL0RUhbuvXBt7bwp6sF\r\nY2LiyW/FBdPOO9k+dWPzEieIDJ8xJyOzJX31SpNYa9qqBfk/l0nEQE6l3RJF\r\nx88slh/vuL0WD3VWlTo90f/3GDD/jMrzt2FfF5eqR/1EGzJ+GF9ArjHt+aKz\r\nhTdf6PAwtGiInWNVxy7DUaxVSi6oC6eR6rE=\r\n=Qfxt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"aa5164e66f4afe6547ceeadc8a793bb4f489ff5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a094dd9c1.0","@material/base":"15.0.0-canary.a094dd9c1.0","@material/shape":"15.0.0-canary.a094dd9c1.0","@material/theme":"15.0.0-canary.a094dd9c1.0","@material/floating-label":"15.0.0-canary.a094dd9c1.0","@material/feature-targeting":"15.0.0-canary.a094dd9c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a094dd9c1.0_1681512151849_0.9977480788394895","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/notched-outline","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.f771b091c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb28c21c23934d4c78f1515a78a4c808574e02b7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.f771b091c.0.tgz","fileCount":35,"integrity":"sha512-sxR6RPX+ebvFOn/GIZs8NmWeIf+2/wQGhwich1Q8Z9q8L3le/L7PsEk3xAuAL5pctzGE6WM3Atjn3SPSpAXmrg==","signatures":[{"sig":"MEQCIBsWNPMlp7eQw9O7d8HH89TWJlczhiVISH9lHO65R22tAiA7PhEYSwC+Ts30CqaDC7Fflp3Uf3K6ERT5ZNT+ep1y7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWfhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJog/+NZM3ftbMiaXpHFVgBCMgD28+IMjZx1nIzSGX8GKYcdT6hCL5\r\n6CSrQkxJe9BVsRs5vz0yAd6hV3cGyvXAHkcKtxKUy6iFGRnV1Sx9sjwHJ0+4\r\nd5uRluoEWvwQejYsaaE+ptL7JDvbnuMjRtvMBGYgoeNWv1k44TLqeI5ixN1E\r\nohlx2eBiQAg3Zjzzpv7UdaHibPrG+6WW5fh6ozzNbGdjdazv67s31NoqPnKZ\r\n0/vfxumdDfG3dl15NPafsYDtUfBW0kYm3eTIFduOk1kl9wDqeAOZIOrFgpk3\r\nxysnBQroEsXKmnctKnUp3R1J13myidixtej9BHBGWYWpuIHc9bOuAj73lAnM\r\n6of7uTu4/rzEK4ALlFZO2+PPt7dtbLmV6OTMCDx0aYlf4vOBFzt3kNlgFk4D\r\nM9NeSZ0B5UVc/aMAlVHlICvTJFTeSHIDTFQDDVbSpbUh6ac1zveND7in6AsR\r\ntbTlSn/0WgnArat4XuJTmspl3kWIQSP2JFQEo5aksHshLu4j+Fd4moONQzXA\r\nhYwk/V18Woj6dgdrbnPL25XxhTJo05YaPic3UjWQ9rok+P2y6q2C94Kwsytg\r\n3AMFvtmbfAUXR+x8IpyioZw34/2rmjX9Bvqk5DmxSC3NHwee5ol+zKOI4QHF\r\nwV9P2k8uUVawxXamSNHfLVo7TFcaT/Hw4gA=\r\n=r5SY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"de0e292c8ebcab887041fc4a59b3c0172f4d4310","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f771b091c.0","@material/base":"15.0.0-canary.f771b091c.0","@material/shape":"15.0.0-canary.f771b091c.0","@material/theme":"15.0.0-canary.f771b091c.0","@material/floating-label":"15.0.0-canary.f771b091c.0","@material/feature-targeting":"15.0.0-canary.f771b091c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.f771b091c.0_1681745889122_0.3809258163265652","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/notched-outline","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.79b1b612b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e1c3e2b50d2140d7ebf976cf0253599330d4455","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.79b1b612b.0.tgz","fileCount":35,"integrity":"sha512-i44dz/BASvXwyQcMWn0Fjt4zWIs7vV5EuYknuT2rOpYUZSD8y0j/4n8DC257Kxf8l4S/r1l5EwtVGGLrs8rUTA==","signatures":[{"sig":"MEQCIHC2NOJVUkg+G/6dEdHOnbrSBe7DH9QtENLQ3LcI3IdkAiBqZPkxwWl8Xg0MuoOJBU31EEZ2GqBhs16ZhVBWoLf5WA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHvfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGhRAAmEkKw53hZtBKSmmDmkbfAi9Tgsu2nAmddJhK9yUcyRdgm5/w\r\nVOtiiC7qElghFBmu9zNdnVBqN0NsRO/rUTHR2bddFFsqMwpjZTzzDdkkLuso\r\nw8bexe2QEoNvrCjg5o4O7htiLkqENB2LsDRn7er86cCVFf412HBczQdUUMez\r\nAUD+bvZ3ckX+wzAK8LEnbp+wGaSOlWWUDMfqc9LAgAFG5kII8zadwZenSb5J\r\nYtEjg3poXQ57oeB6fq1YBOVCij6lobKWzP8HBL3S0lvif/43ahkcCNtfKRg8\r\nqY59Zfa61U6f4Gd+kxDM66sjNR31HCQG6gIjXhxl8GC+T7LqQbHl5vdsMilF\r\n+t8z/aGyRr3/0SKRS7uzGZMDCq63N2vW1lttJTgmSvwq/l8oLcCJeicsxhY/\r\niPISAiu1QevsnVvm78KzB94tp2ccrEj023hJ9ZTmegCE1qXydNrSuZseROyf\r\n277Lbeg9vdCAzqkXLJsmmsuoADo64Y2EGgIbum3r4d6lsMblY626ya1Nv5M+\r\n+HhAkOTD++4dyZRTvuttrKLVHGdxZU8CTObMWfMUqeVdZHbwKQP32yYDinmi\r\ngyTe7NJ57DqUiF+JjGhHJ3XGzZ84+M5DmJ/6QUQz9cb8ZSe+j10jfjY3o+cl\r\n9AGXft6wyI5tpqFYsiaZEpPJ+Ne3YrOdPbM=\r\n=uzur\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c8248a1b49ee37b1782b19aaa49b5626c914916a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.79b1b612b.0","@material/base":"15.0.0-canary.79b1b612b.0","@material/shape":"15.0.0-canary.79b1b612b.0","@material/theme":"15.0.0-canary.79b1b612b.0","@material/floating-label":"15.0.0-canary.79b1b612b.0","@material/feature-targeting":"15.0.0-canary.79b1b612b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.79b1b612b.0_1681947615264_0.10516728075644344","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/notched-outline","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.6f50071e5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"888fa537e8e62050b270ea0bb74da52482065075","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.6f50071e5.0.tgz","fileCount":35,"integrity":"sha512-ZYpU/ahglNhEjveNrJZrN2EJZH9AmMhcS7tq3ekzJCQRT93dobWTKXUE7nSm+1Vecg4PtgimiVN0tLJAiO5ing==","signatures":[{"sig":"MEUCIQD/naaNa0Nr34McmldeeWFtO01n07btOUSDkN3xnf+DjgIgNoIu2xhSs8fqYPC+zl9haSsUM8e69rJhkhjagnxh0kQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX3cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmobgg/+PzTL8c2SwiIDbR+rMynZOJkVdbfsEYIZXNnTLKIDSgGK+Laj\r\nvb+LcDziIdmWm21qgMZT4hthjXCOlC1Z0TO/gfXFIfxAtZuAf051mcRaQ5EZ\r\nLNrnnxacQd2WsZTiYmmyKYAIdEpR8GCYlqdSkuUrWX0LAf/UUI72x8DbI3ai\r\ntI5gsKkEuHpam3aTSKXJ5BeLIWfNnN4GKaYIlv0FOLUBy3bV4hhPTGdqqGQK\r\nnE0ZLvv5IYuBQIFqa4P9eM8umLCsxgniQiorVdc/LmY+4dP8IgCWayTzsK+e\r\nkctxMEQ+z5h0DZifztL60bWJ4lYmL3gU3wEGZLkxIntV7AYncGJocebp8aWO\r\nUxqelwdE7sKj9yaD9gt/1hDwRVRutEDavVJLLkIhklCbuhs2+k3o6NcW7koM\r\nABLbBQGCWauiYSw57cK3odpBvif8bFGOoGvvkk3noKY6lCmDx8lxKGuOqBt9\r\nRTts3vNAqLkS/OgOCepTdHzgZC1rHCuFI8EKZPjA5mpX8iFFJAa0rBY+dx8L\r\n9Pz88n9EhAXWl5+8JkK0rJ1KZO9s+7/beaZaO0uOFCKHuG7InI9VpccPYMBV\r\nzMc1qmRk84iY5MXdCVjPx/PvCg+UhDw8t9fQwMOeFpVW7RdsuwduCZVUlsIy\r\nzEiuEIxp+aX08YQzmCwvPq1NIEqfaE5og9M=\r\n=J44L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0a5eb7e7a96b7f207546983c0f79d6fdf23f5228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6f50071e5.0","@material/base":"15.0.0-canary.6f50071e5.0","@material/shape":"15.0.0-canary.6f50071e5.0","@material/theme":"15.0.0-canary.6f50071e5.0","@material/floating-label":"15.0.0-canary.6f50071e5.0","@material/feature-targeting":"15.0.0-canary.6f50071e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.6f50071e5.0_1682013659950_0.5832466461095183","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/notched-outline","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.ef754381c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68a051e676373ee777aafd56cfc58c5bb3c37ed7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.ef754381c.0.tgz","fileCount":35,"integrity":"sha512-szUGcwTfQOcbUqDeoVy57lOgClqJO/221V5XTdXIiNZbea9CZwIxcGiAxKZbuJE7pHMeOY47ia6xqKl1HqVWyw==","signatures":[{"sig":"MEUCIQDYHOA/rHa6brS4gJcxAhjhOG6TBEcbE2yYSszNMqg6igIgK6ChmeSmhawbOndOWHq9B1O3zvJNkW4askIvkkalYMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuuzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXAg/9FyghkI/yt1gs/c8Ri4Yn6idbvRhkceR2OM48M9xViToVZFqN\r\nx3zttLs69avdGOmytfqE2c/DD4gwSqlUwEzix8cbpE3QQsZkLDaMpXKpLzEb\r\n5zQMaDChElJscfIxdL6sw9d3cqHxV4hz30U0i/zKU79si3++5luw9MHlBxKs\r\nqdiYNlnGDryN6mfVOVKFK0vjfJgcYh4uBe8CrPoWX4EkKY6TuehWcrdTVBIn\r\nMBZOQGTt/7h1Lq59qKdF5prrHLcvpDl6gB2HvSQUIIp/0h7jo5bstm+Z8YsW\r\nxKgXXnWkqaY+3i4ZoceDph3HiYkqe4mu3M1S1U7DoEqAAf8gg00gbjCtfXWZ\r\nTfLNYQ5qg4eBmR+1/HU3UAJJzJBfDoAk0Frr2wVS0dOj0+P5TDOCFKDtSrGm\r\nWPhvCKzx3aHawg2gsjURgrmxGe6Wzs6dPyqo0g5r9L2iekOwENM6BkyliE3C\r\n+Ddu5Nk4uR9dn626p1dp4m/lLB5+mCNRtc0eVoFiPUSfcVGqB3KJT/BhMQvL\r\nlWCUmknHd6F1Al6l77W7FnLn8xLH1+9nG7ya0QjqEub3+cKqkuSNLzvZYLpQ\r\ne7KygWq0Ft2rqu0uvIO1wZJU/x34zH6GeW49eyO+f6YpJl7OTMqDDSGbEAYq\r\nmLB0ck0jz8BS5dVNM60thyEBpmitMFAk6Yo=\r\n=nxf8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"998bb9432e40056ce6ec836100d9a46f72ace249","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ef754381c.0","@material/base":"15.0.0-canary.ef754381c.0","@material/shape":"15.0.0-canary.ef754381c.0","@material/theme":"15.0.0-canary.ef754381c.0","@material/floating-label":"15.0.0-canary.ef754381c.0","@material/feature-targeting":"15.0.0-canary.ef754381c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.ef754381c.0_1682369459015_0.061627145374137715","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/notched-outline","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.69ebf61ea.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c245b43a52ce6e51dc17ac6bc010c1ead7305de3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.69ebf61ea.0.tgz","fileCount":35,"integrity":"sha512-adY06A9S+B/PEi5hDO3UhzA9Ioz5ITqWqxxyAb/YdanfHWbec/7q+0p2ma/jz0Ueoe4lWpNUgDlj3HTsREftwA==","signatures":[{"sig":"MEUCIGtn3E0EBvzYa3GSMuPaxpTnWo98VHqUEGBtCMJ0SBa9AiEAhDNqyWtKMlsmd6RxUUvqSOvdQXnsHEiQiwtOrQZCUps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq8cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6rQ/9GBel/vjBd6w+5l+m9goegVBnb5H5UCYf1qaGrspcq+OGCEyv\r\n9M6oI0bfN0Gy+epi2HdfCMgCvmgLqmsumWBc4K3Oo34PyhjyBQ3YZbW2iIFV\r\nMGoO9m/WuGQ+482+n2l14EK+KoU53UwwESOPrZstH8NNBKEXpl0e020NNms2\r\n09y4FEEE7aAXMw6uXNnmY3klB+sZPil6qn523mjIkZdXvKRNfI7NXt08sc/N\r\ngDfCF1bhPJYqw99Utwrs5Mumc+Li2prwNJdmDa6gc/ZpLlCKBJlhkiOxR3wM\r\n9MZNIraUOqLMbBcy4V9Lft+UsUHyprgpcfPyyiFTpDh3T10WABEujw26IAXe\r\n/D6jK/vTmeo7AOjTkV7OvlErH1ldTGz/DSIC7eAv0mahQ+0+H+A3Ab+rUEOP\r\nuAI6K1e4wdcVo8CGBph9lyZPGmfn2bt0V8Buq4TCEDtsUAgx2LX3rdnn5JcE\r\ndLvvCKUdNzMZW+iDKja1ZBVRdpAtWv1AOUzCrwLet3lnT4OoiYogYzaAHwf+\r\ngAHDlbEeeMXf6iye3auGQYEAzXhAlkW9+lUDsCDtku4KrpKXd8HxGe2tm7Rj\r\nTS6wSgWdrGIa+SWDgUJKgGtxlWkj/V5ytNFuk03eISYbF6dTegOOUgAU+c3P\r\nR7l05oDFzxczDNSZLBJuZCYS7AmwfUXkGIM=\r\n=64us\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e68ad025642429a51f137e9f3fc853364faf0622","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.69ebf61ea.0","@material/base":"15.0.0-canary.69ebf61ea.0","@material/shape":"15.0.0-canary.69ebf61ea.0","@material/theme":"15.0.0-canary.69ebf61ea.0","@material/floating-label":"15.0.0-canary.69ebf61ea.0","@material/feature-targeting":"15.0.0-canary.69ebf61ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.69ebf61ea.0_1682616092004_0.37897307943962577","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b90be86de.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e8651fba9f066493a8ab29d82efec2f73b3942e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b90be86de.0.tgz","fileCount":35,"integrity":"sha512-aBFkMJgLKSBJtOuQQ6l4674+3ARnuJ9ddTagNbBpgWwOY6xptC7jGa+xQv8JoVzs/t5NW9iPHGY705vfvLCvaQ==","signatures":[{"sig":"MEUCIQCX2piBG+wBiaDnn1Yjcs0jGnbcBZ3yoWxO2SgSWwpOngIgK0SdEught8SYEMs2vwzLymASCzPNYfHwHF+U5/ZVQLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGMTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGRQ/9EDPb6Zo9eD8I8kHt1D//HN81bIitlknG9kbBzRr1p/ZnzDdX\r\nXYTgjE+q3QLuvrv1KLhMxKV+9+CwO4iIntpCLcxyj9HN69LzC45nWdMe4l8D\r\n9zeq3P7vN1LKPkYR46VM3Z0+iBFQcGSYZ0VqFbeTRb5UJGZUpC4nJVMLWZiH\r\nF9q+rw+mq/s/cf0K5Ue6sn2U5DZ3vu1Xal2lmBbZM95wyv/SjpK4rTxIahG3\r\nTKzAUGWf77IimxLpJ2TD4eGu7m5Q1ScGQwxdGeobSjdck+ZkngK3ivzkMC+Z\r\na8kR8RiCRqxJQspAKUaXLi8A+PAATvYqoOOYUXzDDME02zs5mxzlyT0YF+eu\r\nKP9bNZVQPPuYxuPAVzl4tSQcaratHEt5Wh0WSUPz/Qvo5Gu9yz2+vTKQc2AO\r\nB8Xr1pjLBdki1hSbFWF6hprmlUuJInxBMZwzBavSQiLgbIzo9hC1qXaDLZvU\r\nSIT1UH7yZoo7fQuOzlzP47omjCxE61yfuWfswpsCkqSvGjRnpdeN1rD1FNqq\r\n3eX0PtCv79PEhXldCnWTLYxJ6TKhoPwKal4Ms99x86JyXVzFTB5Igt9GOEbg\r\nOprDp98tTshWpHYppyYkloH5g81j6VI6RsRpxO19Wf0smY2aWyOIQP0F4eBZ\r\nSsHMV0saYF8G5u1Dh/oIQSUX/QHyS+FV2e4=\r\n=2ONU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"903a4c00d6c4501b4eae8ac0007164ef4a97ce0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b90be86de.0","@material/base":"15.0.0-canary.b90be86de.0","@material/shape":"15.0.0-canary.b90be86de.0","@material/theme":"15.0.0-canary.b90be86de.0","@material/floating-label":"15.0.0-canary.b90be86de.0","@material/feature-targeting":"15.0.0-canary.b90be86de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b90be86de.0_1682727699700_0.8863369244878687","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/notched-outline","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.51f9c0c28.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"915ffb54a22374f4d3ff52f7032e8ddad557baf7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.51f9c0c28.0.tgz","fileCount":35,"integrity":"sha512-5fXgCxrEjoV9WKN2+4ru1mA8OIbnrrK/Zq5RT6QJgAbW/YRyMjtMZKIIbGhlL62/q4pZQCbYZaMmDskTkhiylg==","signatures":[{"sig":"MEYCIQCPddOHbY4Ov19mZjVNAvLFWcZJqDSInpg8OjK6qgXjcQIhAPwaW/C/8IU98Rn/wOZZMOjKLUdlwznkz1OnqnlUZ6hm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGVeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWLg/+PS7nchqfs2nJvqQ03d4icMo5Nh30k2+ibtAhdl2X/qwQxpJH\r\nTT8ge7VVRlveDVvowAm+04jYd7OZWTnIONJSze+wAHwp02fOA9ZsIGOq0iGI\r\nBI6ldcHpJPQYw8KKc+/RYw9fIxdwhY7i7eNyOgayMOdvYNXT3kPALqqZDwjA\r\nvU/xU4j5h29JEcachHQe0skYMwHA6+Skyd+8yZuvlNfxEUCKoOgn9Md8YBf7\r\nW9oJZWHB08okZW8oymRaXHxrCO4EkrafWdSN3dkutI9ISSa6/NEeXek1Hwy4\r\nOuHiMVt5Z9H5EpDCs1oFZ7STXnN/3C3/K+nJMbGJ+geb6+RY23wtAD8vCCy4\r\nuemybDgE4OZrdKy01OAS9gxqVNaO2SeisZ/iSjJ1cRLkg+1nWEf01eKzRMuN\r\nnmqWumMOKRptsuxjfq8aflc6swNvCaj9eZls7gt4fZZcKidREyQnIE28CooQ\r\n5XLfWu67xZYxRkjkh+LqTG9mZIpD/YamRuZlMynkQHS5C8yV4IeH6yByPxQw\r\nEIdxi/Pj+YzOfTXBl1ejK/bfKPOFfFeb02L2XUHPUKAFlYMR8muR5lN/i1ob\r\nWfP9VMYr0sWhFvMhhBd3GonuKGonFutosc+tSdYBYOMRopzQMbnuO3A2tPU3\r\n/lZffb5L2NfyPN8BWmc4oAAPyaOwZ+r/WCw=\r\n=CjCH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"87662f1719363ac8e600f73ed8a7795c25d8add6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.51f9c0c28.0","@material/base":"15.0.0-canary.51f9c0c28.0","@material/shape":"15.0.0-canary.51f9c0c28.0","@material/theme":"15.0.0-canary.51f9c0c28.0","@material/floating-label":"15.0.0-canary.51f9c0c28.0","@material/feature-targeting":"15.0.0-canary.51f9c0c28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.51f9c0c28.0_1682728285967_0.7250871774668532","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/notched-outline","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.4e840d685.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a8a66b529f9c04fc49bc390c9b97ceb33d1d25f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.4e840d685.0.tgz","fileCount":35,"integrity":"sha512-oEsedE6s45Mws6v8cXTN0yqyJGh+v3QnGKfPViYBKzTfH5YmCkRwvWx0YLop5OutvPTNKBZ43Qr/ApyrWdLxvQ==","signatures":[{"sig":"MEQCIG/4qzgrre8CkOgHjtHVGdG9aHEhZvDyY0WXOeeqYlcTAiBmUWclYLD6hE2L7TIoOeLfIla0CoGvVTAPiRBxL3gMbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"feb1f9f53257b520aff6dfe5dd1a15e319e73a40","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4e840d685.0","@material/base":"15.0.0-canary.4e840d685.0","@material/shape":"15.0.0-canary.4e840d685.0","@material/theme":"15.0.0-canary.4e840d685.0","@material/floating-label":"15.0.0-canary.4e840d685.0","@material/feature-targeting":"15.0.0-canary.4e840d685.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.4e840d685.0_1683041616072_0.06546107210726482","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/notched-outline","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.10b8563e4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d20178a7ddf3725ea27d152e60ca615efde58f1c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.10b8563e4.0.tgz","fileCount":35,"integrity":"sha512-2qUDcrH1w5+K5jbQjrAEgROvUSQVAvdtK5yx/ruQiUru+bAC2uKTDtuPUQmniejFg0hnQ9vO0T7Ck1l6JH7bHg==","signatures":[{"sig":"MEUCID0ixijiGaeAdFR2VffDIKPWQQ9/9GyQ4FMZA9AxSnD1AiEA1HmLZG0fqE8glb+QN7Xs7i1gPCUFuBQOZktWZpjfluc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUZ/AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCOQ/5AXbVQD0ZoqXgXc0/f74F8ZRUHhp2WhOWiOh6pVYu1IbzlcmW\r\nSa3fAt/PZ+HmtfO7aMmd9v6yd0fvmH4cNS2Sl5jsvtE2j7K9Wdt4CczR1PVW\r\nq8+bCLW/6QUa1MydisGbgxY+cxnlBIRllWeYEdnqLUHlFUhsoGGIrZLavcd4\r\nW7kL/dYjd6bgbDm8M+6N4ksa6aXiwPCAH0sexqCzyqTikM0tvBIFkwh9Z0zf\r\n/zB1Oz8reCXHr0evPt1NsnTlR6PRMPfrkU4Ik0TpfeiZHHdSaY9vPJ2CISeM\r\nzqHqhpbB7taHoJjreRGj/tlyiIP7bOKjXh4K01BadonU0VqZTBb7yc6XrzWq\r\nD8Tw/AcprQ2x6Nl1vN67Sc2CCq/BBnT4kA3cF3qZyqM3YfgQYBeRI397sK7P\r\nZhDFgOXeYz2lxPcxXKahMavnsot6ZGy9f+xakplM0ob2OOykSqCPMj/LNEU9\r\n8OimW4PyC3ppCBIF3ErR6vV9XwQfjQLk8Wjb6sHIzL9ALEmgkV7TN5syhead\r\nbfBrIfLgX8tpYKJkRcoqmgC5jnuTrf+o4Oq/Pt0e+Nx1qdBiwAz24fM2Tdml\r\nXs6Wsoefv/jzQaU9RG4K060/7ObLqIFz9qxpzrwtwUcwL47i6pzodge8928Z\r\nxCvHDq+AstVbCrU6KXEwMoRzujFKBj/aZXs=\r\n=5Cso\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5f71dcbe45f5245c72c0fabae0162af558c5c395","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.10b8563e4.0","@material/base":"15.0.0-canary.10b8563e4.0","@material/shape":"15.0.0-canary.10b8563e4.0","@material/theme":"15.0.0-canary.10b8563e4.0","@material/floating-label":"15.0.0-canary.10b8563e4.0","@material/feature-targeting":"15.0.0-canary.10b8563e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.10b8563e4.0_1683070912298_0.35812455404586796","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/notched-outline","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.736b7fda4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6777190448f2a31c6deb7d6ba5b947d1d598d59a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.736b7fda4.0.tgz","fileCount":35,"integrity":"sha512-CrCrJDJyJm/yBKCa+ZfIKEfVRWisnvJsuBltMCTxy+iWZ1bDUkoY2BHk4eqbh9Ktfq/Mjjf5vLl4ZU6Py11auQ==","signatures":[{"sig":"MEUCIQC6XuVxwgi1Kj0kxRsTfwG7/A7lTI1hWLLHj3Ah8h2BnAIgEXtUNdXH84zVW/7CP9p7lkUTVfCJ2NoBXFz3Nu9YdgA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnkmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpK7A/5AKPZf7w0SiP9Uiw9x8LtE6boh2SRgeEBixjkrXlO0m+tB82V\r\ntSQgtBuoFnHXTGUPBuQK/B11KMBtzzzNFwWFBKlVDhFNkZKpHzV4poH1N8UE\r\npe8x0Y7I8KNHodhKqA8Iwq5zZQM5KkklVFZgs/a5AHbSM9IY+jqJip5TXFyI\r\nvfamJhcZCxp1iRXYsfuo2cS1+iyrDer1P4Kauycqc+G0EpB/5iGQB9eYLa+f\r\nMM7vDojeFBja7ztCjvVvGjDsIDtfavZ1/9KRgUsNNPv3NEYNtjTKDtydZaQT\r\nhLUENuHXy6YnBZ4wjeeEM65Xd+U+gGPxa7v/jLPn/W+PN/nYYF4D1Q75heVU\r\nva6YdEUr4ytIZmNafdX+i4s6USxKeMvbGnWi+w5ZUtpkrSwEGLRmCTiz1z2z\r\nR45UPqDtItmskmAw/9EEApNpzMU1lrZpQgYp0d9Fb5JxmBulAi8Quh4aD07H\r\nnulfMfrEGSXNxzUBtEeTd+1ZVNjAjm91ZO0zgGLKl51+UU/G7zNKq1xMDCXl\r\n0zwZbAeYlmL68eWqg8COHPcFPEyuGt4oWWZ0jiEl7tIGr5g4MCQ1j7E7o/XP\r\n8nmrrmbVICUTQjXIB168w1qO82iWpm14PouRWjPHKIr4ZjTzf1wmv23b8+ls\r\n1WiLueMOKD6ECM29BIVz89akSFKN48OZpUw=\r\n=GN3R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"b9ef54594aa8f93612aed085460f035d0aba61bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.736b7fda4.0","@material/base":"15.0.0-canary.736b7fda4.0","@material/shape":"15.0.0-canary.736b7fda4.0","@material/theme":"15.0.0-canary.736b7fda4.0","@material/floating-label":"15.0.0-canary.736b7fda4.0","@material/feature-targeting":"15.0.0-canary.736b7fda4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.736b7fda4.0_1683126566092_0.8933669518009184","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/notched-outline","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.0e533c5a1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec26fbfc8d82d727e05ea3c14d7b1abcf7176786","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.0e533c5a1.0.tgz","fileCount":35,"integrity":"sha512-NoHiutW5C52rOiAghvLS7vlis13YuWjI99SCdy4jF9HuGDVd/pXs95klhUX8MLaiqFtXHyjaQf9cKhxjdBQS9A==","signatures":[{"sig":"MEUCIQD3756nYA9HtJSCSGCQrK9wUw23w9VI1aJ2sOWEQTTHcQIgbX5QMDQE8FW6cKBFjw68eNvMKE2scKSQj2o26mTR3rE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6b9b4497cc6457c9e92ab3abdaad626c73e610a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0e533c5a1.0","@material/base":"15.0.0-canary.0e533c5a1.0","@material/shape":"15.0.0-canary.0e533c5a1.0","@material/theme":"15.0.0-canary.0e533c5a1.0","@material/floating-label":"15.0.0-canary.0e533c5a1.0","@material/feature-targeting":"15.0.0-canary.0e533c5a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.0e533c5a1.0_1683305772682_0.3253439541530132","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/notched-outline","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.5f01c15a2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0556f9698fb397fde96c93d51e8ba03b122c153","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.5f01c15a2.0.tgz","fileCount":35,"integrity":"sha512-ntLMlO7g+UN3UlPgTkQ40/5dWgszDHMM4mOLtEC5Z9/kMQXHVRy3rVxT3aQydArNX/KRYVQceStfIw6Es4Blcw==","signatures":[{"sig":"MEQCIGbEporc7HIVRtAzEyvZ1TN+wTcltCDDBlR5nhkyTk+xAiAnIr7okLO2jCmnrLk9MBEtKGvjwQf+E1dnGIqde1gM4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7bb1c5dfc575b36654ae046d1f4ab3b27e8c8f9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5f01c15a2.0","@material/base":"15.0.0-canary.5f01c15a2.0","@material/shape":"15.0.0-canary.5f01c15a2.0","@material/theme":"15.0.0-canary.5f01c15a2.0","@material/floating-label":"15.0.0-canary.5f01c15a2.0","@material/feature-targeting":"15.0.0-canary.5f01c15a2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.5f01c15a2.0_1683307577320_0.5645299953498311","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/notched-outline","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.3b5b55e31.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17b3180ffe59fa3968ebdd07dc12d9d63243a3e5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.3b5b55e31.0.tgz","fileCount":35,"integrity":"sha512-rEzFUqaJJ1hX4k7TlWjGONqTeUP+IuIGiGSXnHlYdQRQQiuHTOrwI6b+l8FXgNFMmKMzg6Xzh8sr9jiV+cO5Xg==","signatures":[{"sig":"MEUCIQCteFDusvDyp4Y8Sae8hxiJFCtQUSGN1MvA15DW8w73uAIgGRFuO8uR3Aw5kb9JjF6rv14UOwhDxbvkv76fkntf5aM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"c262d9ee39655e869886d1584551a096ae56dabc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3b5b55e31.0","@material/base":"15.0.0-canary.3b5b55e31.0","@material/shape":"15.0.0-canary.3b5b55e31.0","@material/theme":"15.0.0-canary.3b5b55e31.0","@material/floating-label":"15.0.0-canary.3b5b55e31.0","@material/feature-targeting":"15.0.0-canary.3b5b55e31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.3b5b55e31.0_1683311950335_0.41416776573426306","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/notched-outline","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.d0788120f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12b59bdece3310cde695d8686b023da61ef071c8","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.d0788120f.0.tgz","fileCount":35,"integrity":"sha512-2MQwUSZpbuJUbKvFaqzR5RsSCeyQSGGFwwLeIDjKWPG/Uiz1ErErTWSi6h546QbOcVuf8TZBRlRdpqDpSIq5Wg==","signatures":[{"sig":"MEYCIQCIk/o1JPi/OjGJYFbixm4DyPQyonfm9txMMj9JaHYFNgIhAOww2UvOKaZ9lrxr+hG1lgMo7IuZnpnQJjBPq/DjoENt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7eccbee262206623b89c40dadb4e11abe30d5e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d0788120f.0","@material/base":"15.0.0-canary.d0788120f.0","@material/shape":"15.0.0-canary.d0788120f.0","@material/theme":"15.0.0-canary.d0788120f.0","@material/floating-label":"15.0.0-canary.d0788120f.0","@material/feature-targeting":"15.0.0-canary.d0788120f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.d0788120f.0_1683620585183_0.9627995237467593","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/notched-outline","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.f52358dd0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a14d2b4b057b051641ae4261837b58c90be3c2e4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.f52358dd0.0.tgz","fileCount":35,"integrity":"sha512-V4+dp/E6qVOpu47uEvfjVd+9L8sR1W7I/CYVL5heV93s2apMs2JB9nISQj9O1wthwHOWPOy0TIG8ENT66O87pA==","signatures":[{"sig":"MEYCIQCUZw646eIbG0jQjbwjXFuxDftH1NU+eK3Q3G3Nry+WWgIhAMsWrokwvL04JRWMQUQYyLeCChBgeYwPBbJSNFue3Jf+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a4baf07a9736a6e1fa40001f7198ae1865d67392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f52358dd0.0","@material/base":"15.0.0-canary.f52358dd0.0","@material/shape":"15.0.0-canary.f52358dd0.0","@material/theme":"15.0.0-canary.f52358dd0.0","@material/floating-label":"15.0.0-canary.f52358dd0.0","@material/feature-targeting":"15.0.0-canary.f52358dd0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.f52358dd0.0_1683901828000_0.47429156231167635","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3c3fbaa3.0":{"name":"@material/notched-outline","version":"15.0.0-canary.d3c3fbaa3.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.d3c3fbaa3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9090fea5c0030a2ce22300bef6271f85f2711020","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.d3c3fbaa3.0.tgz","fileCount":35,"integrity":"sha512-EYaB9lgU6rfKYRpMy7DVyu2id2RMaD00JJTJbp71wy7bH+RmBxs9YUPvLdkUv3NcVMhCZKad3jSCBYG3/V2PsQ==","signatures":[{"sig":"MEUCIQCIHx2yvDBiVIR32B3BLu9uT/fGzo2ouxpFl16avGRQQAIgUMG6l9L9nux3yjtWx41FXiKV59dfRKNOZXsKQPPncTQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3b7f31c254605439f8fef56301c46f7bcbf3a9fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d3c3fbaa3.0","@material/base":"15.0.0-canary.d3c3fbaa3.0","@material/shape":"15.0.0-canary.d3c3fbaa3.0","@material/theme":"15.0.0-canary.d3c3fbaa3.0","@material/floating-label":"15.0.0-canary.d3c3fbaa3.0","@material/feature-targeting":"15.0.0-canary.d3c3fbaa3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.d3c3fbaa3.0_1683914456324_0.5074254663978588","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/notched-outline","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.576d3d2c8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a78b81624e650bb0a23fd49732d8fd44d17d0df4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.576d3d2c8.0.tgz","fileCount":35,"integrity":"sha512-+l3AHq8JuNBz4J0d5jsWAueghwnzAASMq7BIqrZUMEfyCSG3MJ2Pzzj5AMLyqFvb6IMMSqbNozgkVwtD/Qh8SQ==","signatures":[{"sig":"MEUCICoPgoPdAEeoeGHwUUwv2qtiP9nVkGYHy7AtShfVV4QJAiEAxg7V4wAH7SrYuLObBSmdakpPOhs+ZBgbxhp5FIf48MA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6ace19a21b6654f14cad48fc007198859874c910","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.576d3d2c8.0","@material/base":"15.0.0-canary.576d3d2c8.0","@material/shape":"15.0.0-canary.576d3d2c8.0","@material/theme":"15.0.0-canary.576d3d2c8.0","@material/floating-label":"15.0.0-canary.576d3d2c8.0","@material/feature-targeting":"15.0.0-canary.576d3d2c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.576d3d2c8.0_1684202403196_0.8445688397155304","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/notched-outline","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.19bb36a46.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68547f20c99e1de7ab4bae79751b24f27f1791d4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.19bb36a46.0.tgz","fileCount":35,"integrity":"sha512-WX4qX7Ns9Mclb5xF1y1DY4+poTv//Vbr6eOyQyz7dRYFjAx9QpR2OgQGFPKOPB4k1mIpeKOfdxPt9DQcAeb45A==","signatures":[{"sig":"MEYCIQDM5paM08IXdzL5mnGFYhTELHANgFI5hwMC2+p5ntWpNAIhAILWt3mM3OSzuxsED6eD/G+T2UggUG9gG9z88hjonRv2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"75157be315eeaa02f70ed69f97e44a7d40d53e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.19bb36a46.0","@material/base":"15.0.0-canary.19bb36a46.0","@material/shape":"15.0.0-canary.19bb36a46.0","@material/theme":"15.0.0-canary.19bb36a46.0","@material/floating-label":"15.0.0-canary.19bb36a46.0","@material/feature-targeting":"15.0.0-canary.19bb36a46.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.19bb36a46.0_1684266842221_0.7114263998571211","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/notched-outline","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.aa5ac7fe5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba01a4070d6745f7c912fd98290d8cd525c5097c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":35,"integrity":"sha512-p5WFq7TvYNQBxZHIS+jZYZXiwWSgEdY8FVyNG0lw8Yq4zgYRU5vaW6mL+pZE3d0rQwi+51UaV2Kp3ge5Cy47BQ==","signatures":[{"sig":"MEUCIQDUHoHJBlNNSm2ITOd9Uma0wdhBD7V5raxZ85w7LrZzjQIgRYYrsTg2ZEtU74tb+jtyhL9jg6kbUY/mp2Y8ZM6KMfk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"83e86542dd6facc8ffe487d31111412ee18b5bde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.aa5ac7fe5.0","@material/base":"15.0.0-canary.aa5ac7fe5.0","@material/shape":"15.0.0-canary.aa5ac7fe5.0","@material/theme":"15.0.0-canary.aa5ac7fe5.0","@material/floating-label":"15.0.0-canary.aa5ac7fe5.0","@material/feature-targeting":"15.0.0-canary.aa5ac7fe5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.aa5ac7fe5.0_1684776341922_0.3896386072419582","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/notched-outline","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.90291f2e2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38d0786ece832ea198810122c899e7e271b63b03","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.90291f2e2.0.tgz","fileCount":35,"integrity":"sha512-4lpoIoFJ8cb++M1iQpZ+8iypUuTruzyBAkOvoaNjk7EftEV+aS3K6XntGNtlUZoB/fFho3mAUVjT19IHFWD03A==","signatures":[{"sig":"MEQCIBqc1xaQI4Kno5aK/ad/bA4jJPuNI1HO3VQxVdTklCGfAiBDQpLbYo3LVirzy/AgfMV2l1sIHdTRgnwTYd382yy+Jw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a1c306471717b15ae8f0b481703ed1b46162df25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.90291f2e2.0","@material/base":"15.0.0-canary.90291f2e2.0","@material/shape":"15.0.0-canary.90291f2e2.0","@material/theme":"15.0.0-canary.90291f2e2.0","@material/floating-label":"15.0.0-canary.90291f2e2.0","@material/feature-targeting":"15.0.0-canary.90291f2e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.90291f2e2.0_1684863760670_0.42009174145518724","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/notched-outline","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.446734f27.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56fd369d3cec064ba47b9075bf04cf32a0b0f62b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.446734f27.0.tgz","fileCount":35,"integrity":"sha512-aa9RujKI5/ysOBePOH5jLOw6PcagiR1skKjlr2TT5eyfrf9F88zPSdK4493HCVP/qohYYxzGB8idI+Cjonf0CA==","signatures":[{"sig":"MEUCIGVxjK5hUoQ1nMZ6BmscChBot0Vo3CKG8DwUrlIwjRtcAiEA/U72ZE8AyvtVSZkQr4ZhulrYb44n5S2XIDp4pPqBIms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a2536a849aada5f06aa85deaa7be06f44f620023","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.446734f27.0","@material/base":"15.0.0-canary.446734f27.0","@material/shape":"15.0.0-canary.446734f27.0","@material/theme":"15.0.0-canary.446734f27.0","@material/floating-label":"15.0.0-canary.446734f27.0","@material/feature-targeting":"15.0.0-canary.446734f27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.446734f27.0_1685483295030_0.27073909522763895","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/notched-outline","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.19de312d8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fde606d289cfd34966351b037de362e718aa5a5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.19de312d8.0.tgz","fileCount":35,"integrity":"sha512-nKcjEVAji6EghxLILrZ0h6yfmrgTvdrQepwFm7Rj89m0b7QbTBTFYYUAoQ1p/kC26McKOHydcaPzrXmofdk2hg==","signatures":[{"sig":"MEUCIQC34ZjEyvbNxriAe0M2+vhw+INkoWzp60WnKMF2q32FngIgcb1suWQNDAo0J3q+tj4wztXCsZZPaNVHJiq9aYuKAnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"dc3811573a34ccafa5c09bcf14574bfb95373958","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.19de312d8.0","@material/base":"15.0.0-canary.19de312d8.0","@material/shape":"15.0.0-canary.19de312d8.0","@material/theme":"15.0.0-canary.19de312d8.0","@material/floating-label":"15.0.0-canary.19de312d8.0","@material/feature-targeting":"15.0.0-canary.19de312d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.19de312d8.0_1686071902954_0.9541210439638883","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/notched-outline","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.6081d829b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b2788b489e0276af8772d8f99bbdbe48b2aba67","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.6081d829b.0.tgz","fileCount":35,"integrity":"sha512-7peaSicPvJ1af7439xr7bKQIYL7tedPfICY+ZFcrOnIWawdFYDrKr/frwIgEaLiY2fZRjPpwBlJxD0wyW1U5og==","signatures":[{"sig":"MEQCIFR0IftSN/SR8Wznrow5fZWuG81H2aq7HBtID/MCGuWJAiBShkunXLh/u8S2PGo1Wu27rKRItgbTJzlsCyYvhK6GGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"033569cc4deafe32dad2bf8cbd1de8789bc85668","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6081d829b.0","@material/base":"15.0.0-canary.6081d829b.0","@material/shape":"15.0.0-canary.6081d829b.0","@material/theme":"15.0.0-canary.6081d829b.0","@material/floating-label":"15.0.0-canary.6081d829b.0","@material/feature-targeting":"15.0.0-canary.6081d829b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.6081d829b.0_1686100441947_0.8073057802987487","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b26c34a68.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cc8517a03f2470edaffea53c639c29545f2ca22","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b26c34a68.0.tgz","fileCount":35,"integrity":"sha512-+0sUkh+InELJNYUvIc+iks/+6UwTOkzhoE9RROzOOcRlCv8WtTeVY8gXnB5x5nQn+c/rgClef2EKDd2B3Tllvg==","signatures":[{"sig":"MEYCIQCuvA/yb8FaSwtrbxZtGhreXQJepM1gd1S18Ygys8zAFgIhAIN22LE77E4SvsOYEI7UvkWGwrXTdaQqybFw61XMI/IP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"28919516866e588c52e4e6358c3c4d2523993b74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b26c34a68.0","@material/base":"15.0.0-canary.b26c34a68.0","@material/shape":"15.0.0-canary.b26c34a68.0","@material/theme":"15.0.0-canary.b26c34a68.0","@material/floating-label":"15.0.0-canary.b26c34a68.0","@material/feature-targeting":"15.0.0-canary.b26c34a68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b26c34a68.0_1686169092665_0.4231606961982679","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/notched-outline","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.4fe911371.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3a0b814b0a5d459d9a312ab9052951c163a9257","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.4fe911371.0.tgz","fileCount":35,"integrity":"sha512-IUekne0nCieOkSkCvLBbwr4FUktyIenGEPrT248Xqz42aR1LjFiFVw7hiBu4M+lYSGmfI6Hg0hEw6pw6V5O0eQ==","signatures":[{"sig":"MEYCIQCepxnH9izlyZgJMbnPOoJ6d3BkvegXWzOGQIvCN5zPowIhAJQmkqRofYDgRoK443OmO04DNrE/qnr8pVzEwtnq2gdz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"a9de53a24d5e0f79f94310f061cdf2ab718df7f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4fe911371.0","@material/base":"15.0.0-canary.4fe911371.0","@material/shape":"15.0.0-canary.4fe911371.0","@material/theme":"15.0.0-canary.4fe911371.0","@material/floating-label":"15.0.0-canary.4fe911371.0","@material/feature-targeting":"15.0.0-canary.4fe911371.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.4fe911371.0_1686179161330_0.48194219818230866","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a9ff9866f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52a0474a3b5a3d49b1be34116b12ccbf166bb937","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a9ff9866f.0.tgz","fileCount":35,"integrity":"sha512-IiWdmrILfojW0BQa7VNK8T9AF/7ioifrndxZ1AbiGfpyaEixZHiz+e6tIM/OcaxalM20hTxLX5OWTyqmGx/tsw==","signatures":[{"sig":"MEUCIQDw9mCX3U4u5iht9tDPC5jZZBqRMNrHPpxIgmdQ9sx8bgIgPLASMw2ogA5kC6lV/0sfvZx7u2guRWvnH0R/7PLvCDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5bed0ec6cdad0c38b52e8ac98994b2809d9c8f50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a9ff9866f.0","@material/base":"15.0.0-canary.a9ff9866f.0","@material/shape":"15.0.0-canary.a9ff9866f.0","@material/theme":"15.0.0-canary.a9ff9866f.0","@material/floating-label":"15.0.0-canary.a9ff9866f.0","@material/feature-targeting":"15.0.0-canary.a9ff9866f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a9ff9866f.0_1686656296419_0.21971025671184985","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b994146f6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a405a7b12417f749a0150851db6cec3d446b4b6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b994146f6.0.tgz","fileCount":35,"integrity":"sha512-UZxU8jXM2t/bk/CiO0K+TSPspuJRZIyrYlIS0gd+qq/u8Gi2DpALBlLAh9Jeu46IUg4YGlPsNWYfe8p3QAVyoA==","signatures":[{"sig":"MEQCIBfr3Yr38diahGu/bL5SlLwgTAFmzoqQjNprSwnkigdEAiBjFcmhDv/ru3lXcImrwYV8Uq0Tu/2aNbxsdVbjh3/66w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e537228a5d88e4fb9c651aa15b1d56bd81bc63bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b994146f6.0","@material/base":"15.0.0-canary.b994146f6.0","@material/shape":"15.0.0-canary.b994146f6.0","@material/theme":"15.0.0-canary.b994146f6.0","@material/floating-label":"15.0.0-canary.b994146f6.0","@material/feature-targeting":"15.0.0-canary.b994146f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b994146f6.0_1686776631214_0.03902848775333867","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/notched-outline","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.1fb4b1a06.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe19b2b77fae93b748eb4494ef59e5c29570f63f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":35,"integrity":"sha512-u+byL+7+jqePMcJ0dgMdmDlyaw8JQagZ+GgVerYw9LlEaPCPovGjx6Q/jR+RR2Ff8rdoYbblKYNKbLH5BiPhIg==","signatures":[{"sig":"MEUCICoS2fsXyKb+3cpLYBwYT1XKtdZdGSWrdxHd/3OiluXsAiEAqqjYaRK4l/RWUKTboYjGUgOFphQqFGCGSMOSHscQWRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1d1b86822f3fc9f22a5fdfc1c381d5a4ae983829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1fb4b1a06.0","@material/base":"15.0.0-canary.1fb4b1a06.0","@material/shape":"15.0.0-canary.1fb4b1a06.0","@material/theme":"15.0.0-canary.1fb4b1a06.0","@material/floating-label":"15.0.0-canary.1fb4b1a06.0","@material/feature-targeting":"15.0.0-canary.1fb4b1a06.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.1fb4b1a06.0_1687892234254_0.15583113872201793","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/notched-outline","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.c64a2776e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89a549a863cf29914db4f8edd2beaceae05a13a7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.c64a2776e.0.tgz","fileCount":35,"integrity":"sha512-CIjnxij5GLAImDkOJqOxdnwqTHxWExiqmQDo4PMSeCOa/5v4IrCUbEfLWHfWV+klovEz+h78iM1MDybi8YgzZw==","signatures":[{"sig":"MEUCIQDieZIAY19vWZDnBAxGI38G2bPEY05KYGuAkeY490D+eQIgL3PAvrD9V5y0qMKCMaQbfgjn2SLuvjaYNopN5Niusr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"271b0c446646af573f67960820b6b2a86a9bda88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c64a2776e.0","@material/base":"15.0.0-canary.c64a2776e.0","@material/shape":"15.0.0-canary.c64a2776e.0","@material/theme":"15.0.0-canary.c64a2776e.0","@material/floating-label":"15.0.0-canary.c64a2776e.0","@material/feature-targeting":"15.0.0-canary.c64a2776e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.c64a2776e.0_1687896998205_0.5195998419361041","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/notched-outline","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.b05d9eb7c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e91335ab650a0888859f7003cafa079510c16d81","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":35,"integrity":"sha512-50kvNFKVK6/+VIASuu20enwFkXn0eUy3zyVzxKAin/jTTN0g1pz5r1ODuCmC3DI17Z5GHc4zG23rYRt771/rzA==","signatures":[{"sig":"MEUCIDlPshD2BKc/peIsmefMtzVH6KO+kRCtM7+doMrMZdViAiEAxDztpiROIDIf2Xl5M+Gn45oFBHQ8npGKXREZt1ipgJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"854245f23fe0f7b3dd1163ecefd940b26718c134","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b05d9eb7c.0","@material/base":"15.0.0-canary.b05d9eb7c.0","@material/shape":"15.0.0-canary.b05d9eb7c.0","@material/theme":"15.0.0-canary.b05d9eb7c.0","@material/floating-label":"15.0.0-canary.b05d9eb7c.0","@material/feature-targeting":"15.0.0-canary.b05d9eb7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.b05d9eb7c.0_1688055825118_0.2885530854336804","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/notched-outline","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.2a9697dc5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3891dd785ef0b4198ceae25bd626d0408958581a","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.2a9697dc5.0.tgz","fileCount":35,"integrity":"sha512-r3y68QuRLvtlF71mllq1yMeFwUPHCBty9RWpkyKh8S+/R+NZJokFHRmGtwQtKfowAbAItjhOBgWT8mLBNFs5qw==","signatures":[{"sig":"MEYCIQCCa4E1d5g4UW9/fIK+SFxpFyvJwIVRLQB3ag6lL684OgIhAKJhXZi2M8GLYiFrXdOd0Cs2uYmCM70ehB/uYwDNX2o8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"fad1e5223c83a5b7a83a6ef81f7ebdc83a85672a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2a9697dc5.0","@material/base":"15.0.0-canary.2a9697dc5.0","@material/shape":"15.0.0-canary.2a9697dc5.0","@material/theme":"15.0.0-canary.2a9697dc5.0","@material/floating-label":"15.0.0-canary.2a9697dc5.0","@material/feature-targeting":"15.0.0-canary.2a9697dc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.2a9697dc5.0_1688163235970_0.2537181346085562","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/notched-outline","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.0c52adeab.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7eb6c5e07e07f21ac785c69a78e3d3c0672f31ba","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.0c52adeab.0.tgz","fileCount":35,"integrity":"sha512-D/Ja5jYXroBtrp2i6igw0ydTLQEmu7yxw1LcJftjLlYQvZjumszgPsXJhLYnaI+4uPfg6IsM48KvZMq+ceAZDw==","signatures":[{"sig":"MEUCIQD0KtFf0AT0UXFQwH/rYPiY+lP0qZ9II18PxvSBJ5dh4wIgcBejMTq4UCYJWaWJOY8WuGWhczxnV8nxH7Jmo+B/n9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"972024dd57885ff944ec073de0cd956353bfa7e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0c52adeab.0","@material/base":"15.0.0-canary.0c52adeab.0","@material/shape":"15.0.0-canary.0c52adeab.0","@material/theme":"15.0.0-canary.0c52adeab.0","@material/floating-label":"15.0.0-canary.0c52adeab.0","@material/feature-targeting":"15.0.0-canary.0c52adeab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.0c52adeab.0_1688574351842_0.028480974430698636","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/notched-outline","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.83355c322.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90918f3c625f47328947cb286b47d7120064cf75","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.83355c322.0.tgz","fileCount":35,"integrity":"sha512-RSPCyjnxqbLSlev3kZk4wHCJ2VGvuXJMNhObAJ8JaDtNmUPBwd1m2YzsJ/i1r6vLRHmKT+D17Pb7QH430apJLQ==","signatures":[{"sig":"MEQCIEtI0uMFmy8KTt299wdsiZoZ7cWd7h/B0CQv59FevQChAiA2WhVwF20PQ9JbjTiET4r9GC8NZJd5C2HNuLaGFTsTew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"173401c2dd65fb3babae5b8e998c0a0032ff819d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.83355c322.0","@material/base":"15.0.0-canary.83355c322.0","@material/shape":"15.0.0-canary.83355c322.0","@material/theme":"15.0.0-canary.83355c322.0","@material/floating-label":"15.0.0-canary.83355c322.0","@material/feature-targeting":"15.0.0-canary.83355c322.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.83355c322.0_1689001539129_0.40553274649905435","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/notched-outline","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.bc9ae6c9c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94d4c7646e75fad9ca78ad66487a3f7445030664","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":35,"integrity":"sha512-WuurMg44xexkvLTBTnsO0A+qnzFjpcPdvgWBGstBepYozsvSF9zJGdb1x7Zv1MmqbpYh/Ohnuxtb/Y3jOh6irg==","signatures":[{"sig":"MEYCIQCbVJikkmyiz/1t6nBPM56PqzQkBLVOsgKNj89DH5LyXwIhAPZvwqENLbA+bu4urUZZwr2+J3p5QW4pOCBuJVLqZce8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"9f0b9b80c267d99daa258e635481fecc4cbf0acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bc9ae6c9c.0","@material/base":"15.0.0-canary.bc9ae6c9c.0","@material/shape":"15.0.0-canary.bc9ae6c9c.0","@material/theme":"15.0.0-canary.bc9ae6c9c.0","@material/floating-label":"15.0.0-canary.bc9ae6c9c.0","@material/feature-targeting":"15.0.0-canary.bc9ae6c9c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.bc9ae6c9c.0_1691097657340_0.26061277765137403","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/notched-outline","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.3c44cd956.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"363ccb526ba740dcfca65432548cd7e3f485e2cf","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.3c44cd956.0.tgz","fileCount":35,"integrity":"sha512-M4DS5S5btpnRUOS52+dk1y8fSF1Ce8rKeNe0B/rt4GjVpshXZjke3hxcyfIV+HSNOEVLSQxEBzmehnidOXhkrg==","signatures":[{"sig":"MEUCIH1lqvx9AAhgPYAHWYP4wr5NjnNfSioRHSqdd6R7//BxAiEA6NkXKvbmK3kXu3q9fCIWx2AYltnJUiyAp7I7QlUwUog=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6e39da189328fcabc7040a629e312efe5f7cea80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3c44cd956.0","@material/base":"15.0.0-canary.3c44cd956.0","@material/shape":"15.0.0-canary.3c44cd956.0","@material/theme":"15.0.0-canary.3c44cd956.0","@material/floating-label":"15.0.0-canary.3c44cd956.0","@material/feature-targeting":"15.0.0-canary.3c44cd956.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.3c44cd956.0_1691430437946_0.209381053664615","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/notched-outline","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.02702296e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26d521367324508164d969e56932ad94c4c366ce","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.02702296e.0.tgz","fileCount":35,"integrity":"sha512-0i1TwQ9UQgoeYz/Ennq3XeDfxbFBAp0YCpnulOSsqGbBo4zmNomMuEj3B1O+7NvZQJg9Npv3Pl5t4NLnKcdxrg==","signatures":[{"sig":"MEUCICjVRq+FRjNWvR7Z0a89etP625uLsMuHAMsXs9dBVKNAAiEAxamDka/NdpyhJZvdGCxWGkCXf187YZmytmyGcgHlPws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"22335673bc742932498b2538321ed9dcfd692879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.02702296e.0","@material/base":"15.0.0-canary.02702296e.0","@material/shape":"15.0.0-canary.02702296e.0","@material/theme":"15.0.0-canary.02702296e.0","@material/floating-label":"15.0.0-canary.02702296e.0","@material/feature-targeting":"15.0.0-canary.02702296e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.02702296e.0_1692965099678_0.5667218303615837","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/notched-outline","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.872b65832.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fec24f477039b642c293b7831233cb4b45e5a773","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.872b65832.0.tgz","fileCount":35,"integrity":"sha512-V8THGcnikB41HhnTzbnT40pH+XTGQm6XhQFa+k4tTxidOEij5gmxLSdcXe6+lr+bVc+naSZKQ8uaMSlQyixoYQ==","signatures":[{"sig":"MEQCIDbRvJKOE6JkGr/H6sMWLUUq1dzSdTrtfHCmT+KhIB73AiAkjMqNirCj/tgOQsWPhEc2c48Ms/IigH3biWshJ2IR8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"be0901c091f812355b2d192c49bd051d8daf7a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.872b65832.0","@material/base":"15.0.0-canary.872b65832.0","@material/shape":"15.0.0-canary.872b65832.0","@material/theme":"15.0.0-canary.872b65832.0","@material/floating-label":"15.0.0-canary.872b65832.0","@material/feature-targeting":"15.0.0-canary.872b65832.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.872b65832.0_1693397601849_0.6759335414688765","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/notched-outline","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.89b2e4122.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35db6a273448577448a312ffb7f891702ef6f070","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.89b2e4122.0.tgz","fileCount":35,"integrity":"sha512-fPhPH9TXWEr++IfTsCLsBbNNfkD+LNTevIgGn0+lUQE8lXvzaX/Vq6ITz/VgJ1ySgk8cyMJt87x4v+ckHNS5nQ==","signatures":[{"sig":"MEYCIQC2UoRO8nYtvi6fqDO85gjeJokf9DvS1XJoR358tsa9OgIhAPz88SexeLSYarUHgMMcfmbNuboGJp/hfxN3YAjimoaX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"68bd55db9489546e515443239f477836e16db19b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.89b2e4122.0","@material/base":"15.0.0-canary.89b2e4122.0","@material/shape":"15.0.0-canary.89b2e4122.0","@material/theme":"15.0.0-canary.89b2e4122.0","@material/floating-label":"15.0.0-canary.89b2e4122.0","@material/feature-targeting":"15.0.0-canary.89b2e4122.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.89b2e4122.0_1693498009188_0.7885101668974073","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/notched-outline","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.7a3942e7a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f13092cee3e367cea4fc3f5c22367267aa3113e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.7a3942e7a.0.tgz","fileCount":35,"integrity":"sha512-F79rxs29yluv66zO1dspjY1H3GEFj72UpWvT+L5p6ygdAI6eCOb317g7yoNk3K8CaGgx1wFTbyTOHRqq/wUSDA==","signatures":[{"sig":"MEYCIQD0ziuMYkoQxfAsSgtdfGAw+BC5WI2rC7p6/Z0CXk3W5QIhANk7z7me8u1EFj4KAgYTnZmvk8HEf0jwbyyQ2gO+JDU5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e61dc0a16a5b376c778548e5a6cecb56f5c5704d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7a3942e7a.0","@material/base":"15.0.0-canary.7a3942e7a.0","@material/shape":"15.0.0-canary.7a3942e7a.0","@material/theme":"15.0.0-canary.7a3942e7a.0","@material/floating-label":"15.0.0-canary.7a3942e7a.0","@material/feature-targeting":"15.0.0-canary.7a3942e7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.7a3942e7a.0_1693507190340_0.3299130856651198","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/notched-outline","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.54feb3020.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3398b598777c34ee9aacbd2ffacfe4b5ee676ea","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.54feb3020.0.tgz","fileCount":35,"integrity":"sha512-F6MIFLwNVJX8uo0vbYKhSWbFqURGQ/yAhOMRl1pJ6W7NYKi5hRP/P1GhTAHujQF6lv7QxfUYcyOz975CaW8/Xg==","signatures":[{"sig":"MEQCIFocyi3KSPPZQtrzXe9R/uwm45E/r29clUYxn1aQASGYAiBc7+FHdMI2DRt2VlA6V36Q2R31uAUtGx5ZtG3IwNw9pQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"5dc5cb94463af21f898ddd58cc4d9e4fbf803222","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.54feb3020.0","@material/base":"15.0.0-canary.54feb3020.0","@material/shape":"15.0.0-canary.54feb3020.0","@material/theme":"15.0.0-canary.54feb3020.0","@material/floating-label":"15.0.0-canary.54feb3020.0","@material/feature-targeting":"15.0.0-canary.54feb3020.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.54feb3020.0_1694466309956_0.12541438919539805","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/notched-outline","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.6cda3ce8d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c7784160efaa87fc8603344cc89dcebb6c6f629","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":35,"integrity":"sha512-ZyGFWlxu7MYzNMU1rJX/1pel7/OrLgcKyCD1kFlCkCiDddGoKrpMK/CvrfPNQ88stJDVO5JHEmJXv/s5ss8DfA==","signatures":[{"sig":"MEUCIDRd9MIAuF1PAckL6W/bKaiEqvd/ZZh3eZ3/TB49BlxwAiEAgBV/PhbIZdoWD3n+5AOU5AgyDZ0u0nNq45e+FFJU07g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"adb36c6339e7bf37fe1e8ca96526a9673ca602e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6cda3ce8d.0","@material/base":"15.0.0-canary.6cda3ce8d.0","@material/shape":"15.0.0-canary.6cda3ce8d.0","@material/theme":"15.0.0-canary.6cda3ce8d.0","@material/floating-label":"15.0.0-canary.6cda3ce8d.0","@material/feature-targeting":"15.0.0-canary.6cda3ce8d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.6cda3ce8d.0_1694483103873_0.8046484409718431","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/notched-outline","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.205b20b36.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"288d139c96fb4252d323c6e1bfbdfc16deeddc90","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.205b20b36.0.tgz","fileCount":35,"integrity":"sha512-/rHeyeMvCkZwcQ94WyvM1lXOOg2lAkFLz9DIDz+iABuR8qfLlx6ZqhpXcszoXlMiEqZxwkzZpI1XQ6raDYI46A==","signatures":[{"sig":"MEYCIQDByVv1N6d5CE+J7buEYmoopFKpXF7XJWmKmbMNgme9tQIhAO0AUuAOwVz82/8KkCC5bWMTVVoTPaMaj5MhNM9nN2Pw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"00fdcf619c34c502844acb0f2485e99595aa138d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.205b20b36.0","@material/base":"15.0.0-canary.205b20b36.0","@material/shape":"15.0.0-canary.205b20b36.0","@material/theme":"15.0.0-canary.205b20b36.0","@material/floating-label":"15.0.0-canary.205b20b36.0","@material/feature-targeting":"15.0.0-canary.205b20b36.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.205b20b36.0_1694625437517_0.40816571354911213","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/notched-outline","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.22bf82024.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8f095515e8245cda6687bcbb67747c4430bbbc7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.22bf82024.0.tgz","fileCount":35,"integrity":"sha512-EPkpeJZwhSYflDS32yL7nKsKs5T2ntuMlUO0XIWqgnh95zJIFPusVZyFiVcSMeaQfKDrVIIUWv6zvdpWKI5K9Q==","signatures":[{"sig":"MEQCIBj4wZZFXw6xI81KAhpUi+DKR7ShFL9ilw7YhC7t5mJVAiArj6i6Ske9L+pinFGZ9W/Tp99v3+UZjaQDbiJFNeCzmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557542},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"eda4fad2a8a727b69db60b828bd92df7a8956143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.22bf82024.0","@material/base":"15.0.0-canary.22bf82024.0","@material/shape":"15.0.0-canary.22bf82024.0","@material/theme":"15.0.0-canary.22bf82024.0","@material/floating-label":"15.0.0-canary.22bf82024.0","@material/feature-targeting":"15.0.0-canary.22bf82024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.22bf82024.0_1695028316182_0.0720733527797992","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a246a4439.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d183b37014a3aacf961ee9630848e3b9a530a06","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a246a4439.0.tgz","fileCount":35,"integrity":"sha512-zmRZHJ+5cOWsBatRyK50wuht78olXySyKOJIIEmy8lxSMZefI1764u0mr8tS1KYF8vSAl5cUlwCC3/2Njz1FPg==","signatures":[{"sig":"MEYCIQDf7dIIb92hoTSyp0Dk7GQxyy7SbSokoWMmlhvQ1itGrAIhAI1qXDTFJ0cXaGbKNy8bvSyzeOaJWnGA1AYJ0X8cMSwZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557610},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"40201df8b7e53b61aead4acdfa34b48fb1d155b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a246a4439.0","@material/base":"15.0.0-canary.a246a4439.0","@material/shape":"15.0.0-canary.a246a4439.0","@material/theme":"15.0.0-canary.a246a4439.0","@material/floating-label":"15.0.0-canary.a246a4439.0","@material/feature-targeting":"15.0.0-canary.a246a4439.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a246a4439.0_1695059162094_0.6863400434385307","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/notched-outline","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.d153db62b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68c9446b3193bad4e1ea5390ed107713642aac3c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.d153db62b.0.tgz","fileCount":35,"integrity":"sha512-d+VJ2gfNVWpQNegiTAZttebnO7fRuyVA92pw+/fkhL6QJS80NfysBBXsY5eHZhNoFlsqJOTXGzIEhkN4okHIoA==","signatures":[{"sig":"MEUCIQDyzJx3aQtK5RS0vAbxNfRwSDh1rwjGAAUU8mbltvjwUQIgN3hDWPr9DY0xH+9hIN7KjN9rwQ9Yw+etG6lBApj09RM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557610},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4ca05c144c691cd06cd5926fe0bc54818e462202","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d153db62b.0","@material/base":"15.0.0-canary.d153db62b.0","@material/shape":"15.0.0-canary.d153db62b.0","@material/theme":"15.0.0-canary.d153db62b.0","@material/floating-label":"15.0.0-canary.d153db62b.0","@material/feature-targeting":"15.0.0-canary.d153db62b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.d153db62b.0_1695150906262_0.3448117703635454","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/notched-outline","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.2528c1c3b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7060169b41ff7364e4048e664c33de04483f05c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.2528c1c3b.0.tgz","fileCount":35,"integrity":"sha512-2IeOhY0FLGLT8IS9pBZOl7XET+zik3C6vj/TRVE9TT8jTwQae/wx4WFcFsVMa9z/EVXxquACSFFuT8dreCd9JA==","signatures":[{"sig":"MEUCICIJamfzUs1wfKW9q+18HQwPLM7nHEaWkEG9kLUXkrp6AiEAlhtH58xsOG3BpF9rzwcldkYayoJCGxRTFfqXou1QfD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557610},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"98b5b57bd5356f48610a254e8c4acff388d5fb7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2528c1c3b.0","@material/base":"15.0.0-canary.2528c1c3b.0","@material/shape":"15.0.0-canary.2528c1c3b.0","@material/theme":"15.0.0-canary.2528c1c3b.0","@material/floating-label":"15.0.0-canary.2528c1c3b.0","@material/feature-targeting":"15.0.0-canary.2528c1c3b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.2528c1c3b.0_1695233185263_0.3734471867099365","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/notched-outline","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.1728a6dcf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b9e3041f6d03632c94296459100ef3d7a65c5ef","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.1728a6dcf.0.tgz","fileCount":35,"integrity":"sha512-tBc8EELYVcBxD6v6wswJZEeNkaVEuBkCta8E6bzh92LCyTQq6AdHV7ujrZVwjutroZHZ8cgFJBkVWFGuIwG/qw==","signatures":[{"sig":"MEUCIQDp8/9zOQhGSCTKZ4/T8eWfLbSfjQwTCshhguUjDEcorwIgWbWW6ik6kAKPkNI05tt3Z0XYvzGBsd7hIsvmsRLJL8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557610},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"3828aedf4f344a948780a69956ca4f069cef3daa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1728a6dcf.0","@material/base":"15.0.0-canary.1728a6dcf.0","@material/shape":"15.0.0-canary.1728a6dcf.0","@material/theme":"15.0.0-canary.1728a6dcf.0","@material/floating-label":"15.0.0-canary.1728a6dcf.0","@material/feature-targeting":"15.0.0-canary.1728a6dcf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.1728a6dcf.0_1695691390490_0.12394417085588016","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/notched-outline","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.ebb636f3d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b885434725131e1fbad78be4e728d019ef9c0ac","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.ebb636f3d.0.tgz","fileCount":35,"integrity":"sha512-d3o688tHLKofi1x/DDglEKktxglFHqTvJEcK5GB8mKFgYnsJU2QHXXXv1+jjyfkUtRdKxVF7x9HUu+NBZHbgEw==","signatures":[{"sig":"MEUCIH5djxEaWqIfcfh6Wjg/Pp6FFA5RmT4MgFYCfs7lBTQMAiEAi05kkCMVdW/WldT/RsiwW2E1TkvlvoT54nxMpr5jWlk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557965},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"6f62607a00dd885ebbe422b247dc4acc1ded22cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ebb636f3d.0","@material/base":"15.0.0-canary.ebb636f3d.0","@material/shape":"15.0.0-canary.ebb636f3d.0","@material/theme":"15.0.0-canary.ebb636f3d.0","@material/floating-label":"15.0.0-canary.ebb636f3d.0","@material/feature-targeting":"15.0.0-canary.ebb636f3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.ebb636f3d.0_1696016662794_0.27687820362436977","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/notched-outline","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.c0d21ecc9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddff1355dd342babb9e503c0bd07155238e220e4","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":35,"integrity":"sha512-44ReiPqmf70eIMeAeIGknyDt29P7Q5jr2LIU6TODioyg1zv0ewiUP3znZTEWXMYEgF5+xunVtlTDxZtZdV2eYg==","signatures":[{"sig":"MEUCICjm/Qt4NjLcJ1Vl3j4XoDVfYcV3K0r+XzNFwLwsP9sHAiEAwDY9JUso7RuPup1CbxeztU2you5UKIu60fwPYmeXcy0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0a932ea790a12d359ce4ec7c5c4c7aec7edf565d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c0d21ecc9.0","@material/base":"15.0.0-canary.c0d21ecc9.0","@material/shape":"15.0.0-canary.c0d21ecc9.0","@material/theme":"15.0.0-canary.c0d21ecc9.0","@material/floating-label":"15.0.0-canary.c0d21ecc9.0","@material/feature-targeting":"15.0.0-canary.c0d21ecc9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.c0d21ecc9.0_1696880204831_0.6576272289838241","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/notched-outline","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.127a44b28.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f8af1fe5cad889bd8de63115a502906064ad4de","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.127a44b28.0.tgz","fileCount":35,"integrity":"sha512-CUT/5+NdFH8BqE7sTR4b0yJ5rawrKHba6odTFUWJ03XRrOn5fFX6iqi54Bg9J+MwZQEyERR3xBnzn9a4idnvhQ==","signatures":[{"sig":"MEQCIGbf1OEP9vy35/0k9DDPWPp7sGdH7/WIa8A37IXl5h8oAiAc0XcQFW4BAXpZrjTtBAVWkiYWqIOUpS4W8HWuhYu2Ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"88d1fc2c5354e751ea3ab567d26bb1886ee152d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.127a44b28.0","@material/base":"15.0.0-canary.127a44b28.0","@material/shape":"15.0.0-canary.127a44b28.0","@material/theme":"15.0.0-canary.127a44b28.0","@material/floating-label":"15.0.0-canary.127a44b28.0","@material/feature-targeting":"15.0.0-canary.127a44b28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.127a44b28.0_1697140808006_0.7762593022920661","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/notched-outline","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.0ad128337.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a2eb0c4a9ae06fd0f654b37856cd9e44901c08f","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.0ad128337.0.tgz","fileCount":35,"integrity":"sha512-IjkM6Nmy8ESWcCK5jXRspgu39+Qk980uVI4GelPlm0uoAtQm/I2bgtYHTFl2VrdTP62OeHJ8vCtmIA5tA8hFBw==","signatures":[{"sig":"MEUCIEaGz6JmM65j6GhaPvKM8o2ChmlcEen398b1DJYV0YDFAiEA9KW3wgz4Eb5XnaDXhPGpet8qYjnnxiY2TdsB6vtMMhw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"bb76f531b61a52aae34c7a1efa45824fd32e49f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0ad128337.0","@material/base":"15.0.0-canary.0ad128337.0","@material/shape":"15.0.0-canary.0ad128337.0","@material/theme":"15.0.0-canary.0ad128337.0","@material/floating-label":"15.0.0-canary.0ad128337.0","@material/feature-targeting":"15.0.0-canary.0ad128337.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.0ad128337.0_1697741509736_0.957950091953889","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/notched-outline","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.9cec94097.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d72e01c374a873d48ce2fc5f294d453e2d1e9ba6","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.9cec94097.0.tgz","fileCount":35,"integrity":"sha512-1UcIocTvdXNjzCfu9gTVPw2Vz1N1NYJhiBRaDn7NKTl4Iu8pVyUotDRFC6kbptlWZIoVB29tjd4TbEKpht5D+g==","signatures":[{"sig":"MEQCIEwwf8NzdepYzO//zr7vEPCGi3Ltq6Kl9fqNa7ytyLpGAiArvdxgX9rMOYzvUa6LlH281jlFyLiMraLaCgRkMln+pg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1a8019402daf97efb72456551503dfb3fa31466b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9cec94097.0","@material/base":"15.0.0-canary.9cec94097.0","@material/shape":"15.0.0-canary.9cec94097.0","@material/theme":"15.0.0-canary.9cec94097.0","@material/floating-label":"15.0.0-canary.9cec94097.0","@material/feature-targeting":"15.0.0-canary.9cec94097.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.9cec94097.0_1697756958118_0.2932283394286601","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/notched-outline","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.c51a0bbcc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f5b26300563f562ea83f106a9492507c822699b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":35,"integrity":"sha512-6PhT5d2kpqby19qQ4roo/vQlbB+/hoWvjN9M3jiwkKEpqD/NffFZgVkeBF8mBAgIyHpPuZxlKzy94+RqA34a0Q==","signatures":[{"sig":"MEQCIHUTgmLDVzFpB4RFL0y+boO9Ih/v9iswSAV6KmSYYWsYAiByTW7k6O4G41GBFl+271tue9plGCEGPwiFfr2nbVYi3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e65c7fe6dcc6d6069f00d4d2f8c55e61710d046b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c51a0bbcc.0","@material/base":"15.0.0-canary.c51a0bbcc.0","@material/shape":"15.0.0-canary.c51a0bbcc.0","@material/theme":"15.0.0-canary.c51a0bbcc.0","@material/floating-label":"15.0.0-canary.c51a0bbcc.0","@material/feature-targeting":"15.0.0-canary.c51a0bbcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.c51a0bbcc.0_1700081911558_0.9153466088302147","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/notched-outline","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.d76666ad4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5048cb1d9b04b04aa4dd33e3942abd8b258d38e","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.d76666ad4.0.tgz","fileCount":35,"integrity":"sha512-8+rDcbf5T4dA0ATovTEclFcZF/jzz4RnwJvsxzq6qcR7XcHfdzjIo9Yi7CWeGsaEwfNN3/Q9mXkl3UHki7uH4Q==","signatures":[{"sig":"MEQCIBIZSsy5zv+A79MqcFEsGWliG7+Xgned3d2b/0ynDg11AiBdFAzbZO8vyWJZ0AqOejGF/xBe4RAbMCbUmpoRN+meLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"8fc3640e389fda0098b42091a9a1ab8653fc6470","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d76666ad4.0","@material/base":"15.0.0-canary.d76666ad4.0","@material/shape":"15.0.0-canary.d76666ad4.0","@material/theme":"15.0.0-canary.d76666ad4.0","@material/floating-label":"15.0.0-canary.d76666ad4.0","@material/feature-targeting":"15.0.0-canary.d76666ad4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.d76666ad4.0_1701123176514_0.17503430691132382","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/notched-outline","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.8656bf0e0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5aa5d0c4849ab8630fa933299f86ba7830e7d071","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.8656bf0e0.0.tgz","fileCount":35,"integrity":"sha512-AN7mKdrS6szVkc32Jc4siJoPXSQhja6cBG6XDkU8Qm0vbAN9sXKJf4SgFufz7tlyZ+8UwjVSBrAKEWB3Swzwsw==","signatures":[{"sig":"MEYCIQCkQJf8YLBKGhHv0x0eNkIKKC8Ik8sITcj3AECdpVAitwIhAIP/gM2rOuS7Hj9PVzFnStlcnQ2ifpTOj6GcsFF7nJl9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"36cab37e468233da3044a10c1df388f634163cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8656bf0e0.0","@material/base":"15.0.0-canary.8656bf0e0.0","@material/shape":"15.0.0-canary.8656bf0e0.0","@material/theme":"15.0.0-canary.8656bf0e0.0","@material/floating-label":"15.0.0-canary.8656bf0e0.0","@material/feature-targeting":"15.0.0-canary.8656bf0e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.8656bf0e0.0_1702415907217_0.33611034908764026","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/notched-outline","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.7f224ddd4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d13391d4e211c077980e2fed81d81cc81a6a84fa","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.7f224ddd4.0.tgz","fileCount":35,"integrity":"sha512-Yg2usuKB2DKlKIBISbie9BFsOVuffF71xjbxPbybvqemxqUBd+bD5/t6H1fLE+F8/NCu5JMigho4ewUU+0RCiw==","signatures":[{"sig":"MEUCIB84PYGIAAcDBVKfXr8dj/HbfesfjvsldCeeLJawkL7CAiEAjgbfqMJ2xAvvDtLcxJbynE3RFO37aOT9Dmsm9qUYaxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ff8ff3ce455054f1532d1ae0983f40634a524886","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7f224ddd4.0","@material/base":"15.0.0-canary.7f224ddd4.0","@material/shape":"15.0.0-canary.7f224ddd4.0","@material/theme":"15.0.0-canary.7f224ddd4.0","@material/floating-label":"15.0.0-canary.7f224ddd4.0","@material/feature-targeting":"15.0.0-canary.7f224ddd4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.7f224ddd4.0_1703743738191_0.3733469052250693","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/notched-outline","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.a0b8a90c0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74f5940ecdac8c83c32c419c5468c3648c1c423c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":35,"integrity":"sha512-k07Ee0dLqBI7a+CPWaAzsy6UGHjY5yJnfreKW+VXzSWdsuiaX2HZmvxsULwPnzLnZmiuYS7ycuoTCxzdJ5VPGA==","signatures":[{"sig":"MEUCIQDWXE2A5Oa7ff8D2zQjXGoLhTpa+ot+1PJCBcp2VgkdqgIgOOtMCu1L0ZdJDD5mZrBiR3MTJuhBCQFsqW/V1jHh6i8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"85d5965379b080c9f852ecbbd95031e363636dfd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a0b8a90c0.0","@material/base":"15.0.0-canary.a0b8a90c0.0","@material/shape":"15.0.0-canary.a0b8a90c0.0","@material/theme":"15.0.0-canary.a0b8a90c0.0","@material/floating-label":"15.0.0-canary.a0b8a90c0.0","@material/feature-targeting":"15.0.0-canary.a0b8a90c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.a0b8a90c0.0_1707333559892_0.301643400183623","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/notched-outline","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.e50b478eb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd3687fdbcd97878ae061230ef91d9e4ba6973d2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.e50b478eb.0.tgz","fileCount":35,"integrity":"sha512-B6wCco8GTd3Tkp9NsiPorFJov6POhhKOKkBmMX3tqsDl1suKRI85MnCwX9DLwSn7vZLc5PNbTm5hDW7QTy8FqQ==","signatures":[{"sig":"MEQCIDq8737LhbYz2aMfoQ64+ctG1yFogAh5GpixNXbH2Ek5AiA2vwSEaOkFTA2VIWTBHkaXtu0EGDOdH3WJBmd06u66rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"4691455eaee76f99b18be70913c9fefb7cf3c2ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e50b478eb.0","@material/base":"15.0.0-canary.e50b478eb.0","@material/shape":"15.0.0-canary.e50b478eb.0","@material/theme":"15.0.0-canary.e50b478eb.0","@material/floating-label":"15.0.0-canary.e50b478eb.0","@material/feature-targeting":"15.0.0-canary.e50b478eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.e50b478eb.0_1707415669068_0.913898624471291","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/notched-outline","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.c43b3438b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdef4a590fa5ed4c7c686155ae53de5241168ef3","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.c43b3438b.0.tgz","fileCount":35,"integrity":"sha512-LkiUz3PMOJ3SukIdQVYV/Yi94M2glMsPk4gHaKr24af1bICKHJlNx54tmBHGgmxYM/BwBLDbfVh7K4+GDYwT6g==","signatures":[{"sig":"MEQCIFn10tCaljzv2hCcmMk+ud+hhkQMXw2MeJStoLU/PFjyAiBaz97W9+117/CyEVGhEidpUwpZWkZpZtfQh6jV3bUSoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"e69adcf897de97b302f026f07bbc2571b1a488ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c43b3438b.0","@material/base":"15.0.0-canary.c43b3438b.0","@material/shape":"15.0.0-canary.c43b3438b.0","@material/theme":"15.0.0-canary.c43b3438b.0","@material/floating-label":"15.0.0-canary.c43b3438b.0","@material/feature-targeting":"15.0.0-canary.c43b3438b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.c43b3438b.0_1708719445165_0.7695886767259097","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/notched-outline","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.819498d8c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3935ec88b0e6c5d47f94046bc07251ee3f2c11e7","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.819498d8c.0.tgz","fileCount":35,"integrity":"sha512-m5Qkp8XYUGTeCWUgNwe3RWcm+Yl0sRkphY/pJ93YKvAraOj2aSkR8Sy+G6Gl++t2KMjVUDSlGIjhwVAS6WokNg==","signatures":[{"sig":"MEMCIGlMVoApgqBlGo/RSDNYkFdSycZGto8kCh8k47Lu6UN3Ah8pTd9PbxJnHv2X23SKN8az8JdPxhh1wy0f4SKqy90a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"886876a8252aacefe1942b13ba9251af9204bcdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.819498d8c.0","@material/base":"15.0.0-canary.819498d8c.0","@material/shape":"15.0.0-canary.819498d8c.0","@material/theme":"15.0.0-canary.819498d8c.0","@material/floating-label":"15.0.0-canary.819498d8c.0","@material/feature-targeting":"15.0.0-canary.819498d8c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.819498d8c.0_1710515688188_0.7432578115594348","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/notched-outline","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.453a6248a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0571f6e3ff1e006ec957e796921e2907f8127499","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.453a6248a.0.tgz","fileCount":35,"integrity":"sha512-sbjnwwTZlv3p6ffHOonPzRWrEJAZmLhOt3AG0+yKoFCT+GwhYIKTrkKwNns/RDSQTZyIa7MNp8RhrfowYvn6ww==","signatures":[{"sig":"MEUCID4jBrcGGxLiRABVtaPWoewOkboIcXrks1wcaxr6LDgBAiEA5dDa0SvEhfVzIEfWK6lkHNti45Skp56YZQV6OZ1d9rg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1eea6443d63f2bc64fe8f6f86664b54266c41244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.453a6248a.0","@material/base":"15.0.0-canary.453a6248a.0","@material/shape":"15.0.0-canary.453a6248a.0","@material/theme":"15.0.0-canary.453a6248a.0","@material/floating-label":"15.0.0-canary.453a6248a.0","@material/feature-targeting":"15.0.0-canary.453a6248a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.453a6248a.0_1711386805459_0.7890352454810059","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/notched-outline","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.68edc03c6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5dc5e56c99ca73a69346647aeecb29efa37d2717","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.68edc03c6.0.tgz","fileCount":35,"integrity":"sha512-pgBkdrG+hQ4Qs9yPJ2LR5/eUvYRtAaQaHTLT+kICMZ3HxgBkUs50DG2VBq34Ils8Aznmgd1mcpI5di+NjZnK+g==","signatures":[{"sig":"MEQCIGN8gq3YynJm7zI0eI7gDtSuboZm0f0rISqt3iKOr3/HAiBgbUXJ0ZbM8KQTd7H766qR3HHIT0WrxnhAI9KXBieLcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"04046ad51f4d581f93e797ec929d219422dd0235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.68edc03c6.0","@material/base":"15.0.0-canary.68edc03c6.0","@material/shape":"15.0.0-canary.68edc03c6.0","@material/theme":"15.0.0-canary.68edc03c6.0","@material/floating-label":"15.0.0-canary.68edc03c6.0","@material/feature-targeting":"15.0.0-canary.68edc03c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.68edc03c6.0_1712603146148_0.26005011316107796","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/notched-outline","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.5bebc0064.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9500d24bbb235c0d123e9f7c601dea04f6a3d4d2","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.5bebc0064.0.tgz","fileCount":35,"integrity":"sha512-ggv2+sBtP/dtXD8ySiDJbjphesTW6rSUR3dIO3IIvfs2j8jAtU2T8P/i7dT5KX/yYYdgyl2y9mXI1Wo5cxiayg==","signatures":[{"sig":"MEUCIF/o6UkiE5EbfWH+7hFy+gpviSnJNAlpatIR+mhAPjrsAiEAjO8erV6wdxUcfK9UlH6MtFeLOyZAGrNcKb9n9ute3mo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"ff39e65972de013a29dd14429e111139bc616366","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5bebc0064.0","@material/base":"15.0.0-canary.5bebc0064.0","@material/shape":"15.0.0-canary.5bebc0064.0","@material/theme":"15.0.0-canary.5bebc0064.0","@material/floating-label":"15.0.0-canary.5bebc0064.0","@material/feature-targeting":"15.0.0-canary.5bebc0064.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.5bebc0064.0_1712871633354_0.2126224901553584","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/notched-outline","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.311f29a60.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66546f351a32e2d7825efa8c1f2ae8498c1e9d98","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.311f29a60.0.tgz","fileCount":35,"integrity":"sha512-GdWt4nJu+20PbOEnGeu7xfH26dOvE+nB4kewq0W+9srsF7RknFVOi63ZXny8jZ1xkbSrxKxgwAuHgq7phFDHpg==","signatures":[{"sig":"MEYCIQCiPX23nqUexDpXgIkAaRfPAeSJDGOLBSvYSPsQ1SbFfgIhANxBMdxlk+hTC+QNnFzI3XLFuP+AmLbSC/4KudLRoK4i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"7bc0264e163e842f0f96c1dbf7a468c022db1497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.311f29a60.0","@material/base":"15.0.0-canary.311f29a60.0","@material/shape":"15.0.0-canary.311f29a60.0","@material/theme":"15.0.0-canary.311f29a60.0","@material/floating-label":"15.0.0-canary.311f29a60.0","@material/feature-targeting":"15.0.0-canary.311f29a60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.311f29a60.0_1713895180789_0.5411548577753487","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/notched-outline","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.65c10a622.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8271b278eec573e2817016a865fe941a588a671b","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.65c10a622.0.tgz","fileCount":35,"integrity":"sha512-/gRjLToWobUHgTSEwLu1uLN5mMQfSi081U0Co0zZP5FVm/LCc7ia92kd73zTKqR4VaMVTICqW9LBDc/NW+av0g==","signatures":[{"sig":"MEUCIDFHpOp/mhTCot9Ut38A6iic+N7AolyltZwzryMHkrBbAiEAvmuDRcxqb4anxmb149hLxDdK03kf/DtiTpw5Wmk+7s4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"1f3126503c812250084b65b6edbb26f25ef4a174","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.65c10a622.0","@material/base":"15.0.0-canary.65c10a622.0","@material/shape":"15.0.0-canary.65c10a622.0","@material/theme":"15.0.0-canary.65c10a622.0","@material/floating-label":"15.0.0-canary.65c10a622.0","@material/feature-targeting":"15.0.0-canary.65c10a622.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.65c10a622.0_1714070920078_0.8447911293997352","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/notched-outline","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.4b35cb7d0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6aa0b9945f5eea09885132cc11ca0a26dd10a473","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":35,"integrity":"sha512-MOooaWhmbUoed6bTnfGs02+eq/DAKEKUxOAkc+3Q7Z00MTJfGK52ILOX3ASFDQStRiZgJk/cO/qihgoyI6oF7Q==","signatures":[{"sig":"MEUCIBATBhmuaq44F8hVL2zayNZ5sc5Du86yap4gc/8JIhuLAiEAwfjPkOClqKfYY3xK+64WQsADFdL8Y/jMEAOtsNPRTLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"cba29aaa21c1bc2b1f1a02e5ddfa4a5110d9ef63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4b35cb7d0.0","@material/base":"15.0.0-canary.4b35cb7d0.0","@material/shape":"15.0.0-canary.4b35cb7d0.0","@material/theme":"15.0.0-canary.4b35cb7d0.0","@material/floating-label":"15.0.0-canary.4b35cb7d0.0","@material/feature-targeting":"15.0.0-canary.4b35cb7d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.4b35cb7d0.0_1714651365631_0.5150402155398779","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/notched-outline","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.f80ac92b0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c39913fbe5b1d3bdd3b1a1fd5a032850b4d45878","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.f80ac92b0.0.tgz","fileCount":35,"integrity":"sha512-3YDtZtXnLPWbV1KpixQXvEPpQJ64AtAMPLUBa6VFYonhHBOq27Cv0gP/gx6gxzXSrFpGI/fvln79MuSyb4f6Rw==","signatures":[{"sig":"MEQCIDXPUycMax4GG2Swvcq+kML7XV9JM563iOXXqFgAdYJJAiARojB2MAlEkQZM+Cnu4YgzFFYUwSRJG27PtAZ24DO2+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"514a3afe9efc5bcebf1ace1e335357184ee1a9e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f80ac92b0.0","@material/base":"15.0.0-canary.f80ac92b0.0","@material/shape":"15.0.0-canary.f80ac92b0.0","@material/theme":"15.0.0-canary.f80ac92b0.0","@material/floating-label":"15.0.0-canary.f80ac92b0.0","@material/feature-targeting":"15.0.0-canary.f80ac92b0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.f80ac92b0.0_1714651978621_0.21708801398634314","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/notched-outline","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.2f5b899bc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b53e93ce0e7f50a542e5bc811d7102a887d17362","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.2f5b899bc.0.tgz","fileCount":35,"integrity":"sha512-Z0IUZAnxFpGnRrFqpSMYKtCHLQZWA5T5QvQz2blsbqkY/clJMgVn3bovqBCWq6afJ6IdYJ8reiCm20BuRm1DNA==","signatures":[{"sig":"MEUCIQDa/kUpvjNIxFpFz10bXKpyxd+YgWTfoXmY3bSwc8q0kwIgbFulisxKM1iYgqydmiT4JTAlzZ7/fwjtId0VchHijII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"751553ca74ad43074c963487257a8862de87844b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2f5b899bc.0","@material/base":"15.0.0-canary.2f5b899bc.0","@material/shape":"15.0.0-canary.2f5b899bc.0","@material/theme":"15.0.0-canary.2f5b899bc.0","@material/floating-label":"15.0.0-canary.2f5b899bc.0","@material/feature-targeting":"15.0.0-canary.2f5b899bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.2f5b899bc.0_1716213304073_0.10151383368403133","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/notched-outline","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","_id":"@material/notched-outline@15.0.0-canary.cfec83c74.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cd28a27e45f2c2024a504a6e83531a6b1a9820c","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.cfec83c74.0.tgz","fileCount":35,"integrity":"sha512-bv8dR1nv1iWWsSMg3Lki/hlISPQztEqLvfe6HmSL6uFdOTfxy68xunIKFlIw6X6Wvdap4e9ak288vu8DBZQaaw==","signatures":[{"sig":"MEUCIBK15TXUj5vCUhtHpB9ecMb+SQhkDVFgrvyPuhDO8MvUAiEAvo1ZgPgBOOgQeEKndDv+y1K7IkadMw9fCp9qs6iuSuE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563100},"main":"dist/mdc.notchedOutline.js","module":"index.js","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","gitHead":"0ec8b129344ebbe45f00b6ad892b682b054ea892","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web notched-outline component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cfec83c74.0","@material/base":"15.0.0-canary.cfec83c74.0","@material/shape":"15.0.0-canary.cfec83c74.0","@material/theme":"15.0.0-canary.cfec83c74.0","@material/floating-label":"15.0.0-canary.cfec83c74.0","@material/feature-targeting":"15.0.0-canary.cfec83c74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/notched-outline_15.0.0-canary.cfec83c74.0_1716231393271_0.15604913904914652","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/notched-outline","description":"The Material Components for the web notched-outline component","version":"15.0.0-canary.423edc3dc.0","license":"MIT","keywords":["material components","material design","notchedoutline","notched outline"],"main":"dist/mdc.notchedOutline.js","module":"index.js","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-notched-outline"},"publishConfig":{"access":"public"},"dependencies":{"@material/base":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/floating-label":"15.0.0-canary.423edc3dc.0","@material/rtl":"15.0.0-canary.423edc3dc.0","@material/shape":"15.0.0-canary.423edc3dc.0","@material/theme":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n \n Label\n \n \n\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline 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### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/notched-outline@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-Sn0vmYOT7C4eA6r58d8MPrCFG8UvnvxJbyyW85/Kac2MgdLc1vbLeL5Cw53ZdgWbPkGapAxpk//6u/1dJwTsUQ==","shasum":"90cba2b3d27dcc8b78f8c10dc19ab1fd08ede6f5","tarball":"https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.423edc3dc.0.tgz","fileCount":35,"unpackedSize":563100,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBOc7a9E2kGm3l4XT/LC2QyYdEl1kyLzXBveKJOX2/XyAiEAytO17aBcvmN7zOWtg6dgBm4miTGOCbFje/zcOGUn5MQ="}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/notched-outline_15.0.0-canary.423edc3dc.0_1719425514485_0.38599814298824"},"_hasShrinkwrap":false}},"time":{"created":"2018-03-19T16:40:06.799Z","modified":"2024-06-26T18:11:55.270Z","0.33.0":"2018-03-19T16:40:06.943Z","0.34.0":"2018-04-02T21:52:00.174Z","0.35.0":"2018-04-23T22:40:31.275Z","0.37.1":"2018-07-16T21:18:59.375Z","0.38.0":"2018-07-30T17:06:23.623Z","0.39.0-0":"2018-08-16T15:15:43.276Z","0.39.0":"2018-08-27T17:40:17.455Z","0.39.1":"2018-08-31T21:36:13.379Z","0.40.0":"2018-09-24T20:00:48.896Z","0.40.1":"2018-10-08T20:54:17.079Z","0.41.0":"2018-10-29T20:21:51.271Z","0.42.0":"2018-12-04T22:55:15.087Z","0.42.1":"2018-12-17T22:25:26.362Z","0.43.0":"2019-01-07T19:49:22.133Z","0.44.0":"2019-02-04T18:24:01.738Z","0.44.1":"2019-02-19T23:03:18.097Z","1.0.0-0":"2019-02-27T23:59:46.348Z","1.0.0-1":"2019-03-04T23:33:35.866Z","1.0.0":"2019-03-06T21:08:28.647Z","1.1.0":"2019-03-26T19:26:08.532Z","1.1.1":"2019-04-08T20:14:04.472Z","2.3.0":"2019-05-28T21:24:14.077Z","3.0.0-alpha.0":"2019-06-12T04:06:52.528Z","3.0.0-alpha.1":"2019-06-12T19:02:27.815Z","3.0.0":"2019-06-25T22:28:09.209Z","3.1.0-alpha.0":"2019-07-16T13:29:09.611Z","3.1.0":"2019-07-22T22:02:53.954Z","4.0.0-alpha.0":"2019-08-07T21:09:51.543Z","4.0.0-canary.0":"2019-09-05T04:38:07.056Z","4.0.0-canary.1":"2019-09-09T20:21:01.919Z","3.2.0":"2019-09-12T21:53:54.832Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:48.466Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:37.979Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:26.931Z","4.0.0-canary.199534d61.0":"2019-09-27T18:57:55.911Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:30.325Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:53.822Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:38.760Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:05:05.683Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:09:11.742Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:43.195Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:11:16.641Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:37.247Z","4.0.0-canary.01628efa.0":"2019-10-29T00:03:34.476Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:57:24.959Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:59:23.817Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:02:06.092Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:29:41.976Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:02:02.229Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:11:18.476Z","4.0.0":"2019-11-02T18:11:59.470Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:34:13.262Z","5.0.0-canary.58500806e.0":"2019-11-08T15:36:17.073Z","5.0.0-canary.66299b646.0":"2019-11-08T20:34:12.624Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:45.236Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:07:44.884Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:42:50.564Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:38:16.476Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:59:17.637Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:31:23.962Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:06:44.256Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:33:21.359Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:49:05.902Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:19:56.225Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:10:22.473Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:11:09.340Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:11:34.871Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:55:49.076Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:17:18.100Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:08:03.134Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:18:42.548Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:20:29.604Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:20:59.860Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:55:38.314Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:23:16.117Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:59:39.110Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:56:31.354Z","5.0.0-canary.50f110a6c.0":"2019-12-10T17:00:23.310Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:16:59.426Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:47:51.119Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T18:59:50.905Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:10:03.358Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:37:37.016Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:10:08.770Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:33:49.297Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:41:10.330Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:17:34.115Z","5.0.0-canary.391674a26.0":"2019-12-18T19:17:58.020Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:35:21.860Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:20:58.834Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:24:47.146Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:50:42.840Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:25:43.581Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:15:05.135Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:27:44.081Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:24:45.462Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:10:23.901Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:27:33.791Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:48:20.148Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:50:40.898Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:55:11.854Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:45:50.808Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:03:48.207Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:54:39.720Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:42:53.260Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:10:06.898Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:23:04.681Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:37:35.283Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:26:51.414Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:56:06.816Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T15:00:24.982Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:17:15.105Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:11:02.000Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:40:05.507Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:15:49.054Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:26:38.748Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:40:11.315Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:17:11.304Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:19:51.411Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:21:27.231Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:22:44.332Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:57:31.135Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:28:26.356Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:42:08.849Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:10:54.157Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:11:27.321Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:22:52.228Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:43:12.884Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:58:55.158Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:16:54.592Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:23:41.735Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:40:51.298Z","5.0.0-canary.1eb032637.0":"2020-01-08T23:00:45.606Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:01:26.752Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:10:51.716Z","5.0.0-canary.aab102017.0":"2020-01-10T00:12:53.663Z","5.0.0-canary.426913342.0":"2020-01-10T01:44:52.014Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:25:59.088Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:57:28.150Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:27:46.767Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:19:26.047Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:32:13.381Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:14:14.796Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:15:55.543Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:53:57.655Z","5.0.0-canary.60354c577.0":"2020-01-14T22:46:31.666Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:39:26.509Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:43:38.374Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:10:56.841Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:48:08.952Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:48:59.218Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:18:03.757Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:24:39.654Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:47:35.729Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:07:46.265Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:37:17.595Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:00:55.394Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:17:57.503Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:21:19.719Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:36:41.767Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:31:24.540Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:40:31.754Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:12:13.318Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:50:32.673Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:37:53.823Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:46:55.751Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:45:34.874Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:23:12.511Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:56:17.632Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:58:19.004Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:17:41.046Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:10:00.107Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:13:12.005Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:55:55.612Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:55:41.738Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:48:10.993Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:21:44.305Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:46:31.400Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:32:17.958Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:55:59.899Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:24:17.360Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:29:54.553Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:43:54.854Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:49:29.843Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:10:22.307Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:56:18.851Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:16:52.915Z","5.0.0-canary.45985457b.0":"2020-01-29T23:33:48.764Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:37:55.165Z","5.0.0-canary.181486643.0":"2020-01-30T20:56:46.040Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:23:49.336Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:03:36.588Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:10:52.775Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:13:11.187Z","5.0.0-canary.535398572.0":"2020-02-03T18:12:05.534Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:04:28.633Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:01:22.541Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:04:42.821Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:33:12.768Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:30:23.788Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:21:44.995Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:55:59.903Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T22:59:57.562Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:49:22.067Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:25:48.236Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:12:07.439Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:43:58.147Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:43:45.048Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:48:57.981Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:52:06.514Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:44:30.300Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:06:45.431Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:24:10.369Z","5.0.0":"2020-02-14T00:09:26.069Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:48:42.901Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:44:44.714Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:23:21.141Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:16:52.138Z","6.0.0-canary.765caef18.0":"2020-02-21T17:33:38.845Z","6.0.0-canary.949562303.0":"2020-02-21T20:38:34.517Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:58:47.038Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:01:29.870Z","5.1.0":"2020-02-25T21:38:53.422Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:39:29.927Z","6.0.0-canary.781434a92.0":"2020-02-25T23:28:45.324Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:04:45.788Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:12:55.750Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:11:20.266Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:27:23.164Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:44:52.448Z","6.0.0-canary.98b843417.0":"2020-03-05T18:31:45.026Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:23:09.451Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:48:00.918Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:23:04.547Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:03:26.966Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:37:57.521Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:59:21.860Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:06:09.831Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:34:04.737Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:26:21.698Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:38:50.419Z","6.0.0-canary.bec065920.0":"2020-03-12T20:21:04.503Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:21:25.563Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:01:55.960Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:48:42.894Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:35:40.604Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:36:35.707Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:54:12.588Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:59:54.131Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:16:00.288Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:44:24.703Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:48:01.236Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:19:08.089Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:05:44.828Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:57:13.061Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:20:16.176Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:57:06.485Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:56:48.787Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:10:19.991Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:14:49.855Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:04:53.036Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:25:32.061Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:37:35.843Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:42:36.658Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:33:17.204Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:30:42.571Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:48:06.131Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:23:57.279Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:47:20.986Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:32:00.902Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:53:32.455Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:34:57.386Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:06:49.359Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:11:10.513Z","6.0.0-canary.c02642273.0":"2020-04-15T16:18:20.111Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:44:08.686Z","6.0.0-canary.490fbdc09.0":"2020-04-16T06:00:32.745Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:27:43.854Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:20:03.260Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:55:21.013Z","6.0.0-canary.ca61b656f.0":"2020-04-16T20:00:56.548Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:33:44.187Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:42:12.295Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:03:45.326Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:22:20.331Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:18:48.428Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:59:16.432Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:56:55.382Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:21:11.289Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:15:52.013Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:19:24.323Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:43:07.351Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:08:12.739Z","7.0.0-canary.8540808be.0":"2020-04-23T17:27:05.079Z","6.0.0":"2020-04-23T17:27:40.026Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:46:37.402Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:22:04.803Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:06:54.660Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:19:40.557Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:44:44.929Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:33:14.730Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:08:14.690Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:18:16.671Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:44:58.735Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:30:33.521Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:28:47.892Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:33:55.692Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:43:03.041Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:26:44.304Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:23:37.264Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:36:41.538Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:48:24.287Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:19:59.680Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:31:52.531Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:34:59.813Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T17:00:14.039Z","7.0.0-canary.09f591967.0":"2020-05-05T21:05:22.505Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:10:29.794Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:08:44.443Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:56:01.444Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:19:36.703Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:50:18.677Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:39:18.667Z","7.0.0-canary.119e21426.0":"2020-05-08T20:23:12.089Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:08:22.552Z","7.0.0-canary.e84444387.0":"2020-05-08T21:32:27.032Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:14:07.850Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:30:19.940Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:33:35.879Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:28:10.276Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:25:57.776Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:19:16.945Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:48:16.715Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:43:41.816Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:52:31.668Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:54:34.333Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:45:12.799Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:18:57.253Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:51:38.915Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:10:18.774Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:39:10.046Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:38:02.278Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:51:29.229Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:03:37.862Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:13:41.099Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:42:07.545Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:02:59.141Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:14:45.940Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:19:05.533Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:20:41.222Z","7.0.0-canary.740860e78.0":"2020-05-21T17:27:34.440Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:29:42.207Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:30:05.063Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:32:39.024Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:33:57.985Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:49:00.056Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:22:02.148Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T21:00:28.463Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:04:52.853Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:29:34.950Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:33:03.541Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:33:50.747Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:47:29.587Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:46:21.292Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:08:27.342Z","7.0.0-canary.01de07011.0":"2020-05-26T19:53:25.342Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:36:20.537Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:14:35.405Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:55:42.419Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T19:00:24.613Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:17:14.167Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:21:43.478Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:30:59.785Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:39:13.979Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:37:57.833Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:52:06.408Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:56:17.056Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:51:11.433Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:16:04.725Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:05:58.087Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:41:34.424Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:26:29.085Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:45:17.002Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:49:59.702Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:49:41.329Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:27:03.059Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:03:37.943Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:24:26.118Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:53:23.597Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:47:43.746Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:04:01.149Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:58:59.642Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:10:03.406Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:13:41.361Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:15:25.142Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:15:29.463Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:05:35.118Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:45:18.095Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:43:00.395Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:58:30.843Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:54:54.034Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:27:08.107Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:17:18.831Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:40:23.786Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:47:23.371Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:09:13.124Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:31:33.144Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:50:05.928Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:22:10.045Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:16:27.066Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:05:06.208Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:17:11.043Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:22:10.338Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:28:35.067Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:49:02.592Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:11:40.570Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:20:46.471Z","7.0.0-canary.10b505785.0":"2020-06-19T20:22:11.566Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:38:23.416Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:40:38.967Z","7.0.0-canary.c20727498.0":"2020-06-19T20:43:32.222Z","7.0.0-canary.4e360ae94.0":"2020-06-19T21:00:13.236Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:02:38.676Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:03:49.193Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:29:00.296Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:31:06.813Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:32:08.806Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:34:49.768Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:24:31.916Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:15:25.449Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:18:06.642Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:26:02.944Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:54:11.204Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:58:16.229Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:30:09.011Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:29:04.443Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:34:44.150Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:42:53.860Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:49:01.882Z","7.0.0-canary.080965f39.0":"2020-06-23T15:18:19.683Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T16:00:49.184Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:25:48.472Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:48:45.618Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:01:15.167Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:03:46.271Z","7.0.0":"2020-06-23T19:11:49.808Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:12:37.389Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:41:58.035Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:56:40.514Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:32:26.148Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:57:39.363Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:54:03.823Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:39:25.286Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:02:31.254Z","8.0.0-canary.38197b443.0":"2020-06-25T21:23:19.490Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:39:32.159Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:17:33.235Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:49:00.099Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:24:23.740Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:16:05.294Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:31:34.920Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:52:56.975Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:06:31.364Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:15:21.165Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:47:56.795Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:57:03.029Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:27:59.724Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:39:46.293Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:42:19.629Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:49:12.743Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:16:43.791Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:44:59.853Z","8.0.0-canary.d850de590.0":"2020-07-09T18:06:18.487Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:36:02.851Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:37:17.703Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:52:36.466Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:21:26.446Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:13:15.882Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:43:36.552Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:08:05.995Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:35:08.233Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:21:03.655Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:11:29.753Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:13:51.504Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:15:53.208Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:35:21.829Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:10:13.131Z","8.0.0-canary.01db89053.0":"2020-07-16T16:40:33.088Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:20:52.622Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:56:31.336Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:51:02.474Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:48:01.392Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:24:14.601Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:34:38.205Z","8.0.0-canary.12a109680.0":"2020-07-22T23:04:20.414Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:53:49.841Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:50:36.575Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:48:01.990Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:48:16.674Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:59:40.813Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T21:00:37.777Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:24:36.677Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:24:52.987Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:44:38.596Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:11:35.698Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:57:41.713Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:14:14.948Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:07:34.095Z","8.0.0-canary.75553837c.0":"2020-07-27T15:13:28.251Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:38:59.399Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:48:02.698Z","8.0.0-canary.81dc33377.0":"2020-07-27T16:00:13.744Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:33:30.430Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:09:27.354Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:51:21.117Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:59:07.046Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:59:19.249Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:55:00.232Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:51:27.447Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:40:17.255Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:53:42.907Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:16:58.749Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:37:21.591Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:50:14.681Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:21:45.901Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:36:01.486Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:39:45.783Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:16:00.447Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:26:25.804Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:02:23.717Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:11:33.721Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:16:18.381Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:28:35.301Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:11:10.681Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:22:25.415Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:47:13.640Z","8.0.0-canary.005e86a9b.0":"2020-07-30T18:01:01.876Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:09:51.230Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:21:23.640Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:32:29.664Z","8.0.0-canary.f041a48c9.0":"2020-07-30T23:00:47.823Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:51:24.152Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:23:55.984Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:52:00.732Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:54:52.988Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:55:31.278Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:55:53.044Z","8.0.0-canary.72258f898.0":"2020-08-04T01:18:22.566Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:49:29.888Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:25:10.955Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:49:55.905Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:55:05.487Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:20:55.937Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:40:18.883Z","8.0.0-canary.08090126b.0":"2020-08-06T19:33:34.589Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:50:59.295Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:27:45.176Z","8.0.0-canary.96a640534.0":"2020-08-06T22:42:23.395Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:52:18.627Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:21:58.707Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:49:37.666Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:53:37.484Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:31:49.044Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:02:58.765Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:09:10.084Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:05:09.787Z","8.0.0-canary.760873445.0":"2020-08-12T21:44:12.695Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:54:15.013Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:01:44.024Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:29:38.839Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:13:23.409Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:30:03.886Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:51:25.245Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:18:39.028Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:52:03.562Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:17:11.100Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:30:59.523Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:23:25.869Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:39:27.193Z","8.0.0-canary.000d64815.0":"2020-08-17T17:05:18.400Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:32:56.128Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:37:50.518Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:43:02.475Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:24:56.537Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:22:02.588Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:34:04.296Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:38:40.693Z","8.0.0-canary.546277d32.0":"2020-08-20T16:45:03.126Z","8.0.0-canary.da72839f4.0":"2020-08-20T18:01:03.904Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:19:30.218Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:16:10.279Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:58:39.950Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:07:28.434Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:53:46.004Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:29:49.013Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:12:46.535Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:01:23.575Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:41:50.977Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:04:48.600Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:57:23.988Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:50:21.473Z","8.0.0-canary.911014711.0":"2020-08-27T16:09:07.915Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:56:55.254Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:57:27.406Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:58:14.946Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:13:51.884Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:17:00.940Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:11:33.863Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:50:53.150Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:56:35.782Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:11:25.152Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:01:13.643Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:33:45.564Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:55:28.314Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:52:54.235Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:59:51.181Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:26:52.668Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:44:16.099Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:11:32.860Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:18:52.853Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:44:11.221Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:15:16.797Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:47:24.033Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:33:24.799Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:37:03.820Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:52:26.555Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:25:46.654Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:55:22.061Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:11:13.667Z","8.0.0-canary.d71622574.0":"2020-10-09T16:32:56.059Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:55:07.340Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:47:37.489Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:57:53.282Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:16:49.382Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:18:45.875Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:05:29.776Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:09:29.939Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:52:46.263Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:32:55.193Z","8.0.0-canary.596e98424.0":"2020-10-28T16:05:00.138Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:13:30.578Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:46:17.504Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:14:03.768Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:42:23.053Z","8.0.0-canary.c61db90a5.0":"2020-10-28T19:01:16.531Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:33:53.449Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:01:24.080Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:06:07.228Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T23:00:36.963Z","8.0.0":"2020-11-02T23:00:49.030Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:22:34.481Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:29:20.780Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:38:20.903Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:10:29.497Z","9.0.0-canary.419e03572.0":"2020-11-04T01:34:14.765Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:46:58.339Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:06:29.839Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:57:42.777Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:17:07.645Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:45:54.301Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:21:59.944Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:51:12.217Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:46:55.942Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:18:25.967Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:26:15.155Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:28:58.551Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:59:18.896Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:45:09.451Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:35:58.259Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:27:19.123Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:53:31.470Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:56:25.363Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:19:34.538Z","9.0.0-canary.a41527604.0":"2020-11-19T20:01:23.842Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:57:10.108Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:48:43.608Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:10:05.206Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:17:02.283Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:32:12.178Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:35:32.512Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:41:32.834Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:52:28.661Z","9.0.0-canary.fd22355f7.0":"2020-11-30T23:00:45.652Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:58:07.370Z","9.0.0-canary.977585650.0":"2020-12-02T14:43:30.503Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:50:45.726Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:08:41.964Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:17:41.225Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:23:40.678Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:30:56.235Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:42:46.198Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T15:59:55.013Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:02:55.686Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:46:29.506Z","9.0.0-canary.832668d33.0":"2020-12-04T18:07:07.869Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:30:06.210Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:43:32.844Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:50:42.168Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:02:44.728Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:14:32.465Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:29:30.676Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:33:30.719Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:47:05.274Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:06:37.495Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:12:08.072Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:51:15.952Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:08:54.565Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:47:18.040Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:29:39.018Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:06:40.984Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:08:28.202Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:02:56.931Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:28:45.364Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:08:38.789Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:43:08.018Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:06:20.673Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:46:41.464Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:09:37.293Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:49:03.428Z","9.0.0":"2020-12-29T19:47:09.296Z","10.0.0-canary.776c18681.0":"2020-12-30T00:41:16.262Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:12:59.278Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:47:32.323Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:05:26.281Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:10:48.711Z","10.0.0-canary.365c69360.0":"2021-01-05T17:49:30.532Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:01:49.140Z","10.0.0-canary.766981c15.0":"2021-01-05T22:41:28.371Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:51:06.751Z","10.0.0-canary.968735356.0":"2021-01-06T15:52:06.994Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:45:20.672Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:27:35.491Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:35:24.136Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:20:59.652Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:52:47.178Z","10.0.0-canary.089de519c.0":"2021-01-08T22:21:46.094Z","10.0.0-canary.163119837.0":"2021-01-08T23:46:23.918Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:25:47.072Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:13:35.476Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:56:28.731Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:08:20.053Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:11:23.866Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:35:15.561Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:27:44.286Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:55:02.786Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:20:37.955Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:09:16.751Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:56:11.277Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:10:47.519Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:06:01.912Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:57:34.247Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:53:15.226Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:52:40.728Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:37:03.277Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:25:17.309Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:11:21.417Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:46:05.836Z","10.0.0-canary.623af861e.0":"2021-01-26T03:46:22.097Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:34:41.093Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:47:20.325Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:05:28.243Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:28:29.564Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:21:28.057Z","10.0.0-canary.994873795.0":"2021-01-27T14:52:22.614Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:03:35.996Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:33:46.334Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:05:03.913Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:04:51.667Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:15:54.807Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:21:40.172Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:50:36.422Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:44:22.335Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:19:39.841Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:35:17.454Z","10.0.0-canary.05f249666.0":"2021-02-04T17:51:30.939Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:44:32.357Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:36:07.841Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:01:49.380Z","10.0.0-canary.533092a90.0":"2021-02-05T03:47:53.590Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:18:52.877Z","10.0.0":"2021-02-05T16:20:10.745Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:43:21.417Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:32:50.038Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:06:05.250Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:05:03.636Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:35:59.694Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:18:42.649Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:01:43.461Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:42:28.545Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:53:55.441Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:18:12.313Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:08:06.899Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:43:03.201Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:32:09.116Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T16:00:37.915Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:32:12.113Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:13:00.101Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:17:28.756Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:11:13.977Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:26:15.868Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:59:19.449Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:45:58.782Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:36:14.896Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:06:46.095Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:39:28.437Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:24:40.095Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:43:55.506Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:28:43.835Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:38:12.468Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:14:16.707Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:37:52.195Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:47:00.285Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:01:50.783Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:50:41.553Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:47:01.769Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:31:47.087Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:15:25.424Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:34:22.498Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:35:40.792Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:36:07.385Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:51:48.042Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:16:49.792Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:49:28.405Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:23:43.440Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:38:17.876Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:09:09.172Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:40:07.801Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:54:19.980Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:22:15.459Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:33:20.173Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:25:19.268Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:43:16.505Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:02:12.018Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:41:14.973Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:50:41.755Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:46:52.154Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:41:02.952Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:45:14.222Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:28:37.852Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:53:28.686Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:58:33.623Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:26:10.938Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:50:58.790Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:04:05.626Z","11.0.0-canary.81911b707.0":"2021-03-11T18:24:24.207Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:37:55.008Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:02:35.509Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:10:09.273Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:34:26.572Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:41:39.810Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:45:23.030Z","11.0.0-canary.73a227194.0":"2021-03-12T00:25:14.674Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:04:13.413Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:36:07.821Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:21:13.765Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:48:58.700Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:13:31.800Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:40:44.949Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:42:26.407Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:02:48.464Z","11.0.0-canary.6072ed604.0":"2021-03-17T23:00:30.639Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:21:13.236Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:18:22.725Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:45:13.810Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:18:58.524Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:39:40.353Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:52:29.986Z","11.0.0-canary.cbc57c600.0":"2021-03-19T01:00:44.173Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:13:44.305Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:34:59.251Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:45:16.270Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:06:11.106Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:38:41.769Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:08:58.503Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:03:55.337Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:55:27.682Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:05:40.754Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:30:43.110Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:17:39.803Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:33:50.866Z","11.0.0-canary.e3ec22f45.0":"2021-03-25T17:59:09.086Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:58:35.754Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:49:32.178Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:21:43.020Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:34:39.662Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:12:39.538Z","11.0.0-canary.24609b822.0":"2021-03-31T20:58:00.069Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:06:21.650Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:01:55.047Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:48:13.538Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:25:06.980Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:06:11.017Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:01:31.892Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:43:10.654Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:45:46.914Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:54:50.967Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:58:49.535Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:36:46.617Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:39:38.820Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:36:19.940Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:12:07.631Z","11.0.0-canary.24255c408.0":"2021-04-09T20:13:31.682Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:54:32.056Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:16:35.361Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:44:24.841Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:03:58.695Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:05:07.249Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:32:28.258Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:47:12.287Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:55:15.983Z","11.0.0":"2021-04-15T22:59:19.173Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:46:05.700Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:47:51.555Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:42:13.503Z","12.0.0-canary.b52196498.0":"2021-04-19T19:58:46.800Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:09:40.261Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:58:15.012Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:38:52.171Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:50:24.663Z","12.0.0-canary.cad489689.0":"2021-04-22T16:50:37.427Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:35:34.239Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:14:13.332Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:44:07.434Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:50:27.837Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:10:55.283Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:20:54.172Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:59:38.131Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:37:31.611Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:58:53.144Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:47:13.372Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:08:29.655Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:14:00.288Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:48:56.808Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:54:42.878Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:45:51.726Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:50:16.840Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:44:08.364Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:19:06.532Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:24:51.662Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:03:08.117Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:38:44.752Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:23:23.044Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:54:39.687Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:23:46.809Z","12.0.0-canary.33148231f.0":"2021-05-03T19:39:51.752Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:46:52.533Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:42:50.672Z","12.0.0-canary.de997644b.0":"2021-05-04T17:29:20.129Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:56:14.741Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:01:23.267Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:11:33.049Z","12.0.0-canary.718c90178.0":"2021-05-04T19:28:51.339Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:31:35.083Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:34:59.876Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:50:42.297Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:59:08.399Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:04:13.531Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:07:42.430Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:22:58.465Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:17:28.893Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:28:22.792Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T21:01:17.416Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:42:09.624Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:40:20.556Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:31:16.641Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:57:44.488Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:30:33.793Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:45:04.332Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:44:24.411Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:19:58.039Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:24:37.905Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:16.486Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:57:55.751Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:10:02.602Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:25:58.096Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:59:46.025Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:59:26.293Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:18:37.617Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:23:38.102Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:21:08.647Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:24:28.222Z","12.0.0-canary.33a954852.0":"2021-05-13T15:08:52.699Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:32:15.355Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:09:12.064Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:14:53.458Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:41:45.109Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:54:51.728Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:14:14.440Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:29:28.554Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:57:54.456Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:52:15.370Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:19:47.125Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:06:59.749Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:15:32.731Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:36:35.369Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:06:02.675Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:46:43.838Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:55:32.280Z","12.0.0-canary.464a00286.0":"2021-06-03T14:47:22.419Z","12.0.0-canary.474de7878.0":"2021-06-03T15:15:19.598Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:47:24.498Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:15:16.729Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:42:48.877Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:49:33.425Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:23:19.226Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:41:57.159Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:07:32.462Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:08:29.122Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:37:00.087Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:36:49.441Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:06:56.815Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:47:29.705Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:40:27.050Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:19:14.367Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:23:08.340Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:31:14.702Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:04:42.746Z","12.0.0-canary.271fff902.0":"2021-06-15T22:52:07.351Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:53:27.078Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:07:28.045Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:06:34.264Z","12.0.0-canary.940550232.0":"2021-06-17T19:41:20.702Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:25:37.463Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:12:48.313Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:41:42.174Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:38:11.479Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:13:08.910Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:25:41.734Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:28:31.681Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:16:02.078Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:53:39.113Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:41:49.646Z","12.0.0-canary.796811db7.0":"2021-07-01T00:04:33.805Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:07:44.501Z","12.0.0-canary.435866d32.0":"2021-07-02T18:22:17.193Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-03T00:01:10.014Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:10:41.584Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:04:42.838Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:05:19.356Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:26:35.796Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:52:21.936Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:50:21.742Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:10:42.149Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:45:15.500Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:55:04.635Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:51:50.605Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:23:39.120Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:49:17.079Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:09:20.794Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:23:04.214Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:43:26.702Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:08:20.353Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:58:58.322Z","12.0.0-canary.7239684d4.0":"2021-07-16T16:00:13.660Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:15:10.093Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:44:20.120Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:43:11.840Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:10:14.016Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:57:49.765Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:06:38.565Z","12.0.0-canary.791311bba.0":"2021-07-20T22:08:41.475Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:36:57.900Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:51:02.874Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:07:33.703Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:39:29.168Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:13:24.073Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:33:20.851Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:56:54.422Z","12.0.0-canary.22f390c43.0":"2021-07-27T19:01:01.700Z","12.0.0":"2021-07-27T19:50:56.413Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:52:42.453Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:19:21.850Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:27:11.623Z","13.0.0-canary.28656298a.0":"2021-07-29T18:14:14.784Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:36:31.500Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:06:17.221Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:34:30.884Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:24:30.407Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:15:06.416Z","13.0.0-canary.a80c8b2c2.0":"2021-08-05T00:00:56.547Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:57:40.522Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:43:30.038Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:19:15.688Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:51:06.820Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:16:00.754Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:08:40.005Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:18:31.208Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:18:35.750Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:22:46.718Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:42:02.886Z","13.0.0-canary.f4241a42a.0":"2021-08-11T17:00:50.254Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:29:56.251Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:56:35.397Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:46:33.266Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:49:40.894Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:09:17.533Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:23:02.936Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:55:26.385Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:15:29.087Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:25:17.821Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:03:24.718Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:18:41.488Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:50:03.385Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:33:25.408Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:27:52.526Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:21:32.048Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:45:26.565Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:27:54.403Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:29:55.118Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:18:22.677Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:29:03.127Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:49:44.468Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:19:21.877Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:34:29.070Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:54:57.005Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T22:00:41.460Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:39:28.516Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:07:13.009Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:10:27.141Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:45:30.698Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:55:34.288Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:12:42.137Z","13.0.0-canary.611db508e.0":"2021-09-02T03:16:27.990Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:39:05.419Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:46:05.748Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:47:21.890Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:31:01.857Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:32:38.873Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:33:22.361Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:44:07.222Z","13.0.0-canary.72464476c.0":"2021-09-07T15:35:25.709Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:34:40.145Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:44:23.450Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:36:47.826Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:02:16.770Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:11:38.084Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:26:37.339Z","13.0.0-canary.864798678.0":"2021-09-09T18:37:49.941Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:23:00.442Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:04:39.461Z","13.0.0-canary.08398f880.0":"2021-09-13T23:35:28.792Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:51:30.820Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:13:31.846Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T22:00:15.482Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:18:18.745Z","13.0.0-canary.80a583365.0":"2021-09-17T20:36:35.210Z","13.0.0-canary.83900936a.0":"2021-09-17T23:25:03.745Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:36:42.292Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:48:18.355Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:38:26.849Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:12:34.468Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:58:29.746Z","13.0.0-canary.65084baff.0":"2021-09-23T21:26:14.313Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:42:31.496Z","13.0.0":"2021-09-24T19:46:36.473Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:47:20.682Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:11:45.768Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:30:05.291Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:43:39.333Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:57:39.404Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:32:03.422Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:29:16.719Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:47:40.574Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:22:44.284Z","14.0.0-canary.261f2db59.0":"2021-10-20T17:00:24.472Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:22:26.587Z","14.0.0-canary.348665978.0":"2021-10-21T14:51:21.253Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:13:06.256Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:53:35.977Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:02:09.624Z","14.0.0-canary.a986df922.0":"2021-10-29T21:35:46.140Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:06:30.902Z","14.0.0-canary.468392606.0":"2021-11-11T19:40:43.529Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:51:33.306Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:57:30.157Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:59:16.373Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:25:18.110Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:37:11.345Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:30:23.719Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:14:34.636Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:41:04.573Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:51:03.440Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:18:18.846Z","14.0.0-canary.554c71829.0":"2021-11-16T16:20:14.742Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:25:04.078Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T19:00:09.828Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:26:03.047Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:40:11.110Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:36:04.281Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:05:25.917Z","14.0.0-canary.93134d453.0":"2021-11-23T15:40:27.804Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:33:24.521Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:38:31.797Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:51:48.027Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:57:11.506Z","14.0.0-canary.17a072535.0":"2021-12-02T18:06:10.332Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:45:19.405Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:07:44.532Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:26:31.919Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:30:09.076Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:56:06.940Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:40:43.631Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:14:08.132Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:10:35.991Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:33:21.159Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:47:03.110Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:15:22.800Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:02:27.920Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:55:15.511Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:34:11.791Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:50:36.600Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:43:20.130Z","14.0.0-canary.390220e42.0":"2022-01-17T16:47:08.756Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:53:56.366Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:18:40.559Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:55:18.807Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:04:31.606Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:32:52.355Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:14:20.078Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:38:06.008Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:42:32.265Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:50:48.118Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:23:45.074Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:58:20.249Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:47:42.299Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:54:37.778Z","14.0.0-canary.96ea061c1.0":"2022-02-09T19:00:17.526Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:07:27.822Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:30:39.096Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:50:10.093Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:17:17.223Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:05:03.326Z","14.0.0-canary.868793776.0":"2022-02-22T19:36:58.376Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:47:01.156Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:34:04.318Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:28:15.671Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:01:42.086Z","14.0.0-canary.16c166154.0":"2022-03-08T23:23:13.894Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:29:18.964Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:30:29.866Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:50:54.362Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:04:26.658Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:18:42.873Z","14.0.0-canary.32b391398.0":"2022-03-17T17:59:58.499Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:40:05.617Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:52:56.834Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:44:56.952Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:51:38.660Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:19:25.173Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:40:48.588Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:05:26.139Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:35:49.252Z","14.0.0-canary.344d52823.0":"2022-03-29T18:44:09.373Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:33:49.155Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:15:08.766Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:25:05.135Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:24:05.890Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:06:36.576Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:48:36.941Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:12:12.061Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:02:47.408Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:46:05.872Z","14.0.0":"2022-04-28T16:56:54.481Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:57:55.488Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:15:36.380Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:32:26.002Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:56:56.233Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:59:14.102Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:25:47.396Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:41:15.742Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:19:12.541Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:45:09.127Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:27:51.046Z","15.0.0-canary.05930a453.0":"2022-05-13T18:48:23.533Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:01:55.494Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:33:35.945Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:03:40.121Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:22:44.764Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:58:43.417Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:41:06.598Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:22:08.314Z","15.0.0-canary.df47894db.0":"2022-06-13T17:09:18.621Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:30:49.584Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:58:23.456Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:23:32.336Z","15.0.0-canary.764de225d.0":"2022-06-29T16:28:04.006Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:29:23.914Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:55:41.597Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:55:11.464Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:52:06.496Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:32:01.340Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:03:43.148Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:32:28.199Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:39:39.881Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:40:17.864Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:37:48.146Z","15.0.0-canary.88db01990.0":"2022-07-12T11:40:51.443Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:29:57.678Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:35:59.030Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:06:18.070Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:09:12.065Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:50:25.262Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:44:15.590Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:02:13.065Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:06:12.139Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:25:18.067Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:47:26.488Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:21:07.896Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:30:49.290Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:22:53.458Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:41:15.457Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:58:10.293Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:10:19.616Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:05:44.664Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:46:52.286Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:14:37.338Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:41:26.262Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:21:57.250Z","15.0.0-canary.10196647d.0":"2022-08-03T21:54:24.698Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:43:58.768Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:20:59.143Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:46:57.995Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:02:21.142Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:06:52.112Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:45:24.658Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:22:03.497Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:19:20.285Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:20:26.250Z","15.0.0-canary.4299717da.0":"2022-09-07T16:16:23.250Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:20:00.251Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:04:57.083Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:04:03.331Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:40:15.349Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:55:52.899Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:18:45.107Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:21:31.648Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:37:07.032Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:25:09.789Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:48:51.731Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:08:45.408Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:56:58.176Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:58:42.100Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:45:54.204Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:32:13.561Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:57:39.150Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:57:06.315Z","15.0.0-canary.db414b864.0":"2022-09-28T14:53:45.046Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:07:36.252Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:56:48.124Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:31:46.230Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:14:48.198Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:22:04.368Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:18:42.988Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:19:57.998Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:04:47.074Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:15:54.293Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:51:53.346Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:37:43.610Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:55:53.481Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:05:56.811Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:07:57.773Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:38:12.126Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:49:10.116Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:02:28.508Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:58:38.634Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:21:13.831Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:41:39.156Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:51:21.490Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:13:59.914Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:51:39.297Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:18:03.075Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:56:25.242Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:22:34.209Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:57:12.755Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:40:31.344Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:42:27.308Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:23:29.034Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:42:45.833Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:13:28.271Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:17:16.591Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:37:14.360Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:11:54.480Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:56:47.210Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:05:53.920Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:19:15.372Z","15.0.0-canary.fc539db34.0":"2022-10-24T18:59:14.567Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:45:08.349Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:30:36.651Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:15:20.116Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:32:31.305Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:49:27.959Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:56:30.947Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:36:58.415Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:10:48.518Z","15.0.0-canary.909b48215.0":"2022-11-03T04:07:56.720Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:19:15.331Z","15.0.0-canary.da95e2a05.0":"2022-11-04T16:59:11.774Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:57:05.479Z","15.0.0-canary.215506426.0":"2022-11-05T01:06:04.103Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:04:09.316Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:24:40.426Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:13:30.191Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:27:53.375Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:56:38.906Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:18:00.019Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:35:39.601Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:53:21.037Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:02:56.959Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:06:06.937Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:35:54.889Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:36:35.291Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:11:54.598Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:45:22.511Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:58:37.898Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:27:07.945Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:28:23.872Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:02:13.977Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:30:14.185Z","15.0.0-canary.b01136063.0":"2022-11-16T00:15:56.220Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:13:19.861Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:15:36.711Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:17:39.725Z","15.0.0-canary.3777b03cb.0":"2022-11-16T18:41:31.667Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:56:03.590Z","15.0.0-canary.7c73f6134.0":"2022-11-16T19:59:43.861Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:05:18.916Z","15.0.0-canary.40b18d043.0":"2022-11-16T22:58:53.505Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:09:00.130Z","15.0.0-canary.bb7751002.0":"2022-11-17T00:00:13.285Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:01:20.228Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:55:20.379Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:04:44.815Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:21:17.330Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:16:20.328Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:00:52.386Z","15.0.0-canary.d58410453.0":"2022-11-18T19:25:11.037Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:45:19.503Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:53:52.398Z","15.0.0-canary.96f472604.0":"2022-11-21T12:52:49.862Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:02:30.471Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:54:06.383Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:00:46.245Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:31:02.762Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:16:30.402Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:39:33.903Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:56:51.604Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:15:47.777Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:13:52.753Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:47:28.850Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:11:45.342Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:34:32.833Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:49:04.681Z","15.0.0-canary.65c411674.0":"2022-11-29T17:38:33.671Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:14:20.843Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:07:17.031Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:29:17.047Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:54:35.007Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:24:15.785Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:01:58.670Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:01:07.283Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:07:02.534Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:26:45.396Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:42:50.373Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:25:51.190Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:52:05.132Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:03:04.511Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:41:26.624Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:44:28.031Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:30:57.091Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:47:02.176Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:02:20.492Z","15.0.0-canary.817002c29.0":"2022-12-13T21:54:15.991Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:29:01.044Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:19:16.162Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:45:04.117Z","15.0.0-canary.34767110.0":"2022-12-14T17:21:35.677Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:25:47.373Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:08:45.409Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:27:19.460Z","15.0.0-canary.604264203.0":"2022-12-21T21:40:59.814Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:25:33.216Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:12:27.973Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:05:15.539Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:04:02.535Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:51:55.950Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:02:24.156Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:41:12.251Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:06:04.419Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:47:53.284Z","15.0.0-canary.af490a848.0":"2023-01-03T15:57:29.258Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:38:58.472Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:13:23.286Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:32:43.505Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:17:55.870Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:37:30.848Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:35:52.799Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:03:00.012Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:09:34.954Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:21:56.103Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:16:19.865Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:43:27.538Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:24:11.602Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:28:12.940Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:11:45.954Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:18:46.094Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:17:54.689Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:12:42.926Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:54:25.515Z","15.0.0-canary.202823f54.0":"2023-01-11T21:35:55.605Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:55:53.682Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:36:32.081Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:24:41.354Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:49:28.785Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:39:21.821Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:29:57.337Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:35:06.395Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:27:01.008Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:43:44.217Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:30:14.496Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:44:17.734Z","15.0.0-canary.15b221540.0":"2023-02-01T17:52:42.841Z","15.0.0-canary.eeebb8bba.0":"2023-02-01T18:22:23.351Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:58:31.947Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:34:13.322Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:38:23.496Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:09:05.215Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:14:40.040Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:24:46.663Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:09:40.236Z","15.0.0-canary.de38de758.0":"2023-02-09T15:42:33.918Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:03:12.805Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:49:58.714Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:57:49.258Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:34:16.682Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:19:47.977Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:41:29.257Z","15.0.0-canary.901c83e77.0":"2023-02-27T18:06:18.209Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:35:54.710Z","15.0.0-canary.f32339937.0":"2023-03-06T15:15:42.103Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:27:35.193Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:41:54.776Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:43:02.737Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:26:29.557Z","15.0.0-canary.274610c77.0":"2023-03-09T14:58:45.473Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:52:46.293Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:18:22.631Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:45:05.865Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:47:22.014Z","15.0.0-canary.de5224633.0":"2023-03-09T23:55:49.898Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:07:59.875Z","15.0.0-canary.23073a303.0":"2023-03-10T14:14:54.728Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:47:26.837Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:48:07.558Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:25:05.364Z","15.0.0-canary.82554d770.0":"2023-03-11T01:37:20.876Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:38:52.650Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:44:15.416Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:47:34.306Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:02:47.703Z","15.0.0-canary.112715df5.0":"2023-03-13T18:39:17.567Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:31:32.362Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:39:04.260Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:43:29.929Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:52:42.873Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:16:30.756Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:47:25.233Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:16:54.030Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:20:13.516Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:24:05.385Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:26:43.163Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:27:23.323Z","15.0.0-canary.87809c710.0":"2023-03-14T18:43:28.532Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:47:49.700Z","15.0.0-canary.419b23cc6.0":"2023-03-14T18:58:49.382Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:13:28.963Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:11:19.013Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:40:57.280Z","15.0.0-canary.39e473690.0":"2023-03-21T17:51:23.167Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:58:21.754Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:50:08.218Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:34:38.533Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:48:43.085Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:41:11.917Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:07:55.644Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:53:49.549Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:55:44.076Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:30:22.042Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:04:20.032Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:42:32.015Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:38:09.294Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:40:15.479Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:01:00.126Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:50:59.152Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:21:32.172Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:21:39.932Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:31:26.113Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:33:36.266Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:41:52.484Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:09:26.275Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:56:12.840Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:26:17.476Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:39:10.521Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:23:05.400Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:30:28.174Z","15.0.0-canary.d3c3fbaa3.0":"2023-05-12T18:00:56.518Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T02:00:03.412Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:54:02.379Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:25:42.109Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:42:40.857Z","15.0.0-canary.446734f27.0":"2023-05-30T21:48:15.194Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:18:23.181Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:14:02.122Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:18:12.822Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:06:01.485Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:38:16.593Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:03:51.382Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:57:14.430Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:16:38.451Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:23:45.374Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:13:56.160Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:25:52.065Z","15.0.0-canary.83355c322.0":"2023-07-10T15:05:39.297Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:20:57.544Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:47:18.224Z","15.0.0-canary.02702296e.0":"2023-08-25T12:04:59.921Z","15.0.0-canary.872b65832.0":"2023-08-30T12:13:22.084Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:06:49.401Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:39:50.638Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:05:10.234Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:45:04.198Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:17:17.746Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:11:56.375Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:46:02.392Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:15:06.468Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:06:25.574Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:23:10.680Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:44:22.979Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:36:44.994Z","15.0.0-canary.127a44b28.0":"2023-10-12T20:00:08.600Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:51:49.992Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:09:18.295Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:58:31.777Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:12:56.698Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:18:27.375Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:08:58.381Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:19:20.072Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:07:49.294Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:17:25.397Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:14:48.395Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:13:25.605Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:05:46.383Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:40:33.599Z","15.0.0-canary.311f29a60.0":"2024-04-23T17:59:41.039Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:48:40.271Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:02:45.850Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:12:58.816Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:55:04.264Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:56:33.427Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:11:54.743Z"},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-notched-outline"},"keywords":["material components","material design","notchedoutline","notched outline"],"license":"MIT","homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"readme":"","readmeFilename":""}